Scheduler - Resource Timeline View

#Usage

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

const date = ref(new Date());

<Scheduler.Root v-model:date="date" view="resourceTimelineWeek" :resources="resources" :resource-area-width="240">
    <Scheduler.Header>
        <Scheduler.Navigation v-slot="{ prev, today, next }">
            <button type="button" @click="prev">Previous</button>
            <button type="button" @click="today">Today</button>
            <button type="button" @click="next">Next</button>
        </Scheduler.Navigation>
        <Scheduler.Title />
    </Scheduler.Header>
    <Scheduler.Content />
</Scheduler.Root>

Resource timeline pairs a resource rail with horizontal time. Bind resources on the root. Declare row, header, aggregate, column-header and timeline-event outlets when replacing their default content.

#Resource Timeline

A hierarchical resource timeline combines PrimeOne resource rows with timeline event cards.

#Hierarchy

Hierarchical resource timelines include parent groups, child rows, and expansion state.

#Aggregate Summaries

Aggregated resource information helps dense rows communicate hidden work.

#Horizontal Scroll

Horizontal scrolling keeps column widths, sticky areas, and event positioning visible in Resource Timeline view.

#Slot Width

timelineSlotWidth sets the width of each innermost timeline slot, independently of the planning window and slot duration. The minimum is 20px. Omitting the value restores the 112px default. Header tiers, event positions, and the scroll track use the same slot geometry.

The preset timeline event UI hides the time first as a card narrows and truncates the title with ellipsis. If the card has too little width or height, it also hides the title. The full accessible label remains available. This example enables eventPopover and composes the preset popover UI to show the full title and time on hover. Custom event templates control their own layout.

--p-scheduler-timeline-event-min-width sets a separate event card minimum, which defaults to 30px in the shipped theme for day and month timelines. Weekly timed cards keep their exact duration width, including widths below 30px. The card minimum does not change slot or scroll track widths.

Default header labels hide below 40px while keeping their accessible names and hover titles. Wider labels truncate within their cells. For custom hour labels in narrow slots, use TimelineHeaderCell.

#RTL

Resource Timeline supports right-to-left direction with the same event data and interaction model.

#Customization

Customize resource timeline rows with domain metadata. Resource ids drive lane geometry, hierarchy expansion, scroll alignment, and event placement.

#Custom Planning Windows

Set numberOfDays to a positive integer on timelineWeek or resourceTimelineWeek for a consecutive calendar-day window anchored to the selected date. Previous and next advance by that count. Today and gotoDate establish a new anchor. Changing or removing the count updates the view without remounting; with no valid count, normal seven-day weeks use firstDayOfWeek.

Weekday and visible-hour filters hide parts of the calendar window; they do not extend it to reach a quota of working days. The title describes the visible span. Zero, negative, fractional and non-finite counts use the default week behavior.

Use this recipe for hourly multi-week planning. Month timelines keep whole-day columns and whole-day event positioning; changing an hourly label does not change month geometry. Restoring numberOfDays also restores its anchoring and navigation step for applications where the value was previously ignored.

#API

Resource timeline view values include resourceTimelineDay, resourceTimelineWeek, and resourceTimelineMonth. Common props are resources, resourceAreaWidth, resourcesExpandable, resourcesInitiallyExpanded, showAggregatedEvents, rowAutoHeight, and timeline scale props.

#Related Docs

• Resource UI
• Resources