CalendarKitclassNames adds your classes next to the built-in ones:
<Scheduler classNames={{ root: 'my-calendar', event: 'shadow-none', dialog: 'my-dialog' }} />Keys: root, toolbar, sidebar, event (blocks, all-day bars, month chips, agenda and resource items), slot (time slots, all-day slots, month days), allDayBar, dialog (quick card, event card, form, "+N" list).
components replaces parts with your own:
import type { EventContentProps, ToolbarProps } from 'calendarkit-pro';
const EventContent = ({ event }: EventContentProps) => <strong>{event.title}</strong>;
const Toolbar = ({ date, onPrev, onNext, onToday }: ToolbarProps) => (
<header>
<button onClick={onPrev}>Previous</button>
<button onClick={onToday}>{date.toDateString()}</button>
<button onClick={onNext}>Next</button>
</header>
);
<Scheduler components={{ EventContent, Toolbar }} />| Component | Props | Replaces |
|---|---|---|
EventContent |
{ event, variant: 'block' | 'bar' | 'chip' } |
The inside of event blocks, all-day bars and month chips |
EventEditor |
the renderEventForm props |
The event form (renderEventForm still works) |
Toolbar |
{ date, view, onPrev, onNext, onToday, onViewChange, onToggleSidebar } |
The header |
Sidebar |
{ date, onDateChange, onCreate?, calendars?, onCalendarToggle? } |
The side panel |
EmptyState |
{ onCreate? } |
The empty agenda |
onCreate is undefined in read-only mode.