{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "scheduler-default",
  "framework": "angular",
  "type": "registry:component",
  "component": "Scheduler",
  "variant": "default",
  "dependencies": [
    "@syncfusion/ej2-angular-schedule"
  ],
  "description": "Feature-rich scheduler with multi-view switching, calendar grouping, exports, and event editor.",
  "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/angular/llms.txt",
    "skillPack": "syncfusion/angular-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/angular/scheduler-default.md"
  },
  "files": [
    {
      "target": "src/components/scheduler-default/overview.component.ts",
      "content": "import { Component, ViewEncapsulation, Inject, ViewChild, AfterViewChecked } from '@angular/core';\nimport { ItemModel, DropDownButtonModule } from '@syncfusion/ej2-angular-splitbuttons';\nimport { SelectedEventArgs, TextBoxComponent, UploaderModule } from '@syncfusion/ej2-angular-inputs';\nimport { ScheduleComponent, GroupModel, DayService, WeekService, WorkWeekService, MonthService, YearService, AgendaService, TimelineViewsService, TimelineMonthService, TimelineYearService, ResizeService, DragAndDropService, View, EventSettingsModel, Timezone, CurrentAction, CellClickEventArgs, ResourcesModel, EJ2Instance, PrintService, ExcelExportService, ICalendarExportService, ICalendarImportService, CallbackFunction, PopupOpenEventArgs, ScheduleModule } from '@syncfusion/ej2-angular-schedule';\nimport { addClass, extend, removeClass, closest, remove, isNullOrUndefined, Internationalization, compile } from '@syncfusion/ej2-base';\nimport { ChangeEventArgs as SwitchEventArgs, SwitchComponent, ButtonModule, CheckBoxModule } from '@syncfusion/ej2-angular-buttons';\nimport { MultiSelectComponent, ChangeEventArgs, MultiSelectChangeEventArgs, DropDownListComponent, MultiSelectModule, DropDownListModule, CheckBoxSelectionService } from '@syncfusion/ej2-angular-dropdowns';\nimport { DataManager, Predicate, Query } from '@syncfusion/ej2-data';\nimport { ClickEventArgs, ContextMenuComponent, MenuItemModel, BeforeOpenCloseMenuEventArgs, MenuEventArgs, AppBarModule, ToolbarModule, ContextMenuModule } from '@syncfusion/ej2-angular-navigations';\nimport { ChangeEventArgs as TimeEventArgs } from '@syncfusion/ej2-calendars';\nimport { TimePickerModule } from '@syncfusion/ej2-angular-calendars';\ndeclare var moment: any;\n\n/**\n * Sample for overview\n */\n@Component({\n    // tslint:disable-next-line:component-selector\n    selector: 'control-content',\n    templateUrl: 'overview.html',\n    styleUrls: ['overview.style.css'],\n    providers: [DayService, WeekService, WorkWeekService, MonthService, YearService, AgendaService,\n        TimelineViewsService, TimelineMonthService, TimelineYearService, ResizeService, DragAndDropService, PrintService, ExcelExportService, ICalendarExportService, ICalendarImportService, CheckBoxSelectionService],\n    encapsulation: ViewEncapsulation.None,\n    standalone: true,\n    imports: [AppBarModule, ButtonModule, UploaderModule, DropDownButtonModule, ToolbarModule, CheckBoxModule, ScheduleModule, ContextMenuModule, MultiSelectModule, DropDownListModule, TimePickerModule]\n})\nexport class OverviewComponent implements AfterViewChecked {\n  @ViewChild('scheduleObj') scheduleObj!: ScheduleComponent;\n  @ViewChild('workWeekDaysObj') workWeek!: MultiSelectComponent;\n  @ViewChild('resouresObj') resources!: MultiSelectComponent;\n  @ViewChild('eventTypeObj') eventTypeObj!: DropDownListComponent;\n  @ViewChild('titleObj') titleObj!: TextBoxComponent;\n  @ViewChild('notesObj') notesObj!: TextBoxComponent;\n  @ViewChild('viewSwitch') viewSwitch!: SwitchComponent;\n  @ViewChild('groupSwitch') groupSwitch!: SwitchComponent;\n  @ViewChild('gridlinesSwitch') gridlinesSwitch!: SwitchComponent;\n  @ViewChild('rowHeightSwitch') rowHeightSwitch!: SwitchComponent;\n  @ViewChild('tooltipSwitch') tooltipSwitch!: SwitchComponent;\n  @ViewChild('dragSwitch') dragSwitch!: SwitchComponent;\n  public showFileList = false;\n  public multiple = false;\n  public buttons: Record<string, any> = { browse: this.importTemplateFn({ text: 'Import' })[0] as HTMLElement };\n  public intl: Internationalization = new Internationalization();\n  public currentView: View = 'Week';\n  public liveTimeUpdate: string = new Date().toLocaleTimeString('en-US', { timeZone: 'UTC' });\n  public timezone: string = 'UTC';\n  public group: GroupModel = { resources: ['Calendars'] };\n  public resourceDataSource: Record<string, any>[] = [\n    { CalendarText: 'My Calendar', CalendarId: 1, CalendarColor: '#c43081' },\n    { CalendarText: 'Company', CalendarId: 2, CalendarColor: '#ff7f50' },\n    { CalendarText: 'Birthday', CalendarId: 3, CalendarColor: '#AF27CD' },\n    { CalendarText: 'Holiday', CalendarId: 4, CalendarColor: '#808000' }\n  ];\n  public resourceQuery: Query = new Query().where('CalendarId', 'equal', 1);\n  public allowMultiple = true;\n  public isTimelineView = false;\n  public exportItems: ItemModel[] = [\n    { text: 'iCalendar', iconCss: 'e-icons e-export' },\n    { text: 'Excel', iconCss: 'e-icons e-export-excel' }\n  ];\n  public checkboxMode = 'CheckBox';\n  public firstDayOfWeek = 0;\n  public workDays: number[] = [1, 2, 3, 4, 5];\n  public calendarsValue: number[] = [1];\n  public fields: Record<string, any> = { text: 'text', value: 'value' };\n  public calendarFields: Record<string, any> = { text: 'CalendarText', value: 'CalendarId' };\n  public dayStartHourValue: Date = new Date(new Date().setHours(0, 0, 0));\n  public dayEndHourValue: Date = new Date(new Date().setHours(23, 59, 59));\n  public workStartHourValue: Date = new Date(new Date().setHours(9, 0, 0));\n  public workEndHourValue: Date = new Date(new Date().setHours(18, 0, 0));\n  public liveTimeInterval: any;\n  public weekDays: Record<string, any>[] = [\n    { text: 'Sunday', value: 0 },\n    { text: 'Monday', value: 1 },\n    { text: 'Tuesday', value: 2 },\n    { text: 'Wednesday', value: 3 },\n    { text: 'Thursday', value: 4 },\n    { text: 'Friday', value: 5 },\n    { text: 'Saturday', value: 6 }\n  ];\n  public timezoneData: Record<string, any>[] = [\n    { text: 'UTC -12:00', value: 'Etc/GMT+12' },\n    { text: 'UTC -11:00', value: 'Etc/GMT+11' },\n    { text: 'UTC -10:00', value: 'Etc/GMT+10' },\n    { text: 'UTC -09:00', value: 'Etc/GMT+9' },\n    { text: 'UTC -08:00', value: 'Etc/GMT+8' },\n    { text: 'UTC -07:00', value: 'Etc/GMT+7' },\n    { text: 'UTC -06:00', value: 'Etc/GMT+6' },\n    { text: 'UTC -05:00', value: 'Etc/GMT+5' },\n    { text: 'UTC -04:00', value: 'Etc/GMT+4' },\n    { text: 'UTC -03:00', value: 'Etc/GMT+3' },\n    { text: 'UTC -02:00', value: 'Etc/GMT+2' },\n    { text: 'UTC -01:00', value: 'Etc/GMT+1' },\n    { text: 'UTC +00:00', value: 'Etc/GMT' },\n    { text: 'UTC +01:00', value: 'Etc/GMT-1' },\n    { text: 'UTC +02:00', value: 'Etc/GMT-2' },\n    { text: 'UTC +03:00', value: 'Etc/GMT-3' },\n    { text: 'UTC +04:00', value: 'Etc/GMT-4' },\n    { text: 'UTC +05:00', value: 'Etc/GMT-5' },\n    { text: 'UTC +05:30', value: 'Asia/Calcutta' },\n    { text: 'UTC +06:00', value: 'Etc/GMT-6' },\n    { text: 'UTC +07:00', value: 'Etc/GMT-7' },\n    { text: 'UTC +08:00', value: 'Etc/GMT-8' },\n    { text: 'UTC +09:00', value: 'Etc/GMT-9' },\n    { text: 'UTC +10:00', value: 'Etc/GMT-10' },\n    { text: 'UTC +11:00', value: 'Etc/GMT-11' },\n    { text: 'UTC +12:00', value: 'Etc/GMT-12' },\n    { text: 'UTC +13:00', value: 'Etc/GMT-13' },\n    { text: 'UTC +14:00', value: 'Etc/GMT-14' }\n  ];\n  public timeSlotDuration: Record<string, any>[] = [\n    { Name: '1 hour', Value: 60 },\n    { Name: '1.5 hours', Value: 90 },\n    { Name: '2 hours', Value: 120 },\n    { Name: '2.5 hours', Value: 150 },\n    { Name: '3 hours', Value: 180 },\n    { Name: '3.5 hours', Value: 210 },\n    { Name: '4 hours', Value: 240 },\n    { Name: '4.5 hours', Value: 270 },\n    { Name: '5 hours', Value: 300 },\n    { Name: '5.5 hours', Value: 330 },\n    { Name: '6 hours', Value: 360 },\n    { Name: '6.5 hours', Value: 390 },\n    { Name: '7 hours', Value: 420 },\n    { Name: '7.5 hours', Value: 450 },\n    { Name: '8 hours', Value: 480 },\n    { Name: '8.5 hours', Value: 510 },\n    { Name: '9 hours', Value: 540 },\n    { Name: '9.5 hours', Value: 570 },\n    { Name: '10 hours', Value: 600 },\n    { Name: '10.5 hours', Value: 630 },\n    { Name: '11 hours', Value: 660 },\n    { Name: '11.5 hours', Value: 690 },\n    { Name: '12 hours', Value: 720 }\n  ];\n  public timeSlotFields = { text: 'Name', value: 'Value' };\n  public timeSlotCount: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\n  public timeSlotDurationValue = 60;\n  public timeSlotCountValue = 2;\n  public timeFormatData: Record<string, any>[] = [\n    { Name: '12 hours', Value: 'hh:mm a' },\n    { Name: '24 hours', Value: 'HH:mm' }\n  ];\n  public timeFormatValue = 'hh:mm a';\n  public weekNumberData: Record<string, any>[] = [\n    { Name: 'Off', Value: 'Off' },\n    { Name: 'First Day of Year', Value: 'FirstDay' },\n    { Name: 'First Full Week', Value: 'FirstFullWeek' },\n    { Name: 'First Four-Day Week', Value: 'FirstFourDayWeek' }\n  ];\n  public tooltipData: Record<string, any>[] = [\n    { Name: 'Off', Value: 'Off' },\n    { Name: 'On', Value: 'On' },\n  ];\n  public weekNumberValue = 'Off';\n  public tooltipValue = 'Off';\n  public eventSettings: EventSettingsModel = { dataSource: this.generateEvents() };\n  @ViewChild('menuObj') public menuObj!: ContextMenuComponent;\n  public selectedTarget!: Element;\n  public menuItems: MenuItemModel[] = [\n    { text: 'New Event', iconCss: 'e-icons e-plus', id: 'Add' },\n    { text: 'New Recurring Event', iconCss: 'e-icons e-repeat', id: 'AddRecurrence' },\n    { text: 'Today', iconCss: 'e-icons e-timeline-today', id: 'Today' },\n    { text: 'Edit Event', iconCss: 'e-icons e-edit', id: 'Save' },\n    {\n      text: 'Edit Event', id: 'EditRecurrenceEvent', iconCss: 'e-icons e-edit',\n      items: [\n        { text: 'Edit Occurrence', id: 'EditOccurrence' },\n        { text: 'Edit Series', id: 'EditSeries' }\n      ]\n    },\n    { text: 'Delete Event', iconCss: 'e-icons e-trash', id: 'Delete' },\n    {\n      text: 'Delete Event', id: 'DeleteRecurrenceEvent', iconCss: 'e-icons e-trash',\n      items: [\n        { text: 'Delete Occurrence', id: 'DeleteOccurrence' },\n        { text: 'Delete Series', id: 'DeleteSeries' }\n      ]\n    }\n  ];\n\n  public ngAfterViewChecked(): void {\n    this.viewSwitch?.element?.setAttribute('tabindex', '0');\n    this.groupSwitch?.element?.setAttribute('tabindex', '0');\n    this.gridlinesSwitch?.element?.setAttribute('tabindex', '0');\n    this.rowHeightSwitch?.element?.setAttribute('tabindex', '0');\n  }\n\n  public importTemplateFn(data: Record<string, any>): NodeList {\n    const template: string = '<div class=\"e-template-btn\"><span class=\"e-btn-icon e-icons e-upload-1 e-icon-left\"></span>${text}</div>';\n    return compile(template.trim())(data) as NodeList;\n  }\n\n  public generateEvents(): Record<string, any>[] {\n    const eventData: Record<string, any>[] = [];\n    const eventSubjects: string[] = [\n      'Bering Sea Gold', 'Technology', 'Maintenance', 'Meeting', 'Traveling', 'Annual Conference', 'Birthday Celebration',\n      'Farewell Celebration', 'Wedding Anniversary', 'Alaska: The Last Frontier', 'Deadliest Catch', 'Sports Day', 'MoonShiners',\n      'Close Encounters', 'HighWay Thru Hell', 'Daily Planet', 'Cash Cab', 'Basketball Practice', 'Rugby Match', 'Guitar Class',\n      'Music Lessons', 'Doctor checkup', 'Brazil - Mexico', 'Opening ceremony', 'Final presentation'\n    ];\n    const weekDate: Date = new Date(new Date().setDate(new Date().getDate() - new Date().getDay()));\n    let startDate: Date = new Date(weekDate.getFullYear(), weekDate.getMonth(), weekDate.getDate(), 10, 0);\n    let endDate: Date = new Date(weekDate.getFullYear(), weekDate.getMonth(), weekDate.getDate(), 11, 30);\n    eventData.push({\n      Id: 1,\n      Subject: 'Stand-Up Meeting',\n      StartTime: startDate,\n      EndTime: endDate,\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 (let a = 0, id = 2; a < 500; a++) {\n      const month: number = Math.floor(Math.random() * (11 - 0 + 1) + 0);\n      const date: number = Math.floor(Math.random() * (28 - 1 + 1) + 1);\n      const hour: number = Math.floor(Math.random() * (23 - 0 + 1) + 0);\n      const minutes: number = Math.floor(Math.random() * (59 - 0 + 1) + 0);\n      const start: Date = new Date(new Date().getFullYear(), month, date, hour, minutes, 0);\n      const end: Date = new Date(start.getTime());\n      end.setHours(end.getHours() + 2);\n      startDate = new Date(start.getTime());\n      endDate = new Date(end.getTime());\n      eventData.push({\n        Id: id,\n        Subject: eventSubjects[Math.floor(Math.random() * (24 - 0 + 1) + 0)],\n        StartTime: startDate,\n        EndTime: endDate,\n        Location: '',\n        Description: 'Event Scheduled',\n        IsAllDay: id % 10 === 0,\n        IsReadonly: endDate < new Date(),\n        CalendarId: (a % 4) + 1\n      });\n      id++;\n    }\n    if (/MSIE \\d|Trident.*rv:/.test(navigator.userAgent)) {\n      Timezone.prototype.offset = (date: Date, zone: string): number => moment.tz.zone(zone).utcOffset(date.getTime());\n    }\n    const overviewEvents: { [key: string]: Date }[] = extend([], eventData, undefined, true) as { [key: string]: Date }[];\n    const timezone: Timezone = new Timezone();\n    const utcTimezone: never = 'UTC' as never;\n    const currentTimezone: never = timezone.getLocalTimezoneName() as never;\n    for (const event of overviewEvents) {\n      event['StartTime'] = timezone.convert(event['StartTime'], utcTimezone, currentTimezone);\n      event['EndTime'] = timezone.convert(event['EndTime'], utcTimezone, currentTimezone);\n    }\n    return overviewEvents;\n  }\n\n  public onToolbarCreated(): void {\n    this.liveTimeInterval = setInterval(() => { this.updateLiveTime(this.scheduleObj ? this.scheduleObj.timezone : 'UTC'); }, 1000);\n  }\n\n  public onToolbarItemClicked(args: ClickEventArgs): void {\n    switch (args.item.text) {\n      case 'Day':\n        this.currentView = this.isTimelineView ? 'TimelineDay' : 'Day';\n        break;\n      case 'Week':\n        this.currentView = this.isTimelineView ? 'TimelineWeek' : 'Week';\n        break;\n      case 'WorkWeek':\n        this.currentView = this.isTimelineView ? 'TimelineWorkWeek' : 'WorkWeek';\n        break;\n      case 'Month':\n        this.currentView = this.isTimelineView ? 'TimelineMonth' : 'Month';\n        break;\n      case 'Year':\n        this.currentView = this.isTimelineView ? 'TimelineYear' : 'Year';\n        break;\n      case 'Agenda':\n        this.currentView = 'Agenda';\n        break;\n      case 'New Event':\n        const eventData: Record<string, any> = this.getEventData();\n        this.scheduleObj.openEditor(eventData, 'Add', true);\n        break;\n      case 'New Recurring Event':\n        const recEventData: Record<string, any> = this.getEventData();\n        this.scheduleObj.openEditor(recEventData, 'Add', true, 1);\n        break;\n    }\n  }\n\n  private getEventData(): Record<string, any> {\n    const date: Date = this.scheduleObj.selectedDate;\n    return {\n      Id: this.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  }\n\n  public updateLiveTime(timezone: string = 'UTC'): void {\n    if(this.scheduleObj.isAdaptive) {\n      this.liveTimeUpdate = new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', timeZone: timezone });\n    }\n    else {\n      this.liveTimeUpdate = new Date().toLocaleTimeString('en-US', { timeZone: timezone });\n    }\n  }\n\n  public onTimelineViewChange(args: SwitchEventArgs): void {\n    this.isTimelineView = !!args.checked;\n    switch (this.scheduleObj.currentView) {\n      case 'Day':\n      case 'TimelineDay':\n        this.currentView = this.isTimelineView ? 'TimelineDay' : 'Day';\n        break;\n      case 'Week':\n      case 'TimelineWeek':\n        this.currentView = this.isTimelineView ? 'TimelineWeek' : 'Week';\n        break;\n      case 'WorkWeek':\n      case 'TimelineWorkWeek':\n        this.currentView = this.isTimelineView ? 'TimelineWorkWeek' : 'WorkWeek';\n        break;\n      case 'Month':\n      case 'TimelineMonth':\n        this.currentView = this.isTimelineView ? 'TimelineMonth' : 'Month';\n        break;\n      case 'Year':\n      case 'TimelineYear':\n        this.currentView = this.isTimelineView ? 'TimelineYear' : 'Year';\n        break;\n      case 'Agenda':\n        this.currentView = 'Agenda';\n        break;\n    }\n  }\n\n  public onGroupingChange(args: SwitchEventArgs): void {\n    this.scheduleObj.group.resources = args.checked ? ['Calendars'] : [];\n  }\n\n  public onGridlinesChange(args: SwitchEventArgs): void {\n    this.scheduleObj.timeScale.enable = args.checked;\n  }\n\n  public onRowAutoHeightChange(args: SwitchEventArgs): void {\n    this.scheduleObj.rowAutoHeight = !!args.checked;\n  }\n\n  public onSelected(args: SelectedEventArgs): void {\n    const file = (args.event.target as HTMLInputElement | null)?.files?.[0];\n    if (file) {\n      this.scheduleObj.importICalendar(file);\n    }\n  }\n\n  public OnUploaderCreated(): void {\n    const element = document.querySelector('.calendar-import .e-css.e-btn');\n    if (element) {\n      element.classList.add('e-inherit');\n    }\n  }\n\n  public onSettingsClick(args: any): void {\n    const settingsPanel = document.querySelector('.overview-content .right-panel') as Element | null;\n    if (!settingsPanel) {\n      return;\n    }\n    if (settingsPanel.classList.contains('hide')) {\n      removeClass([settingsPanel], 'hide');\n      this.workWeek.refresh();\n      this.resources.refresh();\n    } else {\n      addClass([settingsPanel], 'hide');\n    }\n    this.scheduleObj.refreshEvents();\n  }\n\n  public getWeatherImage(value: Date): string {\n    switch (value.getDay()) {\n      case 0:\n        return '<img class=\"weather-image\" src=\"./assets/schedule/images/weather-clear.svg\" alt=\"Clear Weather\"/>';\n      case 1:\n        return '<img class=\"weather-image\" src=\"./assets/schedule/images/weather-clouds.svg\" alt=\"Clouds Weather\"/>';\n      case 2:\n        return '<img class=\"weather-image\" src=\"./assets/schedule/images/weather-rain.svg\" alt=\"Rain Weather\"/>';\n      case 3:\n        return '<img class=\"weather-image\" src=\"./assets/schedule/images/weather-clouds.svg\" alt=\"Clouds Weather\"/>';\n      case 4:\n        return '<img class=\"weather-image\" src=\"./assets/schedule/images/weather-rain.svg\" alt=\"Rain Weather\"/>';\n      case 5:\n        return '<img class=\"weather-image\" src=\"./assets/schedule/images/weather-clear.svg\" alt=\"Clear Weather\"/>';\n      case 6:\n        return '<img class=\"weather-image\" src=\"./assets/schedule/images/weather-clouds.svg\" alt=\"Clouds Weather\"/>';\n      default:\n        return '';\n    }\n  }\n\n  public getDateHeaderDay(value: Date): string {\n    return this.intl.formatDate(value, { skeleton: 'E' });\n  }\n  public getDateHeaderDate(value: Date): string {\n    return this.intl.formatDate(value, { skeleton: 'd' });\n  }\n\n  public onWeekDayChange(args: ChangeEventArgs): void {\n    this.scheduleObj.firstDayOfWeek = args.value as number;\n  }\n\n  public onWorkWeekDayChange(args: MultiSelectChangeEventArgs): void {\n    this.scheduleObj.workDays = args.value as number[];\n  }\n\n  public onResourceChange(args: MultiSelectChangeEventArgs): void {\n    let resourcePredicate: Predicate | undefined;\n    for (const value of args.value ?? []) {\n      if (resourcePredicate) {\n        resourcePredicate = resourcePredicate.or(new Predicate('CalendarId', 'equal', value as number));\n      } else {\n        resourcePredicate = new Predicate('CalendarId', 'equal', value as number);\n      }\n    }\n    this.scheduleObj.resources[0].query = resourcePredicate ? new Query().where(resourcePredicate) :\n      new Query().where('CalendarId', 'equal', 1);\n  }\n\n  public onTimezoneChange(args: ChangeEventArgs): void {\n    this.scheduleObj.timezone = args.value as string;\n    this.updateLiveTime(this.scheduleObj.timezone);\n    this.timezone = args.itemData?.text ?? 'UTC';\n  }\n\n  public onDayStartHourChange(args: TimeEventArgs): void {\n    const value = args.value ?? new Date();\n    this.scheduleObj.startHour = this.intl.formatDate(value, { skeleton: 'Hm' });\n  }\n\n  public onDayEndHourChange(args: TimeEventArgs): void {\n    const value = args.value ?? new Date();\n    this.scheduleObj.endHour = this.intl.formatDate(value, { skeleton: 'Hm' });\n  }\n\n  public onWorkStartHourChange(args: TimeEventArgs): void {\n    const value = args.value ?? new Date();\n    this.scheduleObj.workHours.start = this.intl.formatDate(value, { skeleton: 'Hm' });\n  }\n\n  public onWorkEndHourChange(args: TimeEventArgs): void {\n    const value = args.value ?? new Date();\n    this.scheduleObj.workHours.end = this.intl.formatDate(value, { skeleton: 'Hm' });\n  }\n\n  public onTimescaleDurationChange(args: ChangeEventArgs): void {\n    this.scheduleObj.timeScale.interval = args.value as number;\n  }\n\n  public onTimescaleIntervalChange(args: ChangeEventArgs): void {\n    this.scheduleObj.timeScale.slotCount = args.value as number;\n  }\n\n  public onTimeFormatChange(args: ChangeEventArgs): void {\n    this.scheduleObj.timeFormat = args.value as string;\n  }\n\n  public onWeekNumberChange(args: ChangeEventArgs): void {\n    if (args.value === 'Off') {\n      this.scheduleObj.showWeekNumber = false;\n    } else {\n      this.scheduleObj.showWeekNumber = true;\n      this.scheduleObj.weekRule = args.value as any;\n    }\n  }\n  public onTooltipChange(args: ChangeEventArgs): void {\n    if (args.value === 'Off') {\n      this.scheduleObj.eventSettings.enableTooltip = false;\n    } else {\n      this.scheduleObj.eventSettings.enableTooltip = true;\n    }\n  }\n\n  public onContextMenuBeforeOpen(args: BeforeOpenCloseMenuEventArgs): void {\n    const newEventElement: HTMLElement | null = document.querySelector('.e-new-event') as HTMLElement | null;\n    if (newEventElement) {\n      remove(newEventElement);\n      const selectedCell = document.querySelector('.e-selected-cell') as Element | null;\n      if (selectedCell) {\n        removeClass([selectedCell], 'e-selected-cell');\n      }\n    }\n    this.scheduleObj.closeQuickInfoPopup();\n    const targetElement: HTMLElement = args.event.target as HTMLElement;\n    if (closest(targetElement, '.e-contextmenu')) {\n      return;\n    }\n    this.selectedTarget = 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 (isNullOrUndefined(this.selectedTarget)) {\n      args.cancel = true;\n      return;\n    }\n    if (this.selectedTarget.classList.contains('e-appointment')) {\n      const eventObj: Record<string, any> = this.scheduleObj.getEventDetails(this.selectedTarget) as Record<string, any>;\n      if (eventObj['RecurrenceRule']) {\n        this.menuObj.showItems(['EditRecurrenceEvent', 'DeleteRecurrenceEvent'], true);\n        this.menuObj.hideItems(['Add', 'AddRecurrence', 'Today', 'Save', 'Delete'], true);\n      } else {\n        this.menuObj.showItems(['Save', 'Delete'], true);\n        this.menuObj.hideItems(['Add', 'AddRecurrence', 'Today', 'EditRecurrenceEvent', 'DeleteRecurrenceEvent'], true);\n      }\n      return;\n    } else if ((this.selectedTarget.classList.contains('e-work-cells') || this.selectedTarget.classList.contains('e-all-day-cells')) &&\n      !this.selectedTarget.classList.contains('e-selected-cell')) {\n      removeClass([].slice.call(this.scheduleObj.element.querySelectorAll('.e-selected-cell')), 'e-selected-cell');\n      this.selectedTarget.classList.add('e-selected-cell');\n      this.selectedTarget.setAttribute('aria-selected', 'true');\n    }\n    this.menuObj.hideItems(['Save', 'Delete', 'EditRecurrenceEvent', 'DeleteRecurrenceEvent'], true);\n    this.menuObj.showItems(['Add', 'AddRecurrence', 'Today'], true);\n  }\n\n  public onMenuItemSelect(args: MenuEventArgs): void {\n    const selectedMenuItem: string = args.item?.id ?? '';\n    let eventObj: { [key: string]: number } | undefined = this.selectedTarget.classList.contains('e-appointment')\n      ? (this.scheduleObj.getEventDetails(this.selectedTarget) as { [key: string]: number })\n      : undefined;\n\n    switch (selectedMenuItem) {\n      case 'Today':\n        this.scheduleObj.selectedDate = new Date();\n        break;\n      case 'Add':\n      case 'AddRecurrence':\n        const selectedCells: Element[] = this.scheduleObj.getSelectedElements();\n        const isRightClickInSelectedCells: boolean = selectedCells.some((cell: Element) => cell === this.selectedTarget);\n        const activeCellsData: CellClickEventArgs = this.scheduleObj.getCellDetails(isRightClickInSelectedCells ? selectedCells : [this.selectedTarget]);\n        if (selectedMenuItem === 'Add') {\n          this.scheduleObj.openEditor(activeCellsData, 'Add');\n        } else {\n          this.scheduleObj.openEditor(activeCellsData, 'Add', undefined, 1);\n        }\n        break;\n      case 'Save':\n      case 'EditOccurrence':\n      case 'EditSeries':\n        if (!eventObj) {\n          return;\n        }\n        if (selectedMenuItem === 'EditSeries') {\n          const recurrenceId = eventObj['RecurrenceID'];\n          const eventIdField = this.scheduleObj.eventFields.id ?? 'Id';\n          const query: Query = new Query().where(eventIdField, 'equal', recurrenceId);\n          const recurrenceEvent = new DataManager(this.scheduleObj.eventsData).executeLocal(query)[0] as { [key: string]: number } | undefined;\n          if (recurrenceEvent) {\n            eventObj = recurrenceEvent;\n          }\n        }\n        this.scheduleObj.openEditor(eventObj, selectedMenuItem);\n        break;\n      case 'Delete':\n        if (eventObj) {\n          this.scheduleObj.deleteEvent(eventObj);\n        }\n        break;\n      case 'DeleteOccurrence':\n      case 'DeleteSeries':\n        if (eventObj) {\n          this.scheduleObj.deleteEvent(eventObj, selectedMenuItem);\n        }\n        break;\n    }\n  }\n\n  public onPrintClick(): void {\n    this.scheduleObj.print();\n  }\n\n  public onExportClick(args: any): void {\n    if (args.item.text === 'Excel') {\n      let exportDatas: Record<string, any>[] = [];\n      const eventCollection: Record<string, any>[] = this.scheduleObj.getEvents();\n      const resourceCollection: ResourcesModel[] = this.scheduleObj.getResourceCollections();\n      const resourceData: Record<string, any>[] = (resourceCollection[0]?.dataSource ?? []) as Record<string, any>[];\n      for (const resource of resourceData) {\n        const data: Record<string, any>[] = eventCollection.filter((e: Record<string, any>) => e['CalendarId'] === resource['CalendarId']);\n        exportDatas = exportDatas.concat(data as Record<string, any>[]);\n      }\n      this.scheduleObj.exportToExcel({\n        exportType: 'xlsx', customData: exportDatas, fields: ['Id', 'Subject', 'StartTime', 'EndTime', 'CalendarId']\n      });\n    } else {\n      this.scheduleObj.exportToICalendar();\n    }\n  }\n\n  public ngOnDestroy(): void {\n    if (this.liveTimeInterval) {\n      clearInterval(this.liveTimeInterval);\n    }\n  }\n\n}\n"
    },
    {
      "target": "src/components/scheduler-default/overview.html",
      "content": "<div class=\"col-lg-12 control-section\">\n  <div class=\"content-wrapper\">\n    <div class=\"schedule-overview\">\n      <ejs-appbar colorMode=\"Primary\">\n        <span class=\"time e-icons e-time-zone\"></span>\n        <span id=\"timezoneBtn\" class=\"time \">{{timezone}}</span>\n        <span class=\"time e-icons e-clock\"></span>\n        <span id=\"timeBtn\" class=\"time current-time\">{{liveTimeUpdate}}</span>\n        <div class=\"e-appbar-spacer\"></div>\n        <button ejs-button id=\"printBtn\" cssClass=\"title-bar-btn e-inherit\" iconCss=\"e-icons e-print\"\n                (click)=\"onPrintClick()\">Print</button>\n        <div class=\"control-panel import-button\">\n          <ejs-uploader id='icalendar' cssClass='calendar-import' [multiple]='multiple' [buttons]='buttons'\n            [showFileList]='showFileList' allowedExtensions='.ics' (selected)='onSelected($event)' (created)= 'OnUploaderCreated()'></ejs-uploader>\n        </div>\n        <div class=\"control-panel calendar-export\">\n          <button ejs-dropdownbutton id=\"exportBtn\"  (select)=\"onExportClick($event)\"\n            [items]='exportItems' cssClass = \"e-inherit\">Export</button>\n        </div>\n        <button ejs-button id=\"settingsBtn\" iconCss=\"e-icons e-settings\" cssClass=\"overview-toolbar-settings e-inherit\"\n            iconPosition=\"Top\" (click)=\"onSettingsClick($event)\"></button>\n      </ejs-appbar>\n          <ejs-toolbar id=\"toolbarOptions\" cssClass=\"overview-toolbar\" height=\"70px\" overflowMode=\"Scrollable\" scrollStep=\"100\"\n            (created)=\"onToolbarCreated()\" (clicked)=\"onToolbarItemClicked($event)\">\n            <e-items>\n              <e-item prefixIcon='e-icons e-plus' tooltipText='New Event' text='New Event' tabIndex={0}>\n              </e-item>\n              <e-item prefixIcon='e-icons e-repeat' tooltipText='New Recurring Event' text='New Recurring Event' tabIndex={0}>\n              </e-item>\n              <e-item type='Separator'></e-item>\n              <e-item prefixIcon='e-icons e-day' tooltipText='Day' text='Day' tabIndex={0}></e-item>\n              <e-item prefixIcon='e-icons e-week' tooltipText='Week' text='Week' tabIndex={0}></e-item>\n              <e-item prefixIcon='e-icons e-week' tooltipText='WorkWeek' text='WorkWeek' tabIndex={0}></e-item>\n              <e-item prefixIcon='e-icons e-month' tooltipText='Month' text='Month' tabIndex={0}>\n              </e-item>\n              <e-item prefixIcon='e-icons e-month' tooltipText='Year' text='Year' tabIndex={0}></e-item>\n              <e-item prefixIcon='e-icons e-agenda-date-range' tooltipText='Agenda' text='Agenda' tabIndex={0}>\n              </e-item>\n              <e-item tooltipText='Timeline Views'>\n                <ng-template #template>\n                  <div class=\"template\">\n                    <label>\n                      <div class=\"icon-child\">\n                        <ejs-checkbox #viewSwitch id=\"timeline_views\" [checked]=\"false\"\n                          (change)=\"onTimelineViewChange($event)\"></ejs-checkbox>\n                      </div>\n                      <div class=\"text-child\">Timeline Views</div>\n                    </label>\n                  </div>\n                </ng-template>\n              </e-item>\n              <e-item type='Separator'></e-item>\n              <e-item tooltipText='Resource Grouping'>\n                <ng-template #template>\n                  <div class=\"template\">\n                    <label>\n                      <div class=\"icon-child\">\n                        <ejs-checkbox #groupSwitch id=\"grouping\" [checked]=\"true\" (change)=\"onGroupingChange($event)\">\n                        </ejs-checkbox>\n                      </div>\n                      <div class=\"text-child\">Grouping</div>\n                    </label>\n                  </div>\n                </ng-template>\n              </e-item>\n              <e-item tooltipText='Time Slots'>\n                <ng-template #template>\n                  <div class=\"template\">\n                    <label>\n                      <div class=\"icon-child\">\n                        <ejs-checkbox #gridlinesSwitch id=\"gridlines\" [checked]=\"true\" (change)=\"onGridlinesChange($event)\">\n                        </ejs-checkbox>\n                      </div>\n                      <div class=\"text-child\">Time Slots</div>\n                    </label>\n                  </div>\n                </ng-template>\n              </e-item>\n              <e-item tooltipText='Auto Fit Rows'>\n                <ng-template #template>\n                  <div class=\"template\">\n                    <label>\n                      <div class=\"icon-child\">\n                        <ejs-checkbox #rowHeightSwitch id=\"row_auto_height\" [checked]=\"false\"\n                          (change)=\"onRowAutoHeightChange($event)\"></ejs-checkbox>\n                      </div>\n                      <div class=\"text-child\">Auto Fit Rows</div>\n                    </label>\n                  </div>\n                </ng-template>\n              </e-item>\n            </e-items>\n          </ejs-toolbar>\n      <div class=\"overview-content\">\n        <div class=\"left-panel\">\n          <div class=\"overview-scheduler\">\n            <ejs-schedule #scheduleObj cssClass='schedule-overview' height='100%' [group]='group'\n              [(currentView)]=\"currentView\" timezone='UTC' [eventSettings]=\"eventSettings\">\n              <ng-template #dateHeaderTemplate let-data>\n                <div class=\"date-text\">{{getDateHeaderDay(data.date)}}</div>\n                <div class=\"date-text\">{{getDateHeaderDate(data.date)}}</div>\n                <div [innerHTML]=\"getWeatherImage(data.date)\"></div>\n              </ng-template>\n              <e-views>\n                <e-view option=\"Day\"></e-view>\n                <e-view option=\"Week\"></e-view>\n                <e-view option=\"WorkWeek\"></e-view>\n                <e-view option=\"Month\"></e-view>\n                <e-view option=\"Year\"></e-view>\n                <e-view option=\"Agenda\"></e-view>\n                <e-view option=\"TimelineDay\"></e-view>\n                <e-view option=\"TimelineWeek\"></e-view>\n                <e-view option=\"TimelineWorkWeek\"></e-view>\n                <e-view option=\"TimelineMonth\"></e-view>\n                <e-view option=\"TimelineYear\"></e-view>\n              </e-views>\n              <e-resources>\n                <e-resource field='CalendarId' title='Calendars' [dataSource]='resourceDataSource'\n                  [query]='resourceQuery' [allowMultiple]='allowMultiple' name='Calendars' textField='CalendarText'\n                  idField='CalendarId' colorField='CalendarColor'>\n                </e-resource>\n              </e-resources>\n            </ejs-schedule>\n            <ejs-contextmenu #menuObj cssClass='schedule-context-menu' target='.e-schedule' [items]='menuItems'\n              (beforeOpen)='onContextMenuBeforeOpen($event)' (select)='onMenuItemSelect($event)'></ejs-contextmenu>\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                <ejs-multiselect #resouresObj id='resources' [dataSource]='resourceDataSource'\n                  [mode]='checkboxMode' [fields]='calendarFields'  [showClearButton]='false'\n                  [showDropDownIcon]='true' [value]='calendarsValue' (change)='onResourceChange($event)' cssClass='schedule-resource'>\n                </ejs-multiselect>\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                <ejs-dropdownlist id='weekFirstDay' [dataSource]='weekDays'\n                  (change)='onWeekDayChange($event)' [value]='firstDayOfWeek' [fields]='fields'>\n                </ejs-dropdownlist>\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                <ejs-multiselect #workWeekDaysObj id='workWeekDays' [dataSource]='weekDays'\n                  [showClearButton]='false' [showDropDownIcon]='true' [mode]='checkboxMode' [fields]='fields'\n                  [value]='workDays' (change)='onWorkWeekDayChange($event)'></ejs-multiselect>\n              </div>\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                <ejs-dropdownlist id='timezone' [dataSource]='timezoneData'\n                  (change)='onTimezoneChange($event)' value='Etc/GMT' [fields]='fields' popupHeight='150px'>\n                </ejs-dropdownlist>\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                <ejs-timepicker id='dayStartHour' [showClearButton]='false' [value]='dayStartHourValue'\n                  (change)='onDayStartHourChange($event)'>\n                </ejs-timepicker>\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                <ejs-timepicker id='dayEndHour' [showClearButton]='false' [value]='dayEndHourValue'\n                  (change)='onDayEndHourChange($event)'>\n                </ejs-timepicker>\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                <ejs-timepicker id='workHourStart' [showClearButton]='false' [value]='workStartHourValue'\n                  (change)='onWorkStartHourChange($event)'>\n                </ejs-timepicker>\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                <ejs-timepicker id='workHourEnd' [showClearButton]='false' [value]='workEndHourValue'\n                  (change)='onWorkEndHourChange($event)'></ejs-timepicker>\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                <ejs-dropdownlist id='slotDuration' [dataSource]='timeSlotDuration'\n                  [fields]='timeSlotFields' (change)='onTimescaleDurationChange($event)' [value]='timeSlotDurationValue'\n                  popupHeight='150px'></ejs-dropdownlist>\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                <ejs-dropdownlist id='slotInterval' [dataSource]='timeSlotCount'\n                  (change)='onTimescaleIntervalChange($event)' [value]='timeSlotCountValue' popupHeight='150px'>\n                </ejs-dropdownlist>\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                <ejs-dropdownlist id='timeFormat' [dataSource]='timeFormatData'\n                  (change)='onTimeFormatChange($event)' [fields]='timeSlotFields' [value]='timeFormatValue'\n                  popupHeight='150px'></ejs-dropdownlist>\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                <ejs-dropdownlist id='weekNumber' [dataSource]='weekNumberData'\n                  (change)='onWeekNumberChange($event)' [fields]='timeSlotFields' [value]='weekNumberValue'\n                  popupHeight='150px'></ejs-dropdownlist>\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                <ejs-dropdownlist id='tooltip' [dataSource]='tooltipData'\n                  (change)='onTooltipChange($event)' [fields]='timeSlotFields' [value]='tooltipValue'\n                  popupHeight='150px'></ejs-dropdownlist>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>"
    },
    {
      "target": "src/components/scheduler-default/overview.style.css",
      "content": ".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"
    }
  ]
}