Scheduler - Slots and Contexts | PrimeUI Pro

#Import

import { Scheduler, useSchedulerAgendaDateHeaderContext, useSchedulerEventContext, useSchedulerHeaderContext, useSchedulerResourceRowContext } from '@primeui/vue-scheduler';

#Child Outlets

Declare child outlets inside Scheduler.Content or inside a scoped view part. Scheduler passes each child the public context fields for that surface.

Outlets are declarations. They do not render where they are written. Scheduler invokes them when the active view needs that surface, then provides the correct public context for that event, cell, row, header, or overlay.

Outlet	Surface	Main payload fields
`Scheduler.Header`	Header area	title, date, view options, navigation callbacks, category controls
`Scheduler.SelectionToolbar`	Selected-event toolbar	selected ids, selected events, clear/select/invert actions
`Scheduler.CategoryLegend`	Category legend	categories, counts, active ids, filtering actions
`Scheduler.Event`	Global event outlet	`event`, `title`, `timeText`, `view`, selected and drag state
`Scheduler.TimeGridEvent`	Day, week, and working-day timed events	`event`, `timeText`, `accentColor`, drag and resize state
`Scheduler.AllDayEvent`	Time-grid all-day rows	`event`, `timeText`, `view`, selected state
`Scheduler.MonthEvent`	Month cells	`event`, `timeText`, `view`, month position metadata
`Scheduler.TimelineEvent`	Timeline lanes	`event`, `timeText`, `resource`, `view`, range metadata
`Scheduler.AgendaEvent`	Agenda rows	`event`, `formattedTime`, `formattedDate`, `resource`
`Scheduler.TimeGridCell`	Timed grid cells	date, time, business-hour state, blocked state, resource
`Scheduler.AllDayCell`	All-day row cells	date, all-day state, selection state, resource
`Scheduler.WorkCell`	Work cells	date, time, business-hour state, blocked state, resource
`Scheduler.TimeGutter`	Time labels	time, hour, minute, major tick state
`Scheduler.DayHeader`	Day headers	date, labels, today/weekend state
`Scheduler.MonthCellNumber`	Month day number	`date`, `label`, `isToday`, `isSelected`, `isDisabled`
`Scheduler.MonthHeaderCell`	Month weekday header	`date`, `label`, `index`
`Scheduler.MonthCell`	Month cell wrapper	date, state flags, events, view
`Scheduler.MonthDayCell`	Month day body	`date`, day state, visible event summary
`Scheduler.MonthMoreLink`	Month overflow link	date, count, events, view
`Scheduler.MiniMonthHeader`	Year-view mini-month header	month, month name, year
`Scheduler.MiniMonthCell`	Year-view mini-month day	`date`, `dayOfMonthLabel`, `hasEvents`, `eventCount`, selection state
`Scheduler.ResourceHeader`	Resource rail header	`label`, `view`, resource count
`Scheduler.ResourceAreaHeader`	Header above the resource rail	label, view, resource count
`Scheduler.ResourceRow`	Timeline resource row	`resource`, `title`, `depth`, `isExpanded`, `toggle`
`Scheduler.ResourceGroup`	Timeline resource group row	`resource`, `title`, `depth`, `isExpanded`, `toggle`
`Scheduler.ResourceAggregateBadge`	Resource aggregate badge	`resource`, `aggregateCount`, visible event summary
`Scheduler.ResourceColumnHeader`	Horizontal resource columns	`resource`, `date`, column metadata
`Scheduler.TimelineCell`	Timeline cell	date range, resource, view
`Scheduler.TimelineHeaderCell`	Timeline header cell	date range, labels, view
`Scheduler.AgendaDateHeader`	Agenda date groups	`date`, `formattedDate`, `dayName`, `eventCountText`
`Scheduler.MorePopover`	Month and timeline overflow	`date`, `events`, close action, overflow event drag props
`Scheduler.QuickInfo`	Quick info overlay	`event`, formatted time, edit and delete actions
`Scheduler.Popover`	Event details overlay	`event`, formatted date, formatted duration, resource
`Scheduler.ContextMenu`	Context menu overlay	target, event or date context, resource context

Scheduler.MorePopover also passes canDragEvent(event) and getEventDragProps(event). Bind the returned props to a custom overflow row when hidden month events should drag back into the Scheduler view.

#Scope Order

More specific scopes win over broader scopes.

Scope level	Example	Use when
Global content	`Scheduler.Content > Scheduler.Event`	One event component covers every view that does not override it
View scope	`Scheduler.Month > Scheduler.MonthEvent`	Month needs a different card from week or timeline
Resource view scope	`Scheduler.ResourceTimeline > Scheduler.TimelineEvent`	Resource timeline needs resource-aware event UI
Date or resource grouped scope	`Scheduler.DateWeek`, `Scheduler.ResourceMonth`	Grouped columns need headers or events that differ from the ungrouped view

