Schedule

1<script setup lang="ts">2import { Button, Dialog, Schedule, StackPanel, Tag, type ScheduleEvent, type ScheduleEventChange, type ScheduleOccurrenceInfo, type ScheduleSelection, type ScheduleViewName } from '@vitral/vue';3import { computed, ref } from 'vue';4 5const today = new Date();6const at = (dayOffset: number, hour: number, minute = 0) => new Date(today.getFullYear(), today.getMonth(), today.getDate() + dayOffset, hour, minute);7const day = (dayOffset: number) => at(dayOffset, 0);8 9const events = ref<ScheduleEvent[]>([10    { id: 1, title: 'Standup', start: at(-today.getDay() + 1, 9), end: at(-today.getDay() + 1, 9, 15), recurrence: 'FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR', color: 'var(--vt-chart-4)' },11    { id: 2, title: 'Design review', start: at(0, 10), end: at(0, 11, 30) },12    { id: 3, title: 'Pairing', start: at(0, 10, 30), end: at(0, 12) },13    { id: 4, title: 'Lunch with Ana', start: at(1, 12, 30), end: at(1, 13, 30), color: 'var(--vt-chart-3)' },14    { id: 5, title: 'Release', start: day(2), end: day(4), allDay: true, color: 'var(--vt-chart-2)' },15    { id: 6, title: 'Planning', start: at(-1, 14), end: at(-1, 16) },16    { id: 7, title: 'Board meeting', start: at(3, 15), end: at(3, 16), editable: false, color: 'var(--vt-chart-6)' },17    { id: 8, title: 'Payroll', start: new Date(today.getFullYear(), today.getMonth(), 1, 8), recurrence: 'FREQ=MONTHLY;BYMONTHDAY=1,-1', allDay: true, color: 'var(--vt-chart-5)' }18]);19 20let nextId = 100;21const log = ref('Move, resize or select something. Press an event to open it.');22const view = ref<ScheduleViewName>('week');23const date = ref(day(0));24 25// ---- opening an event26// `event-click` hands over the event, which occurrence of it was pressed, and27// the original DOM event. What to do with that is the application's: a dialog28// here, a drawer or a side panel somewhere else.29const opened = ref<{ event: ScheduleEvent; occurrence: ScheduleOccurrenceInfo } | null>(null);30const details = computed(() => {31    const current = opened.value;32    if (!current) return null;33    const { event, occurrence } = current;34    const when = occurrence.allDay35        ? occurrence.start.toLocaleDateString(undefined, { weekday: 'long', day: 'numeric', month: 'long' })36        : `${occurrence.start.toLocaleString(undefined, { weekday: 'long', day: 'numeric', month: 'long', hour: '2-digit', minute: '2-digit' })} – ${occurrence.end.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })}`;37    return { title: event.title, when, recurring: occurrence.recurring, editable: event.editable !== false };38});39 40// Applies a change: a single event is updated; one occurrence of a series is41// split off as an event of its own and left out of the series.42function apply(change: ScheduleEventChange) {43    const { event, occurrence, start, end, allDay, resourceId } = change;44    if (occurrence.recurring) {45        events.value = [46            ...events.value.map((e) => (e === event ? { ...e, exdate: [...(e.exdate ?? []), occurrence.start] } : e)),47            { ...event, id: nextId++, recurrence: null, exdate: undefined, start, end, allDay, resourceId }48        ];49    } else {50        events.value = events.value.map((e) => (e === event ? { ...e, start, end, allDay, resourceId } : e));51    }52    log.value = `${event.title}: ${start.toLocaleString()} → ${end.toLocaleString()} (${change.kind}, ${change.via})`;53}54 55function create(selection: ScheduleSelection) {56    events.value = [...events.value, { id: nextId++, title: 'New event', start: selection.start, end: selection.end, allDay: selection.allDay, resourceId: selection.resourceId }];57    log.value = `Created ${selection.start.toLocaleString()} → ${selection.end.toLocaleString()}`;58}59</script>60 61<template>62    <Schedule63        v-model:view="view"64        v-model:date="date"65        :events="events"66        scroll-time="08:00"67        style="width: 100%"68        @event-change="apply"69        @select="create"70        @event-click="opened = { event: $event.event, occurrence: $event.occurrence }"71    />72    <small style="color: var(--vt-text-muted-color)">{{ log }}</small>73 74    <Dialog :visible="!!opened" modal :header="details?.title" :style="{ width: 'min(26rem, 92vw)' }" @update:visible="opened = null">75        <StackPanel v-if="details" spacing="0.5rem">76            <p style="margin: 0">{{ details.when }}</p>77            <StackPanel orientation="horizontal" spacing="0.625rem" align="center" wrap>78                <Tag v-if="details.recurring" value="Repeats" severity="info" />79                <Tag v-if="!details.editable" value="Locked" severity="secondary" />80            </StackPanel>81        </StackPanel>82        <template #footer>83            <Button label="Close" severity="secondary" variant="text" @click="opened = null" />84        </template>85    </Dialog>86</template>

