Overview

Trigger a state update of a parent slot through its children, by utilizing the built-in React context and hooks functionalities.

The SchedulerEditSlot provides each of it's value/callback pairs through context to be available for each of its child components.

This architecture allows the user to define what is happening on every action. The SchedulerEditSlot already have a default callback handlers, which the developer can override if needed, or explicitly call after custom logic is executed.

Accessing the Parent State

The SchedulerEditSlot internal state can be modified by accessing the value/callback pair you want to modify, and call the callback to trigger an action.

Accessing the parent state through its children does not toggle controlled-state of the component, but rather define when a state change must happen. If you want to control the internal state from outside, please refer to the SchedulerEditSlot Controlled State

Accessing the internal state can be done through:

Custom Hooks

The following hooks are available for each child Functional Component of the SchedulerEditSlot:

In order to trigger a state change, use the desired hook inside your custom component:

const CustomSchedulerSlot = (props) => {
    const [formItem, setFormItem] = useSchedulerEditSlotFormItemContext();

    const handleClick = React.useCallback(
        () => { setFormItem(createEmptyFormItem()); },
        [setFormItem]
    )

    return (<SchedulerSlot {...props} onClick={handleClick} />)
}

Context.Consumer

The following Contexts are available for each child Class Component of the SchedulerEditSlot:

In order to trigger a state change, use the desired context inside your custom component:

class CustomSchedulerSlot extends React.Component {
    render() {
        return (
            <SchedulerEditSlotFormItemContext.Consumer>
            {([formItem, setFormItem]) => (
                <SchedulerSlot
                    {...this.props}
                    onClick={() => { setFormItem(createEmptyFormItem()); }}
                />
            )}
            </SchedulerEditSlotFormItemContext.Consumer>
        )
    }
}

Custom Action Binding

Providing custom bindings for a specific component provides the ability to bind specific actions to state changes. This allows the developer to define a middleware to change what is happening on a specific event.

For example, the default onDoubleClick handler is changing the internal formItem state from null to an empty DataItem with predefined start, end, isAllDay and resources of the slot. This state change triggers the display of the form dialog, thus triggering edit . If the application requires such action to be triggered on onClick, the developer must handle the onClick callback of the SchedulerSlot and set the corresponding formItem state of it's SchedulerEditSlot parent.

The following example demonstrates changing the internal formItem state of the SchedulerEditSlot through the onClick event of the SchedulerSlot.

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

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

const CustomSlot = (props) => {
    const [, setFormItem] = useSchedulerEditSlotFormItemContext();

    const createDataItemFromSlot = React.useCallback(
        () => {
            const dataItem = {};

            dataItem.start = new Date(props.start.getTime());
            dataItem.end = new Date(new Date(props.end.getTime()));
            dataItem.isAllDay = props.isAllDay;

            return dataItem;
        },
        [
            props.start.getTime(),
            props.end.getTime(),
            props.isAllDay
        ]);

    const handleClick = React.useCallback(
        (event) => {
            const dataItem = createDataItemFromSlot();
            setFormItem(dataItem);

            if (props.onClick) {
                props.onClick(event)
            }
        },
        [createDataItemFromSlot]
    )

    return (
        <SchedulerSlot
            onClick={handleClick}
            {...props}
        />
    )
}


const App = () => {
    return (
        <Scheduler
            data={sampleData}
            defaultDate={displayDate}
            defaultView="month"
            editable={{ add: true, select: true }}
            editable={true}
        >
            <MonthView slot={CustomSlot} />
        </Scheduler>
    );
};

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