Custom Edit Form
The Scheduler enables you to customize the Form and Inputs that let you create, update, and delete its events. There are the following custom Form scenarios you can apply for the Scheduler:
- Customize selected fields of the default editing Form
- Create your own custom Form for the events' editing
Customize the default editing Form
The default editing Form of the Scheduler can be customized using the SchedulerFormEditor component and its multiple properties. Using this approach, we can customize only selected Form editors and keep the default editing configuration for the other fields.
The following example demonstrates how we can define custom editors for the title and allDay fields of each task. For more details about the other properties available, you can check this link.
Customize recurrence templates
Use the recurrenceButtonTextTemplate property to customize the text content of the button that opens the recurrence editor. The template receives the current recurrenceRule; its value is null when the event does not recur.
Use the recurrenceSummaryTemplate property to customize the summary displayed in the recurrence editor dialog. The template receives the current recurrenceRule and is rendered only when the event has a recurrence rule.
The following example shows how to provide both templates when rendering a custom form editor.
<SchedulerFormEditor
:recurrence-button-text-template="RecurrenceButtonTextTemplate"
:recurrence-summary-template="RecurrenceSummaryTemplate"
/>Create custom editing Form from scratch
The Scheduler also provides an option to define a fully tailor-made editing Form when such is needed. Below you will see an example in which we are using a fully customized Form to edit the Scheduler's events.