Scheduler - Architecture | PrimeUI Pro

#Usage

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

<Scheduler.Root :events="events" :resources="resources" :categories="categories" category-field="categoryId" quick-info event-popover context-menu show-more-popover>
    <Scheduler.Header>
        <Scheduler.Navigation />
        <Scheduler.Title />
        <Scheduler.ViewSelector />
    </Scheduler.Header>
    <Scheduler.SelectionToolbar />
    <Scheduler.CategoryLegend />
    <Scheduler.Content>
        <Scheduler.Event />
        <Scheduler.Day>
            <Scheduler.DayHeader />
            <Scheduler.AllDayCell />
            <Scheduler.AllDayEvent />
            <Scheduler.TimeGutter />
            <Scheduler.TimeGridCell />
            <Scheduler.WorkCell />
            <Scheduler.TimeGridEvent />
        </Scheduler.Day>
        <Scheduler.Week>
            <Scheduler.DayHeader />
            <Scheduler.AllDayCell />
            <Scheduler.AllDayEvent />
            <Scheduler.TimeGutter />
            <Scheduler.TimeGridCell />
            <Scheduler.WorkCell />
            <Scheduler.TimeGridEvent />
        </Scheduler.Week>
        <Scheduler.Month>
            <Scheduler.MonthHeaderCell />
            <Scheduler.MonthCell />
            <Scheduler.MonthCellNumber />
            <Scheduler.MonthDayCell />
            <Scheduler.MonthEvent />
            <Scheduler.MonthMoreLink />
        </Scheduler.Month>
        <Scheduler.Year>
            <Scheduler.MiniMonthHeader />
            <Scheduler.MiniMonthCell />
        </Scheduler.Year>
        <Scheduler.Agenda>
            <Scheduler.AgendaDateHeader />
            <Scheduler.AgendaEvent />
        </Scheduler.Agenda>
        <Scheduler.Timeline>
            <Scheduler.TimelineHeaderCell />
            <Scheduler.TimelineCell />
            <Scheduler.TimelineEvent />
        </Scheduler.Timeline>
        <Scheduler.ResourceDay>
            <Scheduler.ResourceColumnHeader />
            <Scheduler.AllDayCell />
            <Scheduler.AllDayEvent />
            <Scheduler.TimeGutter />
            <Scheduler.TimeGridCell />
            <Scheduler.WorkCell />
            <Scheduler.TimeGridEvent />
        </Scheduler.ResourceDay>
        <Scheduler.ResourceWeek>
            <Scheduler.ResourceColumnHeader />
            <Scheduler.AllDayCell />
            <Scheduler.AllDayEvent />
            <Scheduler.TimeGutter />
            <Scheduler.TimeGridCell />
            <Scheduler.WorkCell />
            <Scheduler.TimeGridEvent />
        </Scheduler.ResourceWeek>
        <Scheduler.ResourceMonth>
            <Scheduler.ResourceColumnHeader />
            <Scheduler.MonthHeaderCell />
            <Scheduler.MonthCell />
            <Scheduler.MonthCellNumber />
            <Scheduler.MonthDayCell />
            <Scheduler.MonthEvent />
            <Scheduler.MonthMoreLink />
        </Scheduler.ResourceMonth>
        <Scheduler.ResourceTimeline>
            <Scheduler.ResourceAreaHeader />
            <Scheduler.ResourceHeader />
            <Scheduler.Resource />
            <Scheduler.ResourceGroup />
            <Scheduler.ResourceRow />
            <Scheduler.ResourceAggregateBadge />
            <Scheduler.TimelineHeaderCell />
            <Scheduler.TimelineCell />
            <Scheduler.TimelineEvent />
        </Scheduler.ResourceTimeline>
        <Scheduler.DateDay>
            <Scheduler.DayHeader />
            <Scheduler.ResourceColumnHeader />
            <Scheduler.AllDayCell />
            <Scheduler.AllDayEvent />
            <Scheduler.TimeGutter />
            <Scheduler.TimeGridCell />
            <Scheduler.WorkCell />
            <Scheduler.TimeGridEvent />
        </Scheduler.DateDay>
        <Scheduler.DateWeek>
            <Scheduler.DayHeader />
            <Scheduler.ResourceColumnHeader />
            <Scheduler.AllDayCell />
            <Scheduler.AllDayEvent />
            <Scheduler.TimeGutter />
            <Scheduler.TimeGridCell />
            <Scheduler.WorkCell />
            <Scheduler.TimeGridEvent />
        </Scheduler.DateWeek>
        <Scheduler.DateMonth>
            <Scheduler.MonthHeaderCell />
            <Scheduler.ResourceColumnHeader />
            <Scheduler.MonthCell />
            <Scheduler.MonthCellNumber />
            <Scheduler.MonthDayCell />
            <Scheduler.MonthEvent />
            <Scheduler.MonthMoreLink />
        </Scheduler.DateMonth>
    </Scheduler.Content>
    <Scheduler.MorePopover />
    <Scheduler.QuickInfo />
    <Scheduler.Popover />
    <Scheduler.ContextMenu />
    <Scheduler.Footer />
    <Scheduler.Loading />
