SchedulerSlot

The SchedulerSlot component is responsible for the visual part of an Slot.

To expand the default SchedulerSlot, set the slot property to either the Scheduler or a specific view, to a modified version fo the SchedulerSlot component.

Customizing the Slot Styles

To customize the styles of the SchedulerSlot, we recommend using either style or className properties.

The following example demonstrates customizing the border to a red one, based on the slot isAllDay property, in order to separate the all-day slots from the time slots in the Week view.

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

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

const CustomSlot = (props) => (
    <SchedulerSlot
        {...props}
        style={{
            ...props.style,
            borderBottom: props.isAllDay ? '1px solid red' : undefined
        }}
    />)


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

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