Skip to content

v3.35.0: in-house calendar (BREAKING)

Choose a tag to compare

@tjloong tjloong released this 12 Oct 08:27
· 18 commits to main since this release
eeaad36

⚠️ BREAKING: <atom:calendar> has been rebuilt

<atom:calendar> is now atom's own month, week and day calendar, built with Tailwind and Alpine. It replaces the @event-calendar/core wrapper under the same tag. Every page that uses the old calendar must be updated before you run composer update to this version. Follow the README section "Upgrading from the event-calendar wrapper".

What breaks

  • The old props and events now throw at render, with a message naming the replacement. That covers modes, periods, x-model and listeners for the old events on the tag: calendar-date-clicked, calendar-date-selected, calendar-event-clicked, calendar-event-dropped, calendar-event-resized, calendar-changed, calendar-mounted.
  • add-calendar-events, remove-calendar-events and update-calendar-events dispatched to the window now do nothing. .ec-* and --ec-* CSS no longer applies. Search your code for both.
  • The item keys start_at, end_at and bg_color are now start, end and color. The old keys are ignored, so items with them are not shown.
  • Items load through a protected items closure over the visible window, called on every render. There is no range event.
  • Times are shown in the viewer's timezone (Carbon::getLocalTimezone()), not the browser's. Convert every date the calendar sends you with Calendar::fromLocal(). If you rely on TIMEZONE, it must be a real server environment variable when config is cached.
  • An item with no colour now uses the zinc preset. The week starts on Monday by default. Each day shows 3 rows, then "+N more".
  • @event-calendar/core and svelte are removed. atom.js is about 32 KB larger (about 10 KB gzipped), because the old lazily loaded chunk is gone.

What's new

  • Month, week and day views. The week and day views have an all-day row and a time grid. Overlapping items sit side by side, and there is a "now" line.
  • Click or drag-select to create (selectable, calendar-select). Drag to move (calendar-item-move) and pull an item's end to resize it (calendar-item-resize). Moves snap to the slot, the grid auto-scrolls near its edges, and a touch long press starts a drag.
  • waitUntil($wire.save(...)) holds a "Creating..." placeholder, or keeps the item in its new place, until your save settles. A rejected save puts the item back.
  • Keyboard navigation, full screen-reader labels and live announcements. calendar-item-click opens your edit form, from a click or from the keyboard.
  • time-format and date-format take date tokens. week-start, weekend and slot-duration can be set. Colours can be a preset, a hex value, or your own from config('atom.calendar.colors').
  • Docs at /atom/docs/calendar. The README section and the Boost skill are updated.

Not verified

  • Firefox (Playwright's Firefox would not launch on the test machine).
  • Touch on a real phone or tablet. Touch was tested with simulated events in Chromium and WebKit.

Full details: #85, closes #81.