1<script setup lang="ts">2import { Button, Dialog, Schedule, StackPanel, Tag, type ScheduleEvent, type ScheduleEventChange, type ScheduleOccurrenceInfo, type ScheduleSelection, type ScheduleViewName } from '@vitral/vue';3import { computed, ref } from 'vue';4 5const today = new Date();6const at = (dayOffset: number, hour: number, minute = 0) => new Date(today.getFullYear(), today.getMonth(), today.getDate() + dayOffset, hour, minute);7const day = (dayOffset: number) => at(dayOffset, 0);8 9const events = ref<ScheduleEvent[]>([10    { id: 1, title: 'Standup', start: at(-today.getDay() + 1, 9), end: at(-today.getDay() + 1, 9, 15), recurrence: 'FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR', color: 'var(--vt-chart-4)' },11    { id: 2, title: 'Design review', start: at(0, 10), end: at(0, 11, 30) },12    { id: 3, title: 'Pairing', start: at(0, 10, 30), end: at(0, 12) },13    { id: 4, title: 'Lunch with Ana', start: at(1, 12, 30), end: at(1, 13, 30), color: 'var(--vt-chart-3)' },14    { id: 5, title: 'Release', start: day(2), end: day(4), allDay: true, color: 'var(--vt-chart-2)' },15    { id: 6, title: 'Planning', start: at(-1, 14), end: at(-1, 16) },16    { id: 7, title: 'Board meeting', start: at(3, 15), end: at(3, 16), editable: false, color: 'var(--vt-chart-6)' },17    { id: 8, title: 'Payroll', start: new Date(today.getFullYear(), today.getMonth(), 1, 8), recurrence: 'FREQ=MONTHLY;BYMONTHDAY=1,-1', allDay: true, color: 'var(--vt-chart-5)' }18]);19 20let nextId = 100;21const view = ref<ScheduleViewName>('month');22 23const opened = ref<{ event: ScheduleEvent; occurrence: ScheduleOccurrenceInfo } | null>(null);24const details = computed(() => {25    const current = opened.value;26    if (!current) return null;27    const { event, occurrence } = current;28    const when = occurrence.allDay29        ? occurrence.start.toLocaleDateString(undefined, { weekday: 'long', day: 'numeric', month: 'long' })30        : `${occurrence.start.toLocaleString(undefined, { weekday: 'long', day: 'numeric', month: 'long', hour: '2-digit', minute: '2-digit' })} – ${occurrence.end.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })}`;31    return { title: event.title, when, recurring: occurrence.recurring, editable: event.editable !== false };32});33 34// Applies a change: a single event is updated; one occurrence of a series is35// split off as an event of its own and left out of the series.36function apply(change: ScheduleEventChange) {37    const { event, occurrence, start, end, allDay, resourceId } = change;38    if (occurrence.recurring) {39        events.value = [40            ...events.value.map((e) => (e === event ? { ...e, exdate: [...(e.exdate ?? []), occurrence.start] } : e)),41            { ...event, id: nextId++, recurrence: null, exdate: undefined, start, end, allDay, resourceId }42        ];43    } else {44        events.value = events.value.map((e) => (e === event ? { ...e, start, end, allDay, resourceId } : e));45    }46}47 48function create(selection: ScheduleSelection) {49    events.value = [...events.value, { id: nextId++, title: 'New event', start: selection.start, end: selection.end, allDay: selection.allDay, resourceId: selection.resourceId }];50}51</script>52 53<template>54    <Schedule55        v-model:view="view"56        :events="events"57        :max-events-per-day="2"58        style="width: 100%"59        @event-change="apply"60        @select="create"61        @event-click="opened = { event: $event.event, occurrence: $event.occurrence }"62    />63 64    <Dialog :visible="!!opened" modal :header="details?.title" :style="{ width: 'min(26rem, 92vw)' }" @update:visible="opened = null">65        <StackPanel v-if="details" spacing="0.5rem">66            <p style="margin: 0">{{ details.when }}</p>67            <StackPanel orientation="horizontal" spacing="0.625rem" align="center" wrap>68                <Tag v-if="details.recurring" value="Repeats" severity="info" />69                <Tag v-if="!details.editable" value="Locked" severity="secondary" />70            </StackPanel>71        </StackPanel>72        <template #footer>73            <Button label="Close" severity="secondary" variant="text" @click="opened = null" />74        </template>75    </Dialog>76</template>

