Scheduler - Day View

#Usage

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

<Scheduler.Root view="day">
    <Scheduler.Header />
    <Scheduler.Content>
        <Scheduler.Day>
            <Scheduler.DayHeader />
            <Scheduler.TimeGutter />
            <Scheduler.AllDayEvent />
            <Scheduler.TimeGridEvent />
        </Scheduler.Day>
    </Scheduler.Content>
</Scheduler.Root>

Day view narrows the timed grid to one date and works well for precise selection, dense overlap review, and add or edit flows. Selection and event handlers stay on the root, while the content outlets render the grid surfaces.

#Single-Day Focus

Day view focuses dense overlaps, exact times, and add-edit flows in one column.

#Dense Overlaps

Stacked timed events show overlap and focus behavior in one day.

#Selection

Controlled selection state lets selected day ranges drive app-owned actions such as opening a booking dialog or enabling bulk actions.

#Add and Edit

Selection and event interactions can feed an app-owned add or edit workflow.

#Customization

Customize day events with an application-owned timed card. The day column still handles layout, overlap math, selection state, and keyboard behavior.

#API

Day-focused props include view="day", slotMinTime, slotMaxTime, slotDuration, snapDuration, selectable, editable, eventStartEditable, eventDurationEditable, @date-select, @event-click, and time-grid event outlets.

#Related Docs

• Add and Edit Events
• Date Selection