Scheduler - Theming

#Styles

Scheduler uses a structural stylesheet plus an optional theme file. Load the base stylesheet once so the views, scroll containers, overlays, drag states, print mode, and responsive behavior have their layout rules.

import '@primeui/scheduler-style/style.css';

Use the PrimeOne theme when Scheduler should inherit PrimeUI design tokens. The theme maps --p-scheduler-* variables to the active PrimeUI preset and uses light-dark() so the same file works in light and dark mode.

import '@primeui/scheduler-style/themes/primeone.css';

PrimeOne UI parts are separate from the runtime theme. Import their component stylesheet only when the app uses the downloaded PrimeOne toolbar, event cards, resource rows, overlays, category legend, or selection toolbar.

import '@/components/primeui/scheduler/assets/style/components.css';

Tailwind UI parts do not use this component stylesheet. They rely on the app's Tailwind setup plus the same Scheduler structural stylesheet and CSS variables.

#Custom Theme

Build a custom theme by loading the base stylesheet and then defining Scheduler variables in an app stylesheet.

import '@primeui/scheduler-style/style.css';
import '@/app/styles/scheduler/theme.css';

:root {
    --p-scheduler-background: var(--app-surface);
    --p-scheduler-border-color: var(--app-border);
    --p-scheduler-event-background: color-mix(in srgb, var(--app-accent) 12%, var(--app-surface));
    --p-scheduler-event-border-accent: var(--app-accent);
    --p-scheduler-focus-ring-color: var(--app-focus);
}

#Color Modes

Use light-dark() inside theme variables when the project controls color-scheme, or define light and dark values under the same root scope your app uses for color mode.

:root {
    color-scheme: light dark;
    --p-scheduler-background: light-dark(var(--app-surface-0), var(--app-surface-900));
    --p-scheduler-event-background: light-dark(var(--app-accent-50), var(--app-accent-950));
    --p-scheduler-event-color: light-dark(var(--app-text-900), var(--app-text-0));
}

Check event cards, all-day rows, today cells, weekend cells, overlays, category legend pills, focus rings, and invalid drop states in both modes. A token set that only changes the page background often leaves event and overlay text with the wrong contrast.

#CSS Variables

All runtime theme variables use the --p-scheduler-* prefix.

Use the shipped PrimeOne theme file as the complete variable source when building a full custom theme.

#Selector Strategy

Use variables for decisions that affect a whole surface, such as event chrome, grid borders, typography, focus, or overlay color. Use public data attributes when the style depends on state or identity.

[data-slot='scheduler-month-cell'][data-today] {
    box-shadow: inset 0 0 0 2px var(--p-scheduler-focus-ring-color);
}

[data-slot='scheduler-time-grid-event'][data-resource-id='dispatch'] {
    --p-scheduler-event-border-accent: var(--app-dispatch-color);
}

Keep selectors anchored to data-slot, data-view, data-resource-id, data-event-id, and state attributes. Avoid relying on private DOM depth. See Data Attributes for the stable selector list.

#Style Classes

The generated style class reference below comes from Scheduler metadata. Use classes for broad shell integration and use data attributes for state-specific selectors.

#Related Docs

• Style
• Data Attributes
• Setup
• API