Scheduler - Slots and Contexts

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

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.

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

#Context Hooks

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

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

#Related Docs

• Scoped Outlets
• Event UI
• Resource UI

#Timeline Header Child Props

The normal Scheduler.TimelineHeaderCell declaration injects props into its single replacement child. It does not call its declaration slot with a scoped payload. Import SchedulerTimelineHeaderCellPayload to type that child:

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

const props = defineProps<Partial<SchedulerTimelineHeaderCellPayload>>();
</script>

<template>
    <span>{{ props.label }}</span>
</template>

Declare it inside <Scheduler.TimelineHeaderCell><PlanningHeader /></Scheduler.TimelineHeaderCell>. Optional props keep that declaration valid because runtime injection happens after Vue checks the child invocation. The payload contains date, cell, label, width, startDate and endDate; it has no view field. The low-level Scheduler.Timeline.HeaderCell slot receives the same typed payload. Vue can type an explicitly declared child contract, but cannot infer arbitrary injected props on another child automatically.

#Full-Cell Timeline Headers

Custom TimelineHeaderCell content automatically owns the full available cell width and height. The cell keeps its width, borders and date alignment; your content supplies padding and alignment. There is no layout prop or mode.

Custom content renders outside the sticky label wrapper and receives no label max-width, translation or sticky inset. Built-in labels keep their existing sticky behavior. Existing custom headers may need padding or alignment adjustments after this patch. Declarations still follow the same view-scope precedence.

See the equipment planning example for a full-cell header with hourly multi-week planning.