Articles in this section
Category / Section

How to show time indicator in WinUI Scheduler ?

5 mins read

Show the popup at a specific time when you drag and drop the appointment in the WinUI WinUI Scheduler by using the ShowTimeIndicator property of the DragandDropSettings in an AppointmentDragOver event in the Scheduler.

C#

Create a custom class Meeting with mandatory fields From, To, EventName and color.

public class Meeting : INotifyPropertyChanged
{
    private string eventName;
    private bool allDay;
    private Brush color;
    private DateTime to;
    private DateTime from;
}  

C#

Create a ViewModel class and add the appointment details.

public class SchedulerViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Meeting> meetings;
    
    public SchedulerViewModel()
    {
        Meetings = new ObservableCollection<Meeting>();
        Meeting meeting = new Meeting();
        meeting.From = DateTime.Today.AddHours(13);
        meeting.To = meeting.From.AddHours(1);
        meeting.EventName = "Anniversary";
        meeting.AllDay = false;
        meeting.Color = new SolidColorBrush(Colors.Green);
        Meetings.Add(meeting);
    }
}

XAML

Bind the appointments to a schedule using the ItemsSource property, and enable the appointment drag and drop by setting the AppointmentEditFlag as DragDrop.

<Grid>
    <Grid.DataContext>
        <local:SchedulerViewModel/>
    </Grid.DataContext>
 
    <scheduler:SfScheduler 
        x:Name="Schedule"
        ViewType="Week"
        ItemsSource="{Binding Meetings}" 
        AppointmentEditFlag="DragDrop"
        AppointmentDragOver="OnAppointmentDragOver">
 
        <scheduler:SfScheduler.AppointmentMapping>
            <scheduler:AppointmentMapping
                StartTime="From"
                EndTime="To"
                Subject="EventName"
                AppointmentBackground="Color"
                IsAllDay="AllDay" >
            </scheduler:AppointmentMapping>
        </scheduler:SfScheduler.AppointmentMapping>
    </scheduler:SfScheduler>
</Grid>

C#

The ShowTimeIndicator property updated in the AppointmentDragOver event is based on the dragging time.

//Event Customization
private void OnAppointmentDragOver (object sender, AppointmentDragOverEventArgs e)
{
    if(e.DraggingTime.Minute == 30 || e.DraggingTime.Minute == 00)
    {
        this.Schedule.DragDropSettings.ShowTimeIndicator = true;
    }
    else
        this.Schedule.DragDropSettings.ShowTimeIndicator = false;
}

Graphical user interface, application, table, ExcelDescription automatically generated

 Conclusion

I hope you enjoyed learning about how to show time indicator on a specific time when dragging an appointment in WinUI Scheduler (Calendar).

You can refer to our WinUI Scheduler feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our scheduler example to understand how to create and manipulate data in the WinUI Scheduler.

For current customers, you can check out our Document processing libraries from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our WinUI Controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Note:

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

Take a moment to pursue the documentation. You can also find the options like time indicator on appointment dragging.

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied