Scheduler - Data Attributes | PrimeUI Pro

#Import

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

#Data Attributes

Use data attributes for styling, smoke tests, and visual QA. Prefer them over descendant selectors that depend on private DOM nesting.

Runtime attributes are emitted by Scheduler itself. Attributes with a -ui suffix are emitted by installed UI parts from the PrimeOne and Tailwind layers. If a copied UI part is rewritten, keep the data-slot when tests or app styles depend on it.

#Slot Attributes

`data-slot` value	Surface
`scheduler-root`	Root element
`scheduler-header`	Header child area
`scheduler-content`	Active view body
`scheduler-time-grid-cell`	Day and week time slots
`scheduler-time-grid-column`	Day, week, and resource time-grid columns
`scheduler-all-day-row`	Time-grid all-day row
`scheduler-all-day-cell`	Time-grid all-day cells
`scheduler-time-grid-event`	Timed event surface
`scheduler-all-day-event`	All-day event surface
`scheduler-month-cell`	Month grid day cell
`scheduler-month-event`	Month event surface
`scheduler-timeline-cell`	Timeline time cell
`scheduler-timeline-lane`	Timeline lane for one resource or row
`scheduler-timeline-event`	Timeline event surface
`scheduler-resource-area`	Resource timeline rail
`scheduler-resource-area-header`	Resource rail header
`scheduler-resource-list`	Resource tree or list
`scheduler-resource`	Resource row label
`scheduler-agenda`	Agenda view root
`scheduler-agenda-date-header-ui`	Installed agenda date header UI
`scheduler-agenda-event`	Agenda event row
`scheduler-month-header-cell-ui`	Installed month header cell UI
`scheduler-month-cell-number-ui`	Installed month cell number UI
`scheduler-more-popover`	More popover overlay
`scheduler-quick-info`	Quick info overlay
`scheduler-event-popover`	Event popover overlay
`scheduler-context-menu`	Context menu overlay
`scheduler-selection-toolbar`	Event selection toolbar
`scheduler-selection-toolbar-ui`	Installed selection toolbar UI
`scheduler-category-legend`	Category legend structural wrapper
`scheduler-category-legend-ui`	Installed category legend UI
`scheduler-category-legend-ui-item`	Installed category legend item

#State Attributes

Attribute	Appears on	Meaning
`data-view`	Root, header, content, event surfaces	Active Scheduler view
`data-shell`	Event surfaces	`default` or `none` event-shell ownership
`data-selected`	Events, cells, legend items	The item is selected
`data-focused`	Events and focusable cells	Keyboard focus is on the item
`data-disabled`	Root, content, cells, controls	The item is disabled
`data-dragging`	Event surfaces	An event is being dragged
`data-resizing`	Event surfaces	An event is being resized
`data-today`	Month cells, day cells, headers	The item represents today
`data-weekend`	Date cells	The item is a weekend day
`data-other-month`	Month cell number UI	The date belongs to an adjacent month
`data-resource-id`	Resource rows, cells, events, overlays	The surface is bound to a resource
`data-event-id`	Event surfaces	The surface is bound to an event
`data-event-count`	Headers, resource rows, legend items	Count of events represented by the surface
`data-depth`	Resource rows and groups	Resource hierarchy depth
`data-date`	Date cells	ISO-like date key for date-targeted styling
`data-time`	Time-grid cells	Time slot label such as `09:30`
`data-start-date`	Timeline cells	Numeric start timestamp for the slot
`data-end-date`	Timeline cells	Numeric end timestamp for the slot
`data-col-index`	Timeline cells	Column index in the rendered timeline
`data-drop-valid`	Drag previews	`false` marks an invalid drop target
`data-position`	Overlays	Current overlay placement
`data-selection-mode`	Selection toolbar UI	Current event-selection mode
`data-selection-active`	Selection toolbar UI	The toolbar has an active selected set
`data-filterable`	Category legend UI	Category legend items can toggle filters
`data-filtering`	Category legend UI	A category filter is active
`data-hovered`	Category legend UI items	The category item is hovered

#Styling

Attach selectors to public parts and state attributes.

[data-slot='scheduler-month-cell'][data-today] {
    outline: 2px solid var(--p-primary-color);
}

[data-slot='scheduler-time-grid-event'][data-selected] {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--p-primary-color) 55%, transparent);
}

[data-slot='scheduler-timeline-event'][data-resource-id='service-bay-4'] {
    border-inline-start-color: var(--p-purple-500);
}

[data-slot='scheduler-more-popover'][data-view='month'] {
    max-width: min(28rem, 92vw);
}

#Testing

Use data-slot for stable queries and combine it with a state attribute only when the assertion is about that state.

expect(page.locator('[data-slot="scheduler-month-cell"][data-today]')).toBeVisible();
expect(page.locator('[data-slot="scheduler-quick-info"]')).toHaveCount(1);

Prefer user-facing assertions when behavior matters. Use data attributes to find stable Scheduler surfaces, then assert visible text, ARIA state, selected state, or drag validity.