SchedulerEditItem
The SchedulerEditItem component is responsible for the editing functionality of an Item.
To extend the default SchedulerEditItem, set the 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 and onFormItemChange
- dragItem and onDragItemChange
- resizeItem and onResizeItemChange
- removeItem and onRemoveItemChange
- showOccurrenceDialog and onShowOccurrenceDialogChange
- showRemoveDialog and 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.
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 with additional info and aclosebutton and anexpandbutton. - On
closebutton click,closethe popup. - On
expandbutton click, change theformItemstate of theSchedulerEditItem.
First, we will define our custom SchedulerEditItem which will contain our logic.
const CustomEditItem = (props) => {
return (<SchedulerEditItem {...props} />)
}Now we'd like to render a Popup, whenever the item receives a focus.
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.
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.
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}
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:
