Scheduler - Horizontal Resources

Render resources as horizontal columns in timed views.

#Usage

import { Scheduler } from '@primeui/vue-scheduler';
<Scheduler.Root :resources="resources" view="resourceDay" horizontal-resource-column-mode="auto" :horizontal-resource-overflow-threshold="6">
    <Scheduler.Header />
    <Scheduler.Content>
        <Scheduler.ResourceDay>
            <Scheduler.ResourceColumnHeader />
            <Scheduler.AllDayEvent />
            <Scheduler.TimeGridEvent />
        </Scheduler.ResourceDay>
    </Scheduler.Content>
</Scheduler.Root>

Horizontal resources place each resource across the top of a day or week grid. Configure the horizontal resource props on the root, then render column headers and the usual timed or all-day event parts inside content.

#Resource Columns

Horizontal resource grouping renders resource columns inside a timed grid. Each person, room, or asset owns a vertical schedule.

Loading Demo...

#Customization

Customize horizontal resource headers so dense room schedules stay scannable. The academy header adds role, seat capacity, and load bars inside each resource column while each resource id still drives column ownership and overflow behavior.

Loading Demo...

#API

Key inputs are groupByResource, resources, resourceAreaWidth, horizontalResourceColumnMode, horizontalResourceColumnWidth, horizontalResourceMinColumnWidth, horizontalResourceDayMinWidth, Scheduler.ResourceColumnHeader, and view-specific event outlets.