# Multiple calendars

Several calendars at once, each with its colour and a toggle.

```tsx
const calendars = [
  { id: 'work', label: 'Work', color: '#3b82f6', active: true },
  { id: 'personal', label: 'Personal', color: '#10b981', active: true },
];

<Scheduler
  calendars={calendars}
  onCalendarToggle={(id, active) => {
    // Toggle calendar visibility
  }}
/>
```

An event takes its own `color`, else the colour of its calendar (`calendarId`), else its resource's in the resource view, else the theme's. Hex and `rgb()` colours are adjusted so that every text reaches 4.5:1 contrast: white on the solid colour, a dark ink on the light tint, a light ink on the dark one. Other colour syntaxes are used as they are.