Building Blocks

<script lang="ts">
  import { now } from '@internationalized/date';
  let date = $state(now(zone));
</script>

<!-- Picking a day sets date; the scheduler follows because date is bound to both.
     events gives the dots: an EventInput array, series expanded for the month shown. -->
<DateNavigator {date} onSelect={(day) => (date = day)} {events} timeZone={zone} />
<Scheduler bind:events bind:date timeZone={zone} />

<script lang="ts">
  let search = $state('');
</script>

<!-- bind:value here, search there. The / key focuses the box from anywhere on the
     page unless another input has focus; shortcut={null} turns that off. Other input
     attributes (name, autocomplete, data-*) pass through to the input. -->
<SearchBox bind:value={search} shortcut="/" name="q" autocomplete="off" />
<Scheduler bind:events {search} />

<script lang="ts">
  import { Switch } from 'sv5ui';
  import { CalendarList, type CalendarListItemProps } from '@sv5ui/scheduler';

  // Tailwind ships only the classes it can see, so map colours to classes
  const swatch: Record<string, string> = { primary: 'bg-primary', info: 'bg-info', success: 'bg-success' /* ... */ };
</script>

<!-- item replaces each row; the list keeps the state and gives you toggle -->
<CalendarList {calendars} bind:hiddenCalendars item={row} />

{#snippet row({ calendar, visible, toggle }: CalendarListItemProps)}
  <div class="flex items-center justify-between py-1">
    <span class="flex items-center gap-2 text-sm">
      <span class={['size-2.5 rounded-full', swatch[calendar.color ?? 'primary']]}></span>
      {calendar.title}
    </span>
    <Switch checked={visible} onCheckedChange={toggle} size="sm" />
  </div>
{/snippet}

<!-- The backlog. Each row is a dragSource; drop it on any scheduler on the page.
     calendars colours the swatch from item.calendarId. -->
<DragSourceList items={backlog} {calendars} />
<Scheduler bind:events view="day" />

<!-- item replaces the content of each draggable row -->
{#snippet row({ item, color }: DragSourceListItemProps)}
  <Badge label={item.title} {color} variant="soft" />
  <span class="text-xs">{item.durationMinutes ?? 60} min</span>
{/snippet}

<!-- The chip on its own: eight colours, soft or solid, sm or md. position decides the
     shape: a time position draws a block with the time, a span position a pill.
     Without position it is a pill. It does not read calendars: pass color. -->
<EventChip {event} color="success" variant="solid" />
<EventChip {event} color="warning" size="sm" showTime={false} />

<!-- children replace the title and time -->
<EventChip {event} color="info">
  <Icon name="lucide:video" size="12" /> {event.title}
</EventChip>

<script lang="ts">
  import { now } from '@internationalized/date';
  import { CalendarList, DateNavigator, Scheduler, SearchBox } from '@sv5ui/scheduler';

  let events = $state<EventInput[]>([/* ... */]);
  let date = $state(now(zone));
  let search = $state('');
  let hiddenCalendars = $state<string[]>([]);
</script>

<!-- One set of state, three parts, two calendars. Every part reads and writes the
     same variables, so the navigator, the search box and the list drive both grids. -->
<div class="grid gap-4 lg:grid-cols-[16rem_1fr]">
  <aside class="space-y-4">
    <DateNavigator {date} onSelect={(day) => (date = day)} {events} timeZone={zone} />
    <SearchBox bind:value={search} />
    <CalendarList {calendars} bind:hiddenCalendars />
  </aside>
  <div class="space-y-4">
    <Scheduler bind:events bind:date {calendars} {hiddenCalendars} {search} timeZone={zone} toolbar={false} height={480} />
    <Scheduler bind:events bind:date {calendars} {hiddenCalendars} {search} timeZone={zone} view="agenda" toolbar={false} height={320} />
  </div>
</div>