Theming

Drawn With sv5ui Tokens

Every surface, border and text colour is a Material 3 token from sv5ui: surface, on-surface, outline-variant, primary and their containers. Change the theme with the palette button in the header of this site and every calendar on the page follows, including the current-time line and the selection ring. See Theming and Dark Mode in the sv5ui docs for the tokens themselves.

Event Colours

Eight colour roles, each a pair of tokens. The time grid draws a soft chip: a container background with a bar of the full colour on the start edge. The all-day row, the month and the +N list draw a solid pill. An event takes its own color first, then the colour of its calendar, then primary.

<script lang="ts">
  import { Scheduler, type EventColor, type EventInput } from '@sv5ui/scheduler';

  const colors: EventColor[] = [
    'primary', 'secondary', 'tertiary', 'success', 'warning', 'error', 'info', 'surface'
  ];

  // An event takes its own color first, then its calendar's, then primary
  let events = $state<EventInput[]>(
    colors.map((color, i) => ({
      id: color,
      title: color,
      start: `2026-09-16T${String(8 + i).padStart(2, '0')}:00`,
      end: `2026-09-16T${String(8 + i).padStart(2, '0')}:50`,
      color
    }))
  );
</script>

<Scheduler bind:events view="day" timeZone="Asia/Ho_Chi_Minh" creatable={false} height={640} />

Per Scheduler

Every part of the frame has a named slot. Pass classes through ui to adjust spacing, borders or surfaces; they are merged with tailwind-merge, so a class you pass wins over the default of the same kind. class merges into root.

<!-- Every slot takes any class value tailwind-merge understands. class merges into root. -->
<Scheduler
  bind:events
  view="month"
  ui={{
    root: 'rounded-2xl border border-outline-variant/60',
    toolbar: 'bg-surface-container-low',
    sidebar: 'bg-surface-container-lowest w-64',
    detailPanel: 'w-[28rem]'
  }}
/>

App-Wide Defaults

defineSchedulerConfig sets the classes every instance starts from, keyed by component name. Slot classes are appended before the instance's own class and ui, so an instance can still override them. A scheduler reads the config when it is created, so the call has to run before any scheduler renders, and each call replaces the previous config outright. Put it in a file of its own at src/scheduler.config.ts and import that file once from the root layout. If the app also sets sv5ui defaults with defineConfig, that file sits beside it and is imported the same way; the scheduler does not need it.

// src/scheduler.config.ts
import { defineSchedulerConfig } from '@sv5ui/scheduler';

// Every scheduler created after this call starts from these classes.
// Each call replaces the whole previous config, so keep it in one place.
defineSchedulerConfig({
  scheduler: {
    slots: { root: 'rounded-2xl border border-outline-variant/60', toolbar: 'px-4' }
  },
  eventChip: {
    slots: { title: 'font-medium' }
  },
  dateNavigator: { slots: { root: 'gap-2' } },
  calendarList: { slots: { title: 'normal-case tracking-normal' } },
  searchBox: { slots: { root: 'rounded-full' } },
  dragSourceList: { slots: { item: 'rounded-full' } }
});

<!-- src/routes/+layout.svelte -->
<script lang="ts">
  // Importing the file runs defineSchedulerConfig. The root layout is evaluated
  // before any page, so every scheduler in the app is created after it.
  import '../scheduler.config';
  import './layout.css';

  let { children } = $props();
</script>

{@render children()}

defaultVariants changes the variant a component uses when none is passed, which matters for an EventChip you render yourself. Inside the calendar each view chooses the chip's size and variant to fit its cells, so a default variant does not reach those chips. Slots do.

// defaultVariants apply to a component you render yourself:
defineSchedulerConfig({ eventChip: { defaultVariants: { variant: 'solid', size: 'sm' } } });

<EventChip {event} />   // now solid and small everywhere you place one

// Inside the calendar each view picks the size and variant that fit its
// cells (soft blocks in the time grid, solid pills in the all-day row and
// the month), so a default variant does not reach those chips. Use slots
// for anything that should change inside the calendar.

Slots of the Building Blocks

The five standalone components take the same ui prop and the same config keys.

Styling the Inside of the Grid

The grids have no ui slots of their own: their parts are many, and their classes change between releases. What they have is a set of data-sch-* attributes that do not change, listed below. Target those from CSS for anything a snippet is too much for: the current-time line, the shading outside business hours, the cell of the selected date. Svelte scopes styles to the component that declares them, so use :global under a wrapper class. Content is better replaced with the rendering snippets.

<!-- The grid inside has no ui slots. Its parts carry data-sch-* attributes
     instead, which are a stable contract for CSS. Svelte scopes styles to the
     component, so reach into the scheduler with :global. -->
<div class="planner">
  <Scheduler bind:events />
</div>

<style>
  .planner :global([data-sch-now]) { --color-error: oklch(0.6 0.2 30); }
  .planner :global([data-sch-off-hours]) {
    background: repeating-linear-gradient(135deg, transparent 0 6px,
      color-mix(in oklab, var(--color-outline-variant) 60%, transparent) 6px 7px);
  }
  .planner :global([data-sch-day-cell][data-sch-anchor]) { outline: 2px solid var(--color-primary); }
  .planner :global([data-sch-event-id] ) { border-radius: 2px; }
</style>

Dark Mode

Nothing to do. Tokens resolve to their dark values under the .dark class sv5ui's ModeWatcher sets, and the scheduler has no colour outside the token set. Chips, the shaded off-hours, the today column and the drag ghost all switch with the page.

Density

There is no density prop. The time grid's height comes from slotHeight and slotMinutes, the toolbar's from its slot, and the month row from the height you give the scheduler.

<!-- There is no density prop; three knobs cover it -->
<Scheduler
  bind:events
  slotHeight={16}                         <!-- 24 by default: a tighter time grid -->
  slotMinutes={15}                        <!-- more slots per hour -->
  ui={{ toolbar: 'py-1 px-2' }}           <!-- a slimmer toolbar -->
/>