Slots Overview

The KendoReact Scheduler component renders slot as the background of the currently selected view.

The Slots are part of KendoReact, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.Start Free Trial

Slot Composition

Analogically to the Item Compositions, the slots inside the Scheduler follow the same methodology of Composition of multiple React components in order to split the functionalities by logic.

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

SchedulerSlot - Responsible for the visual aspect of the slot.
SchedulerViewSlot - Responsible for side effects like expansion.
SchedulerEditSlot - Responsible for the data-editing functionality.

From now on, we will refer to the composition tree as a Slot.

The Slot is also rendering additional components like [SchedulerForm] which can also be customized.

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

jsx

<!-- Responsible for the editing of a slot -->
<SchedulerEditSlot>
    <!-- Responsible for the expansion of a slot -->
    <SchedulerViewSlot>
        <!-- Responsible for the visualization -->
        <SchedulerSlot />
    </SchedulerViewSlot>
    <!-- Responsible for the creation of new items through slot interaction -->
    <SchedulerForm />
</SchedulerEditSlot>

Importing the Default Slots

The default slot, viewSlot and editSlot are contained in the @progress/kendo-react-scheduler package:

jsx

    // ES2015 module syntax
    import { SchedulerSlot, SchedulerViewSlot, SchedulerEditSlot } from '@progress/kendo-react-scheduler';

jsx

    // CommonJS format
const { SchedulerSlot, SchedulerViewSlot, SchedulerEditSlot } = require('@progress/kendo-react-scheduler');

Providing Custom Slot

To customize a specific part of the Slot tree, provide the corresponding slot, viewSlot or editSlot, or scope the customization by setting the corresponding property to a single view.

Customizing all Slots

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

jsx

const CustomSlot = (props) => (
    <SchedulerSlot
        {...props}
        style={{ ...props.style, backgroundColor: props.isAllDay ? 'lightgray' : 'darkgray }}
    />
)

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

jsx

<Scheduler slot={CustomSlot}>
    <WeekView />
    <MonthView />
</Scheduler>

Pass some dummy data and see our custom slots 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 slot to a specific view only, simply pass the slot property to the view. Taking the example from above, if we want to apply the customization only to the week view, simply move the slot={CustomSlot} from the Scheduler to the WeekView;

jsx

<Scheduler >
    <WeekView slot={CustomSlot} />
    <MonthView />
</Scheduler>

Other Types of Customization

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

Custom slot component - Change the Slot visually
Custom viewSlot component - Change the Slot in the context of a view.
Custom editSlot component - Extend the Slot data-editing functionality.