New to KendoReact? Start a free 30-day trial

Context
Premium

The KendoReact Scheduler renders multiple context providers which can be consumed by every child component inside it. This architecture removes the need of passing every property down the tree, and makes it available through the built-in React Context and React Hooks.

This article covers the context provided by the root Scheduler component. For other context providers refer to the Item Context and Slot Context articles.

Instead of having one big object called SchedulerContext, we split it to multiple smaller contexts to allow for more deterministic Memoization which depends on the context value.

The scheduler context providers allows access to:

Static values
Internal Scheduler state
Internal Scheduler reducers

Static values

The KendoReact Scheduler components applies additional calculations based on the provided properties. One example is how the dateRange is calculated based on the numberOfDays and the internal date state. Some times those values might come in need when building custom components on top of the default Item and Slot composition trees.

Because of this, we are providing any additional variables which the Scheduler creates through context. The contexts are available both through custom hooks and Context.Consumer.

Custom Hooks

The following custom hooks are available for accessing static values inside the Scheduler:

In order to access those values, use the desired hook inside your custom component:

jsx

const CustomSchedulerItem = (props) => {
    const { timezone } = useSchedulerPropsContext();

    return (
        <SchedulerItem {...props}>
            <Label>Timezone: <span>{timezone}</span></Label>
        </SchedulerItem>
    )
}

Context.Consumer

The following contexts are available for accessing static values inside the Scheduler:

In order to access those values, use the desired context inside your custom component.

jsx

class CustomSchedulerItem extends React.Component {
    render() {
        return (
            <SchedulerPropsContext.Consumer>
            (({timezone}) => (
                <SchedulerItem>
                    <Label>Timezone: <span>{timezone}</span></Label>
                </SchedulerItem>
            ))
            </SchedulerPropsContext.Consumer>
        )
    }
}

Internal State

The KendoReact Scheduler components keeps both date and activeView variables in its state. Changing those variables based on a user action, without rendering the component in a Controlled State is possible through custom hooks and Context.Consumer.

Custom State Hooks

The following custom hooks are available for accessing internal state inside the Scheduler:

In order to access those values, use the desired hook inside your custom component:

jsx

const CustomSchedulerItem = (props) => {
    const [date, setDate] = useSchedulerDateContext();

    const handlePrevClick = React.useCallback(
        () => { setDate(props.start); },
        [props.state.getTime(), setDate]
    );

    const handleNextClick = React.useCallback(
        () => { setDate(props.end); },
        [props.end.getTime(), setDate]
    );

    return (
        <SchedulerItem {...props}>
            {props.children}
            {props.tail && (<Button onClick={handlePrevClick}>Prev</Button>)}
            {props.head && (<Button onClick={handleNextClick}>next</Button>)}
        </SchedulerItem>
    )
}

State Context.Consumer

The following contexts are available for accessing internal state inside the Scheduler:

In order to access those values, use the desired context inside your custom component:

jsx

class CustomSchedulerItem extends React.Component {
    render() {
        return (
            <SchedulerDateContext.Consumer>
                {([date, setDate]) => {
                    <SchedulerItem>
                        {this.props.children}
                        {this.props.tail && (<Button onClick={() => {setDate(this.props.start)}}>Prev</Button>)}
                        {this.props.head && (<Button onClick={() => {setDate(this.props.end)}}>Next</Button>)}
                    </SchedulerItem>
                }}
            </SchedulerDateContext.Consumer>
        )
    }
}

Reducers

The KendoReact Scheduler component provides access to the internal data reducer. Due to the complexity of the data operations, a predefined action types are available to be dispatched.

Custom Reducers Hooks

The following custom hook is available for accessing the internal data reducer inside the Scheduler;

useSchedulerDataContext

Reducer Context.Consumer

The following context is available for accessing internal state inside the Scheduler.

SchedulerDataContext

Example Usage

The following example demonstrates creating a copy of an item on "D" keydown.

Change Theme

Theme

Loading ...