Scheduler - Event UI

#Choose a Surface

Pick the smallest event surface that matches the visual change.

• event-shell="none" lets a custom component paint the card background, border, padding, and text. Scheduler keeps geometry, hit targets, focus, selection, drag, resize, and overlay anchors.
• Scheduler.Event is the broad fallback for every event surface that does not declare a scoped outlet.
• Scheduler.TimeGridEvent is for dense timed cards in day, week, work-week, and resource time grids.
• Scheduler.AllDayEvent is for compact all-day row content with spanning and overflow behavior.
• Scheduler.MonthEvent is for month chips or short cards inside date-cell overflow.
• Scheduler.TimelineEvent is for horizontal bars and resource-aware lane content.
• Scheduler.AgendaEvent is for list-style agenda rows with grouped date and resource labels.

Use Style when the event structure is right and only color, border, focus, density, or category treatment needs to change. Replace the event component when the content model changes, such as adding owner, room, status, resource, category, or handoff metadata inside the card.

#Small Override

Start with one scoped event outlet. The event owner still renders the interactive root, then your component draws the visible card.

<Scheduler.Root event-shell="none">
    <Scheduler.Content>
        <Scheduler.Week>
            <Scheduler.TimeGridEvent>
                <WorkCard />
            </Scheduler.TimeGridEvent>
            <Scheduler.AllDayEvent>
                <WorkCard compact />
            </Scheduler.AllDayEvent>
        </Scheduler.Week>
    </Scheduler.Content>
</Scheduler.Root>

The component can use the public event context instead of a long prop list.

<script setup lang="ts">
import { computed } from 'vue';
import { useSchedulerEventContext } from '@primeui/vue-scheduler';

const context = useSchedulerEventContext();
const owner = computed(() => context.value.event.metadata?.owner ?? 'Unassigned');
</script>

<template>
    <article class="work-order-card" :data-state="context.isSelected ? 'selected' : undefined">
        <strong>{{ context.title }}</strong>
        <span>{{ context.timeText }}</span>
        <small>{{ owner }}</small>
    </article>
</template>

#Context

useSchedulerEventContext() exposes the fields that event cards usually need.

Always keep title and time visible in dense timed cards. Short events may have only one or two text lines, so move secondary metadata to a small caption or tooltip instead of making the card taller than the available slot.

#Event Cards

Replace timed and all-day event surfaces with application-owned cards. A reusable event card component can read the public event context and display surface, title, time, owner, accent, and selection state.

#Event Surfaces

• Scheduler.TimeGridEvent: Timed events in day, week, work week, and resource time grids. Keep title and time at the top because overlapping layouts depend on quick scanning.
• Scheduler.AllDayEvent: All-day rows in time-grid views. Use this for spanning all-day events and overflow rows.
• Scheduler.MonthEvent: Month cells. Use this when chips or short cards need segment and continuation metadata.
• Scheduler.TimelineEvent: Timeline and resource timeline lanes. Use this for horizontally scrolling bars and long resource-aware content.
• Scheduler.AgendaEvent: Agenda rows. Use this when rows need grouped date and resource display fields.
• Scheduler.Event: Broad fallback. Use this when one card is acceptable for every surface that does not declare a scoped outlet.

#Advanced Example

Customize each event surface with scoped outlet cards. The Scheduler event owner still handles positioning, drag, resize, selection, focus, and overlay triggers.

#Checklist

• Set event-shell="none" when the custom card owns visible chrome.
• Set agenda-event-shell="none" when replacing Scheduler.AgendaEvent.
• Preserve a readable title and time on every surface, including all-day and agenda rows.
• Keep drag ghost, resize, selected, focused, and overlay-trigger states visible.
• Use available height carefully. Timed events can be shorter than the card content, and month chips share a date cell with other events.
• Keep all-day and spanning events compact so continuation segments do not look like unrelated records.
• Prefer Style and category colors when the default event layout already carries the right content.

#API

Use semantic event outlets, useSchedulerEventContext, event-shell, agenda-event-shell, and event surface fields such as color, textColor, borderColor, categoryId, and metadata. See Slots and Contexts for the full payload list and Data Attributes for state selectors.

#Related Docs

• Event Styling
• More Popover
• Month View
• Timeline View
• Slots and Contexts