Appointment Drag and Drop in WinUI Scheduler (SfScheduler)

18 May 20213 minutes to read

The Scheduler supports to reschedule the appointment by performing the drag and drop operation.

NOTE

Due to WinUI framework issue, this feature isn’t included in the WinUI desktop applications and this is applicable only for WinUI UWP applications.

Disable drag and drop

The Scheduler supports disabling the appointment drag and drop by setting the AppointmentEditFlag property except DragDrop. In this case, appointment drag and drop cannot be performed.

<scheduler:SfScheduler x:Name="Schedule" 
                       AppointmentEditFlag="Add,Edit,Resize">
</scheduler:SfScheduler>
this.Schedule.AppointmentEditFlag = AppointmentEditFlag.Add | AppointmentEditFlag.Edit | AppointmentEditFlag.Resize;

Show/Hide the time indicator on appointment dragging

Show or hide the time indicator at a specific time to drag the appointment, by using the ShowTimeIndicator property of DragDropSettings by setting it to true.

this.Schedule.ViewType = SchedulerViewType.Week;
this.Schedule.DragDropSettings.ShowTimeIndicator = true;

show-appointment-dragging-time-indicator-in-winui-scheduler

NOTE

  • Not applicable for the Month and Timeline Month views.
  • If the TimeRulerSize property value is zero to collapse the time ruler labels, then drag the time indicator will not be shown.

Appointment dragging time indicator text formatting

Customize the format for the appointment dragging time indicator format by setting the TimeIndicatorFormat property of DragDropSettings in Scheduler.

this.Schedule.ViewType = SchedulerViewType.Week;
this.Schedule.DragDropSettings.TimeIndicatorFormat = "HH mm tt";

customize-appointment-dragging-time-indicator-format-in-winui-scheduler

AppointmentDragOver event

The Scheduler notifies by AppointmentDragOver when dragging the appointment. The AppointmentDragOverEventArgs has following members which provides the information for the AppointmentDragOver event.

Appointment: Gets the Appointment that is dragging.

DraggingPoint: Gets the dragging point of the schedule appointment UI.

DraggingTime: Gets the dragging time of the dragging appointment object.

SourceResource: Gets the SchedulerResource where the appointment was located before starting the dragging.

TargetResource: Gets the SchedulerResource where the appointment is currently being dragged over.

this.Schedule.AppointmentDragOver += Schedule_AppointmentDragOver;

private void Schedule_AppointmentDragOver(object sender, AppointmentDragOverEventArgs e)
{
    //To notify when dragging the appointment.
}

AppointmentDragStarting event

The Scheduler is notified by the AppointmentDragStarting when starting to drag the appointment. The AppointmentDragStartingEventArgs has the following members who provide the information for the AppointmentDragStarting event.

Appointment: Get the selected appointment.

Cancel: To avoid appointment dragging by enabling this property.

Resource: Gets the resource of an appointment under which the appointment is located.

this.Schedule.AppointmentDragStarting += Schedule_AppointmentDragStarting;

private void Schedule_AppointmentDragStarting(object sender, AppointmentDragStartingEventArgs e)
{
    //To notify when start to drag the appointment.
}

AppointmentDropping event

The Scheduler is notified by AppointmentDropping when the appointment is dropped. The AppointmentDroppingEventArgs has the following members who provide information for the AppointmentDropping event.

Appointment: Gets the selected appointment that is dragged and dropped.

Cancel: To avoid the appointment dropping by enabling this property.

DropTime: Gets the dropped time of the dragged appointment.

SourceResource: Gets the SchedulerResource where the appointment was located before starting the dragging.

TargetResource: Gets the SchedulerResource where the appointment is currently being dragged over.

this.Schedule.AppointmentDropping += Schedule_AppointmentDropping;

private void Schedule_AppointmentDropping(object sender, AppointmentDroppingEventArgs e)
{
    //To notify when the appointment is dropping.
}