Scheduler - Controlled State
Control view, date, selection, and resource focus.
#Usage
import { Scheduler } from '@primeui/vue-scheduler';<Scheduler.Root :events="events" :resources="resources" :view="view" :date="date" :selected-resource-id="selectedResourceId" @view-change="onViewChange" @date-change="onDateChange" @selection-change="onSelectionChange">
<!-- Scheduler parts -->
</Scheduler.Root>Controlled state keeps date, view, selection, events, resources, and resource focus in the parent component. Root props receive the current values and root events update routing, persistence, filters, or surrounding panels.
#Date and View
Control date and view values from the parent. Route or toolbar state can then stay in sync.
<script setup lang="ts">
import { ref } from 'vue';
import { Scheduler, type SchedulerExpose, type SchedulerViewType } from '@primeui/vue-scheduler';
const scheduler = ref<SchedulerExpose>();
const date = ref(new Date());
const view = ref<SchedulerViewType>('timelineWeek');
const selectedDate = new Date(2026, 10, 4);
</script>
<template>
<button type="button" @click="date = new Date(selectedDate)">Replace date</button>
<button type="button" @click="scheduler?.gotoDate(selectedDate)">Go to date</button>
<Scheduler.Root ref="scheduler" v-model:date="date" v-model:view="view">
<Scheduler.Title />
<Scheduler.Content />
</Scheduler.Root>
</template>Replacing date updates the title, timeline headers, body and event positions
without remounting the root. Navigation commands update the root and emit
update:date, date-change and dates-change; v-model:date keeps the parent
in sync. An external prop replacement does not echo a navigation event.
#Resources
Controlled resource state exposes resource ids, row or column UI, and resource-specific payloads.
#Selection State
Controlled selection can drive nearby status, filters, or command surfaces without moving selection logic out of Scheduler.
#API
Key APIs are date, view, selectedResourceId, @date-change, @view-change, @date-select, @selection-change, and @resource-click.