Items Overview

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

The Scheduler component is part of KendoReact, a professionally built commercial UI library. To try out this component you need to sign up for a 30-day trial, which gives you access to the full KendoReact library.

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

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.

import React from 'react';
import ReactDOM from 'react-dom';
import {
    Scheduler,
    DayView,
    MonthView,

    SchedulerItem
} from '@progress/kendo-react-scheduler';
import { sampleData, displayDate } from './events-utc.js';

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


const App = () => {
    return (
        <Scheduler
            data={sampleData}
            defaultDate={displayDate}
            item={CustomItem}
        >
            <DayView />
            <MonthView />
        </Scheduler>
    );
};

ReactDOM.render(<App />, document.querySelector('my-app'));

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: