Styling and Themes

CSS variables and classes

Use CSS when the scheduler structure is correct and only the theme needs to change. The scheduler exposes classes and CSS variables for common states, including today, weekend, current time, conflict, selected, locked, unassigned, status, type, category, non-working time, hover time, ghost ranges, create ranges, editor surfaces, and context menus.

.event-scheduler-plugin {
  --event-scheduler-accent: #0f766e;
  --event-scheduler-accent-soft: #ccfbf1;
  --event-scheduler-surface: #ffffff;
  --event-scheduler-surface-sunken: #f8fafc;
  --event-scheduler-grid-line: #d8dee6;
  --event-scheduler-current-time-color: #dc2626;
  --event-scheduler-weekend-bg: rgba(15, 118, 110, 0.04);
  --event-scheduler-hover-time-bg: rgba(15, 118, 110, 0.12);
  --event-scheduler-create-range-bg: rgba(15, 118, 110, 0.16);
}

.event-scheduler-event--status-confirmed {
  --event-scheduler-event-color: #2563eb;
}

.event-scheduler-event--type-maintenance {
  --event-scheduler-event-bg: #fff7ed;
  --event-scheduler-event-color: #c2410c;
}

.event-scheduler-day-cell__slot--non-working {
  opacity: 0.8;
}

Prefer CSS variables for broad theme changes. Prefer eventProperties and customization.*Properties when classes or attributes depend on event, resource, date, slot, conflict, or projection context.

White-label themes

Scheduler styles are designed around CSS custom properties. Apply theme variables at the grid, plugin host, product shell, or global stylesheet level:

.booking-scheduler revo-grid {
  --event-scheduler-accent: #315f8c;
  --event-scheduler-accent-soft: #e8f1f8;
  --event-scheduler-grid-line: #d8dee6;
  --event-scheduler-surface: #ffffff;
  --event-scheduler-surface-sunken: #f6f8fb;
  --event-scheduler-event-bg: #eef7f3;
  --event-scheduler-event-color: #16825c;
  --event-scheduler-conflict-warning-bg: #fff7ed;
  --event-scheduler-conflict-warning-color: #c2410c;
  --event-scheduler-remote-state-bg: rgba(255, 255, 255, 0.96);
}

Prefer CSS variables for broad white-label theming, and use render hooks only when the product needs different markup or data-driven content.