Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (150).NET Core  (25)Angular  (46)ASP.NET  (48)ASP.NET Core  (60)ASP.NET MVC  (84)Azure  (28)Blazor  (84)DocIO  (19)Essential JS 2  (68)Essential Studio  (162)Flutter  (97)JavaScript  (146)Microsoft  (101)PDF  (57)React  (32)Succinctly series  (120)Syncfusion  (464)TypeScript  (30)Uno Platform  (2)UWP  (4)Vue  (26)Webinar  (21)Windows Forms  (54)WPF  (112)Xamarin  (124)XlsIO  (24)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (105)Chart  (48)Cloud  (9)Company  (445)Dashboard  (6)Data Science  (3)Data Validation  (3)DataGrid  (41)Development  (247)Doc  (7)DockingManager  (1)eBook  (91)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (19)Extensions  (12)File Manager  (4)Gantt  (8)Gauge  (6)Git  (4)Grid  (26)HTML  (9)Installer  (2)Knockout  (2)LINQPad  (1)Linux  (1)M-Commerce  (1)Metro Studio  (11)Mobile  (205)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (21)Performance  (4)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (22)SfDataGrid  (8)Silverlight  (21)Sneak Peek  (16)Solution Services  (2)Spreadsheet  (7)SQL  (6)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (9)Tips and Tricks  (52)UI  (113)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (1)Visual Studio  (18)Visual Studio Code  (10)Web  (187)What's new  (120)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Introducing WinUI 3 Project Reunion Scheduler

Introducing WinUI 3 Project Reunion Scheduler

We at Syncfusion released the preview version of our WinUI 3 Project Reunion Scheduler in the 2021 Volume 1 release. The WinUI Scheduler control is used to schedule and manage appointments through an intuitive user interface, like the Windows calendar. It visualizes appointments in different views including day, week, workweek, month, timeline day, timeline week, timeline workweek, and timeline month. With it, users can easily schedule recurring events and appointments in different time zones. It also provides a built-in interface for adding, editing, deleting, and rescheduling appointments, and supports appearance customization and localization to meet the needs of different regions.

The Scheduler has the following essential features in its initial release:

Let’s check out these features and learn how to integrate the WinUI 3 Project Reunion Scheduler into an application.

Views

A wide range of built-in view modes are available: day, week, workweek, timeline day, timeline week, timeline workweek, and timeline month.

Day View Mode in WinUI Scheduler
Day View Mode in WinUI Scheduler
Month View Mode in WinUI Scheduler
Month View Mode in WinUI Scheduler
Timeline Month View Mode in WinUI Scheduler
Timeline Month View Mode in WinUI Scheduler
Week View Mode in WinUI Scheduler
Week View Mode in WinUI Scheduler

Events

Render recurring, all-day, and spanned appointments to visualize your schedules and events easily. Appointments contain information on events scheduled at specific times. In addition to default appointments, users can also use their own collections to connect a business entity to an appointment by mapping their fields, such as start time, end time, subject, notes, and recurrence.

You can easily configure recurring events on a daily, weekly, monthly, or yearly basis. You can also skip or change the occurrence of a recurring appointment.

Recurring Events in WinUI Scheduler

Recurring Events in WinUI Scheduler

Recurring Events in WinUI Scheduler

Recurring Events in WinUI Scheduler
Recurring Events in WinUI Scheduler

Resource grouping

Group appointments based on the resources associated with them in day, week, workweek, timeline day, timeline week, timeline workweek, and timeline month views.

Resource Grouping in WinUI Scheduler
Resource Grouping in WinUI Scheduler

Load on demand

Load appointments on demand for the visible date range with the loading indicator to users. Loading on demand improves the loading performance of appointments ranging multiple months or years.

Loading Appointments on Demand in WinUI Scheduler
Loading Appointments on Demand in WinUI Scheduler

Month agenda view

Display appointments in a list below the month view by clicking a day.

Month Agenda View in WinUI Scheduler
Month Agenda View in WinUI Scheduler

Built-in appointment editor

You can easily create, edit, or delete appointments using the built-in appointment editor.

Edit Event Dialog in WinUI Scheduler
Edit Event Dialog in WinUI Scheduler

Context menu and commands

The scheduler context menu displays shortcut options to add, edit, and delete appointments during user interactions such as holding or right-clicking appointments, time slots, and month cells. Use built-in RoutedUICommands to handle the context menu options.

Context Menu in WinUI Scheduler
Context Menu in WinUI Scheduler

