Month View in UWP Scheduler (SfSchedule)

22 Jul 202624 minutes to read

MonthView of SfSchedule is used to display entire dates of the specific month; the current month will be displayed by default initially. The current date color is differentiated from other dates of the current month, and the color differentiation for dates will also be applicable for previous and next month dates. A single notation will be displayed in the cell to indicate the appointment availability in the specific cell.

<Page
    ...
    xmlns:schedule="using:Syncfusion.UI.Xaml.Schedule">

        <schedule:SfSchedule 
				x:Name="schedule" 
				ScheduleType="Month">
		</schedule:SfSchedule>

</Page>
using Syncfusion.UI.Xaml.Schedule;

			//setting schedule type
			schedule.ScheduleType = ScheduleType.Month;

Month View in UWP Schedule

Month Navigation direction

MonthView of Schedule can be navigated in both horizontal and vertical directions. You can change the direction of navigation by using the MonthNavigationDirection property of SfSchedule; by default, the Month navigation direction is Horizontal.

<Page
    ...
    xmlns:schedule="using:Syncfusion.UI.Xaml.Schedule">

        <schedule:SfSchedule 
                x:Name="schedule"
                MonthNavigationDirection="Vertical"
			    ScheduleType="Month">
        </schedule:SfSchedule> 

</Page>
using Syncfusion.UI.Xaml.Schedule;

			//To navigate vertically
			schedule.MonthNavigationDirection = MonthNavigationDirections.Vertical;

Restricted days in Month

You can disable the interaction for certain dates in Month view by using MonthBlockOutDates of SfSchedule; using this, you can allocate or restrict the specific dates for predefined events.

using Syncfusion.UI.Xaml.Schedule;

			schedule.MonthBlockOutDates.Add(DateTime.Now.Date.AddDays(1));
            schedule.MonthBlockOutDates.Add(DateTime.Now.Date.AddDays(2));
            schedule.MonthBlockOutDates.Add(DateTime.Now.Date.AddDays(3));

Restricted days in month view UWP Schedule

First day of Week in Month

You can change the first day of week by using the FirstDayOfWeek property of SfSchedule; by default, the schedule control will be rendered with Sunday as the first day of the week.

<Page
    ...
    xmlns:schedule="using:Syncfusion.UI.Xaml.Schedule">

        <schedule:SfSchedule 
                x:Name="schedule"
                FirstDayOfWeek="Monday"
			    ScheduleType="Month">
        </schedule:SfSchedule>

</Page>
using Syncfusion.UI.Xaml.Schedule;

			//setting FirstDayOfWeek
			schedule.FirstDayOfWeek = DayOfWeek.Monday;

FirstDayOfWeek in Month UWP Schedule

Week Number of the Year in Month

You can display the Week Number of the year in MonthView by setting the ShowWeekNumber property of SfSchedule to true; by default, it is false.

<Page
    ...
    xmlns:schedule="using:Syncfusion.UI.Xaml.Schedule">

        <schedule:SfSchedule 
                x:Name="schedule"
                ShowWeekNumber="True"
			    ScheduleType="Month">
        </schedule:SfSchedule>  

</Page>
using Syncfusion.UI.Xaml.Schedule;

			schedule.ShowWeekNumber = true;

Week number of the year in UWP Schedule

Week Number Appearance

You can customize the Week Number appearance by using the WeekNumberStyle property of SfSchedule. The Week number Background, Foreground, FontFamily, FontSize, and FontWeight can be customized using WeekNumberStyle properties.

<Page
    ...
    xmlns:schedule="using:Syncfusion.UI.Xaml.Schedule">

        <schedule:SfSchedule  
                x:Name="schedule"
                ShowWeekNumber="True"
			    ScheduleType="Month">
            <schedule:SfSchedule.WeekNumberStyle>
                <schedule:WeekNumberStyle 
                    Background="Blue" 
                    Foreground ="White" 
                    FontSize="15" 
                    FontFamily="Times New Roman" 
                    FontWeight="Bold">
                </schedule:WeekNumberStyle>
            </schedule:SfSchedule.WeekNumberStyle>
        </schedule:SfSchedule>  

</Page>
using Syncfusion.UI.Xaml.Schedule;

		    //creating new instance for WeekNumberStyle
            WeekNumberStyle weekNumberStyle = new WeekNumberStyle();
            weekNumberStyle.FontFamily = new FontFamily("Times New Roman");
            weekNumberStyle.Background = new SolidColorBrush(Colors.Blue);
            weekNumberStyle.Foreground = new SolidColorBrush(Colors.White);
            weekNumberStyle.FontSize = 15;
            weekNumberStyle.FontWeight = FontWeights.Bold;
            schedule.WeekNumberStyle = weekNumberStyle;

