Scheduler - Scoped Outlets | PrimeUI Pro

#Choose a Scope

Outlet resolution moves from broad declarations to specific declarations. Use the broadest fallback that gives users a consistent surface, then override only the views or grouped layouts that need different content.

Scope	Use
Global fallback	`Scheduler.Content > Scheduler.Event` covers every event surface that does not declare a more specific outlet.
View scope	`Scheduler.Month > Scheduler.MonthEvent` or `Scheduler.Week > Scheduler.TimeGridEvent` changes one view family.
Resource scope	`Scheduler.ResourceTimeline > Scheduler.TimelineEvent` or `Scheduler.ResourceTimeline > Scheduler.ResourceRow` changes resource timeline surfaces.
Date scope	`Scheduler.DateWeek` or `Scheduler.DateMonth` changes date-grouped layouts.
Resource column scope	`Scheduler.ResourceWeek > Scheduler.ResourceColumnHeader` changes horizontal resource headers.

Use Style when the default surface only needs state color, size, or token changes. Use Event UI when the main question is how a card should be built. Use scoped outlets when the same Scheduler instance needs different UI per view or grouping mode.

#Small Override

A global fallback plus one scoped month override is the smallest useful precedence pattern.

<Scheduler.Content>
    <Scheduler.Event>
        <DefaultEventCard />
    </Scheduler.Event>

    <Scheduler.Month>
        <Scheduler.MonthEvent>
            <CompactMonthEvent />
        </Scheduler.MonthEvent>
    </Scheduler.Month>
</Scheduler.Content>

With that structure, month uses CompactMonthEvent. Week, day, timeline, and agenda can still use DefaultEventCard until they declare their own scoped outlet.

#Precedence

More specific declarations win over broader declarations. Scheduler does not merge two components for the same event surface.

Resource scopes beat view and global scopes, such as ResourceTimeline declaring its own TimelineEvent.
Date scopes beat view and global scopes, such as DateWeek declaring its own resource column header.
View scopes beat global scopes, such as Month declaring its own MonthEvent.
Global scopes beat the built-in fallback, such as Content declaring Event.

Combine a broad fallback with a few overrides when the product has a default card and one or two special views. Declare a surface only once within the scope that should win. Duplicate declarations can make later maintainers think both components render, but only the resolved outlet is used.

#Views

One Scheduler instance can use a global event fallback plus visibly different month, week, timeline, and agenda scoped outlets.

Loading Demo...

One Scheduler instance can use a compact month card, a detailed week card, a resource-aware timeline card, and a custom agenda row. No branching around the entire scheduler is needed.

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

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

    <Scheduler.ResourceTimeline>
        <Scheduler.TimelineEvent>
            <ResourceTimelineEvent />
        </Scheduler.TimelineEvent>
    </Scheduler.ResourceTimeline>
</Scheduler.Content>

#Advanced Example

Customize only the active resource scope with scoped outlets. The global fallback keeps the rest of the Scheduler consistent.

Loading Demo...

#Scoped Timeline Headers

A resolved custom TimelineHeaderCell owns the full cell width and height, including inside Timeline and ResourceTimeline scopes. Scoped resolution and fallback precedence stay the same. Custom content supplies its own padding and alignment; it no longer inherits sticky-label sizing or motion. Uncustomized cells keep their built-in sticky labels. No new prop or layout mode is needed. See full-cell timeline headers and the planning example.

#Troubleshooting

Problem	Check
My override is not used.	Confirm the active view matches the scope. A `Scheduler.MonthEvent` inside `Scheduler.Month` will not render in week or timeline.
The fallback still appears.	A more specific outlet may be missing for the active view, so Scheduler correctly falls back to `Scheduler.Event`.
I see a card inside another card.	Set `event-shell="none"` when the child component paints the event chrome. Use `agenda-event-shell="none"` for agenda rows.
Resource UI ignores my event override.	Resource timeline events need a `Scheduler.ResourceTimeline > Scheduler.TimelineEvent` override when the resource view needs different event UI.
Date-grouped columns share the wrong header.	Move the header outlet into the date-grouped scope that owns the active view.

#API

Public scope parts include Scheduler.Month, Scheduler.Week, Scheduler.Day, Scheduler.Timeline, Scheduler.Agenda, Scheduler.Year, Scheduler.ResourceDay, Scheduler.ResourceWeek, Scheduler.ResourceMonth, Scheduler.ResourceTimeline, Scheduler.DateDay, Scheduler.DateWeek, and Scheduler.DateMonth. Payload fields are listed in Slots and Contexts.