</Scheduler.Root>

The root owns data, state, interaction, locale, overlays, and accessibility. The tree above is an anatomy map: it shows the public scopes and outlets Scheduler can invoke. A real page should declare only the active views, overlays, and custom surfaces it needs.

#Runtime Model

Scheduler has two layers.

Layer	Owned by	What it controls
Runtime	`@primeui/vue-scheduler`	Date math, range calculation, event placement, drag, resize, selection, overlays, focus, ARIA, and contexts.
Visual UI	The application	Toolbar controls, event cards, resource labels, month cells, agenda rows, overlay content, and styling.

Use event-shell="none" when an installed PrimeOne part or app-owned event component draws the visible card. Scheduler still positions the event and passes context to the child part.

#First Scheduler

Start with a controlled date, a controlled view, small event data, Scheduler.Root, Scheduler.Header, Scheduler.Content, one semantic event outlet, and the overflow popover.

Loading Demo...

#Data Model

Scheduler reads plain application data. Events drive placement and emitted payloads. Resources drive rows, columns, hierarchy, adaptive grouping, and resource-aware event placement. Categories drive color, counts, filtering, and legends. The Vue package exports the main data contracts, so application code can type the arrays from the same package as the component.

import type { EventCategory, SchedulerEvent, SchedulerResource } from '@primeui/vue-scheduler';

const events: SchedulerEvent[] = [
    {
        id: 'kickoff-1001',
        title: 'Customer kickoff',
        start: new Date(2026, 4, 11, 9, 0),
        end: new Date(2026, 4, 11, 9, 30),
        resourceId: 'launch-lead',
        categoryId: 'planning',
        color: 'rgb(37 99 235)',
        metadata: {
            accountTier: 'enterprise',
            room: 'Studio 2'
        }
    }
];

const categories: EventCategory[] = [
    { id: 'planning', name: 'Planning', color: 'rgb(37 99 235)' },
    { id: 'delivery', name: 'Delivery', color: 'rgb(5 150 105)' }
];

Use top-level fields when Scheduler needs to understand the value. Use metadata for application metadata that custom UI parts, overlays, export flows, or permission checks need to read. Scheduler does not inspect metadata; it passes the object through payloads and contexts.

Field	Use
`id`	Stable key for editing, selection, drag, resize, and export.
`title`	Primary visible label and accessible event name.
`start`, `end`	JavaScript dates used for layout and interaction.
`allDay`	Places the event in all-day and month-style surfaces.
`resourceId`	Assigns the event to one resource row or column.
`resourceIds`	Assigns the event to several resources when the view supports it.
`categoryId`	Connects the event to category color, count, filtering, and legend.
`categoryIds`	Connects the event to several categories when the app allows it.
`rrule`	Defines repeated occurrences from one source event.
`metadata`	App-only data such as account tier, room, owner, status, or IDs.

Resources can be flat or hierarchical.

const resources: SchedulerResource[] = [
    {
        id: 'metro-depot',
        title: 'Metro Depot',
        children: [
            { id: 'north-crew', title: 'North Crew', eventColor: 'rgb(37 99 235)' },
            { id: 'harbor-crew', title: 'Harbor Crew', eventColor: 'rgb(5 150 105)' }
        ]
    }
];

Use children when the product needs collapsed groups, aggregate badges, adaptive grouping, or parent and leaf selection. Use flat resources when each row or column stands on its own.

Categories are separate from resources. A resource says where the work belongs. A category says what kind of work it is. Keep those concerns separate when designing event data, otherwise resource colors and category colors will fight each other in the UI.

Loading Demo...

#Recurrence

