Scheduler - Date Grouping

#Usage

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

<Scheduler.Root :resources="resources" view="dateWeek" group-by-date group-by-resource>
    <Scheduler.Header />
    <Scheduler.Content>
        <Scheduler.DateWeek>
            <Scheduler.DayHeader />
            <Scheduler.ResourceColumnHeader />
            <Scheduler.AllDayCell />
            <Scheduler.AllDayEvent />
            <Scheduler.TimeGutter />
            <Scheduler.TimeGridCell />
            <Scheduler.WorkCell />
            <Scheduler.TimeGridEvent />
        </Scheduler.DateWeek>
    </Scheduler.Content>
</Scheduler.Root>

Date grouping nests resource columns under date headers. Use the date-grouped view, enable date and resource grouping props, and customize the date header, resource header, cells, and resource-aware event parts directly.

#Date-First Columns

Date grouping renders each date first, then places resource columns inside the day.

#Customization

Customize date-grouped headers and month cells. Scheduler still handles date grouping, range ownership, and event placement.

#API

Key inputs are groupByDate, resources, event resourceId or resourceIds, horizontalResourceMinColumnWidth, horizontalResourceDayMinWidth, resource column headers, and date-scoped event outlets.

#Related Docs

• Resources
• Month View