# scheduler-default

> Scheduler with 11 views, multiple calendars, custom toolbar, context menu, iCalendar import, and a settings property panel.

**Framework:** aspnet-mvc  **Component:** Scheduler  **Variant:** default

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/aspnet-mvc/scheduler-default.json
```

**Install Package(s)**

```bash
Install-Package Syncfusion.AspNetMvc.Schedule
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/scheduler-default/Overview.cshtml

```cshtml
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Schedule
@using Syncfusion.EJ2.Navigations;
@using Syncfusion.EJ2.DropDowns

@{
    ViewData["Title"] = "Overview";
    string timelineTemplate = "<div class='template'><label><div class='icon-child'><input  id='timeline_views'></input ></div><div class='text-child'>Timeline Views</div></label></div>";
    string groupTemplate = "<div class='template'><label><div class='icon-child'><input id='grouping'></input></div><div class='text-child'>Grouping</div></label></div>";
    string gridlineTemplate = "<div class='template'><label><div class='icon-child'><input id='timeSlots'></input></div><div class='text-child'>Time Slots</div></label></div>";
    string autoHeightTemplate = "<div class='template'><label><div class='icon-child''><input id='row_auto_height'></input></div><div class='text-child'>Auto Fit Rows</div></label></div>";
    string dateHeaderTemplate = "<div class='date - text'>${getDateHeaderDay(data.date)}</div><div class='date - text'>${getDateHeaderDate(data.date)}</div>${getWeather(data.date)}";
    string timezone = "Etc/GMT";
}

@section ControlsSection{
    <div class="col-lg-12 control-section">
        <div class="content-wrapper">
            <div class="schedule-overview">
                @(Html.EJS().AppBar("defaultAppBar").ColorMode(AppBarColor.Primary).ContentTemplate(
                    @<div>
                    <span class="time e-icons e-time-zone"></span>
                    <span id="timezoneBtn" class="time ">UTC</span>
                    <span class="time e-icons e-clock"></span>
                    <span id="timeBtn" class="time current-time">Time</span>
                    <div class="e-appbar-spacer"></div>
                    @Html.EJS().Button("printBtn").CssClass("title-bar-btn e-inherit").Content("Print").IconCss("e-icons e-print").Render()
                    <div class="control-panel import-button">
                    @Html.EJS().Uploader("icalendar").AllowedExtensions(".ics").CssClass("calendar-import").ShowFileList(false).Buttons(new Syncfusion.EJ2.Inputs.UploaderButtonsProps { Browse = "Import" }).Created("uploaderCreated").Selected("onSelected").Multiple(false).Render()
                    </div>
                    <div class="control-panel calendar-export">
                    @Html.EJS().DropDownButton("exportBtn").CssClass("e-inherit").Content("Export").Items(ViewData["ExportItems"]).Select("onExportItemSelect").Render()
                    </div>
                    @Html.EJS().Button("settingsBtn").CssClass("overview-toolbar-settings e-inherit").IconCss("e-icons e-settings").IconPosition(Syncfusion.EJ2.Buttons.IconPosition.Top).Render()
                    </div>).Render())
                @Html.EJS().Toolbar("toolbarOptions").CssClass("overview-toolbar").Height("70px").OverflowMode(Syncfusion.EJ2.Navigations.OverflowMode.Scrollable).ScrollStep(100).Created("onToolbarCreated").Clicked("onToolbarItemClick").Items(new List<ToolbarItem> {
                new ToolbarItem { PrefixIcon = "e-icons e-plus", TooltipText = "New Event", Text = "New Event", TabIndex=0  },
                new ToolbarItem { PrefixIcon = "e-icons e-repeat", TooltipText = "New Recurring Event", Text = "New Recurring Event", TabIndex=0  },
                new ToolbarItem { Type = ItemType.Separator },
                new ToolbarItem { PrefixIcon = "e-icons e-day", TooltipText = "Day", Text = "Day", TabIndex=0 },
                new ToolbarItem { PrefixIcon = "e-icons e-week", TooltipText = "Week", Text = "Week", TabIndex=0 },
                new ToolbarItem { PrefixIcon = "e-icons e-week", TooltipText = "WorkWeek", Text = "WorkWeek", TabIndex=0 },
                new ToolbarItem { PrefixIcon = "e-icons e-month", TooltipText = "Month", Text = "Month", TabIndex=0 },
                new ToolbarItem { PrefixIcon = "e-icons e-month", TooltipText = "Year", Text = "Year", TabIndex=0 },
                new ToolbarItem { PrefixIcon = "e-icons e-agenda-date-range", TooltipText = "Agenda", Text = "Agenda", TabIndex=0 },
                new ToolbarItem { TooltipText="Timeline Views", Template= timelineTemplate },
                new ToolbarItem { Type = ItemType.Separator },
                new ToolbarItem { TooltipText = "Resource Grouping", Template = groupTemplate },
                new ToolbarItem { TooltipText = "Gridlines", Template = gridlineTemplate },
                new ToolbarItem { TooltipText = "Row Auto Height", Template = autoHeightTemplate }}).Render()
                <div class="overview-content">
                    <div class="left-panel">
                        <div class="overview-scheduler">
                            @Html.EJS().Schedule("scheduler").CssClass("schedule-overview").Height("100%").Timezone("UTC").DateHeaderTemplate(dateHeaderTemplate).Group(group => group.Resources((string[])ViewData["Resources"])).Resources(res =>
                            {
                            res.DataSource(ViewData["Calendars"]); res.Query("new ej.data.Query().where('CalendarId', 'equal', 1)").Field("CalendarId").Title("Calendars").Name("Calendars").TextField("CalendarName").IdField("CalendarId").ColorField("CalendarColor").AllowMultiple(true).Add();
                            }).Views(view => { view.Option(View.Day).Add(); view.Option(View.Week).Add(); view.Option(View.WorkWeek).Add(); view.Option(View.Month).Add(); view.Option(View.Year).Add(); view.Option(View.Agenda).Add(); view.Option(View.TimelineDay).Add(); view.Option(View.TimelineWeek).Add(); view.Option(View.TimelineWorkWeek).Add(); view.Option(View.TimelineMonth).Add(); view.Option(View.TimelineYear).Add(); }).EventSettings(new ScheduleEventSettings { DataSource = ViewData["Appointments"] }).Render()
                            @Html.EJS().ContextMenu("overviewContextMenu").CssClass("schedule-context-menu").BeforeOpen("onContextMenuBeforeOpen").Select("onMenuItemSelect").Target(".e-schedule").Items(ViewData["MenuItems"]).Render()
                        </div>
                    </div>
                    <div class="right-panel hide">
                        <div class="control-panel e-css">
                            <div class="col-row">
                                <div class="col-left">
                                    <label style="line-height: 34px; margin: 0;">Calendar</label>
                                </div>
                                <div class="col-right">
                                    @Html.EJS().MultiSelect("resources").CssClass("schedule-workweek").Mode(VisualMode.CheckBox).EnableSelectionOrder(false).ShowDropDownIcon(true).ShowClearButton(false).Value(ViewData["ResourceValues"]).DataSource(
                                    ViewData["Calendars"]).Fields(new MultiSelectFieldSettings { Text = "CalendarName", Value = "CalendarId" }).Change("onCalendarChange").Render()
                                </div>
                            </div>
                            <div class="col-row">
                                <div class="col-left">
                                    <label style="line-height: 34px; margin: 0;">First Day of Week</label>
                                </div>
                                <div class="col-right">
                                    @Html.EJS().DropDownList("weekFirstDay").Value("0").DataSource(ViewData["WeekDays"]).Fields(new DropDownListFieldSettings { Text = "text", Value = "value" }).Change("onWeekFirstDayChange").Render()
                                </div>
                            </div>
                            <div class="col-row">
                                <div class="col-left">
                                    <label style="line-height: 34px; margin: 0;">Work week</label>
                                </div>
                                <div class="col-right">
                                    @Html.EJS().MultiSelect("workWeekDays").CssClass("schedule-workweek").Mode(VisualMode.CheckBox).EnableSelectionOrder(false).ShowDropDownIcon(true).ShowClearButton(false).Value(ViewData["Values"]).DataSource(
                                    ViewData["WeekDays"]).Fields(new MultiSelectFieldSettings { Text = "text", Value = "value" }).Change("onWeekDaysChange").Render()
                                </div>

                            </div>
                            <div class="col-row">
                                <div class="col-left">
                                    <label style="line-height: 34px; margin: 0;">Timezone</label>
                                </div>
                                <div class="col-right">
                                    @Html.EJS().DropDownList("timezone").Value(timezone).PopupHeight("150px").DataSource(ViewData["TimezoneData"]).Fields(new DropDownListFieldSettings { Text = "text", Value = "value" }).Change("onTimezoneChange").Render()
                                </div>
                            </div>
                            <div class="col-row">
                                <div class="col-left">
                                    <label style="line-height: 34px; margin: 0;">Day Start Hour</label>
                                </div>
                                <div class="col-right">
                                    @Html.EJS().TimePicker("dayStartHour").ShowClearButton(false).Value(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 0, 0, 0)).Change("onDayStartHourChange").Render()
                                </div>
                            </div>
                            <div class="col-row">
                                <div class="col-left">
                                    <label style="line-height: 34px; margin: 0;">Day End Hour</label>
                                </div>
                                <div class="col-right">
                                    @Html.EJS().TimePicker("dayEndHour").ShowClearButton(false).Value(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 23, 59, 59)).Change("onDayEndHourChange").Render()
                                </div>
                            </div>
                            <div class="col-row">
                                <div class="col-left">
                                    <label style="line-height: 34px; margin: 0;">Work Start Hour</label>
                                </div>
                                <div class="col-right">
                                    @Html.EJS().TimePicker("workHourStart").ShowClearButton(false).Value(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 9, 0, 0)).Change("onWorkStartHourChange").Render()
                                </div>
                            </div>
                            <div class="col-row">
                                <div class="col-left">
                                    <label style="line-height: 34px; margin: 0;">Work End Hour</label>
                                </div>
                                <div class="col-right">
                                    @Html.EJS().TimePicker("workHourEnd").ShowClearButton(false).Value(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 18, 0, 0)).Change("onWorkEndHourChange").Render()
                                </div>
                            </div>
                            <div class="col-row">
                                <div class="col-left">
                                    <label style="line-height: 34px; margin: 0;">Slot Duration</label>
                                </div>
                                <div class="col-right">
                                    @Html.EJS().DropDownList("slotDuration").Value("60").PopupHeight("150px").DataSource(ViewData["SlotIntervalDataSource"]).Fields(new DropDownListFieldSettings { Text = "Text", Value = "Value" }).Change("onSlotIntervalChange").Render()
                                </div>
                            </div>
                            <div class="col-row">
                                <div class="col-left">
                                    <label style="line-height: 34px; margin: 0;">Slot Interval</label>
                                </div>
                                <div class="col-right">
                                    @Html.EJS().DropDownList("slotInterval").Value("2").PopupHeight("150px").DataSource(ViewData["slotCounts"]).Fields(new DropDownListFieldSettings { Text = "Text", Value = "Value" }).Change("onSlotCountChange").Render()
                                </div>
                            </div>
                            <div class="col-row">
                                <div class="col-left">
                                    <label style="line-height: 34px; margin: 0;">Time Format</label>
                                </div>
                                <div class="col-right">
                                    @Html.EJS().DropDownList("timeFormat").Value("hh:mm a").PopupHeight("150px").DataSource(ViewData["TimeFormat"]).Fields(new DropDownListFieldSettings { Text = "Text", Value = "Value" }).Change("onTimeFormatChange").Render()
                                </div>
                            </div>
                            <div class="col-row">
                                <div class="col-left">
                                    <label style="line-height: 34px; margin: 0;">Week Numbers</label>
                                </div>
                                <div class="col-right">
                                    @Html.EJS().DropDownList("week_number").Value("Off").PopupHeight("150px").Fields(new DropDownListFieldSettings { Text = "Text", Value = "Value" }).DataSource(ViewData["WeekNumber"]).Change("onWeekNumberChange").Render()
                                </div>
                            </div>
                            <div class="col-row">
                                <div class="col-left">
                                    <label style="line-height: 34px; margin: 0;">Tooltip</label>
                                </div>
                                <div class="col-right">
                                    @Html.EJS().DropDownList("tooltip").Value("Off").PopupHeight("150px").Fields(new DropDownListFieldSettings { Text = "Text", Value = "Value" }).DataSource(ViewData["Tooltip"]).Change("onTooltipChange").Render()
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <style>

    .tailwind .schedule-overview .overview-content .right-panel .control-panel,
    .tailwind3 .schedule-overview .overview-content .right-panel .control-panel {
        background-color: #f3f4f6;
    }

    .tailwind-dark .schedule-overview .overview-content .right-panel .control-panel,
    .tailwind3-dark .schedule-overview .overview-content .right-panel .control-panel {
        background-color: #374151;
        color: #fff;
    }

    .material .schedule-overview .overview-content .right-panel .control-panel {
        background-color: #fafafa;
    }

    .material-dark .schedule-overview .overview-content .right-panel .control-panel {
        background-color: #2a2a2a;
        color: #ffff;
    }

    .fabric .schedule-overview .overview-content .right-panel .control-panel {
        background-color: #ffffff;
    }

    .fabric-dark .schedule-overview .overview-content .right-panel .control-panel {
        background-color: #333232;
        color: #fff;
    }

    .fluent .schedule-overview .overview-content .right-panel .control-panel {
        background-color: #f3f2f1;
    }

    .fluent-dark .schedule-overview .overview-content .right-panel .control-panel {
        background-color: #252423;
        border-color: #c1c1c1;
        color: #fff;
    }

    .bootstrap .schedule-overview .overview-content .right-panel .control-panel {
        background-color: #f8f8f8;
    }

    .bootstrap-dark .schedule-overview .overview-content .right-panel .control-panel {
        background-color: #2a2a2a;
        color: #fff;
    }

    .bootstrap5 .schedule-overview .overview-content .right-panel .control-panel,
    .bootstrap5\.3 .schedule-overview .overview-content .right-panel .control-panel {
        background-color: #f8f9fa;
        color: #212529;
    }

    .bootstrap5-dark .schedule-overview .overview-content .right-panel .control-panel,
    .bootstrap5\.3-dark .schedule-overview .overview-content .right-panel .control-panel {
        background-color: #343a40;
        color: #fff;
    }

    .highcontrast .schedule-overview .overview-content .right-panel .control-panel {
        background-color: #000000;
        color: #ffffff;
    }

        .material3 .schedule-overview .overview-content .right-panel .control-panel {
            background-color: #f3f1f8;
        }

        .material3-dark .schedule-overview .overview-content .right-panel .control-panel {
            background-color: #2a2731;
        }

        .fluent2 .schedule-overview .overview-content .right-panel .control-panel {
            background-color: #FFFFFF;
        }

        .fluent2-dark .schedule-overview .overview-content .right-panel .control-panel {
            background-color: #292929;
        }

        .fluent2-highcontrast .schedule-overview .overview-content .right-panel .control-panel {
            background-color: #000000;
        }

    .schedule-overview .overview-toolbar.e-rtl + *{
        flex-direction: row-reverse;
    }

    .schedule-overview .overview-toolbar.e-toolbar {
        border-radius: 0;
    }

    .schedule-overview .overview-toolbar.e-toolbar .e-toolbar-item .e-tbar-btn.e-tbtn-txt {
        display: inline-grid;
    }

    .material .schedule-overview .overview-toolbar.e-toolbar {
        border-style: solid;
    }

    .schedule-overview .overview-toolbar.e-toolbar .e-toolbar-item:not(.e-separator) {
        padding: 3.5px;
    }

    .schedule-overview .overview-toolbar.e-toolbar .e-toolbar-item .e-btn.e-tbar-btn .e-icons.e-btn-icon,
    .schedule-overview .overview-toolbar.e-toolbar .e-toolbar-item .e-btn.e-tbar-btn .e-tbar-btn-text {
        line-height: 23px !important;
        min-height: 23px !important;
        padding: 0px !important;
    }

    .schedule-overview .overview-toolbar.e-toolbar .e-toolbar-item.e-template {
        margin: 0 5px;
    }

    .schedule-overview .overview-content {
        display: flex;
    }

    .schedule-overview .overview-content .left-panel {
        height: 700px;
        width: 100%;
    }

    .schedule-overview .overview-content .right-panel {
        display: block;
        height: 700px;
        transform: translateX(0%);
        transition: transform .5s ease, width 500ms;
        width: 500px;
    }

    .schedule-overview .overview-content .right-panel.hide {
        display: none;
        transform: translateX(100%);
        transition: transform .5s ease, width 500ms;
        width: 0;
    }

    .schedule-overview .overview-content .right-panel .control-panel {
        background: #f8f9fa;
        font-size: 14px;
        height: 100%;
        overflow: auto;
        padding: 15px;
        width: 100%;
    }

    .schedule-overview .overview-content .right-panel .control-panel .col-row {
        display: flex;
        flex-wrap: wrap;
    }

    .schedule-overview .overview-content .right-panel .control-panel label {
        font-weight: 500;
    }

    .schedule-overview .overview-content .right-panel .control-panel .col-left {
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
        margin-bottom: 1rem;
    }

    .schedule-overview .overview-content .right-panel .control-panel .col-right {
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
        margin-bottom: 1rem;
    }

    .schedule-overview .overview-scheduler {
        height: 100%;
        width: 100%;
    }

    .schedule-overview .e-schedule-toolbar .e-views,
    .schedule-overview .e-schedule-toolbar .e-schedule-seperator,
    .schedule-workweek.e-multi-select-list-wrapper.e-checkbox .e-filter-parent,
    .schedule-resource.e-multi-select-list-wrapper.e-checkbox .e-filter-parent {
        display: none;
    }

    .schedule-overview .e-timeline-view .e-resource-left-td,
    .schedule-overview .e-timeline-month-view .e-resource-left-td {
        width: 120px;
    }

    .schedule-resource.e-multi-select-list-wrapper.e-checkbox .e-list-parent:first-child li:first-child {
        background-image: none;
        opacity: .5;
        pointer-events: none;
        user-select: none;
    }

    .schedule-overview .calendar-import.e-upload {
        border: 0;
        padding-left: 0 !important;
    }

    .schedule-overview .calendar-import.e-upload .e-btn-icon,
    .e-bigger .schedule-overview .calendar-import.e-upload .e-btn-icon {
        margin-left: initial;
    }

    .schedule-overview .calendar-import.e-upload .e-file-select-wrap {
        padding: 0
    }

        .schedule-overview .calendar-import.e-upload .e-file-select-wrap .e-file-select {
            display: none;
        }

    .schedule-overview .calendar-import.e-upload .e-file-select-wrap .e-file-drop,
    .calendar-import .e-upload-files {
        display: none;
    }

    .e-bigger .schedule-context-menu ul .e-menu-item .e-menu-icon {
        font-size: 14px;
    }

    .schedule-context-menu ul .e-menu-item .e-menu-icon {
        font-size: 12px;
    }

    .schedule-overview.e-schedule .e-vertical-view .e-header-cells,
    .schedule-overview.e-schedule .e-timeline-month-view .e-header-cells {
        padding: 0;
        text-align: center !important;
    }

    .schedule-overview.e-schedule .date-text {
        font-size: 14px;
    }

    .schedule-overview.e-schedule.e-device .date-text {
        font-size: 12px;
    }

    .schedule-overview.e-schedule .weather-image {
        width: 20px;
        height: 20px;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .schedule-overview.e-schedule .e-month-view .weather-image {
        float: right;
        margin: -20px 2px 0 0;
        width: 20px;
        height: 20px;
    }

    .fluent2 .schedule-overview .overview-toolbar .e-template .template .icon-child .e-checkbox-wrapper .e-frame,
    .fluent2-dark .schedule-overview .overview-toolbar .e-template .template .icon-child .e-checkbox-wrapper .e-frame,
    .fluent2-highcontrast .schedule-overview .overview-toolbar .e-template .template .icon-child .e-checkbox-wrapper .e-frame {
        margin: 0;
    }

    .fluent .e-appbar .e-btn-icon.e-icons,
    .fluent-dark .e-appbar .e-btn-icon.e-icons {
        margin-top: -2px;
    }

    .fluent .e-toolbar-item .e-checkbox-wrapper .e-icons.e-frame,
    .fluent-dark .e-toolbar-item .e-checkbox-wrapper .e-icons.e-frame {
        height: 17px;
        line-height: 17px;
        width: 17px;
    }

    .fluent .e-toolbar-item .e-checkbox-wrapper .e-icons.e-frame.e-check,
    .fluent-dark .e-toolbar-item .e-checkbox-wrapper .e-icons.e-frame.e-check {
        font-size: 15px;
        line-height: 16px;
    }

    .schedule-overview .overview-toolbar.e-toolbar .e-toolbar-item .e-tbar-btn {
        padding-top: 2px;
        padding-bottom: 2px;
    }

    #exportBtn {
        white-space: nowrap;
    }

    .time {
        display: flex;
        gap: 5px;
        align-items: center;
        padding: 0 5px;
    }

    .template {
        height: 46px;
        line-height: 23px;
    }

    .template .icon-child {
        text-align: center;
        height: 23px !important;
    }

    .template .text-child {
        font-size: 14px;
        line-height: 23px !important;
        font-weight: normal;
    }

    @@media (max-width: 481px) {
        .schedule-overview .overview-content .right-panel {
            position: absolute;
            width: 90%;
        }

        .import-button,
        #printBtn,
        #exportBtn {
            display: none;
        }

    }

    @@media (max-width: 1024px) {
        .schedule-overview .overview-content .right-panel .control-panel .col-row {
            display: initial;
        }

        .schedule-overview .overview-content .right-panel .control-panel .col-left {
            flex: initial;
            max-width: initial;
            margin-bottom: initial;
        }

        .schedule-overview .overview-content .right-panel .control-panel .col-right {
            flex: initial;
            max-width: initial;
        }
    }

    </style>
     
        <script type="text/javascript" >
        var selectedTarget;
        var isTimelineView = false;
        var intlObj = new ej.base.Internationalization();

        window.getDateHeaderDay = function (value) {
            return intlObj.formatDate(value, { skeleton: 'E' });
        };

        window.getDateHeaderDate = function (value) {
            return intlObj.formatDate(value, { skeleton: 'd' });
        };

        window.getWeather = function (date) {
            switch (date.getDay()) {
                case 0:
                    return '<img class="weather-image" src="@Url.Content("~/Content/schedule/images/weather-clear.svg")"/>';
                case 1:
                    return '<img class="weather-image" src="@Url.Content("~/Content/schedule/images/weather-clouds.svg")"/>';
                case 2:
                    return '<img class="weather-image" src="@Url.Content("~/Content/schedule/images/weather-rain.svg")"/>';
                case 3:
                    return '<img class="weather-image" src="@Url.Content("~/Content/schedule/images/weather-clouds.svg")"/>';
                case 4:
                    return '<img class="weather-image" src="@Url.Content("~/Content/schedule/images/weather-rain.svg")"/>';
                case 5:
                    return '<img class="weather-image" src="@Url.Content("~/Content/schedule/images/weather-clear.svg")"/>';
                case 6:
                    return '<img class="weather-image" src="@Url.Content("~/Content/schedule/images/weather-clouds.svg")"/>';
                default:
                    return null;
            }
        };

        document.getElementById("printBtn").addEventListener("click", function () {
            var scheduleObj = document.getElementById('scheduler').ej2_instances[0];
            scheduleObj.print();
        });

        function onContextMenuBeforeOpen(args) {
            var newEventElement = document.querySelector('.e-new-event');
            if (newEventElement) {
                ej.base.remove(newEventElement);
                ej.base.removeClass([document.querySelector('.e-selected-cell')], 'e-selected-cell');
            }
            var scheduleObj = document.querySelector(".e-schedule").ej2_instances[0];
            scheduleObj.closeQuickInfoPopup();
            var targetElement = args.event.target;
            if (ej.base.closest(targetElement, '.e-contextmenu')) {
                return;
            }
            selectedTarget = ej.base.closest(targetElement, '.e-appointment,.e-work-cells,' +
                '.e-vertical-view .e-date-header-wrap .e-all-day-cells,.e-vertical-view .e-date-header-wrap .e-header-cells');
            if (ej.base.isNullOrUndefined(selectedTarget)) {
                args.cancel = true;
                return;
            }
            if (selectedTarget.classList.contains('e-appointment')) {
                var eventObj = scheduleObj.getEventDetails(selectedTarget);
                if (eventObj.RecurrenceRule) {
                    this.showItems(['EditRecurrenceEvent', 'DeleteRecurrenceEvent'], true);
                    this.hideItems(['Add', 'AddRecurrence', 'Today', 'Save', 'Delete'], true);
                } else {
                    this.showItems(['Save', 'Delete'], true);
                    this.hideItems(['Add', 'AddRecurrence', 'Today', 'EditRecurrenceEvent', 'DeleteRecurrenceEvent'], true);
                }
                return;
            } else if ((selectedTarget.classList.contains('e-work-cells') || selectedTarget.classList.contains('e-all-day-cells')) &&
                !selectedTarget.classList.contains('e-selected-cell')) {
                ej.base.removeClass([].slice.call(scheduleObj.element.querySelectorAll('.e-selected-cell')), 'e-selected-cell');
                selectedTarget.classList.add('e-selected-cell');
                selectedTarget.setAttribute('aria-selected', 'true');
            }
            this.hideItems(['Save', 'Delete', 'EditRecurrenceEvent', 'DeleteRecurrenceEvent'], true);
            this.showItems(['Add', 'AddRecurrence', 'Today'], true);
        }

        function onMenuItemSelect(args) {
            var scheduleObj = document.querySelector(".e-schedule").ej2_instances[0];
            var selectedMenuItem = args.item.id;
            var eventObj;
            if (selectedTarget.classList.contains('e-appointment')) {
                eventObj = scheduleObj.getEventDetails(selectedTarget);
            }
            switch (selectedMenuItem) {
                case 'Today':
                    scheduleObj.selectedDate = new Date();
                    break;
                case 'Add':
                case 'AddRecurrence':
                    var selectedCells = scheduleObj.getSelectedElements();
                    var isRightClickInSelectedCells = selectedCells.some(function (cell) {
                        return cell === selectedTarget;
                    });
                    var activeCellsData = scheduleObj.getCellDetails(isRightClickInSelectedCells ? selectedCells : [selectedTarget]);                    if (selectedMenuItem === 'Add') {
                        scheduleObj.openEditor(activeCellsData, 'Add');
                    } else {
                        scheduleObj.openEditor(activeCellsData, 'Add', null, 1);
                    }
                    break;
                case 'Save':
                case 'EditOccurrence':
                case 'EditSeries':
                    if (selectedMenuItem === 'EditSeries') {
                        eventObj = new ej.data.DataManager(scheduleObj.eventsData).executeLocal(new ej.data.Query().
                            where(scheduleObj.eventFields.id, 'equal', eventObj[scheduleObj.eventFields.recurrenceID]))[0];
                    }
                    scheduleObj.openEditor(eventObj, selectedMenuItem);
                    break;
                case 'Delete':
                    scheduleObj.deleteEvent(eventObj);
                    break;
                case 'DeleteOccurrence':
                case 'DeleteSeries':
                    scheduleObj.deleteEvent(eventObj, selectedMenuItem);
                    break;
            }
        }

        function uploaderCreated() {
            var uploader = document.getElementById('icalendar');
            if (uploader) {
                var uploaderObj = uploader.ej2_instances[0];
                var template = '<div class="e-template-btn"><span class="e-btn-icon e-icons e-upload-1 e-icon-left"></span>${text}</div>';
                uploaderObj.buttons = { browse: ej.base.compile(template.trim())({ text: 'Import' })[0] };
            }
            document.querySelector('.calendar-import .e-btn').classList.add('e-inherit');
        }

        function onSelected(args) {
            var scheduleObj = document.getElementById('scheduler').ej2_instances[0];
            scheduleObj.importICalendar(args.event.target.files[0]);
        }

        function onExportItemSelect(args) {
            var scheduleObj = document.getElementById('scheduler').ej2_instances[0];
            if (args.item.text === 'Excel') {
                var exportDatas = [];
                var eventCollection = scheduleObj.getEvents();
                var resourceCollection = scheduleObj.getResourceCollections();
                var resourceData = resourceCollection[0].dataSource;
                for (var i = 0; i < resourceData.length; i++) {
                    var resource = resourceData[i];
                    var data = eventCollection.filter(function (e) { return e.CalendarId === resource.CalendarId; });
                    exportDatas = exportDatas.concat(data);
                }
                scheduleObj.exportToExcel({
                    exportType: 'xlsx',
                    customData: exportDatas,
                    fields: ['Id', 'Subject', 'StartTime', 'EndTime', 'CalendarId']
                });
            }
            else {
                scheduleObj.exportToICalendar();
            }
        }

        function onToolbarItemClick(args) {
            var scheduleObj = document.getElementById('scheduler').ej2_instances[0];
            switch (args.item.text) {
                case 'Day':
                    scheduleObj.currentView = isTimelineView ? 'TimelineDay' : 'Day';
                    break;
                case 'Week':
                    scheduleObj.currentView = isTimelineView ? 'TimelineWeek' : 'Week';
                    break;
                case 'WorkWeek':
                    scheduleObj.currentView = isTimelineView ? 'TimelineWorkWeek' : 'WorkWeek';
                    break;
                case 'Month':
                    scheduleObj.currentView = isTimelineView ? 'TimelineMonth' : 'Month';
                    break;
                case 'Year':
                    scheduleObj.currentView = isTimelineView ? 'TimelineYear' : 'Year';
                    break;
                case 'Agenda':
                    scheduleObj.currentView = 'Agenda';
                    break;
                case 'New Event':
                    var date = scheduleObj.selectedDate;
                    var eventData = {
                        Id: scheduleObj.getEventMaxID(),
                        Subject: '',
                        StartTime: new Date(date.getFullYear(), date.getMonth(), date.getDate(), new Date().getHours(), 0, 0),
                        EndTime: new Date(date.getFullYear(), date.getMonth(), date.getDate(), new Date().getHours() + 1, 0, 0),
                        Location: '',
                        Description: '',
                        IsAllDay: false,
                        CalendarId: 1
                    };
                    scheduleObj.openEditor(eventData, 'Add', true);
                    break;
                case 'New Recurring Event':
                    var dates = scheduleObj.selectedDate;
                    var recEventData = {
                        Id: scheduleObj.getEventMaxID(),
                        Subject: '',
                        StartTime: new Date(dates.getFullYear(), dates.getMonth(), dates.getDate(), new Date().getHours(), 0, 0),
                        EndTime: new Date(dates.getFullYear(), dates.getMonth(), dates.getDate(), new Date().getHours() + 1, 0, 0),
                        Location: '',
                        Description: '',
                        IsAllDay: false,
                        CalendarId: 1
                    };
                    scheduleObj.openEditor(recEventData, 'Add', true, 1);
                    break;
            }
        }

        function updateLiveTime() {
            var scheduleObj = document.getElementById('scheduler').ej2_instances;
            var scheduleTimezone = scheduleObj.length > 0 ? scheduleObj[0].timezone : 'Etc/GMT';
            var timeBtn = document.querySelector('.schedule-overview #timeBtn');
            if (!timeBtn) {
                return;
            }
            if (scheduleObj[0].isAdaptive) {
                timeBtn.innerHTML = new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', timeZone: scheduleTimezone });
            }
            else {
                timeBtn.innerHTML = new Date().toLocaleTimeString('en-US', { timeZone: scheduleTimezone });
            }
        }

        function onToolbarCreated() {
            setInterval(function () { updateLiveTime(); }, 1000);
            var timelineView = new ej.buttons.CheckBox({
                checked: false,
                created: function () { this.element.setAttribute('tabindex', '0'); },
                change: function (args) {
                    var scheduleObj = document.getElementById('scheduler').ej2_instances[0];
                    isTimelineView = args.checked;
                    switch (scheduleObj.currentView) {
                        case 'Day':
                        case 'TimelineDay':
                            scheduleObj.currentView = isTimelineView ? 'TimelineDay' : 'Day';
                            break;
                        case 'Week':
                        case 'TimelineWeek':
                            scheduleObj.currentView = isTimelineView ? 'TimelineWeek' : 'Week';
                            break;
                        case 'WorkWeek':
                        case 'TimelineWorkWeek':
                            scheduleObj.currentView = isTimelineView ? 'TimelineWorkWeek' : 'WorkWeek';
                            break;
                        case 'Month':
                        case 'TimelineMonth':
                            scheduleObj.currentView = isTimelineView ? 'TimelineMonth' : 'Month';
                            break;
                        case 'Year':
                        case 'TimelineYear':
                            scheduleObj.currentView = isTimelineView ? 'TimelineYear' : 'Year';
                            break;
                        case 'Agenda':
                            scheduleObj.currentView = 'Agenda';
                            break;
                    }
                }
            });
            timelineView.appendTo('#timeline_views');

            var grouping = new ej.buttons.CheckBox({
                checked: true,
                created: function () { this.element.setAttribute('tabindex', '0'); },
                change: function (args) {
                    var scheduleObj = document.getElementById('scheduler').ej2_instances[0];
                    scheduleObj.group.resources = args.checked ? ['Calendars'] : [];
                }
            });
            grouping.appendTo('#grouping');

            var gridlines = new ej.buttons.CheckBox({
                checked: true,
                created: function () { this.element.setAttribute('tabindex', '0'); },
                change: function (args) {
                    var scheduleObj = document.getElementById('scheduler').ej2_instances[0];
                    scheduleObj.timeScale.enable = args.checked;
                }
            });
            gridlines.appendTo('#timeSlots');

            var rowAutoHeight = new ej.buttons.CheckBox({
                checked: false,
                created: function () { this.element.setAttribute('tabindex', '0'); },
                change: function (args) {
                    var scheduleObj = document.getElementById('scheduler').ej2_instances[0];
                    scheduleObj.rowAutoHeight = args.checked;
                }
            });
            rowAutoHeight.appendTo('#row_auto_height');

            document.querySelector('#settingsBtn').onclick = function () {
                var settingsPanel = document.querySelector('.overview-content .right-panel');
                if (settingsPanel.classList.contains('hide')) {
                    ej.base.removeClass([settingsPanel], 'hide');
                    document.querySelector('#workWeekDays').ej2_instances[0].refresh();
                    document.querySelector('#resources').ej2_instances[0].refresh();
                }
                else {
                    ej.base.addClass([settingsPanel], 'hide');
                }
                var scheduleObj = document.getElementById('scheduler').ej2_instances[0];
                scheduleObj.refreshEvents();
            };
        }

        function onWeekFirstDayChange(args) {
            var scheduleObj = document.getElementById('scheduler').ej2_instances[0];
            scheduleObj.firstDayOfWeek = parseInt(args.value, 10);
            scheduleObj.dataBind();
        }

        function onWeekDaysChange(args) {
            var scheduleObj = document.getElementById('scheduler').ej2_instances[0];
            var value = args.value.slice(0).map(Number).sort();
            scheduleObj.workDays = value.length === 0 ? [0] : value;
            scheduleObj.dataBind();
        }

        function onCalendarChange(args) {
            var scheduleObj = document.getElementById('scheduler').ej2_instances[0];
            var resourcePredicate;
            var Resourcevalue = args.value.slice(0).map(Number).sort();
            for (var i = 0, a = Resourcevalue; i < a.length; i++) {
                var value = a[i];
                if (resourcePredicate) {
                    resourcePredicate = resourcePredicate.or(new ej.data.Predicate('CalendarId', 'equal', value));
                }
                else {
                    resourcePredicate = new ej.data.Predicate('CalendarId', 'equal', value);
                }
            }
            scheduleObj.resources[0].query = resourcePredicate ? new ej.data.Query().where(resourcePredicate) :
                new ej.data.Query().where('CalendarId', 'equal', 1);
        }

        function onTimezoneChange(args) {
            var scheduleObj = document.getElementById('scheduler').ej2_instances[0];
            scheduleObj.timezone = args.value;
            updateLiveTime();
            document.querySelector('.schedule-overview #timezoneBtn').innerHTML =
                '<span class="e-btn-icon e-icons e-time-zone e-icon-left"></span>' + args.itemData.text;
        }

        function onDayStartHourChange(args) {
            var scheduleObj = document.getElementById('scheduler').ej2_instances[0];
            scheduleObj.startHour = new ej.base.Internationalization().formatDate(args.value, { skeleton: 'Hm' });
        }

        function onDayEndHourChange(args) {
            var scheduleObj = document.getElementById('scheduler').ej2_instances[0];
            scheduleObj.endHour = new ej.base.Internationalization().formatDate(args.value, { skeleton: 'Hm' });
        }

        function onWorkStartHourChange(args) {
            var scheduleObj = document.getElementById('scheduler').ej2_instances[0];
            scheduleObj.workHours.start = new ej.base.Internationalization().formatDate(args.value, { skeleton: 'Hm' });
        }

        function onWorkEndHourChange(args) {
            var scheduleObj = document.getElementById('scheduler').ej2_instances[0];
            scheduleObj.workHours.end = new ej.base.Internationalization().formatDate(args.value, { skeleton: 'Hm' });
        }

        function onSlotIntervalChange(args) {
            var scheduleObj = document.getElementById('scheduler').ej2_instances[0];
            scheduleObj.timeScale.interval = args.value;
        }

        function onSlotCountChange(args) {
            var scheduleObj = document.getElementById('scheduler').ej2_instances[0];
            scheduleObj.timeScale.slotCount = args.value;
        }

        function onTimeFormatChange(args) {
            var scheduleObj = document.getElementById('scheduler').ej2_instances[0];
            scheduleObj.timeFormat = args.value;
        }

        function onWeekNumberChange(args) {
            var scheduleObj = document.getElementById('scheduler').ej2_instances[0];
            if (args.value === 'Off') {
                scheduleObj.showWeekNumber = false;
            } else {
                scheduleObj.showWeekNumber = true;
                scheduleObj.weekRule = args.value;
            }
        }

        function onTooltipChange(args) {
            var scheduleObj = document.getElementById('scheduler').ej2_instances[0];
            if (args.value === 'Off') {
                scheduleObj.eventSettings.enableTooltip = false;
            } else {
                scheduleObj.eventSettings.enableTooltip = true;
            }
        }
    </script>
}

```

