Scheduler - Adaptive Grouping

Use adaptive resource selection for dense resource schedules.

#Usage

import { Scheduler } from '@primeui/vue-scheduler';
<Scheduler.Root :resources="resources" view="resourceTimelineWeek" adaptive-mode v-model:selected-resource-id="selectedResourceId">
    <Scheduler.Header />
    <Scheduler.Content>
        <Scheduler.ResourceTimeline>
            <Scheduler.ResourceHeader />
            <Scheduler.ResourceRow />
            <Scheduler.ResourceAggregateBadge />
            <Scheduler.TimelineEvent />
        </Scheduler.ResourceTimeline>
    </Scheduler.Content>
</Scheduler.Root>

Adaptive grouping keeps resource-heavy schedules usable as available space changes. Enable adaptive mode, control the selected resource when needed, and keep the resource row, badge, and event parts visible in the structure.

#Adaptive Selector

Adaptive grouping can switch between parent groups and individual leaf resources inside a contained selector.

Loading Demo...

#Customization

Customize adaptive grouping with resource-scope rows and timeline cards that respond to the active venue area. The selected resource and active view decide which layout rules and resource surfaces are used; the app-owned row only explains the current scope.

Loading Demo...

#API

Key inputs are adaptiveMode, resources, selectedResourceId, @resource-click, @adaptive-auto-select, groupByResource, groupByDate, timeline scale props, and resource outlets.