Scheduler - Date Selection

#Usage

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

<Scheduler.Root selectable :selection-mode="selectionMode" @date-select="onDateSelect" @selection-change="onSelectionChange">
    <!-- Scheduler parts -->
</Scheduler.Root>

Enable selection on the root, choose the mode for the workflow, and handle date-select when a user confirms a date or time span. Add selection-change when the page needs to keep the full selected-date set.

#Selection

selectionMode controls how Scheduler stores date selection. Use single for one date, multiple for a toggleable set of dates, range for drag-created spans, and none when selection should be disabled.

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

const selectionMode: SchedulerSelectionMode = 'range';

For multiple selection, listen to selection-change when you need the full selected-date set. date-select still gives the latest date the user clicked.

#Single

Single selection works well when the user needs to choose one target day before taking an action. The example uses a month schedule to reserve one intake review day and add it back to that day.

#Multiple

Multiple selection is useful for checklists, follow-up days, blackout dates, or any workflow where the page needs a set of non-contiguous days. Keep the selected dates in parent state through selection-change, then save each selected day as its own record. The example starts with an empty month, adds one timed event to every selected day, and clears only the committed selection. Any date can be selected again, including one that already contains an event.

#Range

Range selection gives the page a start and end time. Use it when the selected span should become a hold, booking, blocked interval, or event draft.

#API

Key APIs are selectable, selectionMode, selectAllow, selectConstraint, @date-select, @selection-change, @date-click, and @date-unselect. date-select includes start, end, view, optional resource, and allDay for date-based views.

#Related Docs

• Add and Edit Events
• Events Reference