# Customizing

Add your classes, or swap parts for your own components.

`classNames` adds your classes next to the built-in ones:

```tsx
<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:

```tsx
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.