Scheduler - Event Styling

Control event colors, text colors, category colors, and custom event cards.

#Usage

import { Scheduler } from '@primeui/vue-scheduler';
<Scheduler.Root :events="events" :categories="categories" :category-field="categoryField" :event-shell="eventShell" show-category-legend category-filterable>
    <Scheduler.CategoryLegend />
    <!-- Scheduler parts -->
</Scheduler.Root>

Event styling is configured through event data, category metadata, and the event shell setting. Use the category legend when users need to see or filter the styling system.

#Styling Options

categoryField selects the event field used for category color lookup. eventShell supports default and none.

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

const categoryField: NonNullable<SchedulerProps['categoryField']> = 'categoryId';
const eventShell: NonNullable<SchedulerProps['eventShell']> = 'default';

Use default when Scheduler should render the built-in event surface. Use none when an event outlet owns the visual shell.

#Color Inputs

Event color, category color, resource color, and explicit text color all affect the visible event surface.

Loading Demo...

#Precedence

Compare event, category, and resource colors to verify styling precedence.

Loading Demo...

#Customization

Customize event styling with a full application-owned event card. The event context still exposes color resolution, hit targets, and interaction behavior.

Loading Demo...

#API

Relevant fields and props include color, textColor, borderColor, categoryId, categoryIds, categories, categoryField, categoryAutoTextColor, event-shell, and semantic event outlets.