Shadcn

Shadcn is a React component framework.

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

Then, easily render a demo:

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

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

Feel free to dissect the event-calendar-demo.tsx file and delete when done.

Premium Plugins

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

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

Then, easily render a demo:

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

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

Feel free to dissect the resource-timeline-demo.tsx and resource-timegrid-demo.tsx files and delete when done.