Style and Appearance in JavaScript Scheduler

Override the Scheduler’s default CSS to customize its appearance, or create a custom theme with Theme Studio. Below are commonly used CSS classes.

CSS class	Purpose
.e-schedule .e-vertical-view .e-work-cells	Work cells in vertical views
.e-schedule .e-month-view .e-work-cells	Work cells in month view
.e-schedule .e-month-view .e-other-month	Other-month cells in month view
.e-schedule .e-timeline-view .e-work-cells	Work cells in timeline views
.e-schedule .e-timeline-month-view .e-work-cells	Work cells in timeline month view
.e-schedule .e-timeline-year-view .e-work-cells	Work cells in timeline year view
.e-schedule .e-timeline-year-view .e-work-cells.e-other-month	Other-month cells in timeline year view
.e-schedule .e-month-agenda-view .e-work-cells	Work cells in month-agenda view
.e-schedule .e-month-agenda-view .e-other-month	Other-month cells in month-agenda view
.e-schedule .e-year-view .e-calendar-wrapper .e-month-calendar.e-calendar .e-other-month	Other-month cells in year view
.e-schedule .e-vertical-view .e-all-day-cells	All-day cells in vertical views
.e-schedule .e-vertical-view .e-work-hours	Work-hour cells in vertical views
.e-schedule .e-month-view .e-work-days	Work-day cells in month view
.e-schedule .e-month-agenda-view .e-work-days	Work-day cells in month-agenda view
.e-schedule .e-timeline-view .e-work-hours	Work-hour cells in timeline views
.e-schedule .e-timeline-month-view .e-work-days	Work-day cells in timeline month view
.e-schedule .e-timeline-year-view .e-work-cells.e-work-days	Work-day cells in timeline year view
.e-schedule .e-vertical-view .e-day-wrapper .e-appointment	Appointment in vertical views
.e-schedule .e-vertical-view .e-all-day-appointment-wrapper .e-appointment	All-day appointment in vertical views
.e-schedule .e-month-view .e-appointment	Appointment in month view
.e-schedule .e-timeline-view .e-appointment	Appointment in timeline views
.e-schedule .e-timeline-month-view .e-appointment	Appointment in timeline month view
.e-schedule .e-timeline-year-view .e-event-table .e-appointment	Appointment in timeline year view
.e-schedule .e-year-view .e-calendar-wrapper .e-month-calendar.e-calendar .e-appointment	Appointment in year view
.e-schedule .e-agenda-view .e-appointment	Appointment in agenda view
.e-schedule .e-month-agenda-view .e-appointment-indicator	Appointment indicator in month-agenda view
.e-schedule .e-block-appointment	Block appointment
.e-schedule .e-read-only	Read-only appointment
.e-appointment-border	Selected appointment border
.e-selected-cells	Selected work cells
.e-header-cells	Header cells
.e-schedule .e-vertical-view .e-resource-cells	Resource cells in vertical views
.e-schedule .e-month-view .e-resource-cells	Resource cells in month view
.e-schedule .e-timeline-view .e-resource-cells	Resource cells in timeline views
.e-schedule .e-timeline-month-view .e-resource-cells	Resource cells in timeline month view
.e-parent-node	Parent resource cells in timeline views
.e-child-node	Child resource cells in timeline views

Refer to the JavaScript Scheduler feature tour for an overview, and explore the Scheduler demo for practical examples.