Event Calendar React component
A full calendar screen with month and week views: color-coded event chips you can drag to another day, a time-grid week with a now line, quick event creation, event details with move and delete, calendar filters with counts, a selected-day agenda and arrow-key day navigation. On phones days show dots and the agenda sits under the grid.
About the Event Calendar component
Event Calendar is a complete calendar screen: a month view with color-coded events, a week view on a time grid, calendars you can switch on and off, and an agenda for the selected day.
Events can be dragged to another day, opened to move or delete, and created from the New event button. Arrow keys move between days, and on phones the month shows colored dots with the day's agenda underneath.
When to use it
Use it for scheduling apps, team calendars, booking dashboards, content calendars or anywhere people plan things by day.
To let someone pick a single date in a form, use a date picker instead.
Installation
Add the Event Calendar component to your project with the shadcn CLI. It lands in components/event-calendar.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/event-calendarOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<EventCalendar /> accepts 6 props, all optional.
| Prop | Type | Default |
|---|---|---|
| events | { id: string; title: string; date: string; start: string; end: string; calendar: CalId; location?: string }[] | EVENTS |
| today | string | "2026-11-12" |
| defaultView | "month" | "week" | "month" |
| onEventsChange | (events: CalendarEvent[]) => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- events{ id: string; title: string; date: string; start: string; end: string; calendar: CalId; location?: string }[]Default: EVENTS
- todaystringDefault: "2026-11-12"
- defaultView"month" | "week"Default: "month"
- onEventsChange(events: CalendarEvent[]) => void
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Event Calendar FAQ
- How do I save changes?
- Pass onEventsChange. It receives the full event list after every drag, move, delete or new event, so you can save it or send only the change to your API.
- Does dragging work on touch screens?
- Yes. Dragging uses pointer events, so it works with a mouse, pen or finger. Keyboard users can open an event and use Move ← Day / Day →.
- Why are dates strings?
- Dates are YYYY-MM-DD strings with UTC math, so the calendar renders the same on the server and in every time zone. Pass today from your server to avoid a mismatch at midnight.
- Can I add more calendars?
- Yes. Add an entry with an id, name and color to the CALS list and use that id on your events. Filters, counts and colors follow automatically.
- Is it accessible?
- The month is a grid with labelled day buttons and arrow-key movement, events are buttons that announce their time, dialogs focus their first control and close with Escape, and the agenda updates politely.