Time zones

Display appointments created in various time zones in a system. Appointment start and end times are also automatically adjusted and displayed based on daylight savings time.

Utilize Different Time Zones in a Schedule
Utilize Different Time Zones in a Schedule

Special time regions

You can create special time regions to highlight time slots in day, week, workweek, timeline day, timeline week, and timeline workweek views. Adjacent special time regions can be merged and shown as a single region instead of separate regions for each day in week and workweek views.

Special Time Region in WinUI Scheduler
Special Time Region in WinUI Scheduler

Flexible working days

Customize the workdays in a workweek so that the remaining days will be hidden from the view.

Customizing the Working Days in WinUI Scheduler
Customizing the Working Days in WinUI Scheduler

First day of the week

You can also customize the first day of the week as needed. The default first day is Sunday.

Customizing the First Day of the Week in WinUI Scheduler
Customizing the First Day of the Week in WinUI Scheduler

Date restriction

Prevent navigation beyond the minimum date and maximum date. This restricts users from selecting dates outside the time range.

Appearance customization

You can provide a unique and consistent look to your Scheduler by customizing its appearance using styles, data templates, and themes.

Appearance customization in WinUI Scheduler
Appearance customization in WinUI Scheduler
Designing an Airfare Calendar with WinUI Scheduler
Designing an Airfare Calendar with WinUI Scheduler

Theming

The Scheduler control is available in both light and dark themes.

Themes in WinUI Scheduler
Themes in WinUI Scheduler

Localization and globalization

Display the current date and time in globalized formats. All static text in the Scheduler can be localized.

Localization and Globalization Support in WinUI Scheduler
Localization and Globalization Support in WinUI Scheduler

Getting started with the WinUI Scheduler

Now that we’ve seen the features of the WinUI 3 Scheduler control, let’s cover how to add it in your application and use its basic features. You can implement the Scheduler in both WinUI 3 desktop and WinUI 3 UWP applications.

For this example, I am going to use the Scheduler in a WinUI 3 desktop project.

Step 1: Create a WinUI 3 application

First, create a simple WinUI 3 desktop project using the instructions provided in the following documentations: Get started with WinUI 3 for desktop apps and Build desktop Windows apps with Project Reunion 0.5.

Step 2: Add the necessary NuGet package

Then, add the Syncfusion.Scheduler.WinUI NuGet package to the application from nuget.org or from the installed location, C:\Program Files (x86)\Syncfusion\Essential Studio\WinUI\xx.x.x.xx\NuGetPackages.

Install the Syncfusion.Scheduler.WinUI NuGet package 

Note: xx.x.x.xx denotes the version [19.1.0.55-beta] of the Syncfusion WinUI 3 Project Reunion Scheduler package.

Step 3: Add the namespace

Include the scheduler namespace in your XAML file with the following code:

xmlns:scheduler="using:Syncfusion.UI.Xaml.Scheduler"

Step 4: Initialize the Scheduler

Initialize the Scheduler control as shown in the following code example.

Xaml

<scheduler:SfScheduler x:Name="Schedule" ViewType="Week"/>

C#

SfScheduler scheduler = new SfScheduler();
this.Content = scheduler;

Step 5: Add appointments

ScheduleAppointment is a class that defines appointments in the scheduler control. It has some basic properties such as StartTime, EndTime, Subject, and you can add some additional information about the appointment using the Notes, Location, and IsAllDay properties.

Xaml

<Grid>
  <Grid.DataContext>
    <local:SchedulerViewModel/>
  </Grid.DataContext>
  <scheduler:SfScheduler x:Name="Schedule" ItemsSource="{Binding Events}" ViewType="Week"/>
</Grid>

C#

public class SchedulerViewModel
{
   public SchedulerViewModel()
   {
      Events = GenerateAppointments();
   }

   public ScheduleAppointmentCollection Events { get; set; }

