New to KendoReactStart a free 30-day trial

SchedulerFormEditorProps
Premium

Represents the props of the KendoReact SchedulerFormEditor component.

NameTypeDefaultDescription

allDayEditor?

React.ComponentType<TargetlessChangeEvent<CheckboxProps intersected with FieldProps>>

Overrides the component used for visualizing the allDay field editor. The KendoReact Checkbox component is used, by default.

For more information, please refer to the Scheduler Form Editor Customization article.

allDayLabel?

React.ComponentType<LabelProps intersected with FieldProps>

Overrides the component used for visualizing the allDay field label. The KendoReact Label component is used, by default.

For more information, please refer to the Scheduler Form Editor Customization article.

allowSubmit

boolean

Indicates if the Form is ready to be submitted.

  • If allowSubmit is set to true and the Form is valid, the user will be able to submit the form.
  • If allowSubmit is set to true and the Form is not valid, the user will be able to set the touched and visited state of all fields to true.

Useful for toggling the disabled state of the Submit button.

jsx
console.log(props.allowSubmit);

descriptionEditor?

React.ComponentType<TargetlessChangeEvent<TextAreaProps intersected with FieldProps>>

Overrides the component used for visualizing the description field editor. The KendoReact TextArea component is used, by default.

For more information, please refer to the Scheduler Form Editor Customization article.

descriptionError?

React.ComponentType<ErrorProps intersected with FieldProps>

Overrides the component used for visualizing the description field error. The KendoReact Error component is used, by default.

For more information, please refer to the Scheduler Form Editor Customization article.

descriptionLabel?

React.ComponentType<LabelProps intersected with FieldProps>

Overrides the component used for visualizing the description field label. The KendoReact Label component is used, by default.

For more information, please refer to the Scheduler Form Editor Customization article.

endEditor?

React.ComponentType<TargetlessChangeEvent<Omit<DatePickerProps | DateTimePickerProps> intersected with { as?: ComponentType<DatePickerProps | DateTimePickerProps>; onChange?: (args: { value: "null" | Date; }) => void; onClose?: (args: DatePickerCloseEvent | DateTimePickerCloseEvent) => void; onOpen?: (args: DatePickerOpenEvent | DateTimePickerOpenEvent) => void; } intersected with FieldProps>>

Overrides the component used for visualizing the end field editor. The KendoReact DatePicker or KendoReact DateTimePicker component is used by default depending on the allDay field value.

For more information, please refer to the Scheduler Form Editor Customization article.

endError?

React.ComponentType<ErrorProps intersected with FieldProps>

Overrides the component used for visualizing the end field error. The KendoReact Error component is used, by default.

For more information, please refer to the Scheduler Form Editor Customization article.

endLabel?

React.ComponentType<LabelProps intersected with FieldProps>

Overrides the component used for visualizing the end field label. The KendoReact Label component is used, by default.

For more information, please refer to the Scheduler Form Editor Customization article.

endTimezoneCheckedEditor?

React.ComponentType<TargetlessChangeEvent<CheckboxProps>>

Overrides the component used for visualizing the end timezone checked editor. The KendoReact Checkbox component is used, by default.

For more information, please refer to the Scheduler Form Editor Customization article.

endTimezoneCheckedLabel?

React.ComponentType<LabelProps>

Overrides the component used for visualizing the start timezone checked label. The KendoReact Label component is used, by default.

For more information, please refer to the Scheduler Form Editor Customization article.

endTimezoneEditor?

React.ComponentType<TargetlessChangeEvent<ComboBoxProps>>

Overrides the component used for visualizing the end timezone field editor. An extended KendoReact ComboBox component is used, by default.

For more information, please refer to the Scheduler Form Editor Customization article.

endTimezoneError?

React.ComponentType<ErrorProps>

Overrides the component used for visualizing the end timezone field error. The KendoReact Error component is used, by default.

For more information, please refer to the Scheduler Form Editor Customization article.

endTimezoneLabel?

React.ComponentType<LabelProps>

Overrides the component used for visualizing the end timezone field label. The KendoReact Label component is used, by default.

For more information, please refer to the Scheduler Form Editor Customization article.

errors

KeyValue<string>

The key-value pair containing the current errors by field path, combined from both field and form level validators.

jsx
console.log(props.errors);

id?

string

Specifies the id attribute of the root element.

modified

boolean

Indicates if the Form is modified. If any field is modified, modified is set to true. The modified state of a field is set to true when the onChange callback of the Field component is called for the first time.

jsx
console.log(props.modified);

onChange

(name: string, options: { value: any; }) => void

A callback for emitting changes to a specific field without using the Field component (see example).

Use onChange only if you cannot achieve the desired behavior through the Field component.

jsx
props.onChange("user.name", { value: "John Doe" });

onFormReset

() => void

A callback for resetting the Form.

jsx
<button onClick={props.onFormReset}>Reset</button>

onSubmit

(event: SyntheticEvent<any>) => void

A callback for submitting the Form. Can be passed to the onClick property of the Submit button.

jsx
const handleSubmit = event => console.log("Form submitted");
<button onClick={props.onSubmit}>Submit</button>

recurrenceEditor?

