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.