Editor Window in the React Scheduler

The React Scheduler includes a flexible editor window (modal dialog) for creating or editing events. This interface supports full customization of the header, footer, field layout, custom form fields, validation, and per-view editor templates for workflow-specific requirements.

Editor customization is managed through the Scheduler editor property, which accepts a function returning a SchedulerEditorPopup component or any React node

This component enables customization of the dialog chrome (header and footer), modification of fields and validation, replacement of fields with custom inputs, or the construction of a custom form layout

The SchedulerEditorProps exposes several properties that enable interaction with individual sections of the editor:

• data - The current event data being created or edited.
• originalData - The original event data before any changes.
• action - Indicates the current editor action, such as Add or Edit.
• dialogProps - Props for configuring the underlying dialog component.
• fields - An array of field configurations for the built-in form inputs.
• onClose - A callback function invoked when the editor is closed.
• children - Custom React nodes to replace the default field layout.

Built-in fields

Customizing built-in fields

Existing fields can be modified without rebuilding the form by passing an array of SchedulerEditorField configurations to the fields property. Each configuration allows for changing labels, placeholders, or hiding specific inputs.

Field validations

Field-level validation can be implemented using built-in rules or custom validators. Add a validationRule property to any field configuration to enforce constraints (such as required, minLength, maxLength) that are validated when the form is submitted.

Validation failures prevent the event from being saved, providing immediate feedback to correct errors before submission.

The following example demonstrates how to implement field validations.

Full layout customization

For advanced scenarios where a specific grid layout or custom inputs are required, utilize the children property. When children are provided, the default field generation is bypassed, providing full control over the DOM structure.

To validate individual fields in custom form components, the rule property can be applied to each form input. For custom validation logic during the save operation, the onEditorSubmit event can be used to validate data and saving is prevented by setting args.cancel to true when validation fails.

The following example demonstrates how to customize the entire form layout and add fields with validation using the rule property in form components and the onEditorSubmit event for save-time validation.

Note: The editor window can also be customized at the view level. This allows different editor layouts or fields to be presented depending on the active view (e.g., a simplified form for the Month view vs. a detailed form for Day view). Define the editor property on the specific view directive to override the global editor configuration.