Scheduler - Controlled State

#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.

import type { SchedulerViewType } from '@primeui/vue-scheduler';

const view: SchedulerViewType = 'week';
const date: Date = new Date(2026, 5, 10);

#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.

#Related Docs

• Events Reference
• Resources