SchedulerEditSlot

The SchedulerEditSlot component is responsible for the editing functionality of a Slot.

To extend the default SchedulerEditSlot, set the editSlot property to either the Scheduler or a specific view, to a modified version of the SchedulerSlotItem component.

Controlling the Editing

The SchedulerEditSlot exposes the following properties to allow controlling the internal edit state.

To control the state, provide the the value-handler pair. For example, if you want to control the formItem, provide your own onFormItemChange handler, modify the DataItem as needed, and pass it back through the formItem property.

The following example demonstrates controlling the formItem state to disallow item creation outside working hours. We will be using the view slot from the SchedulerViewSlot article.

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

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

const CustomEditSlot = (props) => {
    const [formItem, setFormItem] = React.useState(null);

    const handleFormItemChange = React.useCallback(
        (event) => { if (props.isWorkDay && props.isWorkHour) { setFormItem(event.value); } },
        [setFormItem, props.isWorkHour, props.isWorkHour]
    )

    return (
        <SchedulerEditSlot
            {...props}
            formItem={formItem}
            onFormItemChange={handleFormItemChange}
        />
    )
}

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}
            editSlot={CustomEditSlot}
        >
            <WeekView />
            <TimelineView />
        </Scheduler>
    );
};

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