Calendar

FeatureFullCalendar

Full-featured calendar with FullCalendar — event management, multiple views, and drag-and-drop scheduling.

Read this when adding calendar features to your app.
Useful for scheduling, bookings, or event management.

Why FullCalendar

FullCalendar is the most complete calendar library. It handles complex scheduling scenarios that simple date pickers can't — multiple views, recurring events, drag-and-drop, and time zone support.

The React version integrates naturally with your app. You pass events as props, handle interactions with callbacks, and customize rendering with React components.

Key Features

What FullCalendar provides:

Multiple Views

Month, week, day, list. Switch between views for different scheduling needs.

Time Slots

Hourly scheduling. Time grid views for appointments and meetings.

Drag & Drop

Move and resize. Drag events to reschedule, resize to change duration.

Event Display

Rich events. Colors, icons, custom rendering, and event grouping.

Catalyst Integration

Catalyst includes a calendar example:

app/(examples)/examples/calendar/

Full calendar example with events and interactions

Quick Start

Basic calendar

"use client"
import FullCalendar from "@fullcalendar/react"
import dayGridPlugin from "@fullcalendar/daygrid"

const events = [
  { title: "Team Meeting", date: "2024-01-15" },
  { title: "Project Review", date: "2024-01-16" },
]

export function Calendar() {
  return (
    <FullCalendar
      plugins={[dayGridPlugin]}
      initialView="dayGridMonth"
      events={events}
    />
  )
}

Interactive calendar with time slots

import FullCalendar from "@fullcalendar/react"
import dayGridPlugin from "@fullcalendar/daygrid"
import timeGridPlugin from "@fullcalendar/timegrid"
import interactionPlugin from "@fullcalendar/interaction"

export function SchedulingCalendar() {
  const handleDateClick = (info) => {
    // Create new event at clicked time
    console.log("Clicked:", info.dateStr)
  }

  const handleEventClick = (info) => {
    // Open event details
    console.log("Event:", info.event.title)
  }

  const handleEventDrop = (info) => {
    // Event was dragged to new time
    console.log("Moved to:", info.event.start)
  }

  return (
    <FullCalendar
      plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
      initialView="timeGridWeek"
      headerToolbar={{
        left: "prev,next today",
        center: "title",
        right: "dayGridMonth,timeGridWeek,timeGridDay",
      }}
      events={events}
      editable={true}
      selectable={true}
      dateClick={handleDateClick}
      eventClick={handleEventClick}
      eventDrop={handleEventDrop}
    />
  )
}

Included Plugins

Catalyst includes these FullCalendar plugins:

@fullcalendar/daygrid

Month and day grid views

@fullcalendar/timegrid

Week and day time slot views

@fullcalendar/interaction

Drag, drop, and click interactions

Styling

Customize FullCalendar to match your theme:

/* In your CSS */
.fc {
  /* Use your theme colors */
  --fc-border-color: var(--color-border);
  --fc-button-bg-color: var(--color-primary);
  --fc-button-border-color: var(--color-primary);
  --fc-today-bg-color: oklch(from var(--color-primary) l c h / 0.1);
}

.fc-event {
  /* Event styling */
  background: var(--color-primary);
  border: none;
  border-radius: 4px;
}

Tips

Use "use client". FullCalendar requires browser APIs and must be a client component.

Import only needed plugins. Each plugin adds to bundle size — only include what you use.

Handle loading state. If fetching events async, show a loading indicator or skeleton.

Test mobile. FullCalendar is responsive but may need configuration for mobile views.

Learn More

FullCalendar DocsReact IntegrationEvent Object

For AI Agents

Key rules:

  • Calendar must be a client component ("use client")
  • Import plugins individually — don't import all at once
  • Use interactionPlugin for drag/drop and click handling
  • Events prop accepts array of event objects
  • See /examples/calendar for usage patterns