   private ScheduleAppointmentCollection GenerateAppointments()
   {
       // Creating an instance for the schedule appointment collection.
       var scheduleAppointmentCollection = new ScheduleAppointmentCollection();
       //Adding the schedule appointments in the schedule appointment collection.
       scheduleAppointmentCollection.Add(new ScheduleAppointment
       {
           StartTime = DateTime.Now.Date.AddHours(10),
           EndTime = DateTime.Now.Date.AddHours(11),
           Subject = "Client Meeting",
           AppointmentBackground = new SolidColorBrush(Color.FromArgb(255, 133, 81, 242)),
           Foreground = new SolidColorBrush(Colors.White),
        });

        scheduleAppointmentCollection.Add(new ScheduleAppointment
        {
           StartTime = DateTime.Now.Date.AddDays(1).AddHours(13),
           EndTime = DateTime.Now.Date.AddDays(1).AddHours(14),
           Subject = "GoToMeeting",
           AppointmentBackground = new SolidColorBrush(Color.FromArgb(255, 140, 245, 219)),
           Foreground = new SolidColorBrush(Colors.Black),
        });

        scheduleAppointmentCollection.Add(new ScheduleAppointment
        {
           StartTime = DateTime.Now.Date.AddDays(-1).AddHours(9),
           EndTime = DateTime.Now.Date.AddDays(-1).AddHours(10),
           Subject = "Generate Report",
           AppointmentBackground = new SolidColorBrush(Color.FromArgb(255, 83, 99, 250)),
           Foreground = new SolidColorBrush(Colors.White),
        });

        scheduleAppointmentCollection.Add(new ScheduleAppointment
        {
           StartTime = DateTime.Now.Date.AddDays(2).AddHours(14),
           EndTime = DateTime.Now.Date.AddDays(2).AddHours(15),
           Subject = "Generate Report",
           AppointmentBackground = new SolidColorBrush(Color.FromArgb(255, 255, 222, 133)),
           Foreground = new SolidColorBrush(Colors.Black),
        });

        scheduleAppointmentCollection.Add(new ScheduleAppointment
        {
           StartTime = DateTime.Now.Date.AddDays(-2).AddHours(4),
           EndTime = DateTime.Now.Date.AddDays(-2).AddHours(5),
           Subject = "Plan Execution",
           AppointmentBackground = new SolidColorBrush(Color.FromArgb(255, 45, 153, 255)),
           Foreground = new SolidColorBrush(Colors.White),
        });

        scheduleAppointmentCollection.Add(new ScheduleAppointment
        {
           StartTime = DateTime.Now.Date.AddDays(0).AddHours(5),
           EndTime = DateTime.Now.Date.AddDays(0).AddHours(6),
           Subject = "Consulting",
           AppointmentBackground = new SolidColorBrush(Color.FromArgb(255, 253, 183, 165)),
           Foreground = new SolidColorBrush(Colors.Black),
        });

        scheduleAppointmentCollection.Add(new ScheduleAppointment
        {
           StartTime = DateTime.Now.Date.AddDays(1).AddHours(9),
           EndTime = DateTime.Now.Date.AddDays(1).AddHours(10),
           Subject = "Performance Check",
           AppointmentBackground = new SolidColorBrush(Color.FromArgb(255, 198, 237, 115)),
           Foreground = new SolidColorBrush(Colors.Black),
        });

        scheduleAppointmentCollection.Add(new ScheduleAppointment
        {
           StartTime = DateTime.Now.Date.AddDays(3).AddHours(17),
           EndTime = DateTime.Now.Date.AddDays(3).AddHours(18),
           Subject = "Project Plan",
           AppointmentBackground = new SolidColorBrush(Color.FromArgb(255, 253, 185, 222)),
           Foreground = new SolidColorBrush(Colors.Black),
        });

        scheduleAppointmentCollection.Add(new ScheduleAppointment
        {
           StartTime = DateTime.Now.Date.AddDays(0).AddHours(17),
           EndTime = DateTime.Now.Date.AddDays(0).AddHours(18),
           Subject = "Consulting",
           AppointmentBackground = new SolidColorBrush(Color.FromArgb(255, 83, 99, 250)),
           Foreground = new SolidColorBrush(Colors.White),
           IsAllDay = true
        });

        return scheduleAppointmentCollection;
    }
}

Demo project

For more information, refer to our WinUI 3 Project Reunion Scheduler demo project. On executing this sample, you will get the output shown in the following screenshot.

WinUI 3 Project Reunion Scheduler
WinUI 3 Project Reunion Scheduler

Conclusion

I hope you enjoyed learning about the new Syncfusion WinUI 3 Project Reunion Scheduler control and its features. This control is available in the 2021 Volume 1 release. For more information, refer our WinUI Scheduler user guide and our demos in this GitHub repository. Additionally, you can download and check out our demo app in the App Center.

For current Syncfusion customers, the new version is available for download from the License and Downloads page. If you are not yet a Syncfusion customer, you can try our 30-day free trial to check out the newest features.

Also, if you need any specific feature in our WinUI 3 Scheduler, 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!

Related blogs

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top