1<script setup lang="ts">2import { Schedule, type ScheduleEvent } from '@vitral/vue';3 4const today = new Date();5const at = (dayOffset: number, hour: number, minute = 0) => new Date(today.getFullYear(), today.getMonth(), today.getDate() + dayOffset, hour, minute);6const day = (dayOffset: number) => at(dayOffset, 0);7 8const events: ScheduleEvent[] = [9    { id: 1, title: 'Standup', start: at(-today.getDay() + 1, 9), end: at(-today.getDay() + 1, 9, 15), recurrence: 'FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR', color: 'var(--vt-chart-4)' },10    { id: 2, title: 'Design review', start: at(0, 10), end: at(0, 11, 30) },11    { id: 3, title: 'Pairing', start: at(0, 10, 30), end: at(0, 12) },12    { id: 4, title: 'Lunch with Ana', start: at(1, 12, 30), end: at(1, 13, 30), color: 'var(--vt-chart-3)' },13    { id: 5, title: 'Release', start: day(2), end: day(4), allDay: true, color: 'var(--vt-chart-2)' },14    { id: 6, title: 'Planning', start: at(-1, 14), end: at(-1, 16) },15    { id: 7, title: 'Board meeting', start: at(3, 15), end: at(3, 16), editable: false, color: 'var(--vt-chart-6)' },16    { id: 8, title: 'Payroll', start: new Date(today.getFullYear(), today.getMonth(), 1, 8), recurrence: 'FREQ=MONTHLY;BYMONTHDAY=1,-1', allDay: true, color: 'var(--vt-chart-5)' }17];18</script>19 20<template>21    <Schedule view="agenda" :views="['agenda']" :agenda-days="14" :events="events" style="width: 100%" />22</template>

1<script setup lang="ts">2import { Schedule, type ScheduleEvent, type ScheduleEventChange, type ScheduleViewName } from '@vitral/vue';3import { ref } from 'vue';4 5const today = new Date();6const at = (dayOffset: number, hour: number, minute = 0) => new Date(today.getFullYear(), today.getMonth(), today.getDate() + dayOffset, hour, minute);7const day = (dayOffset: number) => at(dayOffset, 0);8 9const view = ref<ScheduleViewName>('timeline');10const resources = [11    { id: 'a', title: 'Auditorium' },12    { id: 'b', title: 'Room B', color: 'var(--vt-chart-3)' },13    { id: 'c', title: 'Room C', color: 'var(--vt-chart-7)' },14    { id: 'd', title: 'Studio' }15];16const bookings = ref<ScheduleEvent[]>([17    { id: 'k1', title: 'Onboarding', start: at(0, 9), end: at(0, 12), resourceId: 'a' },18    { id: 'k2', title: 'Interview', start: at(0, 10), end: at(0, 11), resourceId: 'b' },19    { id: 'k3', title: 'Interview', start: at(0, 10, 30), end: at(0, 11, 30), resourceId: 'b' },20    { id: 'k4', title: 'Workshop', start: at(0, 13), end: at(0, 17), resourceId: 'c' },21    { id: 'k5', title: 'Recording', start: at(0, 8), end: at(0, 10), resourceId: 'd' },22    { id: 'k6', title: 'Maintenance', start: day(0), end: day(1), allDay: true, resourceId: 'd' }23]);24 25function rebook(change: ScheduleEventChange) {26    bookings.value = bookings.value.map((e) => (e === change.event ? { ...e, start: change.start, end: change.end, resourceId: change.resourceId } : e));27}28</script>29 30<template>31    <Schedule v-model:view="view" :views="['timeline', 'week']" :resources="resources" :events="bookings" min-time="07:00" max-time="20:00" scroll-height="20rem" style="width: 100%" @event-change="rebook">32        <template #resource="{ resource }">33            <span style="display: flex; align-items: center; gap: 0.5rem">34                <span :style="{ width: '0.5rem', height: '0.5rem', borderRadius: '50%', background: resource.color ?? 'var(--vt-chart-1)' }" />35                {{ resource.title }}36            </span>37        </template>38    </Schedule>39</template>

