Scheduler - Toolbar | PrimeUI Pro

#Choose a Surface

Use toolbar customization for the application shell above the active view. It is the right surface for navigation, current title, view switching, density controls, status labels, filters, export actions, and product commands. It is not the right surface for selected-event batch actions because Scheduler.SelectionToolbar already receives selected ids, selected events, and selection commands.

Part	Use
`Scheduler.Header`	Owns the header region and passes date, view, navigation, view options, categories, and callbacks.
`Scheduler.Navigation`	Renders previous, today, and next actions while keeping Scheduler navigation behavior.
`Scheduler.Title`	Displays the active range label from Scheduler state.
`Scheduler.ViewSelector`	Changes the controlled view through the Scheduler context.
`Scheduler.SelectionToolbar`	Adds selection actions near the scheduler without mixing them into the normal header.

Hide the view selector when the page has one valid view. Show a text label or compact status instead of a disabled segmented control. When multiple views are available, keep the active view visually stronger than inactive buttons and make the control wrap cleanly on narrow widths.

#Small Override

The smallest composed toolbar keeps Scheduler controls in place and adds one application action.

<Scheduler.Root :date="date" :view="view" @date-change="onDateChange" @view-change="onViewChange">
    <Scheduler.Header>
        <div class="scheduler-toolbar-row">
            <Scheduler.Navigation />
            <Scheduler.Title />
            <Scheduler.ViewSelector />
            <button type="button" class="app-action" @click="openCreateEvent">
                New booking
            </button>
        </div>
    </Scheduler.Header>
    <Scheduler.Content />
</Scheduler.Root>

Keep custom buttons outside Scheduler focusable event roots. A toolbar button can trigger application state, but navigation and view changes should continue through Scheduler.Navigation, Scheduler.ViewSelector, or the controlled date and view events.

#Controlled State

Toolbar composition usually sits next to controlled date and view state.

API	Use
`date`	Pass the current visible date or range anchor.
`view`	Pass the active Scheduler view.
`views`	Limit which view options appear in `Scheduler.ViewSelector`.
`@date-change`	Update app state after Scheduler navigation.
`@view-change`	Update app state after the user chooses a view.

const date = ref(new Date());
const view = ref<'week' | 'month'>('week');

function onDateChange(nextDate: Date) {
    date.value = nextDate;
}

function onViewChange(payload: { view: 'week' | 'month' }) {
    view.value = payload.view;
}

Build a header from Scheduler.Navigation, Scheduler.Title, and Scheduler.ViewSelector, then add application status in the same toolbar.

Loading Demo...

#Advanced Example

Customize the header with product actions next to Scheduler navigation, title, and view controls. Scheduler still handles the navigation callbacks and active view state.

Loading Demo...

#Layout Checklist

Put row padding inside the toolbar band so full-width borders align with the scheduler frame.
Keep borders on the header band, not only around inner control groups.
Give the active view enough contrast in light and dark mode.
Let navigation, title, status, and actions wrap into separate rows before controls become crowded.
Keep icon-only actions square and label unfamiliar actions with accessible names.
Use Scheduler.SelectionToolbar for selected-event commands instead of overloading the normal header.

#API

Header-related APIs include Scheduler.Header, Scheduler.Navigation, Scheduler.Title, Scheduler.ViewSelector, Scheduler.SelectionToolbar, date, view, views, @date-change, and @view-change. Header payload fields are listed in Slots and Contexts.