Scheduler - Working Days

Limit week-based schedules to the days your product actually uses.

#Usage

import { Scheduler } from '@primeui/vue-scheduler';
<Scheduler.Root view="week" :days-of-week="[1, 2, 3, 4, 5]">
    <Scheduler.Header />
    <Scheduler.Content>
        <Scheduler.Week>
            <Scheduler.DayHeader />
            <Scheduler.AllDayEvent />
            <Scheduler.TimeGridEvent />
        </Scheduler.Week>
    </Scheduler.Content>
</Scheduler.Root>

daysOfWeek controls which weekday columns are visible in week-based layouts. Use it when the schedule should open directly on operating days instead of showing a separate view for the same grid.

#Weekday Range

A Monday-to-Friday schedule keeps week navigation, drag, resize, all-day rows, and timed event placement while removing weekend columns.

Loading Demo...

#Regional Week

Some teams operate on a different workweek. daysOfWeek can show Sunday-to-Thursday, Tuesday-to-Saturday, or any other ordered set without introducing another view.

Loading Demo...

#Customization

Working-day schedules use the same Scheduler.Week outlets as a full week. Customize toolbar actions, all-day rows, timed event cards, and headers without branching around a different view type.

Loading Demo...

#Options

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

const weekdays: NonNullable<SchedulerProps['daysOfWeek']> = [1, 2, 3, 4, 5];
const sundayToThursday: NonNullable<SchedulerProps['daysOfWeek']> = [0, 1, 2, 3, 4];
const tuesdayToSaturday: NonNullable<SchedulerProps['daysOfWeek']> = [2, 3, 4, 5, 6];

Weekday numbers follow JavaScript Date.getDay(): Sunday is 0, Monday is 1, and Saturday is 6.

#API

Working-day schedules use daysOfWeek, firstDayOfWeek when the visible week should start on a specific day, view="week", week-compatible resource or timeline views, Scheduler.Week, Scheduler.TimeGridEvent, and Scheduler.AllDayEvent.