Scheduler

Headless, SSR-deterministic day/week/month scheduler with a pure event layout engine.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/ui

Add the public import below to <script setup lang="ts">. Components provide behavior without styles; the preview uses optional Paper styles.

import { Scheduler, SchedulerRoot, SchedulerDayColumn, SchedulerEvent, SchedulerHeading, SchedulerMonthDay, SchedulerMonthGrid, SchedulerNav, SchedulerTimeGrid } from "@vizejs/ui/scheduler";

Or copy the source into your project with vize lib pull scheduler (see Source Distribution).

Try it

This is the basic example maintained with the component source, using the public package imports. The preview adds the optional Paper styles.

Open the interactive example · Styling these components

Copy the example

<!-- Week scheduler with typed events that applies drag and keyboard moves and resizes. -->
<script setup lang="ts">
import { ref } from "vue";

import { createPlainDateTime, SchedulerRoot } from "@vizejs/ui/scheduler";
import type { SchedulerEventChange, SchedulerEventData } from "@vizejs/ui/scheduler";

interface Booking {
  readonly room: string;
}

const events = ref<readonly SchedulerEventData<Booking>[]>([
  {
    id: "review",
    title: "Design review",
    data: { room: "Aurora" },
    start: createPlainDateTime(2026, 10, 22, 9, 0),
    end: createPlainDateTime(2026, 10, 22, 10, 30),
  },
  {
    id: "standup",
    title: "Standup",
    data: { room: "Cedar" },
    start: createPlainDateTime(2026, 10, 22, 9, 30),
    end: createPlainDateTime(2026, 10, 22, 9, 45),
  },
]);

function apply(change: SchedulerEventChange<Booking>): void {
  events.value = events.value.map((event) =>
    event.id === change.event.id ? { ...event, start: change.start, end: change.end } : event,
  );
}
</script>

<template>
  <SchedulerRoot
    :events
    aria-label="Room bookings"
    locale="en-US"
    :today="{ year: 2026, month: 10, day: 22 }"
    :day-start-hour="8"
    :day-end-hour="12"
    @event-move="apply"
    @event-resize="apply"
  />
</template>

API

Scheduler<Data>

Source: src/families/date-time/scheduler/scheduler-root.vue

Props

Events

Slots

SchedulerRoot<Data>

Source: src/families/date-time/scheduler/scheduler-root.vue

Props

Events

Slots

SchedulerDayColumn

Source: src/families/date-time/scheduler/scheduler-day-column.vue

Props

Slots

SchedulerEvent

Source: src/families/date-time/scheduler/scheduler-event.vue

Props

Slots

SchedulerHeading

Source: src/families/date-time/scheduler/scheduler-heading.vue

Slots

SchedulerMonthDay

Source: src/families/date-time/scheduler/scheduler-month-day.vue

Props

Slots

SchedulerMonthGrid

Source: src/families/date-time/scheduler/scheduler-month-grid.vue

Slots

SchedulerNav

Source: src/families/date-time/scheduler/scheduler-nav.vue

Props

Slots

SchedulerTimeGrid

Source: src/families/date-time/scheduler/scheduler-time-grid.vue

Props

Slots

Behavior

Normative state x input -> outcome table for the headless Scheduler compound (@vizejs/ui/scheduler): scheduler-root.vue (generic over the event payload Data), scheduler-heading.vue, scheduler-nav.vue, scheduler-time-grid.vue, scheduler-day-column.vue, scheduler-month-grid.vue, scheduler-month-day.vue, and scheduler-event.vue, plus the pure layout engine scheduler-layout.ts. Every row is proven by the named test.

SSR determinism

Layout is a pure function of the events, the anchor date, and props. The anchor comes from date, then defaultDate, then the calendar "today" rules (today, then an injected now + timeZone, then the client clock after mount). Drag-and-drop listeners attach only on the client.

Headless positioning

Consumers position events with CSS custom properties. Time-grid events expose --vize-scheduler-top and --vize-scheduler-height (percent of the day column), plus --vize-scheduler-column, --vize-scheduler-columns, and --vize-scheduler-span. Row events expose --vize-scheduler-start and --vize-scheduler-end (CSS grid lines) and --vize-scheduler-lane. The time grid root also exposes --vize-scheduler-days and --vize-scheduler-slots.