{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "scheduler-default",
  "framework": "aspnet-mvc",
  "type": "registry:component",
  "component": "Scheduler",
  "variant": "default",
  "dependencies": [
    "Syncfusion.AspNetMvc.Schedule"
  ],
  "description": "Scheduler with 11 views, multiple calendars, custom toolbar, context menu, iCalendar import, and a settings property panel.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": false,
    "platformIndex": "https://ai.syncfusion.com/aspnetmvc/llms.txt",
    "skillPack": "syncfusion/aspnetmvc-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/aspnet-mvc/scheduler-default.md"
  },
  "files": [
    {
      "target": "src/components/scheduler-default/Overview.cshtml",
      "content": "@using Syncfusion.EJ2\n@using Syncfusion.EJ2.Schedule\n@using Syncfusion.EJ2.Navigations;\n@using Syncfusion.EJ2.DropDowns\n\n@{\n    ViewData[\"Title\"] = \"Overview\";\n    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>\";\n    string groupTemplate = \"<div class='template'><label><div class='icon-child'><input id='grouping'></input></div><div class='text-child'>Grouping</div></label></div>\";\n    string gridlineTemplate = \"<div class='template'><label><div class='icon-child'><input id='timeSlots'></input></div><div class='text-child'>Time Slots</div></label></div>\";\n    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>\";\n    string dateHeaderTemplate = \"<div class='date - text'>${getDateHeaderDay(data.date)}</div><div class='date - text'>${getDateHeaderDate(data.date)}</div>${getWeather(data.date)}\";\n    string timezone = \"Etc/GMT\";\n}\n\n@section ControlsSection{\n    <div class=\"col-lg-12 control-section\">\n        <div class=\"content-wrapper\">\n            <div class=\"schedule-overview\">\n                @(Html.EJS().AppBar(\"defaultAppBar\").ColorMode(AppBarColor.Primary).ContentTemplate(\n                    @<div>\n                    <span class=\"time e-icons e-time-zone\"></span>\n                    <span id=\"timezoneBtn\" class=\"time \">UTC</span>\n                    <span class=\"time e-icons e-clock\"></span>\n                    <span id=\"timeBtn\" class=\"time current-time\">Time</span>\n                    <div class=\"e-appbar-spacer\"></div>\n                    @Html.EJS().Button(\"printBtn\").CssClass(\"title-bar-btn e-inherit\").Content(\"Print\").IconCss(\"e-icons e-print\").Render()\n                    <div class=\"control-panel import-button\">\n                    @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()\n                    </div>\n                    <div class=\"control-panel calendar-export\">\n                    @Html.EJS().DropDownButton(\"exportBtn\").CssClass(\"e-inherit\").Content(\"Export\").Items(ViewData[\"ExportItems\"]).Select(\"onExportItemSelect\").Render()\n                    </div>\n                    @Html.EJS().Button(\"settingsBtn\").CssClass(\"overview-toolbar-settings e-inherit\").IconCss(\"e-icons e-settings\").IconPosition(Syncfusion.EJ2.Buttons.IconPosition.Top).Render()\n                    </div>).Render())\n                @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> {\n                new ToolbarItem { PrefixIcon = \"e-icons e-plus\", TooltipText = \"New Event\", Text = \"New Event\", TabIndex=0  },\n                new ToolbarItem { PrefixIcon = \"e-icons e-repeat\", TooltipText = \"New Recurring Event\", Text = \"New Recurring Event\", TabIndex=0  },\n                new ToolbarItem { Type = ItemType.Separator },\n                new ToolbarItem { PrefixIcon = \"e-icons e-day\", TooltipText = \"Day\", Text = \"Day\", TabIndex=0 },\n                new ToolbarItem { PrefixIcon = \"e-icons e-week\", TooltipText = \"Week\", Text = \"Week\", TabIndex=0 },\n                new ToolbarItem { PrefixIcon = \"e-icons e-week\", TooltipText = \"WorkWeek\", Text = \"WorkWeek\", TabIndex=0 },\n                new ToolbarItem { PrefixIcon = \"e-icons e-month\", TooltipText = \"Month\", Text = \"Month\", TabIndex=0 },\n                new ToolbarItem { PrefixIcon = \"e-icons e-month\", TooltipText = \"Year\", Text = \"Year\", TabIndex=0 },\n                new ToolbarItem { PrefixIcon = \"e-icons e-agenda-date-range\", TooltipText = \"Agenda\", Text = \"Agenda\", TabIndex=0 },\n                new ToolbarItem { TooltipText=\"Timeline Views\", Template= timelineTemplate },\n                new ToolbarItem { Type = ItemType.Separator },\n                new ToolbarItem { TooltipText = \"Resource Grouping\", Template = groupTemplate },\n                new ToolbarItem { TooltipText = \"Gridlines\", Template = gridlineTemplate },\n                new ToolbarItem { TooltipText = \"Row Auto Height\", Template = autoHeightTemplate }}).Render()\n                <div class=\"overview-content\">\n                    <div class=\"left-panel\">\n                        <div class=\"overview-scheduler\">\n                            @Html.EJS().Schedule(\"scheduler\").CssClass(\"schedule-overview\").Height(\"100%\").Timezone(\"UTC\").DateHeaderTemplate(dateHeaderTemplate).Group(group => group.Resources((string[])ViewData[\"Resources\"])).Resources(res =>\n                            {\n                            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();\n                            }).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()\n                            @Html.EJS().ContextMenu(\"overviewContextMenu\").CssClass(\"schedule-context-menu\").BeforeOpen(\"onContextMenuBeforeOpen\").Select(\"onMenuItemSelect\").Target(\".e-schedule\").Items(ViewData[\"MenuItems\"]).Render()\n                        </div>\n                    </div>\n                    <div class=\"right-panel hide\">\n                        <div class=\"control-panel e-css\">\n                            <div class=\"col-row\">\n                                <div class=\"col-left\">\n                                    <label style=\"line-height: 34px; margin: 0;\">Calendar</label>\n                                </div>\n                                <div class=\"col-right\">\n                                    @Html.EJS().MultiSelect(\"resources\").CssClass(\"schedule-workweek\").Mode(VisualMode.CheckBox).EnableSelectionOrder(false).ShowDropDownIcon(true).ShowClearButton(false).Value(ViewData[\"ResourceValues\"]).DataSource(\n                                    ViewData[\"Calendars\"]).Fields(new MultiSelectFieldSettings { Text = \"CalendarName\", Value = \"CalendarId\" }).Change(\"onCalendarChange\").Render()\n                                </div>\n                            </div>\n                            <div class=\"col-row\">\n                                <div class=\"col-left\">\n                                    <label style=\"line-height: 34px; margin: 0;\">First Day of Week</label>\n                                </div>\n                                <div class=\"col-right\">\n                                    @Html.EJS().DropDownList(\"weekFirstDay\").Value(\"0\").DataSource(ViewData[\"WeekDays\"]).Fields(new DropDownListFieldSettings { Text = \"text\", Value = \"value\" }).Change(\"onWeekFirstDayChange\").Render()\n                                </div>\n                            </div>\n                            <div class=\"col-row\">\n                                <div class=\"col-left\">\n                                    <label style=\"line-height: 34px; margin: 0;\">Work week</label>\n                                </div>\n                                <div class=\"col-right\">\n                                    @Html.EJS().MultiSelect(\"workWeekDays\").CssClass(\"schedule-workweek\").Mode(VisualMode.CheckBox).EnableSelectionOrder(false).ShowDropDownIcon(true).ShowClearButton(false).Value(ViewData[\"Values\"]).DataSource(\n                                    ViewData[\"WeekDays\"]).Fields(new MultiSelectFieldSettings { Text = \"text\", Value = \"value\" }).Change(\"onWeekDaysChange\").Render()\n                                </div>\n\n                            </div>\n                            <div class=\"col-row\">\n                                <div class=\"col-left\">\n                                    <label style=\"line-height: 34px; margin: 0;\">Timezone</label>\n                                </div>\n                                <div class=\"col-right\">\n                                    @Html.EJS().DropDownList(\"timezone\").Value(timezone).PopupHeight(\"150px\").DataSource(ViewData[\"TimezoneData\"]).Fields(new DropDownListFieldSettings { Text = \"text\", Value = \"value\" }).Change(\"onTimezoneChange\").Render()\n                                </div>\n                            </div>\n                            <div class=\"col-row\">\n                                <div class=\"col-left\">\n                                    <label style=\"line-height: 34px; margin: 0;\">Day Start Hour</label>\n                                </div>\n                                <div class=\"col-right\">\n                                    @Html.EJS().TimePicker(\"dayStartHour\").ShowClearButton(false).Value(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 0, 0, 0)).Change(\"onDayStartHourChange\").Render()\n                                </div>\n                            </div>\n                            <div class=\"col-row\">\n                                <div class=\"col-left\">\n                                    <label style=\"line-height: 34px; margin: 0;\">Day End Hour</label>\n                                </div>\n                                <div class=\"col-right\">\n                                    @Html.EJS().TimePicker(\"dayEndHour\").ShowClearButton(false).Value(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 23, 59, 59)).Change(\"onDayEndHourChange\").Render()\n                                </div>\n                            </div>\n                            <div class=\"col-row\">\n                                <div class=\"col-left\">\n                                    <label style=\"line-height: 34px; margin: 0;\">Work Start Hour</label>\n                                </div>\n                                <div class=\"col-right\">\n                                    @Html.EJS().TimePicker(\"workHourStart\").ShowClearButton(false).Value(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 9, 0, 0)).Change(\"onWorkStartHourChange\").Render()\n                                </div>\n                            </div>\n                            <div class=\"col-row\">\n                                <div class=\"col-left\">\n                                    <label style=\"line-height: 34px; margin: 0;\">Work End Hour</label>\n                                </div>\n                                <div class=\"col-right\">\n                                    @Html.EJS().TimePicker(\"workHourEnd\").ShowClearButton(false).Value(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 18, 0, 0)).Change(\"onWorkEndHourChange\").Render()\n                                </div>\n                            </div>\n                            <div class=\"col-row\">\n                                <div class=\"col-left\">\n                                    <label style=\"line-height: 34px; margin: 0;\">Slot Duration</label>\n                                </div>\n                                <div class=\"col-right\">\n                                    @Html.EJS().DropDownList(\"slotDuration\").Value(\"60\").PopupHeight(\"150px\").DataSource(ViewData[\"SlotIntervalDataSource\"]).Fields(new DropDownListFieldSettings { Text = \"Text\", Value = \"Value\" }).Change(\"onSlotIntervalChange\").Render()\n                                </div>\n                            </div>\n                            <div class=\"col-row\">\n                                <div class=\"col-left\">\n                                    <label style=\"line-height: 34px; margin: 0;\">Slot Interval</label>\n                                </div>\n                                <div class=\"col-right\">\n                                    @Html.EJS().DropDownList(\"slotInterval\").Value(\"2\").PopupHeight(\"150px\").DataSource(ViewData[\"slotCounts\"]).Fields(new DropDownListFieldSettings { Text = \"Text\", Value = \"Value\" }).Change(\"onSlotCountChange\").Render()\n                                </div>\n                            </div>\n                            <div class=\"col-row\">\n                                <div class=\"col-left\">\n                                    <label style=\"line-height: 34px; margin: 0;\">Time Format</label>\n                                </div>\n                                <div class=\"col-right\">\n                                    @Html.EJS().DropDownList(\"timeFormat\").Value(\"hh:mm a\").PopupHeight(\"150px\").DataSource(ViewData[\"TimeFormat\"]).Fields(new DropDownListFieldSettings { Text = \"Text\", Value = \"Value\" }).Change(\"onTimeFormatChange\").Render()\n                                </div>\n                            </div>\n                            <div class=\"col-row\">\n                                <div class=\"col-left\">\n                                    <label style=\"line-height: 34px; margin: 0;\">Week Numbers</label>\n                                </div>\n                                <div class=\"col-right\">\n                                    @Html.EJS().DropDownList(\"week_number\").Value(\"Off\").PopupHeight(\"150px\").Fields(new DropDownListFieldSettings { Text = \"Text\", Value = \"Value\" }).DataSource(ViewData[\"WeekNumber\"]).Change(\"onWeekNumberChange\").Render()\n                                </div>\n                            </div>\n                            <div class=\"col-row\">\n                                <div class=\"col-left\">\n                                    <label style=\"line-height: 34px; margin: 0;\">Tooltip</label>\n                                </div>\n                                <div class=\"col-right\">\n                                    @Html.EJS().DropDownList(\"tooltip\").Value(\"Off\").PopupHeight(\"150px\").Fields(new DropDownListFieldSettings { Text = \"Text\", Value = \"Value\" }).DataSource(ViewData[\"Tooltip\"]).Change(\"onTooltipChange\").Render()\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <style>\n\n    .tailwind .schedule-overview .overview-content .right-panel .control-panel,\n    .tailwind3 .schedule-overview .overview-content .right-panel .control-panel {\n        background-color: #f3f4f6;\n    }\n\n    .tailwind-dark .schedule-overview .overview-content .right-panel .control-panel,\n    .tailwind3-dark .schedule-overview .overview-content .right-panel .control-panel {\n        background-color: #374151;\n        color: #fff;\n    }\n\n    .material .schedule-overview .overview-content .right-panel .control-panel {\n        background-color: #fafafa;\n    }\n\n    .material-dark .schedule-overview .overview-content .right-panel .control-panel {\n        background-color: #2a2a2a;\n        color: #ffff;\n    }\n\n    .fabric .schedule-overview .overview-content .right-panel .control-panel {\n        background-color: #ffffff;\n    }\n\n    .fabric-dark .schedule-overview .overview-content .right-panel .control-panel {\n        background-color: #333232;\n        color: #fff;\n    }\n\n    .fluent .schedule-overview .overview-content .right-panel .control-panel {\n        background-color: #f3f2f1;\n    }\n\n    .fluent-dark .schedule-overview .overview-content .right-panel .control-panel {\n        background-color: #252423;\n        border-color: #c1c1c1;\n        color: #fff;\n    }\n\n    .bootstrap .schedule-overview .overview-content .right-panel .control-panel {\n        background-color: #f8f8f8;\n    }\n\n    .bootstrap-dark .schedule-overview .overview-content .right-panel .control-panel {\n        background-color: #2a2a2a;\n        color: #fff;\n    }\n\n    .bootstrap5 .schedule-overview .overview-content .right-panel .control-panel,\n    .bootstrap5\\.3 .schedule-overview .overview-content .right-panel .control-panel {\n        background-color: #f8f9fa;\n        color: #212529;\n    }\n\n    .bootstrap5-dark .schedule-overview .overview-content .right-panel .control-panel,\n    .bootstrap5\\.3-dark .schedule-overview .overview-content .right-panel .control-panel {\n        background-color: #343a40;\n        color: #fff;\n    }\n\n    .highcontrast .schedule-overview .overview-content .right-panel .control-panel {\n        background-color: #000000;\n        color: #ffffff;\n    }\n\n        .material3 .schedule-overview .overview-content .right-panel .control-panel {\n            background-color: #f3f1f8;\n        }\n\n        .material3-dark .schedule-overview .overview-content .right-panel .control-panel {\n            background-color: #2a2731;\n        }\n\n        .fluent2 .schedule-overview .overview-content .right-panel .control-panel {\n            background-color: #FFFFFF;\n        }\n\n        .fluent2-dark .schedule-overview .overview-content .right-panel .control-panel {\n            background-color: #292929;\n        }\n\n        .fluent2-highcontrast .schedule-overview .overview-content .right-panel .control-panel {\n            background-color: #000000;\n        }\n\n    .schedule-overview .overview-toolbar.e-rtl + *{\n        flex-direction: row-reverse;\n    }\n\n    .schedule-overview .overview-toolbar.e-toolbar {\n        border-radius: 0;\n    }\n\n    .schedule-overview .overview-toolbar.e-toolbar .e-toolbar-item .e-tbar-btn.e-tbtn-txt {\n        display: inline-grid;\n    }\n\n    .material .schedule-overview .overview-toolbar.e-toolbar {\n        border-style: solid;\n    }\n\n    .schedule-overview .overview-toolbar.e-toolbar .e-toolbar-item:not(.e-separator) {\n        padding: 3.5px;\n    }\n\n    .schedule-overview .overview-toolbar.e-toolbar .e-toolbar-item .e-btn.e-tbar-btn .e-icons.e-btn-icon,\n    .schedule-overview .overview-toolbar.e-toolbar .e-toolbar-item .e-btn.e-tbar-btn .e-tbar-btn-text {\n        line-height: 23px !important;\n        min-height: 23px !important;\n        padding: 0px !important;\n    }\n\n    .schedule-overview .overview-toolbar.e-toolbar .e-toolbar-item.e-template {\n        margin: 0 5px;\n    }\n\n    .schedule-overview .overview-content {\n        display: flex;\n    }\n\n    .schedule-overview .overview-content .left-panel {\n        height: 700px;\n        width: 100%;\n    }\n\n    .schedule-overview .overview-content .right-panel {\n        display: block;\n        height: 700px;\n        transform: translateX(0%);\n        transition: transform .5s ease, width 500ms;\n        width: 500px;\n    }\n\n    .schedule-overview .overview-content .right-panel.hide {\n        display: none;\n        transform: translateX(100%);\n        transition: transform .5s ease, width 500ms;\n        width: 0;\n    }\n\n    .schedule-overview .overview-content .right-panel .control-panel {\n        background: #f8f9fa;\n        font-size: 14px;\n        height: 100%;\n        overflow: auto;\n        padding: 15px;\n        width: 100%;\n    }\n\n    .schedule-overview .overview-content .right-panel .control-panel .col-row {\n        display: flex;\n        flex-wrap: wrap;\n    }\n\n    .schedule-overview .overview-content .right-panel .control-panel label {\n        font-weight: 500;\n    }\n\n    .schedule-overview .overview-content .right-panel .control-panel .col-left {\n        flex: 0 0 41.666667%;\n        max-width: 41.666667%;\n        margin-bottom: 1rem;\n    }\n\n    .schedule-overview .overview-content .right-panel .control-panel .col-right {\n        flex: 0 0 58.333333%;\n        max-width: 58.333333%;\n        margin-bottom: 1rem;\n    }\n\n    .schedule-overview .overview-scheduler {\n        height: 100%;\n        width: 100%;\n    }\n\n    .schedule-overview .e-schedule-toolbar .e-views,\n    .schedule-overview .e-schedule-toolbar .e-schedule-seperator,\n    .schedule-workweek.e-multi-select-list-wrapper.e-checkbox .e-filter-parent,\n    .schedule-resource.e-multi-select-list-wrapper.e-checkbox .e-filter-parent {\n        display: none;\n    }\n\n    .schedule-overview .e-timeline-view .e-resource-left-td,\n    .schedule-overview .e-timeline-month-view .e-resource-left-td {\n        width: 120px;\n    }\n\n    .schedule-resource.e-multi-select-list-wrapper.e-checkbox .e-list-parent:first-child li:first-child {\n        background-image: none;\n        opacity: .5;\n        pointer-events: none;\n        user-select: none;\n    }\n\n    .schedule-overview .calendar-import.e-upload {\n        border: 0;\n        padding-left: 0 !important;\n    }\n\n    .schedule-overview .calendar-import.e-upload .e-btn-icon,\n    .e-bigger .schedule-overview .calendar-import.e-upload .e-btn-icon {\n        margin-left: initial;\n    }\n\n    .schedule-overview .calendar-import.e-upload .e-file-select-wrap {\n        padding: 0\n    }\n\n        .schedule-overview .calendar-import.e-upload .e-file-select-wrap .e-file-select {\n            display: none;\n        }\n\n    .schedule-overview .calendar-import.e-upload .e-file-select-wrap .e-file-drop,\n    .calendar-import .e-upload-files {\n        display: none;\n    }\n\n    .e-bigger .schedule-context-menu ul .e-menu-item .e-menu-icon {\n        font-size: 14px;\n    }\n\n    .schedule-context-menu ul .e-menu-item .e-menu-icon {\n        font-size: 12px;\n    }\n\n    .schedule-overview.e-schedule .e-vertical-view .e-header-cells,\n    .schedule-overview.e-schedule .e-timeline-month-view .e-header-cells {\n        padding: 0;\n        text-align: center !important;\n    }\n\n    .schedule-overview.e-schedule .date-text {\n        font-size: 14px;\n    }\n\n    .schedule-overview.e-schedule.e-device .date-text {\n        font-size: 12px;\n    }\n\n    .schedule-overview.e-schedule .weather-image {\n        width: 20px;\n        height: 20px;\n        background-position: center center;\n        background-repeat: no-repeat;\n        background-size: cover;\n    }\n\n    .schedule-overview.e-schedule .e-month-view .weather-image {\n        float: right;\n        margin: -20px 2px 0 0;\n        width: 20px;\n        height: 20px;\n    }\n\n    .fluent2 .schedule-overview .overview-toolbar .e-template .template .icon-child .e-checkbox-wrapper .e-frame,\n    .fluent2-dark .schedule-overview .overview-toolbar .e-template .template .icon-child .e-checkbox-wrapper .e-frame,\n    .fluent2-highcontrast .schedule-overview .overview-toolbar .e-template .template .icon-child .e-checkbox-wrapper .e-frame {\n        margin: 0;\n    }\n\n    .fluent .e-appbar .e-btn-icon.e-icons,\n    .fluent-dark .e-appbar .e-btn-icon.e-icons {\n        margin-top: -2px;\n    }\n\n    .fluent .e-toolbar-item .e-checkbox-wrapper .e-icons.e-frame,\n    .fluent-dark .e-toolbar-item .e-checkbox-wrapper .e-icons.e-frame {\n        height: 17px;\n        line-height: 17px;\n        width: 17px;\n    }\n\n    .fluent .e-toolbar-item .e-checkbox-wrapper .e-icons.e-frame.e-check,\n    .fluent-dark .e-toolbar-item .e-checkbox-wrapper .e-icons.e-frame.e-check {\n        font-size: 15px;\n        line-height: 16px;\n    }\n\n    .schedule-overview .overview-toolbar.e-toolbar .e-toolbar-item .e-tbar-btn {\n        padding-top: 2px;\n        padding-bottom: 2px;\n    }\n\n    #exportBtn {\n        white-space: nowrap;\n    }\n\n    .time {\n        display: flex;\n        gap: 5px;\n        align-items: center;\n        padding: 0 5px;\n    }\n\n    .template {\n        height: 46px;\n        line-height: 23px;\n    }\n\n    .template .icon-child {\n        text-align: center;\n        height: 23px !important;\n    }\n\n    .template .text-child {\n        font-size: 14px;\n        line-height: 23px !important;\n        font-weight: normal;\n    }\n\n    @@media (max-width: 481px) {\n        .schedule-overview .overview-content .right-panel {\n            position: absolute;\n            width: 90%;\n        }\n\n        .import-button,\n        #printBtn,\n        #exportBtn {\n            display: none;\n        }\n\n    }\n\n    @@media (max-width: 1024px) {\n        .schedule-overview .overview-content .right-panel .control-panel .col-row {\n            display: initial;\n        }\n\n        .schedule-overview .overview-content .right-panel .control-panel .col-left {\n            flex: initial;\n            max-width: initial;\n            margin-bottom: initial;\n        }\n\n        .schedule-overview .overview-content .right-panel .control-panel .col-right {\n            flex: initial;\n            max-width: initial;\n        }\n    }\n\n    </style>\n     \n        <script type=\"text/javascript\" >\n        var selectedTarget;\n        var isTimelineView = false;\n        var intlObj = new ej.base.Internationalization();\n\n        window.getDateHeaderDay = function (value) {\n            return intlObj.formatDate(value, { skeleton: 'E' });\n        };\n\n        window.getDateHeaderDate = function (value) {\n            return intlObj.formatDate(value, { skeleton: 'd' });\n        };\n\n        window.getWeather = function (date) {\n            switch (date.getDay()) {\n                case 0:\n                    return '<img class=\"weather-image\" src=\"@Url.Content(\"~/Content/schedule/images/weather-clear.svg\")\"/>';\n                case 1:\n                    return '<img class=\"weather-image\" src=\"@Url.Content(\"~/Content/schedule/images/weather-clouds.svg\")\"/>';\n                case 2:\n                    return '<img class=\"weather-image\" src=\"@Url.Content(\"~/Content/schedule/images/weather-rain.svg\")\"/>';\n                case 3:\n                    return '<img class=\"weather-image\" src=\"@Url.Content(\"~/Content/schedule/images/weather-clouds.svg\")\"/>';\n                case 4:\n                    return '<img class=\"weather-image\" src=\"@Url.Content(\"~/Content/schedule/images/weather-rain.svg\")\"/>';\n                case 5:\n                    return '<img class=\"weather-image\" src=\"@Url.Content(\"~/Content/schedule/images/weather-clear.svg\")\"/>';\n                case 6:\n                    return '<img class=\"weather-image\" src=\"@Url.Content(\"~/Content/schedule/images/weather-clouds.svg\")\"/>';\n                default:\n                    return null;\n            }\n        };\n\n        document.getElementById(\"printBtn\").addEventListener(\"click\", function () {\n            var scheduleObj = document.getElementById('scheduler').ej2_instances[0];\n            scheduleObj.print();\n        });\n\n        function onContextMenuBeforeOpen(args) {\n            var newEventElement = document.querySelector('.e-new-event');\n            if (newEventElement) {\n                ej.base.remove(newEventElement);\n                ej.base.removeClass([document.querySelector('.e-selected-cell')], 'e-selected-cell');\n            }\n            var scheduleObj = document.querySelector(\".e-schedule\").ej2_instances[0];\n            scheduleObj.closeQuickInfoPopup();\n            var targetElement = args.event.target;\n            if (ej.base.closest(targetElement, '.e-contextmenu')) {\n                return;\n            }\n            selectedTarget = ej.base.closest(targetElement, '.e-appointment,.e-work-cells,' +\n                '.e-vertical-view .e-date-header-wrap .e-all-day-cells,.e-vertical-view .e-date-header-wrap .e-header-cells');\n            if (ej.base.isNullOrUndefined(selectedTarget)) {\n                args.cancel = true;\n                return;\n            }\n            if (selectedTarget.classList.contains('e-appointment')) {\n                var eventObj = scheduleObj.getEventDetails(selectedTarget);\n                if (eventObj.RecurrenceRule) {\n                    this.showItems(['EditRecurrenceEvent', 'DeleteRecurrenceEvent'], true);\n                    this.hideItems(['Add', 'AddRecurrence', 'Today', 'Save', 'Delete'], true);\n                } else {\n                    this.showItems(['Save', 'Delete'], true);\n                    this.hideItems(['Add', 'AddRecurrence', 'Today', 'EditRecurrenceEvent', 'DeleteRecurrenceEvent'], true);\n                }\n                return;\n            } else if ((selectedTarget.classList.contains('e-work-cells') || selectedTarget.classList.contains('e-all-day-cells')) &&\n                !selectedTarget.classList.contains('e-selected-cell')) {\n                ej.base.removeClass([].slice.call(scheduleObj.element.querySelectorAll('.e-selected-cell')), 'e-selected-cell');\n                selectedTarget.classList.add('e-selected-cell');\n                selectedTarget.setAttribute('aria-selected', 'true');\n            }\n            this.hideItems(['Save', 'Delete', 'EditRecurrenceEvent', 'DeleteRecurrenceEvent'], true);\n            this.showItems(['Add', 'AddRecurrence', 'Today'], true);\n        }\n\n        function onMenuItemSelect(args) {\n            var scheduleObj = document.querySelector(\".e-schedule\").ej2_instances[0];\n            var selectedMenuItem = args.item.id;\n            var eventObj;\n            if (selectedTarget.classList.contains('e-appointment')) {\n                eventObj = scheduleObj.getEventDetails(selectedTarget);\n            }\n            switch (selectedMenuItem) {\n                case 'Today':\n                    scheduleObj.selectedDate = new Date();\n                    break;\n                case 'Add':\n                case 'AddRecurrence':\n                    var selectedCells = scheduleObj.getSelectedElements();\n                    var isRightClickInSelectedCells = selectedCells.some(function (cell) {\n                        return cell === selectedTarget;\n                    });\n                    var activeCellsData = scheduleObj.getCellDetails(isRightClickInSelectedCells ? selectedCells : [selectedTarget]);                    if (selectedMenuItem === 'Add') {\n                        scheduleObj.openEditor(activeCellsData, 'Add');\n                    } else {\n                        scheduleObj.openEditor(activeCellsData, 'Add', null, 1);\n                    }\n                    break;\n                case 'Save':\n                case 'EditOccurrence':\n                case 'EditSeries':\n                    if (selectedMenuItem === 'EditSeries') {\n                        eventObj = new ej.data.DataManager(scheduleObj.eventsData).executeLocal(new ej.data.Query().\n                            where(scheduleObj.eventFields.id, 'equal', eventObj[scheduleObj.eventFields.recurrenceID]))[0];\n                    }\n                    scheduleObj.openEditor(eventObj, selectedMenuItem);\n                    break;\n                case 'Delete':\n                    scheduleObj.deleteEvent(eventObj);\n                    break;\n                case 'DeleteOccurrence':\n                case 'DeleteSeries':\n                    scheduleObj.deleteEvent(eventObj, selectedMenuItem);\n                    break;\n            }\n        }\n\n        function uploaderCreated() {\n            var uploader = document.getElementById('icalendar');\n            if (uploader) {\n                var uploaderObj = uploader.ej2_instances[0];\n                var template = '<div class=\"e-template-btn\"><span class=\"e-btn-icon e-icons e-upload-1 e-icon-left\"></span>${text}</div>';\n                uploaderObj.buttons = { browse: ej.base.compile(template.trim())({ text: 'Import' })[0] };\n            }\n            document.querySelector('.calendar-import .e-btn').classList.add('e-inherit');\n        }\n\n        function onSelected(args) {\n            var scheduleObj = document.getElementById('scheduler').ej2_instances[0];\n            scheduleObj.importICalendar(args.event.target.files[0]);\n        }\n\n        function onExportItemSelect(args) {\n            var scheduleObj = document.getElementById('scheduler').ej2_instances[0];\n            if (args.item.text === 'Excel') {\n                var exportDatas = [];\n                var eventCollection = scheduleObj.getEvents();\n                var resourceCollection = scheduleObj.getResourceCollections();\n                var resourceData = resourceCollection[0].dataSource;\n                for (var i = 0; i < resourceData.length; i++) {\n                    var resource = resourceData[i];\n                    var data = eventCollection.filter(function (e) { return e.CalendarId === resource.CalendarId; });\n                    exportDatas = exportDatas.concat(data);\n                }\n                scheduleObj.exportToExcel({\n                    exportType: 'xlsx',\n                    customData: exportDatas,\n                    fields: ['Id', 'Subject', 'StartTime', 'EndTime', 'CalendarId']\n                });\n            }\n            else {\n                scheduleObj.exportToICalendar();\n            }\n        }\n\n        function onToolbarItemClick(args) {\n            var scheduleObj = document.getElementById('scheduler').ej2_instances[0];\n            switch (args.item.text) {\n                case 'Day':\n                    scheduleObj.currentView = isTimelineView ? 'TimelineDay' : 'Day';\n                    break;\n                case 'Week':\n                    scheduleObj.currentView = isTimelineView ? 'TimelineWeek' : 'Week';\n                    break;\n                case 'WorkWeek':\n                    scheduleObj.currentView = isTimelineView ? 'TimelineWorkWeek' : 'WorkWeek';\n                    break;\n                case 'Month':\n                    scheduleObj.currentView = isTimelineView ? 'TimelineMonth' : 'Month';\n                    break;\n                case 'Year':\n                    scheduleObj.currentView = isTimelineView ? 'TimelineYear' : 'Year';\n                    break;\n                case 'Agenda':\n                    scheduleObj.currentView = 'Agenda';\n                    break;\n                case 'New Event':\n                    var date = scheduleObj.selectedDate;\n                    var eventData = {\n                        Id: scheduleObj.getEventMaxID(),\n                        Subject: '',\n                        StartTime: new Date(date.getFullYear(), date.getMonth(), date.getDate(), new Date().getHours(), 0, 0),\n                        EndTime: new Date(date.getFullYear(), date.getMonth(), date.getDate(), new Date().getHours() + 1, 0, 0),\n                        Location: '',\n                        Description: '',\n                        IsAllDay: false,\n                        CalendarId: 1\n                    };\n                    scheduleObj.openEditor(eventData, 'Add', true);\n                    break;\n                case 'New Recurring Event':\n                    var dates = scheduleObj.selectedDate;\n                    var recEventData = {\n                        Id: scheduleObj.getEventMaxID(),\n                        Subject: '',\n                        StartTime: new Date(dates.getFullYear(), dates.getMonth(), dates.getDate(), new Date().getHours(), 0, 0),\n                        EndTime: new Date(dates.getFullYear(), dates.getMonth(), dates.getDate(), new Date().getHours() + 1, 0, 0),\n                        Location: '',\n                        Description: '',\n                        IsAllDay: false,\n                        CalendarId: 1\n                    };\n                    scheduleObj.openEditor(recEventData, 'Add', true, 1);\n                    break;\n            }\n        }\n\n        function updateLiveTime() {\n            var scheduleObj = document.getElementById('scheduler').ej2_instances;\n            var scheduleTimezone = scheduleObj.length > 0 ? scheduleObj[0].timezone : 'Etc/GMT';\n            var timeBtn = document.querySelector('.schedule-overview #timeBtn');\n            if (!timeBtn) {\n                return;\n            }\n            if (scheduleObj[0].isAdaptive) {\n                timeBtn.innerHTML = new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', timeZone: scheduleTimezone });\n            }\n            else {\n                timeBtn.innerHTML = new Date().toLocaleTimeString('en-US', { timeZone: scheduleTimezone });\n            }\n        }\n\n        function onToolbarCreated() {\n            setInterval(function () { updateLiveTime(); }, 1000);\n            var timelineView = new ej.buttons.CheckBox({\n                checked: false,\n                created: function () { this.element.setAttribute('tabindex', '0'); },\n                change: function (args) {\n                    var scheduleObj = document.getElementById('scheduler').ej2_instances[0];\n                    isTimelineView = args.checked;\n                    switch (scheduleObj.currentView) {\n                        case 'Day':\n                        case 'TimelineDay':\n                            scheduleObj.currentView = isTimelineView ? 'TimelineDay' : 'Day';\n                            break;\n                        case 'Week':\n                        case 'TimelineWeek':\n                            scheduleObj.currentView = isTimelineView ? 'TimelineWeek' : 'Week';\n                            break;\n                        case 'WorkWeek':\n                        case 'TimelineWorkWeek':\n                            scheduleObj.currentView = isTimelineView ? 'TimelineWorkWeek' : 'WorkWeek';\n                            break;\n                        case 'Month':\n                        case 'TimelineMonth':\n                            scheduleObj.currentView = isTimelineView ? 'TimelineMonth' : 'Month';\n                            break;\n                        case 'Year':\n                        case 'TimelineYear':\n                            scheduleObj.currentView = isTimelineView ? 'TimelineYear' : 'Year';\n                            break;\n                        case 'Agenda':\n                            scheduleObj.currentView = 'Agenda';\n                            break;\n                    }\n                }\n            });\n            timelineView.appendTo('#timeline_views');\n\n            var grouping = new ej.buttons.CheckBox({\n                checked: true,\n                created: function () { this.element.setAttribute('tabindex', '0'); },\n                change: function (args) {\n                    var scheduleObj = document.getElementById('scheduler').ej2_instances[0];\n                    scheduleObj.group.resources = args.checked ? ['Calendars'] : [];\n                }\n            });\n            grouping.appendTo('#grouping');\n\n            var gridlines = new ej.buttons.CheckBox({\n                checked: true,\n                created: function () { this.element.setAttribute('tabindex', '0'); },\n                change: function (args) {\n                    var scheduleObj = document.getElementById('scheduler').ej2_instances[0];\n                    scheduleObj.timeScale.enable = args.checked;\n                }\n            });\n            gridlines.appendTo('#timeSlots');\n\n            var rowAutoHeight = new ej.buttons.CheckBox({\n                checked: false,\n                created: function () { this.element.setAttribute('tabindex', '0'); },\n                change: function (args) {\n                    var scheduleObj = document.getElementById('scheduler').ej2_instances[0];\n                    scheduleObj.rowAutoHeight = args.checked;\n                }\n            });\n            rowAutoHeight.appendTo('#row_auto_height');\n\n            document.querySelector('#settingsBtn').onclick = function () {\n                var settingsPanel = document.querySelector('.overview-content .right-panel');\n                if (settingsPanel.classList.contains('hide')) {\n                    ej.base.removeClass([settingsPanel], 'hide');\n                    document.querySelector('#workWeekDays').ej2_instances[0].refresh();\n                    document.querySelector('#resources').ej2_instances[0].refresh();\n                }\n                else {\n                    ej.base.addClass([settingsPanel], 'hide');\n                }\n                var scheduleObj = document.getElementById('scheduler').ej2_instances[0];\n                scheduleObj.refreshEvents();\n            };\n        }\n\n        function onWeekFirstDayChange(args) {\n            var scheduleObj = document.getElementById('scheduler').ej2_instances[0];\n            scheduleObj.firstDayOfWeek = parseInt(args.value, 10);\n            scheduleObj.dataBind();\n        }\n\n        function onWeekDaysChange(args) {\n            var scheduleObj = document.getElementById('scheduler').ej2_instances[0];\n            var value = args.value.slice(0).map(Number).sort();\n            scheduleObj.workDays = value.length === 0 ? [0] : value;\n            scheduleObj.dataBind();\n        }\n\n        function onCalendarChange(args) {\n            var scheduleObj = document.getElementById('scheduler').ej2_instances[0];\n            var resourcePredicate;\n            var Resourcevalue = args.value.slice(0).map(Number).sort();\n            for (var i = 0, a = Resourcevalue; i < a.length; i++) {\n                var value = a[i];\n                if (resourcePredicate) {\n                    resourcePredicate = resourcePredicate.or(new ej.data.Predicate('CalendarId', 'equal', value));\n                }\n                else {\n                    resourcePredicate = new ej.data.Predicate('CalendarId', 'equal', value);\n                }\n            }\n            scheduleObj.resources[0].query = resourcePredicate ? new ej.data.Query().where(resourcePredicate) :\n                new ej.data.Query().where('CalendarId', 'equal', 1);\n        }\n\n        function onTimezoneChange(args) {\n            var scheduleObj = document.getElementById('scheduler').ej2_instances[0];\n            scheduleObj.timezone = args.value;\n            updateLiveTime();\n            document.querySelector('.schedule-overview #timezoneBtn').innerHTML =\n                '<span class=\"e-btn-icon e-icons e-time-zone e-icon-left\"></span>' + args.itemData.text;\n        }\n\n        function onDayStartHourChange(args) {\n            var scheduleObj = document.getElementById('scheduler').ej2_instances[0];\n            scheduleObj.startHour = new ej.base.Internationalization().formatDate(args.value, { skeleton: 'Hm' });\n        }\n\n        function onDayEndHourChange(args) {\n            var scheduleObj = document.getElementById('scheduler').ej2_instances[0];\n            scheduleObj.endHour = new ej.base.Internationalization().formatDate(args.value, { skeleton: 'Hm' });\n        }\n\n        function onWorkStartHourChange(args) {\n            var scheduleObj = document.getElementById('scheduler').ej2_instances[0];\n            scheduleObj.workHours.start = new ej.base.Internationalization().formatDate(args.value, { skeleton: 'Hm' });\n        }\n\n        function onWorkEndHourChange(args) {\n            var scheduleObj = document.getElementById('scheduler').ej2_instances[0];\n            scheduleObj.workHours.end = new ej.base.Internationalization().formatDate(args.value, { skeleton: 'Hm' });\n        }\n\n        function onSlotIntervalChange(args) {\n            var scheduleObj = document.getElementById('scheduler').ej2_instances[0];\n            scheduleObj.timeScale.interval = args.value;\n        }\n\n        function onSlotCountChange(args) {\n            var scheduleObj = document.getElementById('scheduler').ej2_instances[0];\n            scheduleObj.timeScale.slotCount = args.value;\n        }\n\n        function onTimeFormatChange(args) {\n            var scheduleObj = document.getElementById('scheduler').ej2_instances[0];\n            scheduleObj.timeFormat = args.value;\n        }\n\n        function onWeekNumberChange(args) {\n            var scheduleObj = document.getElementById('scheduler').ej2_instances[0];\n            if (args.value === 'Off') {\n                scheduleObj.showWeekNumber = false;\n            } else {\n                scheduleObj.showWeekNumber = true;\n                scheduleObj.weekRule = args.value;\n            }\n        }\n\n        function onTooltipChange(args) {\n            var scheduleObj = document.getElementById('scheduler').ej2_instances[0];\n            if (args.value === 'Off') {\n                scheduleObj.eventSettings.enableTooltip = false;\n            } else {\n                scheduleObj.eventSettings.enableTooltip = true;\n            }\n        }\n    </script>\n}\n"
    },
    {
      "target": "src/components/scheduler-default/OverviewController.cs",
      "content": "using System;\nusing System.Collections.Generic;\nusing System.Web.Mvc;\n\nnamespace EJ2MVCSampleBrowser.Controllers.Schedule\n{\n    public partial class ScheduleController : Controller\n    {\n        public ActionResult Overview()\n        {\n            List<object> exportItems = new List<object>();\n            exportItems.Add(new { text = \"iCalendar\", iconCss = \"e-icons e-export\" });\n            exportItems.Add(new { text = \"Excel\", iconCss = \"e-icons e-export-excel\" });\n            ViewData[\"ExportItems\"] = exportItems;\n\n            List<CalendarRes> calendarCollections = new List<CalendarRes>();\n            calendarCollections.Add(new CalendarRes { CalendarName = \"My Calendar\", CalendarId = 1, CalendarColor = \"#c43081\" });\n            calendarCollections.Add(new CalendarRes { CalendarName = \"Company\", CalendarId = 2, CalendarColor = \"#ff7f50\" });\n            calendarCollections.Add(new CalendarRes { CalendarName = \"Birthday\", CalendarId = 3, CalendarColor = \"#AF27CD\" });\n            calendarCollections.Add(new CalendarRes { CalendarName = \"Holiday\", CalendarId = 4, CalendarColor = \"#808000\" });\n            ViewData[\"Calendars\"] = calendarCollections;\n\n            ViewData[\"Resources\"] = new string[] { \"Calendars\" };\n\n            List<object> menuItems = new List<object>();\n            menuItems.Add(new { text = \"New Event\", iconCss = \"e-icons e-plus\", id = \"Add\" });\n            menuItems.Add(new { text = \"New Recurring Event\", iconCss = \"e-icons e-repeat\", id = \"AddRecurrence\" });\n            menuItems.Add(new { text = \"Today\", iconCss = \"e-icons e-timeline-today\", id = \"Today\" });\n            menuItems.Add(new { text = \"Edit Event\", iconCss = \"e-icons e-edit\", id = \"Save\" });\n            menuItems.Add(new\n            {\n                text = \"Edit Event\",\n                id = \"EditRecurrenceEvent\",\n                iconCss = \"e-icons e-edit\",\n                items = new List<object>() {\n                    new { text = \"Edit Occurrence\", id = \"EditOccurrence\"},\n                    new { text = \"Edit Series\", id = \"EditSeries\" }\n                }\n            });\n            menuItems.Add(new { text = \"Delete Event\", iconCss = \"e-icons e-trash\", id = \"Delete\" });\n            menuItems.Add(new\n            {\n                text = \"Delete Event\",\n                id = \"DeleteRecurrenceEvent\",\n                iconCss = \"e-icons e-trash\",\n                items = new List<object>() {\n                    new { text = \"Delete Occurrence\", id = \"DeleteOccurrence\" },\n                    new { text = \"Delete Series\", id = \"DeleteSeries\"}\n                }\n            });\n            ViewData[\"MenuItems\"] = menuItems;\n\n            List<object> weekDays = new List<object>();\n            weekDays.Add(new { text = \"Sunday\", value = \"0\" });\n            weekDays.Add(new { text = \"Monday\", value = \"1\" });\n            weekDays.Add(new { text = \"Tuesday\", value = \"2\" });\n            weekDays.Add(new { text = \"Wednesday\", value = \"3\" });\n            weekDays.Add(new { text = \"Thursday\", value = \"4\" });\n            weekDays.Add(new { text = \"Friday\", value = \"5\" });\n            weekDays.Add(new { text = \"Saturday\", value = \"6\" });\n            ViewData[\"WeekDays\"] = weekDays;\n\n            List<object> timezoneData = new List<object>();\n            timezoneData.Add(new { text = \"UTC -12:00\", value = \"Etc/GMT+12\" });\n            timezoneData.Add(new { text = \"UTC -11:00\", value = \"Etc/GMT+11\" });\n            timezoneData.Add(new { text = \"UTC -10:00\", value = \"Etc/GMT+10\" });\n            timezoneData.Add(new { text = \"UTC -09:00\", value = \"Etc/GMT+9\" });\n            timezoneData.Add(new { text = \"UTC -08:00\", value = \"Etc/GMT+8\" });\n            timezoneData.Add(new { text = \"UTC -07:00\", value = \"Etc/GMT+7\" });\n            timezoneData.Add(new { text = \"UTC -06:00\", value = \"Etc/GMT+6\" });\n            timezoneData.Add(new { text = \"UTC -05:00\", value = \"Etc/GMT+5\" });\n            timezoneData.Add(new { text = \"UTC -04:00\", value = \"Etc/GMT+4\" });\n            timezoneData.Add(new { text = \"UTC -03:00\", value = \"Etc/GMT+3\" });\n            timezoneData.Add(new { text = \"UTC -02:00\", value = \"Etc/GMT+2\" });\n            timezoneData.Add(new { text = \"UTC -01:00\", value = \"Etc/GMT+1\" });\n            timezoneData.Add(new { text = \"UTC +00:00\", value = \"Etc/GMT\" });\n            timezoneData.Add(new { text = \"UTC +01:00\", value = \"Etc/GMT-1\" });\n            timezoneData.Add(new { text = \"UTC +02:00\", value = \"Etc/GMT-2\" });\n            timezoneData.Add(new { text = \"UTC +03:00\", value = \"Etc/GMT-3\" });\n            timezoneData.Add(new { text = \"UTC +04:00\", value = \"Etc/GMT-4\" });\n            timezoneData.Add(new { text = \"UTC +05:00\", value = \"Etc/GMT-5\" });\n            timezoneData.Add(new { text = \"UTC +06:00\", value = \"Etc/GMT-6\" });\n            timezoneData.Add(new { text = \"UTC +07:00\", value = \"Etc/GMT-7\" });\n            timezoneData.Add(new { text = \"UTC +08:00\", value = \"Etc/GMT-8\" });\n            timezoneData.Add(new { text = \"UTC +09:00\", value = \"Etc/GMT-9\" });\n            timezoneData.Add(new { text = \"UTC +10:00\", value = \"Etc/GMT-10\" });\n            timezoneData.Add(new { text = \"UTC +11:00\", value = \"Etc/GMT-11\" });\n            timezoneData.Add(new { text = \"UTC +12:00\", value = \"Etc/GMT-12\" });\n            timezoneData.Add(new { text = \"UTC +13:00\", value = \"Etc/GMT-13\" });\n            timezoneData.Add(new { text = \"UTC +14:00\", value = \"Etc/GMT-14\" });\n            ViewData[\"TimezoneData\"] = timezoneData;\n\n            List<object> slotIntervalDataSource = new List<object>();\n            slotIntervalDataSource.Add(new { Text = \"1 hour\", Value = \"60\" });\n            slotIntervalDataSource.Add(new { Text = \"1.5 hours\", Value = \"90\" });\n            slotIntervalDataSource.Add(new { Text = \"2 hours\", Value = \"120\" });\n            slotIntervalDataSource.Add(new { Text = \"2.5 hours\", Value = \"150\" });\n            slotIntervalDataSource.Add(new { Text = \"3 hours\", Value = \"180\" });\n            slotIntervalDataSource.Add(new { Text = \"3.5 hours\", Value = \"210\" });\n            slotIntervalDataSource.Add(new { Text = \"4 hours\", Value = \"240\" });\n            slotIntervalDataSource.Add(new { Text = \"4.5 hours\", Value = \"270\" });\n            slotIntervalDataSource.Add(new { Text = \"5 hours\", Value = \"300\" });\n            slotIntervalDataSource.Add(new { Text = \"5.5 hours\", Value = \"330\" });\n            slotIntervalDataSource.Add(new { Text = \"6 hours\", Value = \"360\" });\n            slotIntervalDataSource.Add(new { Text = \"6.5 hours\", Value = \"390\" });\n            slotIntervalDataSource.Add(new { Text = \"7 hours\", Value = \"420\" });\n            slotIntervalDataSource.Add(new { Text = \"7.5 hours\", Value = \"450\" });\n            slotIntervalDataSource.Add(new { Text = \"8 hours\", Value = \"480\" });\n            slotIntervalDataSource.Add(new { Text = \"8.5 hours\", Value = \"510\" });\n            slotIntervalDataSource.Add(new { Text = \"9 hours\", Value = \"540\" });\n            slotIntervalDataSource.Add(new { Text = \"9.5 hours\", Value = \"570\" });\n            slotIntervalDataSource.Add(new { Text = \"10 hours\", Value = \"600\" });\n            slotIntervalDataSource.Add(new { Text = \"10.5 hours\", Value = \"630\" });\n            slotIntervalDataSource.Add(new { Text = \"11 hours\", Value = \"660\" });\n            slotIntervalDataSource.Add(new { Text = \"11.5 hours\", Value = \"690\" });\n            slotIntervalDataSource.Add(new { Text = \"12 hours\", Value = \"720\" });\n            ViewData[\"SlotIntervalDataSource\"] = slotIntervalDataSource;\n\n            List<object> slots = new List<object>();\n            slots.Add(new { Text = \"1\", Value = \"1\" });\n            slots.Add(new { Text = \"2\", Value = \"2\" });\n            slots.Add(new { Text = \"3\", Value = \"3\" });\n            slots.Add(new { Text = \"4\", Value = \"4\" });\n            slots.Add(new { Text = \"5\", Value = \"5\" });\n            slots.Add(new { Text = \"6\", Value = \"6\" });\n            slots.Add(new { Text = \"7\", Value = \"7\" });\n            slots.Add(new { Text = \"8\", Value = \"8\" });\n            slots.Add(new { Text = \"9\", Value = \"9\" });\n            slots.Add(new { Text = \"10\", Value = \"10\" });\n            ViewData[\"SlotCounts\"] = slots;\n            List<object> time = new List<object>();\n            time.Add(new { Text = \"12 hours\", Value = \"hh:mm a\" });\n            time.Add(new { Text = \"24 hours\", Value = \"HH:mm\" });\n            ViewData[\"TimeFormat\"] = time;\n            List<object> weekNumbersData = new List<object>();\n            weekNumbersData.Add(new { Text = \"Off\", Value = \"Off\" });\n            weekNumbersData.Add(new { Text = \"First Day Of Year\", Value = \"FirstDay\" });\n            weekNumbersData.Add(new { Text = \"First Full Week\", Value = \"FirstFullWeek\" });\n            weekNumbersData.Add(new { Text = \"First Four-Day Week\", Value = \"FirstFourDayWeek\" });\n            ViewData[\"WeekNumber\"] = weekNumbersData;\n            List<object> tooltipData = new List<object>();\n            tooltipData.Add(new { Text = \"Off\", Value = \"Off\" });\n            tooltipData.Add(new { Text = \"On\", Value = \"On\" });\n            ViewData[\"Tooltip\"] = tooltipData;\n\n            ViewData[\"Values\"] = new string[] { \"1\", \"2\", \"3\", \"4\", \"5\" };\n            ViewData[\"ResourceValues\"] = new string[] { \"1\" };\n\n            ViewData[\"Appointments\"] = this.GenerateEvents();\n\n            return View();\n        }\n\n        private List<AppointmentData> GenerateEvents()\n        {\n            List<AppointmentData> EventData = new List<AppointmentData>();\n            DateTime YearStart = new DateTime(DateTime.Now.Year, 1, 1);\n            DateTime YearEnd = new DateTime(DateTime.Now.Year, 12, 31);\n            string[] EventSubjects = new string[] {\n                \"Bering Sea Gold\", \"Technology\", \"Maintenance\", \"Meeting\", \"Travelling\", \"Annual Conference\", \"Birthday Celebration\", \"Farewell Celebration\",\n                \"Wedding Anniversary\", \"Alaska: The Last Frontier\", \"Deadliest Catch\", \"Sports Day\", \"MoonShiners\", \"Close Encounters\", \"HighWay Thru Hell\",\n                \"Daily Planet\", \"Cash Cab\", \"Basketball Practice\", \"Rugby Match\", \"Guitar Class\", \"Music Lessons\", \"Doctor checkup\", \"Brazil - Mexico\",\n                \"Opening ceremony\", \"Final presentation\"\n            };\n            DateTime CurrentDate = DateTime.Today.AddDays(-(int)DateTime.Today.DayOfWeek + (int)DayOfWeek.Sunday);\n            DateTime Start = new DateTime(CurrentDate.Year, CurrentDate.Month, CurrentDate.Day, 10, 0, 0);\n            DateTime End = new DateTime(CurrentDate.Year, CurrentDate.Month, CurrentDate.Day, 11, 30, 0);\n            EventData.Add(new AppointmentData()\n            {\n                Id = 1,\n                Subject = \"Stand-Up Meeting\",\n                StartTime = Start.ToLocalTime(),\n                EndTime = End.ToLocalTime(),\n                Location = \"\",\n                Description = \"Event Scheduled\",\n                RecurrenceRule = \"FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR;INTERVAL=1;COUNT=10;\",\n                IsAllDay = false,\n                IsReadonly = false,\n                CalendarId = 1\n            });\n            for (int a = 0, id = 2; a < 500; a++)\n            {\n                Random random = new Random();\n                int Month = random.Next(1, 12);\n                int Date = random.Next(1, 28);\n                int Hour = random.Next(1, 24);\n                int Minutes = random.Next(1, 60);\n                DateTime start = new DateTime(YearStart.Year, Month, Date, Hour, Minutes, 0);\n                DateTime end = new DateTime(start.Ticks).AddHours(2);\n                DateTime StartDate = new DateTime(start.Ticks);\n                DateTime EndDate = new DateTime(end.Ticks);\n                AppointmentData eventDatas = new AppointmentData()\n                {\n                    Id = id,\n                    Subject = EventSubjects[random.Next(1, 25)],\n                    StartTime = StartDate,\n                    EndTime = EndDate,\n                    Location = \"\",\n                    Description = \"Event Scheduled\",\n                    IsAllDay = id % 10 == 0,\n                    IsReadonly = EndDate < DateTime.Now,\n                    CalendarId = (a % 4) + 1\n                };\n                EventData.Add(eventDatas);\n                id++;\n            }\n            return EventData;\n        }\n    }\n\n    public class CalendarRes\n    {\n        public string CalendarName { set; get; }\n        public int CalendarId { set; get; }\n        public string CalendarColor { set; get; }\n    }\n\n    public class AppointmentData\n    {\n        public int Id { get; set; }\n        public string Subject { get; set; }\n        public DateTime StartTime { get; set; }\n        public DateTime EndTime { get; set; }\n        public string Location { get; set; }\n        public string Description { get; set; }\n        public bool IsAllDay { get; set; }\n        public bool IsReadonly { get; set; }\n        public int CalendarId { get; set; }\n        public int? RecurrenceID { get; set; }\n        public string RecurrenceRule { get; set; }\n        public string RecurrenceException { get; set; }\n    }\n}\n"
    }
  ]
}