Examples
Each example renders registry source exactly as it installs into an app. The same pages are the fixtures for the end-to-end and accessibility tests, in light and dark, left to right and right to left.
Week view
The HapioCalendar block as a booking calendar: a week time grid with 24-hour times, Monday weeks, nav links, the now indicator, open time as labelled background events, booking statuses and a scroll position of 07:00. Europe/Stockholm.
Day view
The same calendar on today's day view: one lane with its open time, the now indicator and the all-day row.
Month view
The month grid with as many events per day as fit ("+N more" opens the rest in a popover), week numbers, nav links to the day and week views, and muted days of the adjacent months.
Daylight saving time
The week Europe leaves daylight saving time: the repeated hour on Sunday 25 October holds two bookings at 02:30, an hour apart. Switch to New York for its own change on 1 November, or make the calendar selectable and select across both 02:00s.
Selecting dates and times
The bookings calendar inside <CalendarSelection>: select a time range, whole days or a range in the month from the keyboard (Space, arrows, Enter) or by a click. Opening hours, bookings, the lunch break and the first bookable day are rules; the slot cursor names each slot's verdict, and a rejected selection is announced with its reason.
Moving and resizing events
The bookings calendar inside <CalendarEditing>: drag an event to move it or its edge to resize it (a long-press on touch), or grab it from the keyboard (Space, the arrow keys, Enter). Open time, confirmed bookings and timed bookings are rules, and rejected drops say why; a fake API saves each change after a moment, slowly, or rejects or fails it, so pending changes, saves and reverts can be seen and heard. Sunday 25 October holds the hour that happens twice.
Event actions without dragging
The bookings calendar inside <CalendarEditing>, where every event has a "More actions" menu (the button just above it, a right click or Shift+F10): "Move to…" and a click or the arrow keys, "Change time…" with a form (also for the hour that happens twice on Sunday 25 October), and steps (earlier, later, another day, longer, shorter), so moving and resizing need no drag. "Show chairs" adds "Change resource…"; the rules refuse with a reason; events behind "+N more" have their actions too.
Recurring events
A weekday stand-up at 09:00 in Stockholm, shown in a New York calendar across 25 October, when Europe leaves daylight saving time a week before the US (03:00, then 04:00 for a week, then 03:00 again). Move or resize an occurrence by a drag, the keyboard, its actions menu or its form, and choose which events change: this one, this and the following ones (the series splits, previewed until a fake API saves it) or all of them. A monthly review on the 22nd changes alone when its date changes; "Server-expanded" shows the same occurrences from expandRecurrences, as a server would send them.
Dragging in from outside
A palette of services beside two droppable calendars in <CalendarExternalDrops>: drag a service onto a time (a long-press on touch), or pick it up with Space, a click or a tap and place it with the arrow keys and Enter or a click on a time. Image files dropped from the desktop book photo shoots. acceptExternal narrows what each calendar takes, a rule refuses drops outside opening hours with its reason, and a placeholder waits for the booking a fake API adds, or rejects.
Drops from dnd-kit
Another drag-and-drop library's items dropped on the calendar: dnd-kit's pointer and keyboard sensors move service chips, the calendar is a dnd-kit drop target, and on the drop store.hitTest names the slot or day under the chip, where the app books it.
List view
The calendar parts composed by hand: toolbar, view switcher, the list view with its day groups and event links, descriptions and the live region. Europe/Stockholm, Monday weeks, 24-hour times.
View and date in the URL
The view and date live in the query string: links, back and forward move the calendar without remounting it, and bookings load for each range while the calendar shows a loading state.
Migrating with EventCalendar
A team calendar written against another calendar library's React options, moved over by changing one import: the event-calendar item (compat EventCalendar) with initialView, views, 24-hour formats, business hours, events with url and extendedProps, background events, eventContent, eventClick, datesSet, dayMaxEvents and height, unchanged.