Customization

Event Scheduler can be customized at several levels. Start with labels, formatters, CSS variables, and classes when you only need to change text or visual styling. Use eventScheduler.customization when a product needs RevoGrid-style render hooks for generated scheduler headers, cells, event sections, or create previews.

The scheduler still owns projection, selection, drag/drop, resize, keyboard behavior, permission checks, conflicts, and mutation events. Custom render hooks should describe what a section looks like, while the scheduler continues to manage how that section behaves.

Customization layers

Layer	Use it for
labels	Rename built-in UI text such as resource labels, editor fields, action labels, and validation messages.
Formatters	Change displayed text without replacing markup, for example resource labels, time labels, day headers, hover labels, create-range labels, and tooltips.
Direct properties hooks	Add classes, inline styles, attributes, data fields, CSS variables, status colors, or simple renderers to scheduler surfaces.
customization	Replace or annotate scheduler headers, cells, event sub-sections, resize handles, badges, and create previews.
Conflict and state hooks	Customize conflict badges/tooltips and empty/loading/error overlay states.
CSS variables/classes	Theme the scheduler and target built-in state classes such as selected, conflict, locked, status, type, weekend, today, or non-working time.

Customization areas

Area	Use it for
Labels and formatters	Text-only labels, date/time display, resource names, hover labels, and tooltips.
Event rendering	Event button properties, content templates, badges, resize handles, tooltips, and status colors.
Layout, headers, and cells	Column sizes, generated headers, time rows, day cells, resource rows, and timeline cells.
Slots, hours, and markers	Create previews, empty slots, closed hours, availability styling, and current-time markers.
Conflicts and states	Conflict indicators, warning/error treatment, remote loading, empty, and error overlays.
Context menus	Event, slot, day-header, and background commands.
Styling and themes	CSS variables, built-in state classes, and white-label themes.

Choosing the right hook

• Use labels or formatters when the result is plain text.
• Use CSS variables when the built-in structure is correct and the change is visual.
• Use eventProperties or statusColorResolver when styling depends on event data.
• Use customization.*Properties to add classes, styles, ARIA labels, or data attributes without replacing content.
• Use customization.*Template only when the visible markup for that section needs to change.

Template hooks replace only the section they target. Scheduler-owned interaction handlers, selection state, permission attributes, drag/resize behavior, generated data attributes, conflict classes, and core accessibility attributes remain managed by the plugin.

For interaction callbacks, cancelable DOM events, selection, clipboard, keyboard shortcuts, and custom editor workflows, see Editing and Interaction.

For compact copyable examples of each major customization surface, see Examples. That page includes basic weekly setup, event templates, day headers, slot context menus, current-time markers, closed hours, read-only mode, cancelable selection, and theme snippets.