The best React calendar, with everything built in.The best React calendar,
with everything built in.drag and drop.recurring events.time zones.resource views.three themes.a phone layout.undo everywhere.everything built in.

import { Scheduler } from 'calendarkit-pro';

export function MyCalendar() {
  return (
    <div style={{ height: 720 }}>
      <Scheduler defaultEvents={events} onEventsChange={save} />
    </div>
  );
}

// The calendar fills its parent and keeps its events.
// onEventsChange gets the full list after every change.

import { useState } from 'react';
import { Scheduler, type CalendarEvent } from 'calendarkit-pro';

export function MyCalendar() {
  const [events, setEvents] = useState<CalendarEvent[]>([]);

  return (
    <Scheduler
      events={events}
      onEventCreate={(event) => setEvents((list) => [...list, { ...event, id: crypto.randomUUID() } as CalendarEvent])}
      onEventUpdate={(event) => setEvents((list) => list.map((e) => (e.id === event.id ? event : e)))}
      onEventDelete={(id) => setEvents((list) => list.filter((e) => e.id !== id))}
    />
  );
}

// A Server Component page: no "use client" needed here,
// calendarkit-pro is marked "use client" itself.
import { Scheduler } from 'calendarkit-pro';
import { getEvents } from '@/lib/events';

export default async function Page() {
  const events = await getEvents();
  return <Scheduler defaultEvents={events} />;
}

// Renders on the server, hydrates without a warning. React 18 and 19.

<Scheduler
  theme="editorial"
  mode="system"
  layout="focus"
  language="fr"
  classNames={{ event: 'my-event', dialog: 'my-dialog' }}
  components={{ EventContent: ({ event }) => <strong>{event.title}</strong> }}
  renderEventForm={(props) => <MyEventForm {...props} />}
/>