Shadcn Event Calendar
View docsBrowse 5 production-ready shadcn event calendar components built on a headless-first ReUI primitive. Covers month, week, day, N-day and agenda views, drag to move, resize, drag-to-create, recurring events, time zones, and a settings-driven feature tour - all composable with shadcn Button, Dropdown Menu, Popover, and Tooltip.
Shadcn Event Calendar: Month, Week, Day and Agenda Views for React
ReUI Event Calendar is a custom shadcn component with a headless-first architecture: a subscribable store owns views, dates, selection, and interactions, while composable view components render month, week, day, N-day, and agenda layouts. Events are plain data you can wire to any backend.
The primitive ships with a custom pointer-event interaction engine for drag to move, edge resize, and drag-to-create, an RFC 5545 subset recurrence expander, time-zone aware rendering via @date-fns/tz, and fully overridable i18n texts and formatters.
The sections below cover what ReUI Event Calendar provides, why teams adopt it for scheduling and booking UIs, and how it composes with Button, Dropdown Menu, Popover, and other shadcn primitives.
What is Shadcn Event Calendar?
ReUI Event Calendar is a custom scheduling component for React, not part of the base shadcn/ui library. It follows a headless-first design: EventCalendar provides the store and context, EventCalendarNav renders Today, prev/next, the period title and a view switcher, and EventCalendarContent renders the active view. Swap any view with your own through the components prop.
Events are plain objects ({ id, title, start, end, allDay, color, recurrence, resourceId }) handed in as controlled or uncontrolled state. Every mutation flows through an external CRUD contract (onEventsChange, onEventUpdate, canDropEvent), so persisting to a REST API, GraphQL mutation, or Next.js Server Action is a one-liner.
Why Use Shadcn Event Calendar?
Event calendars appear in booking tools, team schedulers, resource planners, CRMs, and admin dashboards. Most React calendar libraries are monolithic and hard to restyle; ReUI Event Calendar is copy-and-own source styled with your Tailwind tokens, so the calendar matches the rest of your shadcn/ui app out of the box.
The interaction engine validates drags live (canDropEvent) and gates commits (onEventUpdate), which makes business rules such as locked events, no-overlap policies, and read-only calendars straightforward. Pair it with Shadcn Data Grid for list views and Shadcn Filters for calendar-level filtering.
Shadcn Event Calendar Features
- Five Views Plus Resources. Month, week, day, N-day, and agenda views share one store and one event index. A resource view with one column per bookable resource activates automatically when resources are passed.
- Drag, Resize, and Drag-to-Create. A custom pointer-event engine moves events across days and views, resizes timed events from either edge, and creates events from a drag rectangle, with live validation ghosts and snapping.
- Recurring Events. An RFC 5545 subset expander accepts structured rules or raw RRULE strings (FREQ, INTERVAL, COUNT, UNTIL, BYDAY and more) with a hard occurrence cap for safety.
- Time Zones and i18n. A timeZone prop renders the whole grid in any IANA zone via @date-fns/tz, and every label, date format, and formatter is overridable per key through the i18n prop.
- Headless State, Composable UI. useEventCalendarState can be hoisted and adopted by multiple surfaces, an apiRef exposes an imperative API, and every view accepts render overrides down to individual event chips.
- Display Controls. Week numbers, weekend hiding, off-day marking, business-hour boundaries, grid interval and snap duration, sticky nav, contained or page scrolling, and custom or native scrollbars.
- Accessible by Default. ARIA-grid month view, keyboard shortcuts with focus-within scoping, live-region announcements for gestures, and tooltip-labelled navigation buttons.
ReUI Event Calendar: In-House Custom Shadcn Component
ReUI Event Calendar is an in-house component built and maintained by the ReUI team as part of the ReUI open-source library. It follows the same copy-and-own installation model as every shadcn/ui component: the source lands directly in your repository as a set of composable files (root, views, nav, interaction engine, recurrence, i18n, types), and you own, extend, and style it with your Tailwind CSS tokens.
The component is available in two API flavors to match your primitive stack: a Radix UI version for teams using Radix-based shadcn primitives, and a Base UI version for teams on @base-ui/react. Both versions share identical visual output and Tailwind CSS styling - only the underlying headless primitive differs. ReUI maintains 19 such in-house components, all available in both Radix and Base UI versions, each with dedicated documentation covering the full component API, usage examples, and prop references.
Integrating With Other Components
Pair the event calendar with Shadcn Data Grid to offer a list-view toggle of the same events, and with Shadcn Gantt when the schedule is resource-driven rather than date-driven.
Use Shadcn Dialog for create and edit forms opened from onEventClick and onSelectSlot, Shadcn Dropdown Menu for settings menus, and Shadcn Badge for event metadata inside custom renderEvent chips.
Wrap the calendar nav in its toolbar slot with Shadcn Button actions, and use Shadcn Sonner for async feedback when event changes are persisted to a backend.
Event Calendar Blocks in ReUI Pro
The free examples above pair with 2 production ready event calendar blocks in ReUI Pro, complete sections built on the same primitives and ready to copy into your app.
- Event Calendar (2 blocks)Event calendar blocks with month, week and day views, drag-and-drop scheduling, and inline editing.