SchedulerEditSlot

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

To extends 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 SchedulerEditItem 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 fromItem, provide your own onFormItemChange handler, modify the DataItem as needed, and pass it back trough 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'));
 /