Week number appearance in UWP Schedule

View Header Appearance

You can customize the Month View Header appearance by using the MonthViewHeaderStyle property of SfSchedule. The Month View Header MonthViewHeaderBackground, MonthViewHeaderTextColor, MonthViewHeaderTextSize, MonthViewHeaderHeight, MonthViewHeaderTextStyle, MonthViewHeaderTextHorizontalAlignment, MonthViewHeaderTextMargin, and MonthViewHeaderTextVerticalAlignment can be customized using ScheduleMonthViewHeaderStyle properties.

<Page
    ...
    xmlns:schedule="using:Syncfusion.UI.Xaml.Schedule">

         <schedule:SfSchedule  
                x:Name="schedule"
                ScheduleType="Month">
            <schedule:SfSchedule.MonthViewHeaderStyle>
                <schedule:ScheduleMonthViewHeaderStyle 
                    MonthViewHeaderBackground="Blue" 
                    MonthViewHeaderTextColor ="White" 
                    MonthViewHeaderTextSize="15"
                    MonthViewHeaderHeight="25"
                    MonthViewHeaderTextStyle="Bold"
                    MonthViewHeaderTextHorizontalAlignment ="Center"
                    MonthViewHeaderTextVerticalAlignment ="Center"
                    MonthViewHeaderTextMargin="2,2,2,2">
                </schedule:ScheduleMonthViewHeaderStyle>
            </schedule:SfSchedule.MonthViewHeaderStyle>
        </schedule:SfSchedule>

</Page>
using Syncfusion.UI.Xaml.Schedule;

			//creating new instance for ScheduleMonthViewHeaderStyle
            ScheduleMonthViewHeaderStyle scheduleMonthViewHeaderStyle = new ScheduleMonthViewHeaderStyle();       
            scheduleMonthViewHeaderStyle.MonthViewHeaderBackground = new SolidColorBrush(Colors.Blue);
            scheduleMonthViewHeaderStyle.MonthViewHeaderTextColor = new SolidColorBrush(Colors.White);
            scheduleMonthViewHeaderStyle.MonthViewHeaderTextSize = 15;
            scheduleMonthViewHeaderStyle.MonthViewHeaderHeight = 25;
            scheduleMonthViewHeaderStyle.MonthViewHeaderTextStyle = FontWeights.Bold;
            scheduleMonthViewHeaderStyle.MonthViewHeaderTextHorizontalAlignment = HorizontalAlignment.Center;
            scheduleMonthViewHeaderStyle.MonthViewHeaderTextMargin = new Thickness(2, 2, 2, 2);
            scheduleMonthViewHeaderStyle.MonthViewHeaderTextVerticalAlignment = VerticalAlignment.Center;
            schedule.MonthViewHeaderStyle = scheduleMonthViewHeaderStyle;

ViewHeader Appearance in UWP Schedule

MonthCell Appearance

You can customize the Month view cell in three ways,

Customize month cell using style

By using MonthCellStyle of SfSchedule you can customize the month cell properties such as MonthCellTextSize, MonthCellTextFontFamily, CurrentDateCellBackground, CurrentDateTextForeground, CurrentMonthCellBackground, CurrentMonthTextForeground, CurrentDateHighlight, NextMonthCellBackground, NextMonthTextForeground, PreviousMonthCellBackground, PreviousMonthTextForeground, CellTextHorizontalAlignment, CellTextVerticalAlignment and MonthCellTextFontWeight.

<Page
    ...
    xmlns:schedule="using:Syncfusion.UI.Xaml.Schedule">

        <schedule:SfSchedule  
                x:Name="schedule"               
			    ScheduleType="Month">
            <schedule:SfSchedule.ScheduleMonthCellStyle>
                <schedule:MonthCellStyle 
                    MonthCellTextSize ="20"
                    MonthCellTextFontFamily ="Times New Roman"
                    CurrentDateCellBackground ="Red"
                    CurrentDateTextForeground="SkyBlue"
                    CurrentMonthCellBackground="Blue"
                    CurrentMonthTextForeground="White"
                    CurrentDateHighlight ="LightSkyBlue"
                    NextMonthCellBackground ="LightGray"
                    NextMonthTextForeground ="Black"
                    PreviousMonthCellBackground ="LightGray"
                    PreviousMonthTextForeground ="Black"
                    CellTextHorizontalAlignment="Center"
                    CellTextVerticalAlignment="Center"
                    MonthCellTextFontWeight="Bold">
                </schedule:MonthCellStyle>
            </schedule:SfSchedule.ScheduleMonthCellStyle>
        </schedule:SfSchedule> 

