Items Overview

The KendoReact Scheduler component transforms the provided data collection into Item components.


Item Composition

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

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

The Item is also rendering additional components like SchedulerDrag, SchedulerResize and SchedulerForm which can also be customized.

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

<!-- Responsible for the editing of an item -->
<SchedulerEditItem>
    <!-- Responsible for the positioning  -->
    <SchedulerViewItem>
        <!-- Responsible for the visualization -->
        <SchedulerItem />
    </SchedulerViewItem>
    <!-- Responsible for the Drag functionality -->
    <SchedulerDrag>
        <SchedulerViewItem>
            <SchedulerItem />
        </SchedulerViewItem>
    </SchedulerDrag>
    <!-- Responsible for the Resize functionality -->
    <SchedulerResize>
        <SchedulerViewItem>
            <SchedulerItem />
        </SchedulerViewItem>
    </SchedulerResize>
    <!-- Responsible for the Form-edit functionality -->
    <SchedulerForm />
    <!-- Responsible for occurrence/series edit toggle -->
    <SchedulerOccurrenceDialog />
    <!-- Responsible for Remove confirmation -->
    <SchedulerRemoveDialog />
</SchedulerEditItem>

Importing the Default Items

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

    // ES2015 module syntax
    import { SchedulerItem, SchedulerViewItem, SchedulerEditItem } from '@progress/kendo-react-scheduler';
    // 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, viewItem or editItem property either to the view.

Customizing all Items

For example, if you want to modify the visual part of all items inside the Scheduler, set the item property. But first, let's define our CustomItem.

The following CustomItem modifies the style property based on the isAllDay property.

const CustomItem = (props) => (
    <SchedulerItem
        {...props}
        style={{ ...props.style, backgroundColor: props.isAllDay ? 'pink' : 'blue' }}
    />)

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

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

Pass some dummy data and see our custom items in action. The following example changes the color of every item inside the Scheduler.

Example
View Source
Change Theme:

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.

<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: