Scheduler styling in React Schedule component

30 Aug 20235 minutes to read

To modify the Scheduler appearance, you need to override the default CSS of Scheduler. Also, you have an option to create your own custom theme using our Theme Studio. Please find the list of CSS classes in Scheduler.

Css class Purpose
.e-schedule .e-vertical-view .e-work-cells Work cells in vertical views of scheduler
.e-schedule .e-month-view .e-work-cells Work cells in month view of scheduler
.e-schedule .e-month-view .e-other-month Work cells of other month in month view of scheduler
.e-schedule .e-timeline-view .e-work-cells Work cells in timeline views of scheduler
.e-schedule .e-timeline-month-view .e-work-cells Work cells in timeline month view of scheduler
.e-schedule .e-timeline-year-view .e-work-cells Work cells in timeline year view of scheduler
.e-schedule .e-timeline-year-view .e-work-cells.e-other-month Work cells of other month in timeline year view of scheduler
.e-schedule .e-month-agenda-view .e-work-cells Work cells in month agenda view of scheduler
.e-schedule .e-month-agenda-view .e-other-month Work cells of other month in month agenda view of scheduler
.e-schedule .e-year-view .e-calendar-wrapper .e-month-calendar.e-calendar .e-other-month Work cells of other month in year view of scheduler
.e-schedule .e-vertical-view .e-all-day-cells All day cells in vertical views of scheduler
.e-schedule .e-vertical-view .e-work-hours Work hour cells in vertical views of scheduler
.e-schedule .e-month-view .e-work-days Work day cells in month view of scheduler
.e-schedule .e-month-agenda-view .e-work-days Work day cells in month agenda view of scheduler
.e-schedule .e-timeline-view .e-work-hours Work hour cells in timeline views of scheduler
.e-schedule .e-timeline-month-view .e-work-days Work day cells in timeline month view of scheduler
.e-schedule .e-timeline-year-view .e-work-cells.e-work-days Work day cells in timeline year view of scheduler
.e-schedule .e-vertical-view .e-day-wrapper .e-appointment Appointment in vertical views of scheduler
.e-schedule .e-vertical-view .e-all-day-appointment-wrapper .e-appointment All day Appointment in vertical views of scheduler
.e-schedule .e-month-view .e-appointment Appointment in month view of scheduler
.e-schedule .e-timeline-view .e-appointment Appointment in timeline views of scheduler
.e-schedule .e-timeline-month-view .e-appointment Appointment in timeline month view of scheduler
.e-schedule .e-timeline-year-view .e-event-table .e-appointment Appointment in timeline year view of scheduler
.e-schedule .e-year-view .e-calendar-wrapper .e-month-calendar.e-calendar .e-appointment Appointment in year view of scheduler
.e-schedule .e-agenda-view .e-appointment Appointment in agenda view of scheduler
.e-schedule .e-month-agenda-view .e-appointment-indicator Appointment in month agenda view of scheduler
.e-schedule .e-block-appointment Block appointment in scheduler
.e-schedule .e-read-only Read only appointment in scheduler.
e-appointment-border Appointment which are currently selected, use the appointment class hierarchical based on your views.
e-selected-cells work cells which are currently selected, use the work cell class hierarchical based on your views.
e-header-cells Header cells of scheduler, use the work cells hierarchical based on your views.
.e-schedule .e-vertical-view .e-resource-cells Resource cells in vertical views of scheduler.
.e-schedule .e-month-view .e-resource-cells Resource cells in month view of scheduler.
.e-schedule .e-timeline-view .e-resource-cells Resource cells in timeline views of scheduler.
.e-schedule .e-timeline-month-view .e-resource-cells Resource cells in timeline month view of scheduler.
e-parent-node Parent resource cells in timeline views of scheduler.
e-child-node Child resource cells in timeline views of scheduler.

You can refer to our React Scheduler feature tour page for its groundbreaking feature representations. You can also explore our React Scheduler example to knows how to present and manipulate data.