Scheduler - Event Data

Model event fields, resource ids, categories, colors, and metadata.

#Usage

import { Scheduler } from '@primeui/vue-scheduler';
<Scheduler.Root :events="events">
    <!-- Scheduler parts -->
</Scheduler.Root>

Pass event records to Scheduler.Root. Scheduler reads the event dates for placement, the id for stable updates, and optional resource or category fields when those features are enabled.

#Event Object

An event is a plain object. Keep the scheduling fields at the top level so Scheduler can place, move, resize, and identify the event. Put application-specific data in metadata.

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

const events: SchedulerEvent[] = [
    {
        id: 'copy-review',
        title: 'Copy Review',
        start: new Date(2026, 5, 8, 10, 0),
        end: new Date(2026, 5, 8, 11, 0),
        resourceId: 'editorial-desk',
        categoryId: 'review',
        color: 'rgb(5 150 105)',
        metadata: {
            owner: 'Editorial',
            priority: 'high'
        }
    }
];
FieldUse
idRequired stable identity. Drag, resize, selection, updates, and app persistence depend on it.
titleRequired label used by the default event UI and overlays.
startRequired start date as a Date or date string.
end / durationOptional end date or duration. Omit both only when a default one-hour duration is acceptable.
allDayPlaces the event in all-day and month-style surfaces.
resourceId / resourceIdsConnects the event to one or more resources when a resource view is used.
categoryId / categoryIdsConnects the event to category metadata and the category legend.
color, textColor, borderColor, classNameAdjusts the event surface without changing the event layout.
timezoneMarks the source timezone for timezone-aware display.
metadataApp-owned metadata. It stays on the event object and is passed through contexts and emitted payloads without being interpreted.

#Basic Data

The basic event data example keeps the records inline so the core shape is visible: identity, title, start/end dates, color, resource id, category id, and metadata.owner.

Loading Demo...

#Resource Binding

Resource views read resourceId for a single resource or resourceIds when one event belongs to more than one resource. The matching resource records are passed separately through resources.

<Scheduler.Root :events="events" :resources="resources">
    <!-- Resource scheduler parts -->
</Scheduler.Root>
import type { SchedulerEvent, SchedulerResource } from '@primeui/vue-scheduler';

const resources: SchedulerResource[] = [{ id: 'studio-a', title: 'Studio A' }];

const events: SchedulerEvent[] = [
    {
        id: 'orientation',
        title: 'Orientation',
        start,
        end,
        resourceId: 'studio-a'
    }
];
Loading Demo...

#Categories

Categories are optional metadata. Use categories to describe each category and categoryId on each event to connect it. Include Scheduler.CategoryLegend only when the page needs a visible category control or explanation.

<Scheduler.Root :events="events" :categories="categories" category-field="categoryId" show-category-legend>
    <Scheduler.CategoryLegend />
    <!-- Scheduler parts -->
</Scheduler.Root>
import type { EventCategory } from '@primeui/vue-scheduler';

const categories: EventCategory[] = [{ id: 'review', name: 'Review', color: 'rgb(147 51 234)' }];
Loading Demo...

#API

Core event fields are id, title, start, end, duration, allDay, resourceId, resourceIds, categoryId, categoryIds, color, textColor, borderColor, className, timezone, and metadata. Recurring events add rrule, exdate, rdate, and recurrence exception fields.