SchedulerFormProps

Premium

Updated on Dec 9, 2025

Represents the props of the KendoReact SchedulerForm component.

Name	Type	Default	Description
dataItem	any		Specifies the dataItem to be visualized inside the form.
dialog?	React.ComponentType<DialogProps>		Overrides the component used for visualizing the dialog. The KendoReact Dialog component is used, by default. For more information, please refer to the Scheduler Form Customization article.
editor?	React.ComponentType<SchedulerFormEditorProps>		Overrides the component used for visualizing the editor. The SchedulerFormEditor component is used, by default. For more information, please refer to the Scheduler Form Customization article.
errors?	{[name: string]: string}		Validation errors that override field and form validators. Provides validation errors directly as an object, unlike the validator prop which expects a callback. When both validator and errors exist for a field, the errors prop takes precedence. jsx const [errors, setErrors] = useState({}); const handleSubmit = async (data) => { const response = await submitToServer(data); if (response.errors) { setErrors(response.errors); } }; <Form errors={errors} onSubmit={handleSubmit} render={props => <FormElement>form content</FormElement>} />
ignoreModified?	boolean		Allows the form to submit even when no fields have been modified. jsx <Form ignoreModified={true} render={props => <form>form content </form>} />
initialValues?	{[name: string]: any}		Sets the starting values for form fields. Set initial values to prevent errors when switching from uncontrolled to controlled mode. jsx const initialValues = { user: { name: '', age: 0 } }; <Form initialValues={initialValues} render={props => <form>form content</form>} />
onCancel?	(event: SchedulerFormStateChangeEvent<null>) => void		Fires when you click the cancel button.
onChange?	(fieldName: string, value: any, valueGetter: (name: string) => any) => void		Fires each time any field value changes. The third parameter valueGetter allows accessing other field values, useful for cross-field validation or clearing related errors. jsx const handleChange = (fieldName, value, valueGetter) => { // For nested fields like 'user.name', access related fields like 'user.email' if (fieldName === 'user.name') { const email = valueGetter('user.email'); console.log('Name changed:', value, 'Email is:', email); } // Clear error for the changed field if (formErrors[fieldName]) { setFormErrors(prev => ({ ...prev, [fieldName]: '' })); } }; <Form errors={formErrors} onChange={handleChange} render={props => <FormElement>form content</FormElement>} />
onClose?	(event: SchedulerFormStateChangeEvent<null>) => void		Fires when you click the close button.
onSubmit	(event: SchedulerFormStateChangeEvent<any>) => void		Fires when you click the submit button.
onSubmitClick?	(event: FormSubmitClickEvent) => void		Handles every submit button click, even when the form is invalid or unchanged. Use this for advanced scenarios where you need to handle all submit events. jsx const handleSubmitClick = event => console.log(event); <Form onSubmitClick={handleSubmitClick} render={props => <form> form content </form>} />
render?	(props: FormRenderProps) => any		The Form content that will be rendered. The default rendering includes a dialog and editor. For more information about customizing some parts of the default rendering please refer to the SchedulerForm Customization article.
validator?	FormValidatorType		Validates the entire form and returns error messages. Return a key-value pair where the key is the field path and the value is the error message. You can validate nested fields like 'users[0].name'. Only synchronous functions are supported. jsx const validator = values => ({ user: { name: values.user.name ? "" : "Name is required." } }); <Form validator={validator} render={props => <form> form content </form>} />