DxSchedulerMonthView Class

A calendar view that displays one month or multiple months.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxSchedulerMonthView :
    ViewBase,
    ISchedulerMonthView,
    ISchedulerView

Related API Members

The following members return DxSchedulerMonthView objects:

• SchedulerListEditor.MonthViewInstance

Remarks

The Month view is a calendar view that displays appointments by month. To create this view, add the DxSchedulerMonthView object to the markup.

Index.razor

@using Data

<DxScheduler StartDate="@DateTime.Today"
             DataStorage="@DataStorage">
    <DxSchedulerMonthView />
</DxScheduler>

@code {
    DxSchedulerDataStorage DataStorage = new DxSchedulerDataStorage() {
        AppointmentsSource = RecurringAppointmentCollection.GetAppointments(),
        AppointmentMappings = new DxSchedulerAppointmentMappings() {
            Type = "AppointmentType",
            Start = "StartDate",
            End = "EndDate",
            Subject = "Caption",
            AllDay = "AllDay",
            Location = "Location",
            Description = "Description",
            LabelId = "Label",
            StatusId = "Status",
            RecurrenceInfo = "Recurrence"
        }
    };
}

RecurringAppointment.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Scheduler.Data {
    public class RecurringAppointment {
        public RecurringAppointment() { }
        public int AppointmentType { get; set; }
        public DateTime StartDate { get; set; }
        public DateTime EndDate { get; set; }
        public string Caption { get; set; }
        public string Description { get; set; }
        public string Location { get; set; }
        public int Status { get; set; }
        public int Label { get; set; }
        public bool AllDay { get; set; }
        public string Recurrence { get; set; }
    }
}

RecurringAppointmentCollection.cs

using System;
using System.Collections.Generic;
using System.Globalization;

namespace Scheduler.Data {
    public static partial class RecurringAppointmentCollection {
        public static List<RecurringAppointment> GetAppointments() {
            DateTime date = DateTimeUtils.GetBeginOfMonth(DateTime.Now);
            date = DateTimeUtils.GetWeekStart(date);
            return new List<RecurringAppointment>() {
            new RecurringAppointment {
                AppointmentType = 1,
                Caption = "Watercolor Landscape",
                Label = 5,
                StartDate = date + (new TimeSpan(2, 9, 30, 0)),
                EndDate = date + (new TimeSpan(2, 11, 0, 0)),
                Recurrence = string.Format("<RecurrenceInfo Start=\"{0}\" End=\"{1}\" WeekDays=\"36\" Id=\"04dcc127-df56-49d7-baff-ce4b6264addd\" OccurrenceCount=\"10\" Range=\"1\" Type=\"1\" />", ToString(date + (new TimeSpan(2, 9, 30, 0))), ToString(date + (new TimeSpan(2, 11, 0, 0))))
            },
            new RecurringAppointment {
                AppointmentType = 1,
                Caption = "Oil Painting for Beginners",
                Label = 2,
                StartDate = date + (new TimeSpan(1, 9, 30, 0)),
                EndDate = date + (new TimeSpan(1, 11, 0, 0)),
                Recurrence = string.Format("<RecurrenceInfo Start=\"{0}\" End=\"{1}\" WeekDays=\"18\" Id=\"72e3db8f-cdb6-4aaa-afe1-e3c6b80ce99e\" OccurrenceCount=\"10\" Range=\"1\" Type=\"1\" />", ToString(date + (new TimeSpan(1, 9, 30, 0))), ToString(date + (new TimeSpan(1, 11, 0, 0))))
            },
            new RecurringAppointment {
                AppointmentType = 1,
                Caption = "Testing",
                Label = 8,
                StartDate = date + (new TimeSpan(1, 12, 0, 0)),
                EndDate = date + (new TimeSpan(1, 13, 0, 0)),
                Recurrence = string.Format("<RecurrenceInfo Start=\"{0}\" End=\"{1}\" WeekDays=\"2\" Id=\"15129fd3-9eb0-4861-8c43-c61844137f17\" OccurrenceCount=\"2\" Frequency=\"2\" Range=\"1\" Type=\"1\" />", ToString(date + (new TimeSpan(1, 12, 0, 0))), ToString(date + (new TimeSpan(1, 13, 0, 0))))
            },
            new RecurringAppointment {
                AppointmentType = 1,
                Caption = "Meeting of Instructors",
                Label = 1,
                StartDate = date + (new TimeSpan(1, 9, 0, 0)),
                EndDate = date + (new TimeSpan(1, 9, 15, 0)),
                Recurrence = string.Format("<RecurrenceInfo Start=\"{0}\" End=\"{1}\" WeekDays=\"62\" Id=\"6de79b21-6b16-4dea-9736-c500058ec858\" OccurrenceCount=\"25\" Range=\"1\" />", ToString(date + (new TimeSpan(1, 9, 0, 0))), ToString(date + (new TimeSpan(1, 9, 15, 0))))
            },
            new RecurringAppointment {
                AppointmentType = 1,
                Caption = "Monthly Planning",
                Label = 1,
                StartDate = date + (new TimeSpan(3, 14, 30, 0)),
                EndDate = date + (new TimeSpan(3, 15, 45, 0)),
                Recurrence = string.Format("<RecurrenceInfo Start=\"{0}\" End=\"{1}\" DayNumber=\"24\" WeekOfMonth=\"0\" Id=\"cd9da802-d166-47d1-a8df-1101fcc50d53\" OccurrenceCount=\"2\" Range=\"1\" Type=\"2\" />", ToString(date + (new TimeSpan(3, 14, 30, 0))), ToString(date + (new TimeSpan(3, 15, 45, 0))))
            },
            new RecurringAppointment {
                AppointmentType = 1,
                Caption = "Annual Open Day",
                Label = 6,
                StartDate = date + (new TimeSpan(27, 9, 30, 0)),
                EndDate = date + (new TimeSpan(27, 13, 0, 0)),
                Recurrence = string.Format("<RecurrenceInfo Start=\"{0}\" Month=\"{1}\" DayNumber=\"{2}\" WeekOfMonth=\"0\" Id=\"bd5dc726-0fa6-4965-99e0-bf69063218e6\" Type=\"3\" />", ToString(date + (new TimeSpan(27, 9, 30, 0))), (date + (new TimeSpan(27, 9, 30, 0))).Month, (date + (new TimeSpan(27, 9, 30, 0))).Day)
            }
        };
        }

