# Context

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](https://react.dev/reference/react/hooks#context-hooks) and [React Hooks](https://react.dev/reference/react/hooks).

> This article covers the `context` provided by the root `Scheduler` component. For other context providers refer to the [Item Context](https://www.telerik.com/kendo-react-ui/components/scheduler/customization/items/state-update) and [Slot Context](https://www.telerik.com/kendo-react-ui/components/scheduler/customization/slots/state-update) articles.

Instead of having one big object called `SchedulerContext`, we split it to multiple smaller contexts to allow for more deterministic [Memoization](https://react.dev/reference/react/Component#shouldcomponentupdate) which depends on the context value.

The scheduler context `providers` allows access to:

* [Static values](https://www.telerik.com/kendo-react-ui/components/scheduler/context#static-values)
* [Internal Scheduler state](https://www.telerik.com/kendo-react-ui/components/scheduler/context#internal-state)
* [Internal Scheduler reducers](https://www.telerik.com/kendo-react-ui/components/scheduler/context#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](https://www.telerik.com/kendo-react-ui/components/scheduler/api/schedulerviewprops#numberofdays) and the internal `date` state. Some times those values might come in need when building custom components on top of the default [`Item`](https://www.telerik.com/kendo-react-ui/components/scheduler/customization/items) and [`Slot`](https://www.telerik.com/kendo-react-ui/components/scheduler/customization/slots) 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:

* [useSchedulerPropsContext](https://www.telerik.com/kendo-react-ui/components/scheduler/api/useschedulerpropscontext)
* [useSchedulerViewsContext](https://www.telerik.com/kendo-react-ui/components/scheduler/api/useschedulerviewscontext)
* [useSchedulerFieldsContext](https://www.telerik.com/kendo-react-ui/components/scheduler/api/useschedulerfieldscontext)
* [useSchedulerGroupsContext](https://www.telerik.com/kendo-react-ui/components/scheduler/api/useschedulergroupscontext)
* [useSchedulerDateRangeContext](https://www.telerik.com/kendo-react-ui/components/scheduler/api/useschedulerdaterangecontext)
* [useSchedulerOrientationContext](https://www.telerik.com/kendo-react-ui/components/scheduler/api/useschedulerorientationcontext)

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:

* [SchedulerPropsContext](https://www.telerik.com/kendo-react-ui/components/scheduler/api/schedulerpropscontext)
* [SchedulerViewsContext](https://www.telerik.com/kendo-react-ui/components/scheduler/api/schedulerviewscontext)
* [SchedulerFieldsContext](https://www.telerik.com/kendo-react-ui/components/scheduler/api/schedulerfieldscontext)
* [SchedulerGroupsContext](https://www.telerik.com/kendo-react-ui/components/scheduler/api/schedulergroupscontext)
* [SchedulerDateRangeContext](https://www.telerik.com/kendo-react-ui/components/scheduler/api/schedulerdaterangecontext)
* [SchedulerOrientationContext](https://www.telerik.com/kendo-react-ui/components/scheduler/api/schedulerorientationcontext)

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

```jsx
const CustomSchedulerItem = (props) => {
    const { timezone } = React.useContext(SchedulerPropsContext);

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

## 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](https://www.telerik.com/kendo-react-ui/components/scheduler/date-selection#controlled-mode) is possible through `custom hooks` and `Context.Consumer`.

### Custom State Hooks

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

* [useSchedulerDateContext](https://www.telerik.com/kendo-react-ui/components/scheduler/api/useschedulerdatecontext)
* [useSchedulerActiveViewContext](https://www.telerik.com/kendo-react-ui/components/scheduler/api/usescheduleractiveviewcontext)

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:

* [SchedulerDateContext](https://www.telerik.com/kendo-react-ui/components/scheduler/api/schedulerdatecontext)
* [SchedulerActiveViewContext](https://www.telerik.com/kendo-react-ui/components/scheduler/api/scheduleractiveviewcontext);

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

```jsx
const CustomSchedulerItem = (props) => {
    const [, setDate] = React.useContext(SchedulerDateContext);

    return (
        <SchedulerItem>
            {props.children}
            {props.tail && (
                <Button onClick={() => { setDate(props.start); }}>Prev</Button>
            )}
            {props.head && (
                <Button onClick={() => { setDate(props.end); }}>Next</Button>
            )}
        </SchedulerItem>
    );
};
```

## Reducers

The KendoReact `Scheduler` component provides access to the internal `data` reducer. Due to the complexity of the data operations, a predefined action [types](https://www.telerik.com/kendo-react-ui/components/scheduler/api/data_action) are available to be [dispatched](https://react.dev/reference/react/useReducer).

### Custom Reducers Hooks

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

* [useSchedulerDataContext](https://www.telerik.com/kendo-react-ui/components/scheduler/api/useschedulerdatacontext)

### Reducer Context.Consumer

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

* [SchedulerDataContext](https://www.telerik.com/kendo-react-ui/components/scheduler/api/schedulerdatacontext)

### Example Usage

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

[Demo Source](https://demos.telerik.com/kendo-react-ui/scheduler/context/example/func/source.txt)

## Suggested Links

* [API Reference of the KendoReact Scheduler](https://www.telerik.com/kendo-react-ui/components/scheduler/api/schedulerprops)
* [Item Context](https://www.telerik.com/kendo-react-ui/components/scheduler/customization/items/state-update)
* [Slot Context](https://www.telerik.com/kendo-react-ui/components/scheduler/customization/slots/state-update)
* [KendoReact Scheduler](https://www.telerik.com/kendo-react-ui/components/scheduler/)