Repository navigation
v3.35.0: in-house calendar (BREAKING)
⚠️ 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-modeland 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-eventsandupdate-calendar-eventsdispatched to the window now do nothing..ec-*and--ec-*CSS no longer applies. Search your code for both.- The item keys
start_at,end_atandbg_colorare nowstart,endandcolor. The old keys are ignored, so items with them are not shown. - Items load through a protected
itemsclosure 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 withCalendar::fromLocal(). If you rely onTIMEZONE, 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/coreand svelte are removed.atom.jsis 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-clickopens your edit form, from a click or from the keyboard. time-formatanddate-formattake date tokens.week-start,weekendandslot-durationcan be set. Colours can be a preset, a hex value, or your own fromconfig('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.