How to show appointment drag time indicator in WPF Scheduler (Calendar)

4 mins read

Show the time indicator only on a specific time while dragging and dropping the appointment in the WPF Schedule by using the DragDropSetting and the ShowTimeIndicator property in an AppointmentDragOver event.

In the AppointmentDragOver event, the ShowTimeIndicator property is updated based on the dragging time.

private void OnScheduleAppointmentDragOver(object sender, AppointmentDragOverEventArgs e)
{
    if (e.DraggingTime.Minute == 30 || e.DraggingTime.Minute == 00)
    {
        schedule.DragDropSettings.ShowTimeIndicator = true;
    }
    else
        schedule.DragDropSettings.ShowTimeIndicator = false;
}

C#
Create a collection of Events for the Scheduler.

public SchedulerViewModel()
{
    this.Events = new ScheduleAppointmentCollection();
    var scheduleAppointment = new ScheduleAppointment()
    {
        StartTime = DateTime.Now,
        EndTime = DateTime.Now.AddHours(1),
        AppointmentBackground = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#FF339933")),
        Subject = "Conference",
    };
    Events.Add(scheduleAppointment);
}

XAML

Bind the appointments from the view model to a schedule by using the ItemsSource property and set AllowDrop as true.

<Window.DataContext>
    <local:SchedulerViewModel/>
</Window.DataContext>
<Grid x:Name="grid">
    <syncfusion:SfScheduler x:Name="schedule"
                            ViewType="WorkWeek" AllowDrop="True"
                            ItemsSource="{Binding Events}"
                            >
    </syncfusion:SfScheduler>
    <interactivity:Interaction.Behaviors>
        <local:ScheduleBehavior/>
    </interactivity:Interaction.Behaviors>
</Grid>

View sample in GitHub

show time indicator on a specific time when dragging an appointment

Did you find this information helpful?

Yes

How to show appointment drag time indicator in WPF Scheduler (Calendar)

Access denied