Slots Overview

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

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:

From now on, we will refer to the composition tree as an 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:

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

// ES2015 module syntax
import { SchedulerSlot, SchedulerViewSlot, SchedulerEditSlot } from '@progress/kendo-react-scheduler';
// 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.

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.

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

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

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

const CustomSlot = (props) => (
    <SchedulerSlot
        {...props}
        style={{ ...props.style, backgroundColor: (props.isAllDay || !props.workHour || !props.workDay) ? '#ffddcc' : '#ccff99' }}
    />)


const App = () => {
    return (
        <Scheduler
            data={sampleData}
            defaultDate={displayDate}
            slot={CustomSlot}
        >
            <WeekView />
        </Scheduler>
    );
};

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

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;

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

 /