New to KendoReact? Start a free 30-day trial

Items Overview
Premium

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:

SchedulerItem - Responsible for the visual aspect of the item.
SchedulerViewItem - Responsible for side-effects like positioning.
SchedulerEditItem - 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, SchedulerResize and SchedulerForm which can also be customized.

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

jsx

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

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');

To customize a specific part of the Item tree, provide the corresponding item, viewItem or editItem property either to the Scheduler, or scope the changes by setting the corresponding property to a single 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.

jsx

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.

jsx

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

Change Theme

Theme

Loading ...

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 - Change the Item visually
Custom viewItem component - Change the Item in the context of a view.
Custom editItem component - Extend the Item data-editing functionality.