### src/components/scheduler-default/OverviewController.cs

```cs
using System;
using System.Collections.Generic;
using System.Web.Mvc;

namespace EJ2MVCSampleBrowser.Controllers.Schedule
{
    public partial class ScheduleController : Controller
    {
        public ActionResult Overview()
        {
            List<object> exportItems = new List<object>();
            exportItems.Add(new { text = "iCalendar", iconCss = "e-icons e-export" });
            exportItems.Add(new { text = "Excel", iconCss = "e-icons e-export-excel" });
            ViewData["ExportItems"] = exportItems;

            List<CalendarRes> calendarCollections = new List<CalendarRes>();
            calendarCollections.Add(new CalendarRes { CalendarName = "My Calendar", CalendarId = 1, CalendarColor = "#c43081" });
            calendarCollections.Add(new CalendarRes { CalendarName = "Company", CalendarId = 2, CalendarColor = "#ff7f50" });
            calendarCollections.Add(new CalendarRes { CalendarName = "Birthday", CalendarId = 3, CalendarColor = "#AF27CD" });
            calendarCollections.Add(new CalendarRes { CalendarName = "Holiday", CalendarId = 4, CalendarColor = "#808000" });
            ViewData["Calendars"] = calendarCollections;

            ViewData["Resources"] = new string[] { "Calendars" };

            List<object> menuItems = new List<object>();
            menuItems.Add(new { text = "New Event", iconCss = "e-icons e-plus", id = "Add" });
            menuItems.Add(new { text = "New Recurring Event", iconCss = "e-icons e-repeat", id = "AddRecurrence" });
            menuItems.Add(new { text = "Today", iconCss = "e-icons e-timeline-today", id = "Today" });
            menuItems.Add(new { text = "Edit Event", iconCss = "e-icons e-edit", id = "Save" });
            menuItems.Add(new
            {
                text = "Edit Event",
                id = "EditRecurrenceEvent",
                iconCss = "e-icons e-edit",
                items = new List<object>() {
                    new { text = "Edit Occurrence", id = "EditOccurrence"},
                    new { text = "Edit Series", id = "EditSeries" }
                }
            });
            menuItems.Add(new { text = "Delete Event", iconCss = "e-icons e-trash", id = "Delete" });
            menuItems.Add(new
            {
                text = "Delete Event",
                id = "DeleteRecurrenceEvent",
                iconCss = "e-icons e-trash",
                items = new List<object>() {
                    new { text = "Delete Occurrence", id = "DeleteOccurrence" },
                    new { text = "Delete Series", id = "DeleteSeries"}
                }
            });
            ViewData["MenuItems"] = menuItems;

            List<object> weekDays = new List<object>();
            weekDays.Add(new { text = "Sunday", value = "0" });
            weekDays.Add(new { text = "Monday", value = "1" });
            weekDays.Add(new { text = "Tuesday", value = "2" });
            weekDays.Add(new { text = "Wednesday", value = "3" });
            weekDays.Add(new { text = "Thursday", value = "4" });
            weekDays.Add(new { text = "Friday", value = "5" });
            weekDays.Add(new { text = "Saturday", value = "6" });
            ViewData["WeekDays"] = weekDays;

            List<object> timezoneData = new List<object>();
            timezoneData.Add(new { text = "UTC -12:00", value = "Etc/GMT+12" });
            timezoneData.Add(new { text = "UTC -11:00", value = "Etc/GMT+11" });
            timezoneData.Add(new { text = "UTC -10:00", value = "Etc/GMT+10" });
            timezoneData.Add(new { text = "UTC -09:00", value = "Etc/GMT+9" });
            timezoneData.Add(new { text = "UTC -08:00", value = "Etc/GMT+8" });
            timezoneData.Add(new { text = "UTC -07:00", value = "Etc/GMT+7" });
            timezoneData.Add(new { text = "UTC -06:00", value = "Etc/GMT+6" });
            timezoneData.Add(new { text = "UTC -05:00", value = "Etc/GMT+5" });
            timezoneData.Add(new { text = "UTC -04:00", value = "Etc/GMT+4" });
            timezoneData.Add(new { text = "UTC -03:00", value = "Etc/GMT+3" });
            timezoneData.Add(new { text = "UTC -02:00", value = "Etc/GMT+2" });
            timezoneData.Add(new { text = "UTC -01:00", value = "Etc/GMT+1" });
            timezoneData.Add(new { text = "UTC +00:00", value = "Etc/GMT" });
            timezoneData.Add(new { text = "UTC +01:00", value = "Etc/GMT-1" });
            timezoneData.Add(new { text = "UTC +02:00", value = "Etc/GMT-2" });
            timezoneData.Add(new { text = "UTC +03:00", value = "Etc/GMT-3" });
            timezoneData.Add(new { text = "UTC +04:00", value = "Etc/GMT-4" });
            timezoneData.Add(new { text = "UTC +05:00", value = "Etc/GMT-5" });
            timezoneData.Add(new { text = "UTC +06:00", value = "Etc/GMT-6" });
            timezoneData.Add(new { text = "UTC +07:00", value = "Etc/GMT-7" });
            timezoneData.Add(new { text = "UTC +08:00", value = "Etc/GMT-8" });
            timezoneData.Add(new { text = "UTC +09:00", value = "Etc/GMT-9" });
            timezoneData.Add(new { text = "UTC +10:00", value = "Etc/GMT-10" });
            timezoneData.Add(new { text = "UTC +11:00", value = "Etc/GMT-11" });
            timezoneData.Add(new { text = "UTC +12:00", value = "Etc/GMT-12" });
            timezoneData.Add(new { text = "UTC +13:00", value = "Etc/GMT-13" });
            timezoneData.Add(new { text = "UTC +14:00", value = "Etc/GMT-14" });
            ViewData["TimezoneData"] = timezoneData;

            List<object> slotIntervalDataSource = new List<object>();
            slotIntervalDataSource.Add(new { Text = "1 hour", Value = "60" });
            slotIntervalDataSource.Add(new { Text = "1.5 hours", Value = "90" });
            slotIntervalDataSource.Add(new { Text = "2 hours", Value = "120" });
            slotIntervalDataSource.Add(new { Text = "2.5 hours", Value = "150" });
            slotIntervalDataSource.Add(new { Text = "3 hours", Value = "180" });
            slotIntervalDataSource.Add(new { Text = "3.5 hours", Value = "210" });
            slotIntervalDataSource.Add(new { Text = "4 hours", Value = "240" });
            slotIntervalDataSource.Add(new { Text = "4.5 hours", Value = "270" });
            slotIntervalDataSource.Add(new { Text = "5 hours", Value = "300" });
            slotIntervalDataSource.Add(new { Text = "5.5 hours", Value = "330" });
            slotIntervalDataSource.Add(new { Text = "6 hours", Value = "360" });
            slotIntervalDataSource.Add(new { Text = "6.5 hours", Value = "390" });
            slotIntervalDataSource.Add(new { Text = "7 hours", Value = "420" });
            slotIntervalDataSource.Add(new { Text = "7.5 hours", Value = "450" });
            slotIntervalDataSource.Add(new { Text = "8 hours", Value = "480" });
            slotIntervalDataSource.Add(new { Text = "8.5 hours", Value = "510" });
            slotIntervalDataSource.Add(new { Text = "9 hours", Value = "540" });
            slotIntervalDataSource.Add(new { Text = "9.5 hours", Value = "570" });
            slotIntervalDataSource.Add(new { Text = "10 hours", Value = "600" });
            slotIntervalDataSource.Add(new { Text = "10.5 hours", Value = "630" });
            slotIntervalDataSource.Add(new { Text = "11 hours", Value = "660" });
            slotIntervalDataSource.Add(new { Text = "11.5 hours", Value = "690" });
            slotIntervalDataSource.Add(new { Text = "12 hours", Value = "720" });
            ViewData["SlotIntervalDataSource"] = slotIntervalDataSource;

            List<object> slots = new List<object>();
            slots.Add(new { Text = "1", Value = "1" });
            slots.Add(new { Text = "2", Value = "2" });
            slots.Add(new { Text = "3", Value = "3" });
            slots.Add(new { Text = "4", Value = "4" });
            slots.Add(new { Text = "5", Value = "5" });
            slots.Add(new { Text = "6", Value = "6" });
            slots.Add(new { Text = "7", Value = "7" });
            slots.Add(new { Text = "8", Value = "8" });
            slots.Add(new { Text = "9", Value = "9" });
            slots.Add(new { Text = "10", Value = "10" });
            ViewData["SlotCounts"] = slots;
            List<object> time = new List<object>();
            time.Add(new { Text = "12 hours", Value = "hh:mm a" });
            time.Add(new { Text = "24 hours", Value = "HH:mm" });
            ViewData["TimeFormat"] = time;
            List<object> weekNumbersData = new List<object>();
            weekNumbersData.Add(new { Text = "Off", Value = "Off" });
            weekNumbersData.Add(new { Text = "First Day Of Year", Value = "FirstDay" });
            weekNumbersData.Add(new { Text = "First Full Week", Value = "FirstFullWeek" });
            weekNumbersData.Add(new { Text = "First Four-Day Week", Value = "FirstFourDayWeek" });
            ViewData["WeekNumber"] = weekNumbersData;
            List<object> tooltipData = new List<object>();
            tooltipData.Add(new { Text = "Off", Value = "Off" });
            tooltipData.Add(new { Text = "On", Value = "On" });
            ViewData["Tooltip"] = tooltipData;

            ViewData["Values"] = new string[] { "1", "2", "3", "4", "5" };
            ViewData["ResourceValues"] = new string[] { "1" };

            ViewData["Appointments"] = this.GenerateEvents();

            return View();
        }

        private List<AppointmentData> GenerateEvents()
        {
            List<AppointmentData> EventData = new List<AppointmentData>();
            DateTime YearStart = new DateTime(DateTime.Now.Year, 1, 1);
            DateTime YearEnd = new DateTime(DateTime.Now.Year, 12, 31);
            string[] EventSubjects = new string[] {
                "Bering Sea Gold", "Technology", "Maintenance", "Meeting", "Travelling", "Annual Conference", "Birthday Celebration", "Farewell Celebration",
                "Wedding Anniversary", "Alaska: The Last Frontier", "Deadliest Catch", "Sports Day", "MoonShiners", "Close Encounters", "HighWay Thru Hell",
                "Daily Planet", "Cash Cab", "Basketball Practice", "Rugby Match", "Guitar Class", "Music Lessons", "Doctor checkup", "Brazil - Mexico",
                "Opening ceremony", "Final presentation"
            };
            DateTime CurrentDate = DateTime.Today.AddDays(-(int)DateTime.Today.DayOfWeek + (int)DayOfWeek.Sunday);
            DateTime Start = new DateTime(CurrentDate.Year, CurrentDate.Month, CurrentDate.Day, 10, 0, 0);
            DateTime End = new DateTime(CurrentDate.Year, CurrentDate.Month, CurrentDate.Day, 11, 30, 0);
            EventData.Add(new AppointmentData()
            {
                Id = 1,
                Subject = "Stand-Up Meeting",
                StartTime = Start.ToLocalTime(),
                EndTime = End.ToLocalTime(),
                Location = "",
                Description = "Event Scheduled",
                RecurrenceRule = "FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR;INTERVAL=1;COUNT=10;",
                IsAllDay = false,
                IsReadonly = false,
                CalendarId = 1
            });
            for (int a = 0, id = 2; a < 500; a++)
            {
                Random random = new Random();
                int Month = random.Next(1, 12);
                int Date = random.Next(1, 28);
                int Hour = random.Next(1, 24);
                int Minutes = random.Next(1, 60);
                DateTime start = new DateTime(YearStart.Year, Month, Date, Hour, Minutes, 0);
                DateTime end = new DateTime(start.Ticks).AddHours(2);
                DateTime StartDate = new DateTime(start.Ticks);
                DateTime EndDate = new DateTime(end.Ticks);
                AppointmentData eventDatas = new AppointmentData()
                {
                    Id = id,
                    Subject = EventSubjects[random.Next(1, 25)],
                    StartTime = StartDate,
                    EndTime = EndDate,
                    Location = "",
                    Description = "Event Scheduled",
                    IsAllDay = id % 10 == 0,
                    IsReadonly = EndDate < DateTime.Now,
                    CalendarId = (a % 4) + 1
                };
                EventData.Add(eventDatas);
                id++;
            }
            return EventData;
        }
    }

    public class CalendarRes
    {
        public string CalendarName { set; get; }
        public int CalendarId { set; get; }
        public string CalendarColor { set; get; }
    }

    public class AppointmentData
    {
        public int Id { get; set; }
        public string Subject { get; set; }
        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }
        public string Location { get; set; }
        public string Description { get; set; }
        public bool IsAllDay { get; set; }
        public bool IsReadonly { get; set; }
        public int CalendarId { get; set; }
        public int? RecurrenceID { get; set; }
        public string RecurrenceRule { get; set; }
        public string RecurrenceException { get; set; }
    }
}

```