Shadcn Event Calendar

Browse 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.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

When to use

Team calendars in month, week, day and agenda views where events are added, edited and dragged
Room and appointment bookings laid out as one column per resource or as a single day of open slots
Project and campaign plans drawn as color coded bars spanning several days of a month

When not to use

A finished full page scheduling workspace, such as a hotel desk, shift roster or clinic: use the Event Calendar blocks
A compact booking card where someone picks a day, then a free time slot, and confirms: use the Schedule blocks
A plain date or date range input in a form, with no hours, events or dragging: use the Calendar component

Agent notes

No example passes onEventsChange, so drags, resizes and apiRef edits stay in calendar state and are lost on reload
New event ids come from a useRef counter that restarts at 0 on every mount, so take ids from your store once events persist

Third-party API docs

date-fns v4: docs
date-fns time zones v1: API reference, docs
Base UI v1: API reference, docs, llms.txt, through the Base UI twin
Radix UI v1: docs, through the Radix UI twin

Markdownhttps://web.dev.reui.io/components/event-calendar.md

MCPget_component("event-calendar")

Installnpx shadcn@latest add @reui/event-calendar

Full index for agents:llms.txtReUI MCP setup

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 22 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.

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 6 production ready event calendar blocks in ReUI Pro, complete sections built on the same primitives and ready to copy into your app.

Event Calendar (6 blocks)Event calendar blocks with month, week and day views, drag-and-drop scheduling, and inline editing.

Browse all Application blocks

Frequently Asked Questions

How do I persist event changes after a drag or resize?

Handle onEventUpdate: it receives the proposed start, end, and source of the gesture. Return false to revert, return an object to adjust, or accept and call your backend. Controlled usage via events plus onEventsChange keeps the calendar in sync with server state.

Can I block certain drops, for example onto locked events?

Yes. canDropEvent runs live during the gesture and paints an invalid ghost when it returns false, and onEventUpdate is the final commit gate. Locked events themselves can be marked readOnly so they cannot be moved at all.

Does it support recurring events like RRULE?

Yes. Events accept a structured recurrence rule or a raw RRULE string covering an RFC 5545 subset: FREQ, INTERVAL, COUNT, UNTIL, BYDAY, BYMONTHDAY, BYMONTH, WKST, EXDATE, and RDATE. Occurrences expand per visible range with a hard cap.

How do I render events in a different time zone?

Pass an IANA zone name to the timeZone prop. The grid, day keys, and all built-in formatting switch to that zone via @date-fns/tz. Use TZDate for your own formatting so labels match grid positions.

Can I replace the built-in event chips with my own design?

Yes. renderEvent receives the occurrence, segment, view, and drag state and returns your own React node. Separate overrides exist for agenda rows, month cells, day headers, the all-day section, and the more-events popover.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.