# SchedulerEditItem

The [SchedulerEditItem](https://www.telerik.com/kendo-react-ui/components/scheduler/api/scheduleredititem) component is responsible for the editing functionality of an [Item](https://www.telerik.com/kendo-react-ui/components/scheduler/customization/items#item-composition).

To extend the default `SchedulerEditItem`, set the [editItem](https://www.telerik.com/kendo-react-ui/components/scheduler/api/schedulerprops#edititem) property to either the `Scheduler` or a specific view, to a modified version of the `SchedulerEditItem` component.

## Controlling the Editing

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

* [formItem](https://www.telerik.com/kendo-react-ui/components/scheduler/api/scheduleredititemprops#formitem) and [onFormItemChange](https://www.telerik.com/kendo-react-ui/components/scheduler/api/scheduleredititemprops#onformitemchange)
* [dragItem](https://www.telerik.com/kendo-react-ui/components/scheduler/api/scheduleredititemprops#dragitem) and [onDragItemChange](https://www.telerik.com/kendo-react-ui/components/scheduler/api/scheduleredititemprops#ondragitemchange)
* [resizeItem](https://www.telerik.com/kendo-react-ui/components/scheduler/api/scheduleredititemprops#resizeitem) and [onResizeItemChange](https://www.telerik.com/kendo-react-ui/components/scheduler/api/scheduleredititemprops#onresizeitemchange)
* [removeItem](https://www.telerik.com/kendo-react-ui/components/scheduler/api/scheduleredititemprops#removeitem) and [onRemoveItemChange](https://www.telerik.com/kendo-react-ui/components/scheduler/api/scheduleredititemprops#onremoveitemchange)
* [showOccurrenceDialog](https://www.telerik.com/kendo-react-ui/components/scheduler/api/scheduleredititemprops#showoccurrencedialog) and [onShowOccurrenceDialogChange](https://www.telerik.com/kendo-react-ui/components/scheduler/api/scheduleredititemprops#onshowoccurrencedialogchange)
* [showRemoveDialog](https://www.telerik.com/kendo-react-ui/components/scheduler/api/scheduleredititemprops#showremovedialog) and [onShowRemoveDialogChange](https://www.telerik.com/kendo-react-ui/components/scheduler/api/scheduleredititemprops#onshowremovedialogchange)

To control the state of any of the state fields, provide the corresponding `value`-`handler` pair. For example, if you want to control the `dragItem`, provide your own `onDragItemChange` handler, modify the `DataItem` as needed, and pass it back through the `dragItem` property.

The following example demonstrates controlling the `dragItem` state to disallow dragging outside of working hours. We will be hard-coding the `timezone` to the `Etc/UTC` standard.

[Demo Source](https://demos.telerik.com/kendo-react-ui/scheduler/items/edit-item/controlled-state/func/source.txt)

## Extending the Editing

The most common scenario of controlling the editing is to build on top of it. Adding additional functionality without modifying the current one is possible by controlling the state, but do not override the current state.

In the following example we will create an additional step before entering `form-edit` mode. The requirements are:

* On `click`, display a custom [Popup](https://www.telerik.com/kendo-react-ui/components/popup) with additional info and a `close` button and an `expand` button.
* On `close` button click, `close` the popup.
* On `expand` button click, change the `formItem` state of the `SchedulerEditItem`.

First, we will define our custom `SchedulerEditItem` which will contain our logic.

```jsx
    const CustomEditItem = (props) => {
        return (<SchedulerEditItem {...props} />)
    }
```

Now we'd like to render a `Popup`, whenever the `item` receives a focus.

```jsx
    const CustomEditItem = (props) => {
        const [show, setShow] = React.useState(false);

        const handleFocus = React.useCallback(
            (event) => { setShow(true); if(props.onFocus) {props.onFocus(event)} },
            [setShow]
        )

        return (
            <React.Fragment>
                <SchedulerEditItem
                    {...props}
                    onFocus={handleFocus}
                />
                <Popup
                    show={show}
                >
                    <div>
                        <h5>{props.title}</h5>
                        <Button className="k-icon k-i-edit"/>
                        <Button className="k-icon k-i-close"/>
                    </div>
                </Popup>
            </React.Fragment>
        )
    }
```

The popup needs an `anchor`, so we will need the `ref` from the default item.

```jsx
    const CustomEditItem = (props) => {
        const ref = React.useRef(null);
        const [show, setShow] = React.useState(false);

        const handleFocus = React.useCallback(
            (event) => { setShow(true); if(props.onFocus) {props.onFocus(event)} },
            [setShow]
        )

        return (
            <React.Fragment>
                <SchedulerEditItem
                    ref={ref}
                    {...props}
                    onFocus={handleFocus}
                />
                <Popup
                    anchor={ref.current && ref.current.element}
                    show={show}
                >
                    <div>
                        <h5>{props.title}</h5>
                        <Button className="k-icon k-i-edit"/>
                        <Button className="k-icon k-i-close"/>
                    </div>
                </Popup>
            </React.Fragment>
        )
    }
```

Adding the handler to handle the `close` click and the `edit` click, as well as controlling the `formItem` state, while still accepting any change to it proposed by the `SchedulerItem` through the `onEditItemChange` event.

```jsx
    const CustomEditItem = (props) => {
        const ref = React.useRef(null);

        const [show, setShow] = React.useState(false);
        const [formItem, setFormItem] = React.useState(null);

        const handleFocus = React.useCallback(
            (event) => { setShow(true); if(props.onFocus) {props.onFocus(event)} },
            [setShow]
        )

        const handleCloseClick = React.useCallback(
            (event) => { setShow(false); },
            [setShow]
        )

        const handleEditClick = React.useCallback(
            (event) => { setFormItem(props.dataItem); },
            [setShow]
        )

        const handleFormItemChange = React.useCallback(
            (event) => { setFormItem(event.value); },
            [setShow]
        )

        return (
            <React.Fragment>
                <SchedulerEditItem
                    ref={ref}
                    {...props}
                    onFocus={handleFocus}
                    // Control formItem so the Edit button can open the form.
                    formItem={formItem}
                    onFormItemChange={handleFormItemChange}
                />
                <Popup
                    anchor={ref.current && ref.current.element}
                    show={show}
                >
                    <div>
                        <h5>{props.title}</h5>
                        <Button className="k-icon k-i-edit" onClick={handleEditClick} />
                        <Button className="k-icon k-i-close" onClick={handleCloseClick} />
                    </div>
                </Popup>
            </React.Fragment>
        )
    }
```

Now lets pass the `CustomEditItem` to the `Scheduler` and see our example in action:

[Demo Source](https://demos.telerik.com/kendo-react-ui/scheduler/items/edit-item/extending/func/source.txt)

## Suggested Links

* [API Reference of the Scheduler](https://www.telerik.com/kendo-react-ui/components/scheduler/api/scheduler)
* [API Reference of the SchedulerEditItemProps](https://www.telerik.com/kendo-react-ui/components/scheduler/api/scheduleredititemprops)
* [KendoReact Scheduler](https://www.telerik.com/kendo-react-ui/components/scheduler/)