FullCalendar

Shadcn

Shadcn is a React component framework. FullCalendar provides a shadcn registry of ready-made components, built on the React package, so everything in that guide applies here too. Unlike an NPM package, the components are copied into your project, where you can edit them.

Useful links:

This guide assumes a project already set up with shadcn, as shown in its docs. First, add the FullCalendar registry to your components.json:

{
  "registries": {
    "@fullcalendar": "https://shadcn-registry.fullcalendar.io/{name}.json"
  }
}

Next, decide upon a theme “flavor”. FullCalendar inherits all style variables from the Shadcn theme while also allowing choice in theme flavor. Visit themes.fullcalendar.io/shadcn to see the available flavors (monarch, forma, breezy, pulse, and classic).

Standard Plugins#

Install a Shadcn event calendar with standard plugins:

npx shadcn@latest add @fullcalendar/monarch-event-calendar
#                                   ^^^^^^^ YOUR FLAVOR

This copies event-calendar.tsx, event-calendar-toolbar.tsx and event-calendar-icons.tsx into your components directory, event-calendar-views.tsx into your ui directory, and a demo, event-calendar-demo.tsx. It also installs the NPM dependencies (@fullcalendar/react, temporal-polyfill, lucide-react) and the Shadcn button and tabs components. FullCalendar’s skeleton.css is imported by event-calendar-views.tsx, so there is no stylesheet for you to add.

Render the demo to see it working:

import { EventCalendarDemo } from '@/components/event-calendar-demo'

<div className='px-5'>
  <EventCalendarDemo />
</div>

Then use the EventCalendar component in your own code, and delete the demo:

import { EventCalendar } from '@/components/event-calendar'

<EventCalendar
  availableViews={['dayGridMonth', 'timeGridWeek', 'listWeek']}
  addButton={{
    text: 'Add Event',
    click() {
      alert('add event...')
    },
  }}
  editable
  selectable
  events={[
    { title: 'event 1', date: '2026-04-01' },
    { title: 'event 2', date: '2026-04-02' },
  ]}
/>

Besides availableViews (the toolbar’s view buttons; the first is the initial view) and addButton, the component accepts all of FullCalendar’s options as props, except headerToolbar/footerToolbar, which the Shadcn toolbar replaces. The standard plugins are already included. Since the files are yours, the toolbar and the plugin list can be changed directly in event-calendar.tsx and event-calendar-toolbar.tsx.

Premium Plugins#

Install a Shadcn event calendar with premium plugins (aka “scheduler”):

npx shadcn@latest add @fullcalendar/monarch-scheduler
#                                   ^^^^^^^ YOUR FLAVOR

This installs everything the standard item does, plus resource-timeline.tsx, resource-timegrid.tsx, scheduler-views.tsx, the @fullcalendar/react-scheduler package, and two demos.

Render the demos to see them working:

import { ResourceTimelineDemo } from '@/components/resource-timeline-demo'
import { ResourceTimeGridDemo } from '@/components/resource-timegrid-demo'

<div className='px-5'>
  <ResourceTimelineDemo />
  <ResourceTimeGridDemo />
</div>

Then use the components in your own code, and delete the demos. Make sure to include your schedulerLicenseKey:

import { ResourceTimeline } from '@/components/resource-timeline'

<ResourceTimeline
  schedulerLicenseKey='XXX'
  resources={[
    { id: 'a', title: 'Room A' },
    { id: 'b', title: 'Room B' },
  ]}
  events={[{ title: 'Meeting', start: '2026-07-15T10:00:00', resourceId: 'a' }]}
/>