        private static string ToString(DateTime dateTime) {
            return dateTime.ToString(CultureInfo.InvariantCulture);
        }

        public static class DateTimeUtils {
            public static DateTime GetWeekStart(DateTime date) {
                return date.DayOfWeek == DayOfWeek.Sunday ? ValidWeekStart(date.Date) : ValidWeekStart(date.Date - CreateWeekOffset(date, DayOfWeek.Sunday));
            }
            public static DateTime GetBeginOfMonth(DateTime date) {
                return new DateTime(date.Year, date.Month, 1);
            }

            static DateTime ValidWeekStart(DateTime date) {
                TimeSpan weekSpan = new TimeSpan(7, 0, 0, 0);
                DateTime baseDate = date.Date;

                if(DateTime.MaxValue - date < weekSpan)
                    return baseDate - weekSpan;
                return baseDate;
            }
            static TimeSpan CreateWeekOffset(DateTime date, DayOfWeek firstDayOfWeek) {
                int offset = (date.DayOfWeek + 7 - firstDayOfWeek) % 7;
                TimeSpan result = TimeSpan.FromDays(offset);
                if(date.Ticks < result.Ticks)
                    result = TimeSpan.FromDays(offset - 7);
                return result;
            }

        }
    }
}

Run Demo: Scheduler — Month View

You can use the DxSchedulerMonthView object’s properties to customize the view. The following code snippet sets the following properties:

• MonthCount - Specifies the number of months displayed in the view.
• CellMinWidth - Specifies the base width of a day cell in the month view, in pixels.
• ShowWorkDaysOnly - Specifies whether the scheduler displays only work days in the view.
• SnapToCellsMode - Specifies how appointments snap to time cells in the Month view.

Index.razor

<DxScheduler StartDate="@DateTime.Today"
             DataStorage="@DataStorage">
    <DxSchedulerMonthView MonthCount="2"
                          CellMinWidth="100"
                          ShowWorkDaysOnly="true" />
</DxScheduler>

Implements

IHandleAfterRender

IAsyncDisposable

IComponent

IHandleEvent

Inheritance

Object

ComponentBase

DevExpress.Blazor.Base.DxAsyncDisposableComponent

DevExpress.Blazor.Base.DxDecoratedComponent

DxComponentBase

DevExpress.Blazor.Scheduler.Internal.ViewBase

DxSchedulerMonthView