</Page>
using Syncfusion.UI.Xaml.Schedule;

			//creating new instance for MonthCellStyle
            MonthCellStyle monthCellStyle = new MonthCellStyle();
            monthCellStyle.MonthCellTextSize = 20;
            monthCellStyle.MonthCellTextFontFamily = new FontFamily("Times New Roman");
            monthCellStyle.CurrentDateCellBackground = new SolidColorBrush(Colors.Red);
            monthCellStyle.CurrentDateTextForeground = new SolidColorBrush(Colors.SkyBlue);
            monthCellStyle.CurrentMonthCellBackground = new SolidColorBrush(Colors.Blue);
            monthCellStyle.CurrentMonthTextForeground = new SolidColorBrush(Colors.White);
            monthCellStyle.CurrentDateHighlight = new SolidColorBrush(Colors.LightSkyBlue);
            monthCellStyle.NextMonthCellBackground = new SolidColorBrush(Colors.LightGray);
            monthCellStyle.NextMonthTextForeground = new SolidColorBrush(Colors.Black);
            monthCellStyle.PreviousMonthCellBackground = new SolidColorBrush(Colors.LightGray);
            monthCellStyle.PreviousMonthTextForeground = new SolidColorBrush(Colors.Black);
            monthCellStyle.CellTextHorizontalAlignment = HorizontalAlignment.Center;
            monthCellStyle.CellTextVerticalAlignment = VerticalAlignment.Center;
            monthCellStyle.MonthCellTextFontWeight = FontWeights.Bold;
            schedule.ScheduleMonthCellStyle = monthCellStyle;

Customize the month cell using style in UWP Schedule

Customize month cell using event

By using the MonthCellLoaded event of SfSchedule, you can customize the month cell properties at run time. In MonthCellLoaded, arguments such as MonthCellStyle, MonthCellDate, View, and boolean properties such as IsToday, IsNextMonth, IsPreviousMonth, and IsBlackOutDay are in the MonthCellLoadedEventArgs.

using Syncfusion.UI.Xaml.Schedule;

			schedule.MonthCellLoaded += Schedule_MonthCellLoaded;
			...
			 private void Schedule_MonthCellLoaded(object sender, MonthCellLoadedEventArgs e)
        {      
            if (e.IsBlackOutDay)
            {
                e.MonthCellStyle.MonthCellTextSize = 20;
                e.MonthCellStyle.MonthCellTextFontFamily = new FontFamily("Arial");
                e.MonthCellStyle.MonthCellTextFontWeight = FontWeights.ExtraBold;
            }
            else
            {
                e.MonthCellStyle.MonthCellTextSize = 15;
                e.MonthCellStyle.MonthCellTextFontFamily = new FontFamily("Times New Roman");
                e.MonthCellStyle.CurrentDateCellBackground = new SolidColorBrush(Colors.Red);
                e.MonthCellStyle.CurrentDateTextForeground = new SolidColorBrush(Colors.SkyBlue);
                e.MonthCellStyle.CurrentMonthCellBackground = new SolidColorBrush(Colors.Blue);
                e.MonthCellStyle.CurrentMonthTextForeground = new SolidColorBrush(Colors.White);
                e.MonthCellStyle.CurrentDateHighlight = new SolidColorBrush(Colors.LightSkyBlue);
                e.MonthCellStyle.NextMonthCellBackground = new SolidColorBrush(Colors.LightGray);
                e.MonthCellStyle.NextMonthTextForeground = new SolidColorBrush(Colors.Black);
                e.MonthCellStyle.PreviousMonthCellBackground = new SolidColorBrush(Colors.LightGray);
                e.MonthCellStyle.PreviousMonthTextForeground = new SolidColorBrush(Colors.Black);
                e.MonthCellStyle.CellTextHorizontalAlignment = HorizontalAlignment.Center;
                e.MonthCellStyle.CellTextVerticalAlignment = VerticalAlignment.Center;
                e.MonthCellStyle.MonthCellTextFontWeight = FontWeights.Normal;
            }
        }

Customize the month cell using event in UWP Schedule

Customize month cell with custom UI

You can set the Custom UI for the month cell using View property of MonthCellLoadedEventArgs in the OnMonthCellLoadedEvent.

