Appointment Editing in WinUI Scheduler (SfScheduler)

22 Jul 202610 minutes to read

This section explains how to handle appointment editing in WinUI Scheduler and also explains appointment resizing.

Creating appointments

The Scheduler supports adding new appointments by using the Appointment Editor UI dialog. Open this editor dialog by double-clicking on a time cell, month cell, or view header.

NOTE

  • If AllowViewNavigation is true, the current view navigates to the respective day or timeline day view by single-clicking on the date in the view header. Double-clicking on the view header cell opens the appointment editor window, and by default, the AllDay checkbox is checked in the appointment editor window.
  • All-day appointments can be created by double-clicking on the view header, and this is not applicable for the month view header.

Editing appointment

The Scheduler supports editing existing appointments by using the Appointment Editor UI dialog. Open this dialog by double-clicking on the appointment.

edit-an-appointment-using-appointment-editor-dialog-in-winui-scheduler

The appointments in the appointment editor dialog can be edited. These changes will be saved back in the appointment and mapped data object when using data binding.

Edit recurring appointment

The Scheduler supports editing recurring appointments. The following editor dialog will appear while editing a recurring appointment to select whether to edit only the particular occurrence or the recurrence series.

edit-an-recurring-appointment-using-recurring-appointment-editor-dialog-in-winui-scheduler

Handle the opening of the recurrence popup window using the EditMode property in the RecurringAppointmentBeginningEditEventArgs by handling the RecurringAppointmentBeginningEdit event.

RecurringAppointmentBeginningEdit Event

The opening of the recurrence popup editor dialog can be handled using the EditMode property in the RecurringAppointmentBeginningEditEventArgs by handling the RecurringAppointmentBeginningEdit event.

EditMode: Gets or sets the edit mode to perform the edit option to edit the occurrence or series for a recurrence appointment. The default value of the EditMode is User.

  • User: The default editor content dialog will appear when editing a recurrence appointment to select the edit option from the end user.
  • Occurrence: Edits only a particular occurrence in a recurrence appointment. The default editor content dialog will not appear.
  • Series: Edits the entire series in a recurrence appointment. The default editor content dialog will not appear.
using Syncfusion.UI.Xaml.Scheduler;

this.scheduler.RecurringAppointmentBeginningEdit += scheduler_RecurringAppointmentBeginningEdit;

private void scheduler_RecurringAppointmentBeginningEdit(object sender, RecurringAppointmentBeginningEditEventArgs e)
{
    // Get or set the edit mode to perform the edit option.
    e.EditMode = RecurringAppointmentEditMode.Occurrence;
}

AppointmentEditorOpening event

While opening the appointment editor UI dialog to add or update an appointment, the Scheduler notifies the AppointmentEditorOpening event.

The AppointmentEditorOpeningEventArgs has the following members that provide the information for the AppointmentEditorOpening event.

Appointment: Gets the details of the selected appointment that is being updated. It will be null when adding a new appointment using the appointment editor.

DateTime: Gets the DateTime of the time slot or month cell where the user double-clicked.

AppointmentEditorOptions: Specifies the editors to show for the ScheduleAppointment details in SchedulerAppointmentEditorView when double-clicking the scheduler.

Cancel: Cancels the default appointment editor from showing by setting this property to true.

For example, to use a custom appointment editor dialog instead of the default appointment editor content dialog, you can handle the AppointmentEditorOpening event.

using Syncfusion.UI.Xaml.Scheduler;

this.Schedule.AppointmentEditorOpening += Schedule_AppointmentEditorOpening;

private void Schedule_AppointmentEditorOpening(object sender, AppointmentEditorOpeningEventArgs e)
{
    // To handle the default appointment editor content dialog by setting the e.Cancel value to true.
    e.Cancel = true;

    if (e.Appointment != null)
    {
        // Display the custom appointment editor content dialog to edit the appointment.
    }
    else
    {
        // Display the custom appointment editor content dialog to add a new appointment.
    }
}
  • Resource: Gets the resource of an appointment under which the appointment is located.

Visible/Collapse the built-in editors in appointment editor dialog

Programmatically show or collapse the editors by setting the AppointmentEditorOptions property in SchedulerAppointmentEditorView. By default, the value of AppointmentEditorOptions is set to AppointmentEditorOptions.All in the SchedulerAppointmentEditorView, which displays all the appointment editors. The following code shows how to collapse the Recurrence editor by handling the AppointmentEditorOptions event.

using Syncfusion.UI.Xaml.Scheduler;

this.Schedule.AppointmentEditorOpening += Schedule_AppointmentEditorOpening;

private void Schedule_AppointmentEditorOpening(object sender, AppointmentEditorOpeningEventArgs e)
{
    e.AppointmentEditorOptions = AppointmentEditorOptions.All | (~AppointmentEditorOptions.Background & ~AppointmentEditorOptions.Foreground & ~AppointmentEditorOptions.Reminder & ~AppointmentEditorOptions.Resource);
}

collapse-build-in-editors-of-appointment-editor-dialog-in-winui-scheduler

NOTE

  • The basic editors such as Subject, Location, Start, and End of the scheduler appointment editor cannot be collapsed.

AppointmentEditorClosing event

While closing the appointment editor content dialog after adding or editing the schedule appointment, the Scheduler notifies the AppointmentEditorClosing event.