Recurring events stay in the same event collection. Scheduler expands visible instances for the current range, then compares them with ordinary events for placement, selection, drag rules, and overlays.

Loading Demo...

#Resource Data

Resource metadata can appear in rows, headers, aggregate badges, and event cards. Event-resource matching still comes from the event resourceId or resourceIds.

Loading Demo...

#Views

Pick the view before adding feature props. The view decides how users scan time.

User need	Start with	Add when needed
A month planner with deadlines, release windows, or dense all-day work	Month	More popover, spanning events, custom month cells
A daily operating board with exact times and overlaps	Day or Week	Business hours, drag and resize, appointment slots
A weekday staff calendar that hides weekends	Week	Working days, business hours, custom toolbar actions
A compact list of upcoming work	Agenda	Custom date headers, custom agenda event UI
A high-level annual planning surface	Year	Indicators, selected ranges, custom mini-month cells
Long-running work across hours, days, months, or years	Timeline	Virtual scroll, long-content handling, RTL
People, rooms, equipment, teams, or locations with time on the x-axis	Resource Timeline	Hierarchy, aggregate summaries, custom resource rows

Use the same event data and child-part strategy while switching views. This keeps event styling stable while the layout changes.

Loading Demo...

#Grouping

Grouping decides whether resources, dates, or an adaptive selector own the visible lanes.

Grouping	Use it when	Documentation
Resources	A resource owns a full row or column.	Resources
Horizontal resources	Each resource gets a vertical time grid column.	Horizontal Resources
Date grouping	Dates are the first grouping level, then resources.	Date Grouping
Adaptive grouping	Large resource sets need a contained selector on smaller screens.	Adaptive Grouping

Parent resource selection keeps the grouped view. Leaf resource selection focuses one resource. That distinction matters for adaptive grouping, mobile schedules, and products with many resources.

#Compound Anatomy

Scheduler is compound by default. The structure is not an advanced mode; it is how the component keeps behavior stable while the app controls visible UI.

Part	Purpose	Typical child
`Scheduler.Root`	Controlled state, layout, data, timezone, locale, interaction flags, and event handlers.	All other parts
`Scheduler.Header`	Navigation and view controls.	Installed toolbar or custom toolbar
`Scheduler.Content`	Active view area and child outlet declarations.	Event, cell, resource, and scoped outlets
`Scheduler.MorePopover`	Month and all-day overflow UI.	Overflow list
`Scheduler.QuickInfo`	Click-to-edit event details.	Event detail panel
`Scheduler.Popover`	Hover or focus event detail UI.	Event preview panel
`Scheduler.ContextMenu`	Event or date context actions.	Context action menu

Loading Demo...

#Scoped Parts

Declare shared UI at the content level, then scope only the parts that need to change.

<Scheduler.Content>
    <Scheduler.Event>
        <DefaultEventCard />
    </Scheduler.Event>
    <Scheduler.Week>
        <Scheduler.TimeGridEvent>
            <WeekEventCard />
        </Scheduler.TimeGridEvent>
    </Scheduler.Week>
    <Scheduler.ResourceTimeline>
        <Scheduler.TimelineEvent>
            <ResourceTimelineCard />
        </Scheduler.TimelineEvent>
        <Scheduler.ResourceRow>
            <ResourceLaneLabel />
        </Scheduler.ResourceRow>
    </Scheduler.ResourceTimeline>
</Scheduler.Content>

Specific scopes win over broad scopes. If a scope does not declare an outlet, Scheduler falls back to the broader declaration.

Loading Demo...

#Overlays

Overlays are also compound parts. Declare the part in the root, then provide the UI body. The runtime handles anchors, outside-click, Escape behavior, focus return, and scroll dismissal.

Loading Demo...

#Feature Surface

Add features after the view and grouping model are clear.

Feature	Solves	Documentation
Date selection	Creating a range before opening an editor.	Date Selection
Add and edit events	Creating events from selection or programmatic actions.	Add and Edit Events
Appointment slots	Showing bookable time before the user creates an event.	Appointment Slots
Blocked intervals	Preventing create and drop into unavailable periods.	Blocked Intervals
Recurrence	Showing repeated events while keeping source event data stable.	Recurring Events
Multi-event selection	Acting on several events at once.	Multi-Event Selection
Import, export, and print	Moving schedule data in and out of the product.	Import and Export
Locale, calendars, and RTL	Serving international teams without changing stored event values.	Locale and Calendars