Scheduler - 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="timelineWeek" :timeline-slot-duration="60" :timeline-slot-width="96">
    <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>

Timeline views turn time into horizontal lanes. The header-cell, timeline-cell, and timeline-event outlets are the main parts to customize when duration, scrolling, and dense horizontal planning are the focus.

#Day

Use timelineDay for short ranges and precise duration comparisons.

#Timeline Week

timelineWeek uses a horizontal range for multi-day duration and order comparisons.

#Month

timelineMonth shows longer event windows, header tiers, and horizontal scrolling.

#Year

timelineYear stresses virtual scrolling and compact event labels.

#Long Content

Long titles and durations should stay readable instead of overflowing into neighboring lanes.

#RTL

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

#Customization

Customize timeline event bars with application-owned cards. Timeline geometry handles horizontal placement, duration sizing, drag state, and scroll behavior.

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

Switch between 14 and 35 days in this example. Hourly columns stay readable as the timeline scrolls horizontally, and the same window works in RTL.

For planning by resource, see the equipment planning example.

For timeline column sizing, see Slot Width.

#API

Timeline-focused view values are timelineDay, timelineWeek, timelineMonth, and timelineYear. Common props are timelineSlotDuration, timelineSlotWidth, timelineVirtualScroll, and Scheduler.TimelineEvent.

#Related Docs

• Resource Timeline View
• RTL