SchedulerViewSlot

By default, the SchedulerViewSlot is responsible only expanding itself if there are no enough space for the items inside.

Extending the default logic

We will cover a simple use-case where we modify the cursor, based on the isWorkDay and isWorkHour properties of the SchedulerViewSlot.

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

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

const CustomViewSlot = (props) => {
    return (<SchedulerViewSlot
        {...props}
        style={{
            ...props.style,
            cursor: (!props.isWorkDay || !props.isWorkHour) ? 'no-drop' : undefined,
        }}
    />)
}


const App = () => {
    return (
        <Scheduler
            data={sampleData}
            defaultDate={displayDate}
            defaultView="week"
            editable={true}
            viewSlot={CustomViewSlot}
        >
            <WeekView />
            <TimelineView />
        </Scheduler>
    );
};

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