using Syncfusion.UI.Xaml.Schedule;

			schedule.MonthCellLoaded += Schedule_MonthCellLoaded;
			...
			private void Schedule_MonthCellLoaded(object sender, MonthCellLoadedEventArgs e)
        {
            Button button = new Button();
            button.Content = e.MonthCellDate.Day.ToString();
            button.Background = new SolidColorBrush(Colors.Blue);
            button.Foreground = new SolidColorBrush(Colors.White);         
            e.View = button;
            if (e.IsToday)
            {
                button.Background = new SolidColorBrush(Colors.Red);              
            }
        }

Month InlineView

Month Inline view is not applicable for desktop; it is applicable only for mobile by default.

Notes: If there are no appointments in the selected day, the Inline view displays the text as “No Events”.

InlineView Appearance

By using the InlineLoaded event of SfSchedule, you can customize the month inline view properties at run time. In InlineLoaded, arguments such as ScheduleExpandedAppointments, ScheduleExpandedAppointmentStyle, Calendar are in the InLineLoadedEventArgs.

using Syncfusion.UI.Xaml.Schedule;

			schedule.InlineLoaded += Schedule_InlineLoaded;
			...
			private void Schedule_InlineLoaded(object sender, InLineLoadedEventArgs e)
        {
            e.ScheduleExpandedAppointmentStyle.ExpandedAppointmentBackground = new SolidColorBrush(Colors.Blue);
            e.ScheduleExpandedAppointmentStyle.ExpandedAppointmentFontFamily = new FontFamily("Times New Roman");
            e.ScheduleExpandedAppointmentStyle.ExpandedAppointmentFontStyle = Windows.UI.Text.FontStyle.Italic;
            e.ScheduleExpandedAppointmentStyle.ExpandedAppointmentFontWeight = FontWeights.SemiBold;
            e.ScheduleExpandedAppointmentStyle.ExpandedAppointmentTextColor = new SolidColorBrush(Colors.White);
            e.ScheduleExpandedAppointmentStyle.ExpandedAppointmentTextHorizontalAlignment = HorizontalAlignment.Center;
            e.ScheduleExpandedAppointmentStyle.ExpandedAppointmentTextSize = 20;
            e.ScheduleExpandedAppointmentStyle.ExpandedAppointmentTextVerticalAlignment = VerticalAlignment.Center;
            e.ScheduleExpandedAppointmentStyle.ExpandedAppointmentTimeFontFamily = new FontFamily("Arial");
            e.ScheduleExpandedAppointmentStyle.ExpandedAppointmentTimeForeground = new SolidColorBrush(Colors.Green);
            e.ScheduleExpandedAppointmentStyle.ExpandedAppointmentTimeTextSize = 15;
        }

Configuration Resources

The Schedule control allows you to define Resources that can be assigned to appointments. Resources let you associate additional information with your appointments. The schedule can group appointments based on the resources associated with them.

Adding resources

Resource can be added to the schedule control by setting Resource and ScheduleResourceTypeCollection of SfSchedule. After that, add the ResourceType for ScheduleResourceTypeCollection and assign Resource to ResourceType.

<Page
    ...
    xmlns:schedule="using:Syncfusion.UI.Xaml.Schedule">

        <schedule:SfSchedule Name="schedule" 
                             ScheduleType="Month" 
                             Resource="Doctors">
            <schedule:SfSchedule.ScheduleResourceTypeCollection>
                <schedule:ResourceType TypeName="Doctors">
                    <schedule:Resource
                        DisplayName="Dr.Jacob John, M.D "
                        ResourceName="Dr.Jacob" />
                    <schedule:Resource
                        DisplayName="Dr.Darsy Mascio, M.D"
                        ResourceName="Dr.Darsy" />
                </schedule:ResourceType>
            </schedule:SfSchedule.ScheduleResourceTypeCollection>
        </schedule:SfSchedule>

</Page>
using Syncfusion.UI.Xaml.Schedule;

			//setting resource for schedule
            schedule.Resource = "Doctor";        
            //Creating Appointment style 
            ResourceType resourceType = new ResourceType { TypeName = "Doctor" };
            resourceType.ResourceCollection.Add(new Resource { DisplayName = "Dr.Jacob", ResourceName = "Dr.Jacob", });
            resourceType.ResourceCollection.Add(new Resource { DisplayName = "Dr.Darsy", ResourceName = "Dr.Darsy" });
            schedule.DayHeaderOrder = DayHeaderOrder.OrderByDate;
            //setting resource type
            schedule.ScheduleResourceTypeCollection = new ObservableCollection<ResourceType> { resourceType };

Adding resources in UWP Schedule

Notes: Sub resource support is not available for MonthView.