New to Kendo UI for Angular? Start a free 30-day trial

Styling the Scheduler Events and Slots

You can customize the appearance of the Scheduler events and slots with functional callbacks.

Styling the Events

To style the events of the Scheduler, use the eventClass and eventStyle functional callbacks, which allow you to insert custom CSS classes and styles to the events.

The following example demonstrates how to apply styles with the eventClass callback.

Example
View Source
Change Theme:

The following example demonstrates how to apply styles with the eventStyle callback.

Example
View Source
Change Theme:

The following example demonstrates how to extend the SchedulerEvent class and define the custom class in the events of the Scheduler.

Example
View Source
Change Theme:

Styling the Slots

To style the slots of the Scheduler, use the slotClass functional callback, which allows you to insert custom CSS classes to the slots.

Example
View Source
Change Theme:

Styling a Specific View

You can add custom CSS classes or styles to the events and slots of a specific view by using the eventClass, eventStyle, or slotClass callbacks of the view.

The following example demonstrates how to style the events and slots of the Day view.

Example
View Source
Change Theme: