External Form

Apart from the built-in edit dialog, the Scheduler provides options for editing events in external forms.

External forms are particularly useful when you need to customize the editing experience beyond what the built-in dialog offers. Consider using external forms when you want to:

• Display the edit form alongside the Scheduler instead of in a modal dialog.
• Create more complex forms with custom validation logic or additional fields.
• Integrate event editing with other parts of your application's UI.
• Provide a consistent editing experience that matches your application's design system.

The following example demonstrates how to use an external form to edit the displayed Scheduler events. The form appears below the Scheduler and updates in real-time when you double-click events or time slots.

Change Theme

Theme

Loading ...

Implementation Notes

When implementing external forms, handle the following key scenarios:

• Creating new events—Respond to the slotDblClick event to capture the selected time slot and initialize a new event form.
• Editing existing events—Use the eventDblClick event to load the selected event data into your form.
• Recurring events—For recurring events, present the edit mode dialog to let users choose whether to edit the series or a single occurrence.
• Form validation—Implement custom validation logic that fits your business requirements.

The external form approach gives you complete control over the editing interface while maintaining seamless integration with the Scheduler's event management.

Suggested Links

• Angular Scheduler Overview
• Overview of Editing
• API Reference of the SchedulerComponent
• API Index of the Scheduler