Scheduler - Appointment Slots

#Usage

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

<Scheduler.Root :appointment-slots="appointmentSlots" @slot-click="onSlotClick" @slot-book="onSlotBook" @slot-cancel="onSlotCancel">
    <!-- Scheduler parts -->
</Scheduler.Root>

Appointment slots are a root-level availability feature. Bind the slot configuration on Scheduler.Root, then handle slot click, booking, and cancellation events from the same surface.

#Slot Options

appointmentSlots uses the Scheduler appointment-slot options object.

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

const appointmentSlots: AppointmentSlotsOptions = {
    enabled: true,
    displayMode: 'overlay',
    showAvailability: true,
    showCapacity: true,
    slots: [
        {
            id: 'slot-1',
            start: new Date(2026, 5, 10, 9),
            end: new Date(2026, 5, 10, 9, 30),
            status: 'available',
            capacity: 2
        }
    ]
};

#Overlay

Overlay slot presentation keeps the grid readable while still giving users a direct booking path. Click an open slot to review capacity, resource ownership, service details, and confirmation notes before creating the appointment.

#Grid

Use inline slot availability when capacity needs to be visible before the user opens an overlay.

#Customization

Customize appointment availability by pairing slot indicators with product status copy. Slot hit targets, selection, event layout, and keyboard behavior stay aligned with the time grid.

#View Support

Slot tracking applies to timed views: day, week, work week, resource day, resource week, resource work week, date day, and date week. Resource-scoped views match slots by resourceId. Unscoped views use slots for the visible day range.

For persistence, treat the slot source of truth as application state. Replace appointmentSlots.slots after a booking is accepted. Keep event creation and cancellation in the same transaction so bookedCount cannot drift from the events shown in the grid. Blocked, tentative, and fully booked slots should still render when users need to understand why a time is unavailable.

#API

Key inputs are appointmentSlots.enabled, appointmentSlots.slots, appointmentSlots.generateSlots, appointmentSlots.displayMode, appointmentSlots.showAvailability, appointmentSlots.showCapacity, @slot-click, @slot-book, and @slot-cancel.

#Related Docs

• Business Hours
• Day View