Edit this page

Month View

Month View Overview

The Month view shows one month at a time, or a preset number of weeks. To move to the next day or previous month, you can use the back and forward keyboard arrows, or the SchedulerNavigator control.

Structure of Month View

The Month View of the scheduler simply has a Header, Month Cells for every day in the month and zero or more Appointment Cells in each month cell.

Figure 1: Month View

scheduler-views-month-view 008

Set the Month View

The Week View can be set it to be the default view which the user sees:

ActiveViewType Property

this.radScheduler1.ActiveViewType = Telerik.WinControls.UI.SchedulerViewType.Month;

Me.RadScheduler1.ActiveViewType = Telerik.WinControls.UI.SchedulerViewType.Month

Get Month View

To get the instance to the SchedulerMonthView from the RadScheduler object:

  • use the GetMonthView method:

GetMonthView Method


SchedulerMonthView monthView = this.radScheduler1.GetMonthView();

Dim monthView As SchedulerMonthView = Me.RadScheduler1.GetMonthView()

Showing/Hiding The Weekend

By default the weekends are shown, but you can hide them by using the ShowWeekend property:

Show Weekend

monthView.ShowWeekend = true;

monthView.ShowWeekend = False

You can also specify which days to be considered weekends. The WorkWeekStart and WorkWeekEnd properties allow you to achieve this:

Set Work Week Start

monthView.WorkWeekStart = DayOfWeek.Tuesday;
monthView.WorkWeekEnd = DayOfWeek.Thursday;

monthView.WorkWeekStart = DayOfWeek.Tuesday
monthView.WorkWeekEnd = DayOfWeek.Thursday

Change The Start/End Work Days

The work days determine the start and end days for the work week. All days outside the work days range are part of the weekend.

Start/End Work Days

monthView.WorkWeekStart = DayOfWeek.Wednesday;
monthView.WorkWeekEnd = DayOfWeek.Saturday;

monthView.WorkWeekStart = DayOfWeek.Wednesday
monthView.WorkWeekEnd = DayOfWeek.Saturday

Figure 2: Start/End Work Days

scheduler-views-month-view 001scheduler-views-month-view 002

Setting The Number Of Weeks

By default the Month view shows 3 weeks at a time, but this can be changed by using the WeekCount property (the minimum value is 1 week): 

Set Number of Weeks

monthView.WeekCount = 5;

monthView.WeekCount = 5

Getting The Week Days Displayed

Get Week Days

int weekDaysCount = monthView.WeekDaysCount;

Dim weekDaysCount As Integer = monthView.WeekDaysCount

Showing Full Month

It is possible to indicate whether the month view should always display exactly one month with the respective number of weeks.

Full Month

monthView.ShowFullMonth = true;

monthView.ShowFullMonth = True

Figure 3: Show Full Month

scheduler-views-month-view 003

Showing/Hiding The Vertical Navigator

Hiding The Vertical Indicator

monthView.ShowVerticalNavigator = false;

monthView.ShowVerticalNavigator = False

Setting The Vertical Navigator Range

Navigator Range

monthView.RangeStartDate = new DateTime(2016, 6, 10);
monthView.RangeEndDate = new DateTime(2016, 7, 20);

monthView.RangeStartDate = New DateTime(2016, 6, 10)
monthView.RangeEndDate = New DateTime(2016, 7, 20)

Figure 4: Navigator Range

scheduler-views-month-view 004

Showing And Hiding The Week (Row) Headers

The week (row) headers display the date range presented by the respective row. By clicking on them, the user can navigate to WeekView with the specified range. Showing/hiding the week (row) headers is done through the ShowWeeksHeader property (the default setting is True). To allow or disallow navigating to WeekView on click, you can set the EnableWeeksHeader property (which also defaults to True)

Showing Weeks Headers

monthView.ShowWeeksHeader = true;
monthView.EnableWeeksHeader = false;

monthView.ShowWeeksHeader = True
monthView.EnableWeeksHeader = True

