Scheduler - Style

#Choose a Layer

Styling is safest when each layer owns the right job.

Use Event UI, Cells and Headers, or Resource UI when the markup or content changes. Use Style when the existing structure is right and the visual system needs brand tokens, state colors, density, or category treatment.

#Small Override

Set local tokens on a wrapper and feed them into Scheduler variables. Use light-dark(...) when the app controls color-scheme.

.workbench-scheduler {
    color-scheme: light dark;
    --workbench-surface: light-dark(var(--p-surface-0), var(--p-surface-900));
    --workbench-border: light-dark(var(--p-surface-200), var(--p-surface-700));
    --workbench-accent: light-dark(var(--p-primary-600), var(--p-primary-300));
}

.workbench-scheduler [data-slot='scheduler-root'] {
    --p-scheduler-background: var(--workbench-surface);
    --p-scheduler-border-color: var(--workbench-border);
    --p-scheduler-focus-ring-color: var(--workbench-accent);
}

Data attributes handle state-specific styling without depending on private DOM depth.

.workbench-scheduler [data-slot='scheduler-month-cell'][data-today] {
    box-shadow: inset 0 0 0 2px var(--workbench-accent);
}

.workbench-scheduler [data-slot='scheduler-time-grid-event'][data-selected] {
    outline: 2px solid var(--workbench-accent);
}

.workbench-scheduler [data-slot='scheduler-month-cell'][data-drop-valid='false'] {
    background: color-mix(in srgb, var(--p-red-500) 14%, transparent);
}

#Token Styling

Local tokens fit brand surfaces, light and dark color pairs, event chrome, borders, shadows, focus rings, and view-wide treatments. Set the values once on the scheduler wrapper with light-dark(...), then feed them into Scheduler variables such as --p-scheduler-background, --p-scheduler-header-background, --p-scheduler-border-color, --p-scheduler-weekend-background, --p-scheduler-today-column-background, and --p-scheduler-focus-ring-color.

Use CSS variables when the same decision applies across multiple Scheduler parts. Use public data attributes when the decision belongs to a specific state or object, such as a weekend cell, today's column, a selected event, a room resource, or an invalid drop target.

#Color Modes

Style work must cover both light and dark mode. Light-only mixes such as pale surface tokens can flatten event cards, all-day rows, weekend cells, and category legends in dark mode. Define local tokens for each mode with light-dark(...). Reuse those tokens in Scheduler variables and targeted selectors.

Dark mode should preserve:

• event title and time contrast;
• today and weekend cell distinction;
• all-day event readability;
• focus and selected states;
• category legend counts and selected pills;
• resource accents and invalid drop feedback.

#Data Attribute Styling

Data attributes are stable styling hooks for Scheduler-owned state. Prefer them over descendant selectors that lean on runtime structure.

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

[data-slot='scheduler-month-cell'][data-weekend] {
    background: var(--product-weekend-background);
}

[data-slot='scheduler-month-event'][data-resource-id='service-bay-4'] {
    outline: 2px solid var(--product-bay-ring);
}

[data-slot='scheduler-time-grid-event'][data-selected] {
    outline-color: var(--product-selected-ring);
}

[data-slot='scheduler-month-cell'][data-drop-valid='false'] {
    background: var(--product-invalid-drop-background);
}

Category color belongs in the event data model and the categories collection. Use categoryField to connect events to category colors. Style the legend through [data-slot='scheduler-category-legend-ui'] and [data-slot='scheduler-category-legend-ui-item']. Event surfaces expose resource and event identity as DOM attributes. Category-specific event color is resolved through Scheduler data rather than a category id selector.

Use categoryAutoTextColor when category colors should produce readable event text automatically. Keep explicit event textColor and borderColor on the event when one record needs a different treatment.

#Month Styling

Month view needs enough vertical space to show event cards. Raise height and tune maxEventsVisible so everyday cells show actual event surfaces. On dense days, extra events still route through Scheduler.MorePopover. Keep the popover styled and available, but do not let overflow links become the main visual on desktop.

#Selector Checklist

Keep demo styling source-friendly. Name local variables after product intent. Keep selectors scoped to the wrapper. Avoid private DOM depth. When a visual decision affects every event or cell, use a Scheduler variable. When a visual decision depends on state, combine data-slot with data-today, data-weekend, data-selected, data-resource-id, data-event-id, or data-drop-valid.

#Production Checklist

• Load structural Scheduler CSS before custom theme rules.
• Test light and dark color schemes for event text, all-day rows, overlays, category legend pills, and focus rings.
• Keep invalid drop, selected, focused, today, weekend, disabled, and range states visible.
• Style overflow popovers when month density uses maxEventsVisible and showMorePopover.
• Use categoryField, categoryAutoTextColor, and category records for event-category color instead of hard-coded category selectors.
• Keep selectors anchored to public data-slot, state attributes, resource ids, event ids, and root attributes.
• Replace markup through Event UI, Cells and Headers, or Resource UI when CSS starts fighting the component structure.

#API

Relevant styling APIs include categories, categoryField, categoryAutoTextColor, showCategoryLegend, categoryLegendPosition, event color, event textColor, event borderColor, maxEventsVisible, showMorePopover, event-shell, Scheduler.TimeGridEvent, Scheduler.AllDayEvent, Scheduler.MonthEvent, Scheduler.MonthCellNumber, Scheduler.MonthHeaderCell, Scheduler.MorePopover, and Scheduler.CategoryLegend. See Theming for CSS variable and style-class references.

#Related Docs

• Data Attributes
• Theming
• Event Styling
• Cells and Headers
• Resource UI
• Setup