Place shared UI at the broadest useful level, then add scoped overrides only where the visual requirements change.

<Scheduler.Content>
    <Scheduler.Event>
        <DefaultEvent />
    </Scheduler.Event>

    <Scheduler.Month>
        <Scheduler.MonthEvent>
            <MonthEvent />
        </Scheduler.MonthEvent>
    </Scheduler.Month>

    <Scheduler.ResourceTimeline>
        <Scheduler.TimelineEvent>
            <TimelineResourceEvent />
        </Scheduler.TimelineEvent>
        <Scheduler.ResourceRow>
            <ResourceRow />
        </Scheduler.ResourceRow>
    </Scheduler.ResourceTimeline>
</Scheduler.Content>

The example above means:

Month uses MonthEvent.
Resource timeline uses TimelineResourceEvent and ResourceRow.
Any other event surface can fall back to DefaultEvent.

#View Scopes

Scope	Applies to
`Scheduler.Month`	`month`
`Scheduler.Week`	`week`
`Scheduler.Day`	`day`
`Scheduler.Timeline`	`timelineDay`, `timelineWeek`, `timelineMonth`, `timelineYear`
`Scheduler.Agenda`	`agenda`
`Scheduler.Year`	`year`
`Scheduler.ResourceDay`	`resourceDay`
`Scheduler.ResourceWeek`	`resourceWeek`
`Scheduler.ResourceMonth`	`resourceMonth`
`Scheduler.ResourceTimeline`	resource timeline views
`Scheduler.DateDay`	`dateDay`
`Scheduler.DateWeek`	`dateWeek`
`Scheduler.DateMonth`	`dateMonth`

#Context Hooks

Use context hooks inside a reusable child component when props are not convenient for the component shape.

Hook	Must be rendered inside	Common fields
`useSchedulerHeaderContext()`	`Scheduler.Header`	title, date, view, navigation callbacks, categories
`useSchedulerEventContext()`	An event outlet	`event`, `title`, `timeText`, `surface`, state flags
`useSchedulerResourceRowContext()`	`Scheduler.ResourceRow`	`resource`, `title`, `depth`, `isExpanded`, `toggle`
`useSchedulerResourceGroupContext()`	`Scheduler.ResourceGroup`	Same shape as resource row with group context
`useSchedulerResourceAggregateBadgeContext()`	`Scheduler.ResourceAggregateBadge`	`resource`, `aggregateCount`
`useSchedulerResourceColumnHeaderContext()`	`Scheduler.ResourceColumnHeader`	`resource`, `date`, column metadata
`useSchedulerAgendaDateHeaderContext()`	`Scheduler.AgendaDateHeader`	`date`, `formattedDate`, `eventCountText`
`useSchedulerSelectionToolbarContext()`	`Scheduler.SelectionToolbar`	selected ids, selected events, clear action
`useSchedulerCategoryLegendContext()`	`Scheduler.CategoryLegend`	categories, counts, active category state
`useSchedulerMorePopoverContext()`	`Scheduler.MorePopover`	`date`, `events`, close action, overflow event drag props
`useSchedulerQuickInfoContext()`	`Scheduler.QuickInfo`	`event`, formatted time, edit and delete actions
`useSchedulerEventPopoverContext()`	`Scheduler.Popover`	`event`, formatted date, duration, resource
`useSchedulerContextMenuContext()`	`Scheduler.ContextMenu`	target, event or date context, resource context

<script setup lang="ts">
import { useSchedulerEventContext } from '@primeui/vue-scheduler';

const context = useSchedulerEventContext();
</script>

<template>
    <article :data-event-id="context.event.id">
        <strong>{{ context.title }}</strong>
        <span>{{ context.timeText }}</span>
    </article>
</template>

Context hooks return a Vue ComputedRef. Templates unwrap it automatically. In script logic, read fields through context.value.

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

const context = useSchedulerEventContext();
const eventId = computed(() => context.value.event.id);

Pass { optional: true } only for shared components that can render outside their Scheduler outlet, such as isolated tests or preview shells. Normal Scheduler UI parts should fail fast when they are mounted under the wrong outlet.

#Props or Context

Both patterns are supported.

Use slot props when the custom UI is local to the page:

<Scheduler.Header v-slot="toolbar">
    <MyToolbar v-bind="toolbar" />
</Scheduler.Header>

Use context hooks when the custom UI is a reusable component:

<Scheduler.Header>
    <MyToolbar />
</Scheduler.Header>

Inside MyToolbar, call the matching context hook. This keeps the authored Scheduler tree short because the visible child component does not need a long prop list at the call site.