Calendar components

Calendar accepts a view prop of "month", "week" or "day", defaulting to "month". Note that view only seeds the internal state: changing it after mount has no effect, and from then on users switch between Day, Week and Month through the built-in view dropdown in the header.

Pass an events array of CalendarEvent objects: a required id string, title string, and start and end native Date values, plus an optional color and an optional dot boolean that adds a colored marker to the event in the day and week views — the month view ignores it. The dates are converted internally with parseAbsoluteToLocal, so plain JavaScript Date objects are all you need.

The color field on an event accepts "gray", "brand", "green", "blue", "indigo", "purple", "pink", "orange" or "yellow". Events render in "gray" when color is omitted.

It imports CalendarDate, ZonedDateTime and date helpers such as startOfWeek from @internationalized/date, and useLocale and useDateFormatter from react-aria. Running npx untitledui@latest add calendar installs both for you.

Mostly. It gets the time zone from getLocalTimeZone() and the locale from useLocale(), so the first day of the week comes from startOfWeek(date, locale) and dates are formatted with useDateFormatter. Times always use a 12-hour clock, though, because the time formatters pass hour12: true. Wrap the calendar in React Aria's I18nProvider to force a specific locale.

Yes. The component refreshes its internal now(timeZone) value on a 60-second interval, so the time marker in the day and week views moves without a page reload. The interval is cleared on unmount.

The config.ts file that ships alongside the calendar only generates dummy events relative to today so the demos always look populated. Delete it once you wire the events prop up to your own data source.