React.ComponentType<TargetlessChangeEvent<FieldProps>>

Overrides the component used for visualizing the recurrenceRule field editor. A custom made RecurrenceEditor component is used, by default.

We're planing on releasing the RecurrenceEditor as a standalone component in the future.

For more information, please refer to the Scheduler Form Editor Customization article.

resourceEditor?

React.ComponentType<TargetlessChangeEvent<Object>>

Overrides the component used for visualizing each resource field editor. An extended KendoReact MultiSelect or DropDownList component is used by default, depending on the multiple field of each individual resource.

For more information, please refer to the Scheduler Form Editor Customization article.

resourceLabel?

React.ComponentType<LabelProps intersected with FieldProps>

Overrides the component used for visualizing the start timezone checked field label. The KendoReact Label component is used, by default.

For more information, please refer to the Scheduler Form Editor Customization article.

resourcesError?

React.ComponentType<ErrorProps intersected with FieldProps>

Overrides the component used for visualizing each resources field error. The KendoReact Error component is used, by default.

For more information, please refer to the Scheduler Form Editor Customization article.

startEditor?

React.ComponentType<TargetlessChangeEvent<Omit<DatePickerProps | DateTimePickerProps> intersected with { as?: ComponentType<DatePickerProps | DateTimePickerProps>; onChange?: (args: { value: "null" | Date; }) => void; onClose?: (args: DatePickerCloseEvent | DateTimePickerCloseEvent) => void; onOpen?: (args: DatePickerOpenEvent | DateTimePickerOpenEvent) => void; } intersected with FieldProps>>

Overrides the component used for visualizing the start field editor. The KendoReact DatePicker or KendoReact DateTimePicker component is used by default depending on the allDay field value.

For more information, please refer to the Scheduler Form Editor Customization article.

startError?

React.ComponentType<ErrorProps intersected with FieldProps>

Overrides the component used for visualizing the start field error. The KendoReact Error component is used, by default.

For more information, please refer to the Scheduler Form Editor Customization article.

startLabel?

React.ComponentType<LabelProps intersected with FieldProps>

Overrides the component used for visualizing the start field label. The KendoReact Label component is used, by default.

For more information, please refer to the Scheduler Form Editor Customization article.

startTimezoneCheckedEditor?

React.ComponentType<TargetlessChangeEvent<CheckboxProps>>

Overrides the component used for visualizing the start timezone checked editor. The KendoReact Checkbox component is used, by default.

For more information, please refer to the Scheduler Form Editor Customization article.

startTimezoneCheckedLabel?

React.ComponentType<LabelProps>

Overrides the component used for visualizing the start timezone checked label. The KendoReact Label component is used, by default.

For more information, please refer to the Scheduler Form Editor Customization article.

startTimezoneEditor?

React.ComponentType<TargetlessChangeEvent<ComboBoxProps intersected with FieldProps>>

Overrides the component used for visualizing the start timezone field editor. An extended KendoReact ComboBox component is used, by default.

For more information, please refer to the Scheduler Form Editor Customization article.

startTimezoneError?

React.ComponentType<ErrorProps intersected with FieldProps>

Overrides the component used for visualizing the start timezone field error. The KendoReact Error component is used, by default.

For more information, please refer to the Scheduler Form Editor Customization article.

startTimezoneLabel?

React.ComponentType<LabelProps intersected with FieldProps>

Overrides the component used for visualizing the start timezone field label. The KendoReact Label component is used, by default.

For more information, please refer to the Scheduler Form Editor Customization article.

submitted

boolean

Indicates if the Form is successfully submitted. Useful for detecting if the user is leaving the form before saving changes.

jsx
console.log(props.submitted);

tabIndex?

number

Specifies the tabIndex attribute of the root element.

titleEditor?

React.ComponentType<TargetlessChangeEvent<InputProps intersected with FieldProps>>

Overrides the component used for visualizing the title field editor. The KendoReact Input component is used, by default.

For more information, please refer to the Scheduler Form Editor Customization article.

titleError?

React.ComponentType<LabelProps intersected with FieldProps>

Overrides the component used for visualizing the title field error. The KendoReact Error component is used, by default.

For more information, please refer to the Scheduler Form Editor Customization article.

titleLabel?

React.ComponentType<LabelProps intersected with FieldProps>

Overrides the component used for visualizing the title field label. The KendoReact Label component is used, by default.

For more information, please refer to the Scheduler Form Editor Customization article.

touched

boolean

Indicates if the Form is touched. If any field is touched, touched is set to true. The touched state of a field is set to true when the onBlur callback of the Field component is called or when the user tries to submit the form.

jsx
console.log(props.touched);

valid

boolean

Indicates if the Form is valid. If any field is invalid, valid is set to false.

jsx
console.log(props.valid);

valueGetter

(name: string) => any

A callback for getting the value of a field without using the Field component (see example). Useful for creating and modifying the UI based on the field values.

jsx
const value = props.valueGetter("user.name");
console.log(value);

visited

boolean

Indicates if the Form is visited. If any field is visited, visited is set to true. The visited state of a field is set to true when the onFocus callback of the Field component is called or when the user tries to submit the form.

jsx
console.log(props.visited);
Not finding the help you need?
Contact Support