# SchedulerItem

The [SchedulerItem](https://www.telerik.com/kendo-react-ui/components/scheduler/api/scheduleritem) component is responsible for the visual part of an [Item](https://www.telerik.com/kendo-react-ui/components/scheduler/customization/items#item-composition).

To expend the default `SchedulerItem`, set the [item](https://www.telerik.com/kendo-react-ui/components/scheduler/api/schedulerprops#item) property to either the `Scheduler` or a specific view, to a modified version of the `SchedulerItem` component.

## Customizing the Item Styles

To customize the styles of the `SchedulerItem`, we recommend using either [style](https://www.telerik.com/kendo-react-ui/components/scheduler/api/scheduleritemprops#style) or [className](https://www.telerik.com/kendo-react-ui/components/scheduler/api/scheduleritemprops#classname) properties.

The following example demonstrates customizing the items by using both the `style` and the `className` properties. The `style` applies the colors, border, and font weight of the item based on a custom `status` field, while the `className` is used to cross out the title of the cancelled item.

[Demo Source](https://demos.telerik.com/kendo-react-ui/scheduler/items/item/style/func/source.txt)

## Overriding the Children

To customize what is rendered inside the `Scheduler` item, provide the `children` property, or directly render the content inside the `SchedulerItem`. The [SchedulerItemContent](https://www.telerik.com/kendo-react-ui/components/scheduler/api/scheduleritemcontent) can be used as a wrapping element to achieve consistent styling.

The following examples demonstrates rendering custom nodes inside the default `SchedulerItem` component.

[Demo Source](https://demos.telerik.com/kendo-react-ui/scheduler/items/item/children/func/source.txt)

## Attaching Callback Handlers

The [SchedulerItem](https://www.telerik.com/kendo-react-ui/components/scheduler/api/scheduleritem) exposes various callbacks like [onClick](https://www.telerik.com/kendo-react-ui/components/scheduler/api/scheduleritemprops#onclick) and [onKeyDown](https://www.telerik.com/kendo-react-ui/components/scheduler/api/scheduleritemprops#onkeydown). Those callbacks can be used to attach custom functionality.

> Providing a callback without calling the default one from the `props`, will prevent the default logic from executing.

The following example demonstrates attaching `onFocus` and `onBlur` handlers and showing a custom `Popup` next an item. We will be calling the default `props.onFocus` and `props.onBlur` callbacks to not brake anything.

[Demo Source](https://demos.telerik.com/kendo-react-ui/scheduler/items/item/callbacks/func/source.txt)

## Suggested Links

* [API Reference of the Scheduler](https://www.telerik.com/kendo-react-ui/components/scheduler/api/scheduler)
* [API Reference of the SchedulerItemProps](https://www.telerik.com/kendo-react-ui/components/scheduler/api/scheduleritemprops)
* [KendoReact Scheduler](https://www.telerik.com/kendo-react-ui/components/scheduler/)