Customizing The Week (Row) Header Format

RadScheduler uses the .NET Standard DateTime Format Strings, which can be set through the HeaderFormat property (either in design time or through code). The default value is "MMMM dd":

Setting A Header Format

radScheduler1.HeaderFormat = "MMMM dd";

RadScheduler1.HeaderFormat = "MMMM dd"

Showing An Exact Month

You can set the ShowFullMonth property to force the SchedulerMonthView to always display exactly one month no matter how many weeks it contains. When this property is enabled, the view will always navigate to the beginning of the previous/next month and the WeekCount will automatically be updated according to the number of weeks in the target month.

Full Month

monthView.ShowFullMonth = true;

monthView.ShowFullMonth = True

Vertical Scrolling

The vertical scrollbar in MonthView allows for quick navigation in large date ranges. To show or hide the vertical scrollbar you can use the ShowVerticalNavigator property. When the vertical scrollbar is displayed it can navigate through the date range defined by the RangeStartDate and RangeEndDate properties. These properties do not limit keyboard navigation outside this range but only stand for specifying the range of the vertical scrollbar.

Verical Scrolling Range

monthView.ShowVerticalNavigator = true;
monthView.RangeStartDate = DateTime.Today.AddYears(-1);
monthView.RangeEndDate = DateTime.Today.AddYears(1);

monthView.ShowVerticalNavigator = True
monthView.RangeStartDate = DateTime.Today.AddYears(-1)
monthView.RangeEndDate = DateTime.Today.AddYears(1)

Handling Overflown Cells

RadScheduler handles the overflown cells in month view in two ways. The first one is by displaying a cell overflow button at the bottom of each cell that has more appointments than it can display. Clicking on this button opens a DayView set to the same date the cell represents. This way the user can scroll through and preview all appointments. The second way to handle overflown cells is by displaying a scrollbar at the end of each row if this row contains overflown cells. Using the scrollbar the end user can scroll directly through the appointments. Both of these features can be disabled or enabled using the following properties:

Appointments Scrolling

monthView.EnableCellOverflowButton = true;
monthView.EnableAppointmentsScrolling = true;

monthView.EnableCellOverflowButton = True
monthView.EnableAppointmentsScrolling = True

Figure 5: Appointments Scrolling

scheduler-views-month-view 005

Modifying The Size Of Rows And Columns In MonthView

The SchedulerMonthViewElement allows you to specify different size for the different columns. To manipulate the size of the columns, you can use the SetColumnWidth, GetColumnWidth, SetRowHeight, GetRowHeight methods. The values passed to the SetColumnWidth and SetRowHeight methods are proportional and the actual width of the columns is calculated based on them. By default all columns have a value of 1 and therefore if you set a value of 2 to any column, it will stay twice as bigger compared to the others.

Setting Row Height

SchedulerMonthViewElement monthViewElement = (SchedulerMonthViewElement)this.radScheduler1.ViewElement;
monthViewElement.SetRowHeight(1, 2);
monthViewElement.SetColumnWidth(1, 2);

Dim monthViewElement As SchedulerMonthViewElement = DirectCast(Me.RadScheduler1.ViewElement, SchedulerMonthViewElement)
monthViewElement.SetRowHeight(1, 2)
monthViewElement.SetColumnWidth(1, 2)

Figure 6: Row Height

scheduler-views-month-view 006

Modifying The Size Of The Headers In MonthView

The month view of RadScheduler contains two headers – the horizontal MonthViewHeader, which displays the weekdays on top of the columns, and the vertical MonthViewVerticalHeader, which displays the date ranges for each row. You can modify the size of these headers by accessing the respective element and its properties:

Headers Size

monthViewElement.VerticalHeader.HeaderWidth = 50;
monthViewElement.Header.HeaderHeight = 50;

monthViewElement.VerticalHeader.HeaderWidth = 50
monthViewElement.Header.HeaderHeight = 50

Figure 7: Headers Size

scheduler-views-month-view 007

See Also