Scheduler - Week View

#Usage

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

<Scheduler.Root view="week" :slot-duration="30">
    <Scheduler.Header />
    <Scheduler.Content>
        <Scheduler.Week>
            <Scheduler.DayHeader />
            <Scheduler.TimeGutter />
            <Scheduler.AllDayEvent />
            <Scheduler.TimeGridEvent />
        </Scheduler.Week>
    </Scheduler.Content>
</Scheduler.Root>

Week view combines an all-day row with a vertical time grid. The day header, time gutter, all-day event, and timed event parts are the main replacement points for week scheduling surfaces.

#Basic View

A controlled week combines the PrimeOne toolbar, timed event UI, all-day event UI, and the active time range.

#All-Day Row

All-day placement sits above the timed grid so spanning events and timed events can be compared.

#Overlaps

Overlapping timed events remain readable inside one column.

#Business Hours

Business-hour ranges make working time visible in Week view when showBusinessHours is enabled. Event data stays unchanged.

#Horizontal Scroll

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

#Customization

Customize week event cards with application-owned markup. Week layout supplies all-day placement, timed overlap math, drag, resize, selection, and overlay anchors.

#API

Week-focused props include view="week", slotMinTime, slotMaxTime, slotDuration, snapDuration, businessHours, showBusinessHours, event-shell, Scheduler.TimeGridEvent, and Scheduler.AllDayEvent.

#Related Docs

• Drag and Drop
• Business Hours