Views & Navigation

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

  let events = $state<EventInput[]>([/* ... */]);
  let view = $state('week');   // 'month' | 'week' | 'day' | 'year' | 'agenda', or a registered name
</script>

<!-- The toolbar switches it; so can anything bound to the same state -->
<Scheduler bind:events bind:view timeZone="Asia/Ho_Chi_Minh" height={560} />

<!-- A month cell shows as many rows as its height allows and folds the rest into +N.
     Rows are at least 62px tall; below that the grid scrolls instead of shrinking. -->
<Scheduler bind:events view="month" height={560} />

<!-- Clicking an empty cell moves date to that day, and reports it -->
<Scheduler bind:events view="month" bind:date onSelectSlot={({ start }) => console.log(start)} />

<!-- Twelve months at a glance. A dot marks a day with events.
     A month title opens that month; a day opens that day. -->
<Scheduler bind:events view="year" height={640} />

<!-- One calendar month as a list, grouped by day; empty days are left out.
     Each heading counts the events and adds up the booked time. -->
<Scheduler bind:events view="agenda" height={480} />

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

  const zone = 'Asia/Ho_Chi_Minh';
  let events = $state<EventInput[]>([/* ... */]);
  let view = $state('week');
  let date = $state(now(zone));
</script>

<Scheduler bind:events bind:view bind:date timeZone={zone} height={520} />

<!-- Anything that sets date or view moves the calendar -->
<Button label="Today" onclick={() => (date = now(zone))} />
<Button label="Next week" onclick={() => (date = date.add({ weeks: 1 }))} />
<Button label="New year" onclick={() => { date = parseZonedDateTime(`2027-01-01T00:00[${zone}]`); view = 'day'; }} />

<!-- date may carry another zone; it is converted before the range is computed -->
<Button label="Same instant, New York" onclick={() => (date = parseZonedDateTime('2026-09-16T12:00[America/New_York]'))} />

<!-- days makes the week view show that many days starting on date,
     and the arrows step by the same amount. weekStartsOn no longer applies. -->
<Scheduler bind:events view="week" days={3} />
<Scheduler bind:events view="week" days={14} />

<!-- No toolbar: the surrounding page navigates through bind:date and bind:view -->
<Scheduler bind:events bind:date view="agenda" toolbar={false} height={420} />

// Across midnight, shorter than a day: stays in the time grid, split at the day line
{ id: 'release', title: 'Release window', start: '2026-09-18T22:00', end: '2026-09-19T01:00' }

// Twenty four hours or more: drawn in the all-day row and as a bar in the month,
// even without allDay
{ id: 'oncall', title: 'On call', start: '2026-09-14T09:00', end: '2026-09-15T09:00' }