Scheduler - Business Hours

Mark working windows across week, resource, and timeline views.

#Usage

import { Scheduler } from '@primeui/vue-scheduler';
<Scheduler.Root :business-hours="businessHours" show-business-hours>
    <!-- Scheduler parts -->
</Scheduler.Root>

business-hours defines the availability window and show-business-hours asks Scheduler to surface it wherever the current view supports business-hour styling.

#Business Hour Options

businessHours accepts true, one business-hour range, or an array of ranges.

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

const businessHours: BusinessHours = {
    daysOfWeek: [1, 2, 3, 4, 5],
    startTime: '09:00',
    endTime: '17:00'
};

#Service Window

Business hours mark the operational window while early prep and late handoff items stay visible outside the shaded range.

Loading Demo...

#Production Timeline

Timeline business hours make the open plant window readable across long horizontal ranges.

Loading Demo...

#Resource Coverage

Resources can define their own operating windows. A resource without businessHours inherits the root Scheduler value, while businessHours: false opts that resource out of business-hour shading. Use the view selector to compare the same schedule in Resources Week and Resources Timeline Week.

Loading Demo...

#API

Key inputs are businessHours, showBusinessHours, resource.businessHours, slotMinTime, slotMaxTime, timeline sizing, and resource view props.