# Styling

Customize the appearance of Scheduler events and slots using functional callbacks that apply custom CSS classes and styles.

## Event Styling

Style Scheduler events using the [`eventClass`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/schedulercomponent#eventclass) and [`eventStyles`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/schedulercomponent#eventstyles) functional callbacks. These callbacks insert custom CSS classes and styles to events.

The following example demonstrates how to apply styles with both the `eventClass` and `eventStyles` callbacks.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/styling/event-styling/event-style/source.txt)

For more complex styling requirements, extend the [`SchedulerEvent`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/schedulerevent) class to include custom properties. This approach allows you to add custom data fields to events that drive conditional styling logic through your callbacks.

The following example demonstrates how to extend the [`SchedulerEvent`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/schedulerevent) class with custom properties and use them for advanced event styling scenarios.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/styling/event-styling/event-class-extended/source.txt)

## Slot Styling

Style Scheduler slots using the [`slotClass`](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/schedulercomponent#slotclass) functional callback. This callback inserts custom CSS classes to slots.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/styling/slot-styling/source.txt)

## View-Specific Styling

Add custom CSS classes or styles to events and slots of specific views using the `eventClass`, `eventStyles`, or `slotClass` callbacks of individual views.

The following example demonstrates how to style events and slots in the [Day view](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/dayviewcomponent).

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/scheduler/styling/style-view/source.txt)

## Suggested Links

* [Angular Scheduler Overview](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler)
* [API Reference of the Scheduler](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api)
* [API Reference of the SchedulerComponent](https://www.telerik.com/kendo-angular-ui-develop/components/scheduler/api/schedulercomponent)