1<script setup lang="ts">2import { Button, Schedule, StackPanel } from '@vitral/vue';3import { ref } from 'vue';4 5// ---- the same instants, read in three places6const zones = ['UTC', 'America/Sao_Paulo', 'Asia/Tokyo'] as const;7const zone = ref<(typeof zones)[number]>('America/Sao_Paulo');8const handoverDay = new Date(2026, 2, 9);9const handovers = [10    { id: 'h1', title: 'Handover', start: new Date(Date.UTC(2026, 2, 9, 15, 0)), end: new Date(Date.UTC(2026, 2, 9, 16, 0)) },11    { id: 'h2', title: 'Market open', start: new Date(Date.UTC(2026, 2, 9, 13, 30)), end: new Date(Date.UTC(2026, 2, 9, 14, 0)) },12    { id: 'h3', title: 'Nightly build', start: new Date(Date.UTC(2026, 2, 9, 2, 0)), end: new Date(Date.UTC(2026, 2, 9, 3, 0)) }13];14const readBack = ref('');15const showInstant = (change: { occurrence: { start: Date } }) => (readBack.value = change.occurrence.start.toISOString());16</script>17 18<template>19    <StackPanel spacing="1rem" style="width: 100%">20        <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem">21            <div style="display: flex; gap: 0.5rem" role="group" aria-label="Time zone">22                <Button v-for="z in zones" :key="z" size="small" severity="secondary" variant="outlined" :aria-pressed="zone === z" @click="zone = z">{{ z }}</Button>23            </div>24            <small v-if="readBack" style="color: var(--vt-text-muted-color)">Reported as {{ readBack }}</small>25        </div>26        <Schedule :events="handovers" :date="handoverDay" view="day" :views="['day']" :time-zone="zone" scroll-time="00:00" aria-label="Handovers" @event-click="showInstant" />27    </StackPanel>28</template>

1<script setup lang="ts">2import { Button, Schedule, type ScheduleEvent, type ScheduleEventChange } from '@vitral/vue';3import { ref } from 'vue';4 5const today = new Date();6const at = (hour: number) => new Date(today.getFullYear(), today.getMonth(), today.getDate(), hour);7 8// Weekends are closed: a move onto one is taken back.9const guarded = ref<ScheduleEvent[]>([{ id: 'g', title: 'Try moving me to a weekend', start: at(11), end: at(12) }]);10function guard(change: ScheduleEventChange) {11    const weekend = change.start.getDay() === 0 || change.start.getDay() === 6;12    if (weekend) {13        change.revert();14        return;15    }16    guarded.value = guarded.value.map((e) => (e === change.event ? { ...e, start: change.start, end: change.end } : e));17}18</script>19 20<template>21    <Schedule :events="guarded" view="week" :slot-duration="15" min-time="08:00" max-time="18:00" scroll-height="24rem" :hour12="false" style="width: 100%" @event-change="guard">22        <template #toolbar="{ title, prev, next, today: goToday }">23            <div style="display: flex; align-items: center; gap: 0.5rem">24                <Button icon="chevronLeft" aria-label="Previous week" variant="outlined" size="small" @click="prev" />25                <Button label="This week" variant="outlined" size="small" @click="goToday" />26                <Button icon="chevronRight" aria-label="Next week" variant="outlined" size="small" @click="next" />27                <strong style="margin-inline-start: 0.5rem">{{ title }}</strong>28            </div>29        </template>30        <template #event="{ event, timeText }">31            <strong>{{ event.title }}</strong>32            <small>{{ timeText }}</small>33        </template>34    </Schedule>35</template>