# Items Overview

The KendoReact [Scheduler](https://www.telerik.com/kendo-react-ui/components/scheduler) component transforms the provided [data](https://www.telerik.com/kendo-react-ui/components/scheduler/api/schedulerprops#data) collection into `Item` components.

## Item Composition

The `Items` are composed from multiple React Components, with the main three being:

* [SchedulerItem](https://www.telerik.com/kendo-react-ui/components/scheduler/customization/items/item) - Responsible for the `visual` aspect of the item.
* [SchedulerViewItem](https://www.telerik.com/kendo-react-ui/components/scheduler/customization/items/view-item) - Responsible for side-effects like `positioning`.
* [SchedulerEditItem](https://www.telerik.com/kendo-react-ui/components/scheduler/customization/items/edit-item) - Responsible for the `data-editing` functionality.

From now on, we will refer to the composition tree as an `Item`.

The `Item` is also rendering additional components like [SchedulerDrag](https://www.telerik.com/kendo-react-ui/components/scheduler/api/schedulerdrag), [SchedulerResize](https://www.telerik.com/kendo-react-ui/components/scheduler/api/schedulerresize) and [SchedulerForm](https://www.telerik.com/kendo-react-ui/components/scheduler/api/schedulerform) which can also be customized.

The final tree rendered for a single `Item` looks like this:

```jsx

<SchedulerEditItem>
    
    <SchedulerViewItem>
        
        <SchedulerItem />
    </SchedulerViewItem>
    
    <SchedulerDrag>
        <SchedulerViewItem>
            <SchedulerItem />
        </SchedulerViewItem>
    </SchedulerDrag>
    
    <SchedulerResize>
        <SchedulerViewItem>
            <SchedulerItem />
        </SchedulerViewItem>
    </SchedulerResize>
    
    <SchedulerForm />
    
    <SchedulerOccurrenceDialog />
    
    <SchedulerRemoveDialog />
</SchedulerEditItem>
```

## Importing the Default Items

The default `item`, `viewItem` and `editItem` are contained in the `@progress/kendo-react-scheduler` package:

```jsx
    // ES2015 module syntax
    import { SchedulerItem, SchedulerViewItem, SchedulerEditItem } from '@progress/kendo-react-scheduler';
```

```jsx
    // CommonJS format
    const { SchedulerItem, SchedulerViewItem, SchedulerEditItem } = require('@progress/kendo-react-scheduler');
```

## Providing Custom Item

To customize a specific part of the `Item` tree, provide the corresponding [item](https://www.telerik.com/kendo-react-ui/components/scheduler/api/schedulerprops#item), [viewItem](https://www.telerik.com/kendo-react-ui/components/scheduler/api/schedulerprops#viewItem) or [editItem](https://www.telerik.com/kendo-react-ui/components/scheduler/api/schedulerprops#editItem) property either to the `Scheduler`, or scope the changes by setting the corresponding property to a single [view](https://www.telerik.com/kendo-react-ui/components/scheduler/views).

### Customizing all Items

For example, if you want to modify the visual part of all items inside the [Scheduler](https://www.telerik.com/kendo-react-ui/components/scheduler), set the [item](https://www.telerik.com/kendo-react-ui/components/scheduler/api/schedulerprops#item) property. But first, let's define our `CustomItem`.

The following `CustomItem` adds a `className` based on the custom `category` field of the event, so that each category can be styled through CSS.

```jsx
const CustomItem = (props) => (
    <SchedulerItem
        {...props}
        className={`event-${props.dataItem.category}`}
    />)
```

Now lets tell the `Scheduler` to use our component instead of the default one.

```jsx
<Scheduler item={CustomItem} >
    <WeekView />
    <MonthView />
</Scheduler>
```

Pass some dummy data and see our custom items in action. The following example styles every item inside the `Scheduler` by its category.

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

### View Scoped Customization

To scope the custom item to a specific view only, simply pass the `item` property to the view. Taking the example from above, if we want to apply the customization only to the week view, simply move the `item={CustomItem}` from the `Scheduler` to the `WeekView`.

```jsx
<Scheduler>
    <WeekView item={CustomItem} />
    <MonthItem />
</Scheduler>
```

## Other Types of Customization

We will take a deeper look at how every custom component can be customized in the following articles:

* [Custom `item` component](https://www.telerik.com/kendo-react-ui/components/scheduler/customization/items/item) - Change the `Item` visually
* [Custom `viewItem` component](https://www.telerik.com/kendo-react-ui/components/scheduler/customization/items/view-item) - Change the `Item` in the context of a view.
* [Custom `editItem` component](https://www.telerik.com/kendo-react-ui/components/scheduler/customization/items/edit-item) - Extend the `Item` data-editing functionality.

## Suggested Links

* [API Reference of the Scheduler](https://www.telerik.com/kendo-react-ui/components/scheduler/api/scheduler)
* [API Reference of the SchedulerItem](https://www.telerik.com/kendo-react-ui/components/scheduler/api/scheduleritem)
* [API Reference of the SchedulerViewItem](https://www.telerik.com/kendo-react-ui/components/scheduler/api/schedulerviewitem)
* [API Reference of the SchedulerEditItem](https://www.telerik.com/kendo-react-ui/components/scheduler/api/scheduleredititem)
* [KendoReact Scheduler](https://www.telerik.com/kendo-react-ui/components/scheduler/)