Custom Edit Form
The Scheduler enables you to customize the editing form and inputs used to create and update events. You can apply the following customizations:
- Customize selected fields of the default editing form
- Customize the recurrence summary
- Customize quick create
- Create a custom editing form
Customizing 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, you can customize selected field editors and keep the default editing configuration for the other fields.
The default startEditor and endEditor use separate date and time inputs with coordinated range selection.
The following example demonstrates how you can define custom editors for the title and isAllDay fields of each event. The SchedulerFormEditor API lists the available editor properties.
Customizing the Recurrence Summary
Use the recurrenceSummaryTemplate property to customize the recurrence summary. The summary is displayed below the recurrence button and inside the recurrence editor dialog, and is rendered only when the event has a recurrence rule. The template receives the current recurrenceRule, the default summary text, and the parsedRule object.
The recurrence button always displays the localized Make recurring or Edit recurrence label.
Use text to keep the default translation or build a summary from parsedRule. Truncated summaries show their full text in a tooltip. The template props describe each value.
The
recurrenceButtonTextTemplateproperty is deprecated and ignored. UserecurrenceSummaryTemplateinstead.
Pass a Vue component to the template:
<SchedulerFormEditor :recurrence-summary-template="RecurrenceSummaryTemplate" />This example adds an icon and border to the default summary. Open an event and choose Edit the series, then Edit recurrence, to see both placements.
Customizing Quick Create
Use quickCreateForm to provide a component, render function, or named slot. You can wrap SchedulerQuickCreateForm and pass its validator prop to validate the title. Without a custom validator, an empty title is allowed.
When using a named slot, forward the supplied props with v-bind="props" to preserve the submit, moreoptions, and cancel listeners.
The validator returns {} for valid input or an error such as { title: 'Enter an event title.' }. Use the mapped title field for custom model fields.
Other required fields must be completed through More options and validated in the full form.
To control the draft, wrap SchedulerEditSlot through the Scheduler's editSlot prop and use quickCreateFormItem with quickcreateformitemchange. A view's editSlot setting takes precedence over the Scheduler-level setting.
To apply the same creation restriction to the full editor, also control formItem with formitemchange. Accept event.value when creation is allowed. Always accept null so the editor can close.
The example requires a title and limits slot-based creation to weekdays, 9 AM to 5 PM.
The Agenda view retains its task-based interactions and does not display quick-create popovers.
Creating a Custom Editing Form from Scratch
The Scheduler also provides an option to define a fully customized editing form. The following example uses a custom form to edit Scheduler events.
Custom forms must handle their own date constraints and recurrence fields. Keep
SchedulerFormEditorto use its date coordination and recurrence dialog.