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:
- SchedulerItem - Responsible for the
visualaspect of the item. - SchedulerViewItem - Responsible for side-effects like
positioning. - SchedulerEditItem - Responsible for the
data-editingfunctionality.
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.
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:
Custom item component- Change theItemvisuallyCustom viewItem component- Change theItemin the context of a view.Custom editItem component- Extend theItemdata-editing functionality.