The AppointmentEditorClosingEventArgs has the following members that provide the information for the AppointmentEditorClosing event.

Handled: Gets or sets a value that indicates whether the scheduler can update the underlying appointments collection or appointment based on the action performed in the appointment editor. If the value is true, the scheduler does not perform the action and the code in the handler must perform the action. The default value of Handled is false.

Appointment: Gets the details of the updated or newly added appointment.

Cancel: Cancels the default appointment editor closing by setting this property to true.

Action: Gets the action of the appointment, which is Add, Edit, Delete, or Cancel.

  • Add: Specifies that an appointment is newly added using the appointment editor.
  • Edit: Specifies that an appointment is edited using the appointment editor.
  • Delete: Specifies that an appointment is deleted using the appointment editor.
  • Cancel: Specifies that appointment editing is canceled using the appointment editor.

For example, to handle the appointment adding for today’s date, the user can handle the AppointmentEditorClosing event.

using Syncfusion.UI.Xaml.Scheduler;

this.Schedule.AppointmentEditorClosing += Schedule_AppointmentEditorClosing;

private void Schedule_AppointmentEditorClosing(object sender, AppointmentEditorClosingEventArgs e)
{
    var appointment = e.Appointment as ScheduleAppointment;
    if (appointment != null)
    {
        if (appointment.StartTime.Day == DateTime.Now.Day)
            e.Handled = true;
    }
}
  • Resource: Gets the resource collection of edited appointment.

Disable appointment editing

To disable appointment editing functionality, set the AppointmentEditFlag property to None. In this case, adding, editing, resizing, and drag-and-drop of appointments cannot be performed.

<Window
    ...
    xmlns:scheduler="using:Syncfusion.UI.Xaml.Scheduler">
    <scheduler:SfScheduler x:Name="Schedule"  
                           ViewType="Week"
                           AppointmentEditFlag="None">
    </scheduler:SfScheduler> 
</Window>

Delete appointments

The Scheduler supports two ways to remove the selected appointment.

  1. Pressing the Delete key.
  2. Using the appointment editor dialog.

Delete recurring appointment

The Scheduler supports deleting recurring appointments. The following editor dialog will appear when the user deletes a recurring appointment. Select the delete option to apply the changes to the occurrence or appointment series.

delete-an-appointment-using-recurring-appointment-editor-dialog-in-winui-scheduler

AppointmentDeleting event

The Scheduler notifies the AppointmentDeleting event when the user deletes the appointment.

The AppointmentDeletingEventArgs has the following members that provide information for the AppointmentDeleting event.

Appointment: Gets the selected appointment to delete.

Cancel: Cancels the appointment deleting by setting this property to true.

using Syncfusion.UI.Xaml.Scheduler;

this.Schedule.AppointmentDeleting += Schedule_AppointmentDeleting;

private void Schedule_AppointmentDeleting(object sender, AppointmentDeletingEventArgs e)
{
    // To notify when restricting appointment delete.
    e.Cancel = true;
}

Appointment resizing

The Scheduler supports resizing the selected appointment. This support is available for all views except the Month view.

Disable appointment resize

The Scheduler supports disabling appointment resizing by setting the AppointmentEditFlag property except Resize. In this case, the appointment resizing cannot be performed.

<Window
    ...
    xmlns:scheduler="using:Syncfusion.UI.Xaml.Scheduler">
    <scheduler:SfScheduler x:Name="Schedule"  
                           ViewType="Week"
                           AppointmentEditFlag="Add,DragDrop,Edit">
    </scheduler:SfScheduler>
</Window>
using Syncfusion.UI.Xaml.Scheduler;

this.Schedule.AppointmentEditFlag = AppointmentEditFlag.Add | AppointmentEditFlag.DragDrop | AppointmentEditFlag.Edit;

AppointmentResizing event

The Scheduler notifies the AppointmentResizing event when the user resizes an appointment.

The AppointmentResizingEventArgs has the following members that provide information for the AppointmentResizing event.

Appointment: Gets the appointment being resized.

Action: Gets the current action being performed while resizing an appointment.

  • Starting: Denotes an event that occurs when the user moves the mouse over the appointment to resize it (before the resize cursor is shown).
  • Progressing: Denotes an event that occurs when the user is resizing an appointment.
  • Committing: Denotes an event that occurs when the user ends the resizing by releasing the pointer to commit the changes to the underlying appointment.
  • Canceling: Denotes the event that occurs before canceling the resize operation when the user presses the Esc key while a resize operation is in progress.

StartTime: Gets the updated start time of the appointment during the resize operation.

EndTime: Gets the updated end time of the appointment during the resize operation.

CanContinueResize: Gets or sets a value indicating whether the resize operation should be continued or canceled. Set this property when Action is Starting, Progressing, or Canceling. This property will not have any effect when Action is Committing.

CanCommit: Gets or sets a value indicating whether to update the underlying appointment when the resize operation is completed. Set this property when Action is Canceling and Committing. This property will not have any effect when Action is Starting and Progressing.

using Syncfusion.UI.Xaml.Scheduler;

this.Schedule.AppointmentResizing += Schedule_AppointmentResizing;

private void Schedule_AppointmentResizing(object sender, AppointmentResizingEventArgs e)
{
    // To notify when resizing the appointment. 
}
  • Resource: Gets the resource of an appointment under which the appointment is located.