# scheduler-default

> Feature-rich scheduler with multi-view switching, calendar grouping, exports, and event editor.

**Framework:** angular  **Component:** Scheduler  **Variant:** default

## Get this item

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

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

**Install Package(s)**

```bash
npm install @syncfusion/ej2-angular-schedule
```

**Notes**

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

## Source files

### src/components/scheduler-default/overview.component.ts

```typescript
import { Component, ViewEncapsulation, Inject, ViewChild, AfterViewChecked } from '@angular/core';
import { ItemModel, DropDownButtonModule } from '@syncfusion/ej2-angular-splitbuttons';
import { SelectedEventArgs, TextBoxComponent, UploaderModule } from '@syncfusion/ej2-angular-inputs';
import { 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';
import { addClass, extend, removeClass, closest, remove, isNullOrUndefined, Internationalization, compile } from '@syncfusion/ej2-base';
import { ChangeEventArgs as SwitchEventArgs, SwitchComponent, ButtonModule, CheckBoxModule } from '@syncfusion/ej2-angular-buttons';
import { MultiSelectComponent, ChangeEventArgs, MultiSelectChangeEventArgs, DropDownListComponent, MultiSelectModule, DropDownListModule, CheckBoxSelectionService } from '@syncfusion/ej2-angular-dropdowns';
import { DataManager, Predicate, Query } from '@syncfusion/ej2-data';
import { ClickEventArgs, ContextMenuComponent, MenuItemModel, BeforeOpenCloseMenuEventArgs, MenuEventArgs, AppBarModule, ToolbarModule, ContextMenuModule } from '@syncfusion/ej2-angular-navigations';
import { ChangeEventArgs as TimeEventArgs } from '@syncfusion/ej2-calendars';
import { TimePickerModule } from '@syncfusion/ej2-angular-calendars';
declare var moment: any;

/**
 * Sample for overview
 */
@Component({
    // tslint:disable-next-line:component-selector
    selector: 'control-content',
    templateUrl: 'overview.html',
    styleUrls: ['overview.style.css'],
    providers: [DayService, WeekService, WorkWeekService, MonthService, YearService, AgendaService,
        TimelineViewsService, TimelineMonthService, TimelineYearService, ResizeService, DragAndDropService, PrintService, ExcelExportService, ICalendarExportService, ICalendarImportService, CheckBoxSelectionService],
    encapsulation: ViewEncapsulation.None,
    standalone: true,
    imports: [AppBarModule, ButtonModule, UploaderModule, DropDownButtonModule, ToolbarModule, CheckBoxModule, ScheduleModule, ContextMenuModule, MultiSelectModule, DropDownListModule, TimePickerModule]
})
export class OverviewComponent implements AfterViewChecked {
  @ViewChild('scheduleObj') scheduleObj!: ScheduleComponent;
  @ViewChild('workWeekDaysObj') workWeek!: MultiSelectComponent;
  @ViewChild('resouresObj') resources!: MultiSelectComponent;
  @ViewChild('eventTypeObj') eventTypeObj!: DropDownListComponent;
  @ViewChild('titleObj') titleObj!: TextBoxComponent;
  @ViewChild('notesObj') notesObj!: TextBoxComponent;
  @ViewChild('viewSwitch') viewSwitch!: SwitchComponent;
  @ViewChild('groupSwitch') groupSwitch!: SwitchComponent;
  @ViewChild('gridlinesSwitch') gridlinesSwitch!: SwitchComponent;
  @ViewChild('rowHeightSwitch') rowHeightSwitch!: SwitchComponent;
  @ViewChild('tooltipSwitch') tooltipSwitch!: SwitchComponent;
  @ViewChild('dragSwitch') dragSwitch!: SwitchComponent;
  public showFileList = false;
  public multiple = false;
  public buttons: Record<string, any> = { browse: this.importTemplateFn({ text: 'Import' })[0] as HTMLElement };
  public intl: Internationalization = new Internationalization();
  public currentView: View = 'Week';
  public liveTimeUpdate: string = new Date().toLocaleTimeString('en-US', { timeZone: 'UTC' });
  public timezone: string = 'UTC';
  public group: GroupModel = { resources: ['Calendars'] };
  public resourceDataSource: Record<string, any>[] = [
    { CalendarText: 'My Calendar', CalendarId: 1, CalendarColor: '#c43081' },
    { CalendarText: 'Company', CalendarId: 2, CalendarColor: '#ff7f50' },
    { CalendarText: 'Birthday', CalendarId: 3, CalendarColor: '#AF27CD' },
    { CalendarText: 'Holiday', CalendarId: 4, CalendarColor: '#808000' }
  ];
  public resourceQuery: Query = new Query().where('CalendarId', 'equal', 1);
  public allowMultiple = true;
  public isTimelineView = false;
  public exportItems: ItemModel[] = [
    { text: 'iCalendar', iconCss: 'e-icons e-export' },
    { text: 'Excel', iconCss: 'e-icons e-export-excel' }
  ];
  public checkboxMode = 'CheckBox';
  public firstDayOfWeek = 0;
  public workDays: number[] = [1, 2, 3, 4, 5];
  public calendarsValue: number[] = [1];
  public fields: Record<string, any> = { text: 'text', value: 'value' };
  public calendarFields: Record<string, any> = { text: 'CalendarText', value: 'CalendarId' };
  public dayStartHourValue: Date = new Date(new Date().setHours(0, 0, 0));
  public dayEndHourValue: Date = new Date(new Date().setHours(23, 59, 59));
  public workStartHourValue: Date = new Date(new Date().setHours(9, 0, 0));
  public workEndHourValue: Date = new Date(new Date().setHours(18, 0, 0));
  public liveTimeInterval: any;
  public weekDays: Record<string, any>[] = [
    { text: 'Sunday', value: 0 },
    { text: 'Monday', value: 1 },
    { text: 'Tuesday', value: 2 },
    { text: 'Wednesday', value: 3 },
    { text: 'Thursday', value: 4 },
    { text: 'Friday', value: 5 },
    { text: 'Saturday', value: 6 }
  ];
  public timezoneData: Record<string, any>[] = [
    { text: 'UTC -12:00', value: 'Etc/GMT+12' },
    { text: 'UTC -11:00', value: 'Etc/GMT+11' },
    { text: 'UTC -10:00', value: 'Etc/GMT+10' },
    { text: 'UTC -09:00', value: 'Etc/GMT+9' },
    { text: 'UTC -08:00', value: 'Etc/GMT+8' },
    { text: 'UTC -07:00', value: 'Etc/GMT+7' },
    { text: 'UTC -06:00', value: 'Etc/GMT+6' },
    { text: 'UTC -05:00', value: 'Etc/GMT+5' },
    { text: 'UTC -04:00', value: 'Etc/GMT+4' },
    { text: 'UTC -03:00', value: 'Etc/GMT+3' },
    { text: 'UTC -02:00', value: 'Etc/GMT+2' },
    { text: 'UTC -01:00', value: 'Etc/GMT+1' },
    { text: 'UTC +00:00', value: 'Etc/GMT' },
    { text: 'UTC +01:00', value: 'Etc/GMT-1' },
    { text: 'UTC +02:00', value: 'Etc/GMT-2' },
    { text: 'UTC +03:00', value: 'Etc/GMT-3' },
    { text: 'UTC +04:00', value: 'Etc/GMT-4' },
    { text: 'UTC +05:00', value: 'Etc/GMT-5' },
    { text: 'UTC +05:30', value: 'Asia/Calcutta' },
    { text: 'UTC +06:00', value: 'Etc/GMT-6' },
    { text: 'UTC +07:00', value: 'Etc/GMT-7' },
    { text: 'UTC +08:00', value: 'Etc/GMT-8' },
    { text: 'UTC +09:00', value: 'Etc/GMT-9' },
    { text: 'UTC +10:00', value: 'Etc/GMT-10' },
    { text: 'UTC +11:00', value: 'Etc/GMT-11' },
    { text: 'UTC +12:00', value: 'Etc/GMT-12' },
    { text: 'UTC +13:00', value: 'Etc/GMT-13' },
    { text: 'UTC +14:00', value: 'Etc/GMT-14' }
  ];
  public timeSlotDuration: Record<string, any>[] = [
    { Name: '1 hour', Value: 60 },
    { Name: '1.5 hours', Value: 90 },
    { Name: '2 hours', Value: 120 },
    { Name: '2.5 hours', Value: 150 },
    { Name: '3 hours', Value: 180 },
    { Name: '3.5 hours', Value: 210 },
    { Name: '4 hours', Value: 240 },
    { Name: '4.5 hours', Value: 270 },
    { Name: '5 hours', Value: 300 },
    { Name: '5.5 hours', Value: 330 },
    { Name: '6 hours', Value: 360 },
    { Name: '6.5 hours', Value: 390 },
    { Name: '7 hours', Value: 420 },
    { Name: '7.5 hours', Value: 450 },
    { Name: '8 hours', Value: 480 },
    { Name: '8.5 hours', Value: 510 },
    { Name: '9 hours', Value: 540 },
    { Name: '9.5 hours', Value: 570 },
    { Name: '10 hours', Value: 600 },
    { Name: '10.5 hours', Value: 630 },
    { Name: '11 hours', Value: 660 },
    { Name: '11.5 hours', Value: 690 },
    { Name: '12 hours', Value: 720 }
  ];
  public timeSlotFields = { text: 'Name', value: 'Value' };
  public timeSlotCount: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  public timeSlotDurationValue = 60;
  public timeSlotCountValue = 2;
  public timeFormatData: Record<string, any>[] = [
    { Name: '12 hours', Value: 'hh:mm a' },
    { Name: '24 hours', Value: 'HH:mm' }
  ];
  public timeFormatValue = 'hh:mm a';
  public weekNumberData: Record<string, any>[] = [
    { Name: 'Off', Value: 'Off' },
    { Name: 'First Day of Year', Value: 'FirstDay' },
    { Name: 'First Full Week', Value: 'FirstFullWeek' },
    { Name: 'First Four-Day Week', Value: 'FirstFourDayWeek' }
  ];
  public tooltipData: Record<string, any>[] = [
    { Name: 'Off', Value: 'Off' },
    { Name: 'On', Value: 'On' },
  ];
  public weekNumberValue = 'Off';
  public tooltipValue = 'Off';
  public eventSettings: EventSettingsModel = { dataSource: this.generateEvents() };
  @ViewChild('menuObj') public menuObj!: ContextMenuComponent;
  public selectedTarget!: Element;
  public menuItems: MenuItemModel[] = [
    { text: 'New Event', iconCss: 'e-icons e-plus', id: 'Add' },
    { text: 'New Recurring Event', iconCss: 'e-icons e-repeat', id: 'AddRecurrence' },
    { text: 'Today', iconCss: 'e-icons e-timeline-today', id: 'Today' },
    { text: 'Edit Event', iconCss: 'e-icons e-edit', id: 'Save' },
    {
      text: 'Edit Event', id: 'EditRecurrenceEvent', iconCss: 'e-icons e-edit',
      items: [
        { text: 'Edit Occurrence', id: 'EditOccurrence' },
        { text: 'Edit Series', id: 'EditSeries' }
      ]
    },
    { text: 'Delete Event', iconCss: 'e-icons e-trash', id: 'Delete' },
    {
      text: 'Delete Event', id: 'DeleteRecurrenceEvent', iconCss: 'e-icons e-trash',
      items: [
        { text: 'Delete Occurrence', id: 'DeleteOccurrence' },
        { text: 'Delete Series', id: 'DeleteSeries' }
      ]
    }
  ];

  public ngAfterViewChecked(): void {
    this.viewSwitch?.element?.setAttribute('tabindex', '0');
    this.groupSwitch?.element?.setAttribute('tabindex', '0');
    this.gridlinesSwitch?.element?.setAttribute('tabindex', '0');
    this.rowHeightSwitch?.element?.setAttribute('tabindex', '0');
  }

  public importTemplateFn(data: Record<string, any>): NodeList {
    const template: string = '<div class="e-template-btn"><span class="e-btn-icon e-icons e-upload-1 e-icon-left"></span>${text}</div>';
    return compile(template.trim())(data) as NodeList;
  }

  public generateEvents(): Record<string, any>[] {
    const eventData: Record<string, any>[] = [];
    const eventSubjects: string[] = [
      'Bering Sea Gold', 'Technology', 'Maintenance', 'Meeting', 'Traveling', 'Annual Conference', 'Birthday Celebration',
      'Farewell Celebration', 'Wedding Anniversary', 'Alaska: The Last Frontier', 'Deadliest Catch', 'Sports Day', 'MoonShiners',
      'Close Encounters', 'HighWay Thru Hell', 'Daily Planet', 'Cash Cab', 'Basketball Practice', 'Rugby Match', 'Guitar Class',
      'Music Lessons', 'Doctor checkup', 'Brazil - Mexico', 'Opening ceremony', 'Final presentation'
    ];
    const weekDate: Date = new Date(new Date().setDate(new Date().getDate() - new Date().getDay()));
    let startDate: Date = new Date(weekDate.getFullYear(), weekDate.getMonth(), weekDate.getDate(), 10, 0);
    let endDate: Date = new Date(weekDate.getFullYear(), weekDate.getMonth(), weekDate.getDate(), 11, 30);
    eventData.push({
      Id: 1,
      Subject: 'Stand-Up Meeting',
      StartTime: startDate,
      EndTime: endDate,
      Location: '',
      Description: 'Event Scheduled',
      RecurrenceRule: 'FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR;INTERVAL=1;COUNT=10;',
      IsAllDay: false,
      IsReadonly: false,
      CalendarId: 1
    });
    for (let a = 0, id = 2; a < 500; a++) {
      const month: number = Math.floor(Math.random() * (11 - 0 + 1) + 0);
      const date: number = Math.floor(Math.random() * (28 - 1 + 1) + 1);
      const hour: number = Math.floor(Math.random() * (23 - 0 + 1) + 0);
      const minutes: number = Math.floor(Math.random() * (59 - 0 + 1) + 0);
      const start: Date = new Date(new Date().getFullYear(), month, date, hour, minutes, 0);
      const end: Date = new Date(start.getTime());
      end.setHours(end.getHours() + 2);
      startDate = new Date(start.getTime());
      endDate = new Date(end.getTime());
      eventData.push({
        Id: id,
        Subject: eventSubjects[Math.floor(Math.random() * (24 - 0 + 1) + 0)],
        StartTime: startDate,
        EndTime: endDate,
        Location: '',
        Description: 'Event Scheduled',
        IsAllDay: id % 10 === 0,
        IsReadonly: endDate < new Date(),
        CalendarId: (a % 4) + 1
      });
      id++;
    }
    if (/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) {
      Timezone.prototype.offset = (date: Date, zone: string): number => moment.tz.zone(zone).utcOffset(date.getTime());
    }
    const overviewEvents: { [key: string]: Date }[] = extend([], eventData, undefined, true) as { [key: string]: Date }[];
    const timezone: Timezone = new Timezone();
    const utcTimezone: never = 'UTC' as never;
    const currentTimezone: never = timezone.getLocalTimezoneName() as never;
    for (const event of overviewEvents) {
      event['StartTime'] = timezone.convert(event['StartTime'], utcTimezone, currentTimezone);
      event['EndTime'] = timezone.convert(event['EndTime'], utcTimezone, currentTimezone);
    }
    return overviewEvents;
  }

  public onToolbarCreated(): void {
    this.liveTimeInterval = setInterval(() => { this.updateLiveTime(this.scheduleObj ? this.scheduleObj.timezone : 'UTC'); }, 1000);
  }

  public onToolbarItemClicked(args: ClickEventArgs): void {
    switch (args.item.text) {
      case 'Day':
        this.currentView = this.isTimelineView ? 'TimelineDay' : 'Day';
        break;
      case 'Week':
        this.currentView = this.isTimelineView ? 'TimelineWeek' : 'Week';
        break;
      case 'WorkWeek':
        this.currentView = this.isTimelineView ? 'TimelineWorkWeek' : 'WorkWeek';
        break;
      case 'Month':
        this.currentView = this.isTimelineView ? 'TimelineMonth' : 'Month';
        break;
      case 'Year':
        this.currentView = this.isTimelineView ? 'TimelineYear' : 'Year';
        break;
      case 'Agenda':
        this.currentView = 'Agenda';
        break;
      case 'New Event':
        const eventData: Record<string, any> = this.getEventData();
        this.scheduleObj.openEditor(eventData, 'Add', true);
        break;
      case 'New Recurring Event':
        const recEventData: Record<string, any> = this.getEventData();
        this.scheduleObj.openEditor(recEventData, 'Add', true, 1);
        break;
    }
  }

  private getEventData(): Record<string, any> {
    const date: Date = this.scheduleObj.selectedDate;
    return {
      Id: this.scheduleObj.getEventMaxID(),
      Subject: '',
      StartTime: new Date(date.getFullYear(), date.getMonth(), date.getDate(), new Date().getHours(), 0, 0),
      EndTime: new Date(date.getFullYear(), date.getMonth(), date.getDate(), new Date().getHours() + 1, 0, 0),
      Location: '',
      Description: '',
      IsAllDay: false,
      CalendarId: 1
    };
  }

  public updateLiveTime(timezone: string = 'UTC'): void {
    if(this.scheduleObj.isAdaptive) {
      this.liveTimeUpdate = new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', timeZone: timezone });
    }
    else {
      this.liveTimeUpdate = new Date().toLocaleTimeString('en-US', { timeZone: timezone });
    }
  }

  public onTimelineViewChange(args: SwitchEventArgs): void {
    this.isTimelineView = !!args.checked;
    switch (this.scheduleObj.currentView) {
      case 'Day':
      case 'TimelineDay':
        this.currentView = this.isTimelineView ? 'TimelineDay' : 'Day';
        break;
      case 'Week':
      case 'TimelineWeek':
        this.currentView = this.isTimelineView ? 'TimelineWeek' : 'Week';
        break;
      case 'WorkWeek':
      case 'TimelineWorkWeek':
        this.currentView = this.isTimelineView ? 'TimelineWorkWeek' : 'WorkWeek';
        break;
      case 'Month':
      case 'TimelineMonth':
        this.currentView = this.isTimelineView ? 'TimelineMonth' : 'Month';
        break;
      case 'Year':
      case 'TimelineYear':
        this.currentView = this.isTimelineView ? 'TimelineYear' : 'Year';
        break;
      case 'Agenda':
        this.currentView = 'Agenda';
        break;
    }
  }

  public onGroupingChange(args: SwitchEventArgs): void {
    this.scheduleObj.group.resources = args.checked ? ['Calendars'] : [];
  }

  public onGridlinesChange(args: SwitchEventArgs): void {
    this.scheduleObj.timeScale.enable = args.checked;
  }

  public onRowAutoHeightChange(args: SwitchEventArgs): void {
    this.scheduleObj.rowAutoHeight = !!args.checked;
  }

  public onSelected(args: SelectedEventArgs): void {
    const file = (args.event.target as HTMLInputElement | null)?.files?.[0];
    if (file) {
      this.scheduleObj.importICalendar(file);
    }
  }

  public OnUploaderCreated(): void {
    const element = document.querySelector('.calendar-import .e-css.e-btn');
    if (element) {
      element.classList.add('e-inherit');
    }
  }

  public onSettingsClick(args: any): void {
    const settingsPanel = document.querySelector('.overview-content .right-panel') as Element | null;
    if (!settingsPanel) {
      return;
    }
    if (settingsPanel.classList.contains('hide')) {
      removeClass([settingsPanel], 'hide');
      this.workWeek.refresh();
      this.resources.refresh();
    } else {
      addClass([settingsPanel], 'hide');
    }
    this.scheduleObj.refreshEvents();
  }

  public getWeatherImage(value: Date): string {
    switch (value.getDay()) {
      case 0:
        return '<img class="weather-image" src="./assets/schedule/images/weather-clear.svg" alt="Clear Weather"/>';
      case 1:
        return '<img class="weather-image" src="./assets/schedule/images/weather-clouds.svg" alt="Clouds Weather"/>';
      case 2:
        return '<img class="weather-image" src="./assets/schedule/images/weather-rain.svg" alt="Rain Weather"/>';
      case 3:
        return '<img class="weather-image" src="./assets/schedule/images/weather-clouds.svg" alt="Clouds Weather"/>';
      case 4:
        return '<img class="weather-image" src="./assets/schedule/images/weather-rain.svg" alt="Rain Weather"/>';
      case 5:
        return '<img class="weather-image" src="./assets/schedule/images/weather-clear.svg" alt="Clear Weather"/>';
      case 6:
        return '<img class="weather-image" src="./assets/schedule/images/weather-clouds.svg" alt="Clouds Weather"/>';
      default:
        return '';
    }
  }

  public getDateHeaderDay(value: Date): string {
    return this.intl.formatDate(value, { skeleton: 'E' });
  }
  public getDateHeaderDate(value: Date): string {
    return this.intl.formatDate(value, { skeleton: 'd' });
  }

  public onWeekDayChange(args: ChangeEventArgs): void {
    this.scheduleObj.firstDayOfWeek = args.value as number;
  }

  public onWorkWeekDayChange(args: MultiSelectChangeEventArgs): void {
    this.scheduleObj.workDays = args.value as number[];
  }

  public onResourceChange(args: MultiSelectChangeEventArgs): void {
    let resourcePredicate: Predicate | undefined;
    for (const value of args.value ?? []) {
      if (resourcePredicate) {
        resourcePredicate = resourcePredicate.or(new Predicate('CalendarId', 'equal', value as number));
      } else {
        resourcePredicate = new Predicate('CalendarId', 'equal', value as number);
      }
    }
    this.scheduleObj.resources[0].query = resourcePredicate ? new Query().where(resourcePredicate) :
      new Query().where('CalendarId', 'equal', 1);
  }

  public onTimezoneChange(args: ChangeEventArgs): void {
    this.scheduleObj.timezone = args.value as string;
    this.updateLiveTime(this.scheduleObj.timezone);
    this.timezone = args.itemData?.text ?? 'UTC';
  }

  public onDayStartHourChange(args: TimeEventArgs): void {
    const value = args.value ?? new Date();
    this.scheduleObj.startHour = this.intl.formatDate(value, { skeleton: 'Hm' });
  }

  public onDayEndHourChange(args: TimeEventArgs): void {
    const value = args.value ?? new Date();
    this.scheduleObj.endHour = this.intl.formatDate(value, { skeleton: 'Hm' });
  }

  public onWorkStartHourChange(args: TimeEventArgs): void {
    const value = args.value ?? new Date();
    this.scheduleObj.workHours.start = this.intl.formatDate(value, { skeleton: 'Hm' });
  }

  public onWorkEndHourChange(args: TimeEventArgs): void {
    const value = args.value ?? new Date();
    this.scheduleObj.workHours.end = this.intl.formatDate(value, { skeleton: 'Hm' });
  }

  public onTimescaleDurationChange(args: ChangeEventArgs): void {
    this.scheduleObj.timeScale.interval = args.value as number;
  }

  public onTimescaleIntervalChange(args: ChangeEventArgs): void {
    this.scheduleObj.timeScale.slotCount = args.value as number;
  }

  public onTimeFormatChange(args: ChangeEventArgs): void {
    this.scheduleObj.timeFormat = args.value as string;
  }

  public onWeekNumberChange(args: ChangeEventArgs): void {
    if (args.value === 'Off') {
      this.scheduleObj.showWeekNumber = false;
    } else {
      this.scheduleObj.showWeekNumber = true;
      this.scheduleObj.weekRule = args.value as any;
    }
  }
  public onTooltipChange(args: ChangeEventArgs): void {
    if (args.value === 'Off') {
      this.scheduleObj.eventSettings.enableTooltip = false;
    } else {
      this.scheduleObj.eventSettings.enableTooltip = true;
    }
  }

  public onContextMenuBeforeOpen(args: BeforeOpenCloseMenuEventArgs): void {
    const newEventElement: HTMLElement | null = document.querySelector('.e-new-event') as HTMLElement | null;
    if (newEventElement) {
      remove(newEventElement);
      const selectedCell = document.querySelector('.e-selected-cell') as Element | null;
      if (selectedCell) {
        removeClass([selectedCell], 'e-selected-cell');
      }
    }
    this.scheduleObj.closeQuickInfoPopup();
    const targetElement: HTMLElement = args.event.target as HTMLElement;
    if (closest(targetElement, '.e-contextmenu')) {
      return;
    }
    this.selectedTarget = closest(targetElement, '.e-appointment,.e-work-cells,' +
      '.e-vertical-view .e-date-header-wrap .e-all-day-cells,.e-vertical-view .e-date-header-wrap .e-header-cells');
    if (isNullOrUndefined(this.selectedTarget)) {
      args.cancel = true;
      return;
    }
    if (this.selectedTarget.classList.contains('e-appointment')) {
      const eventObj: Record<string, any> = this.scheduleObj.getEventDetails(this.selectedTarget) as Record<string, any>;
      if (eventObj['RecurrenceRule']) {
        this.menuObj.showItems(['EditRecurrenceEvent', 'DeleteRecurrenceEvent'], true);
        this.menuObj.hideItems(['Add', 'AddRecurrence', 'Today', 'Save', 'Delete'], true);
      } else {
        this.menuObj.showItems(['Save', 'Delete'], true);
        this.menuObj.hideItems(['Add', 'AddRecurrence', 'Today', 'EditRecurrenceEvent', 'DeleteRecurrenceEvent'], true);
      }
      return;
    } else if ((this.selectedTarget.classList.contains('e-work-cells') || this.selectedTarget.classList.contains('e-all-day-cells')) &&
      !this.selectedTarget.classList.contains('e-selected-cell')) {
      removeClass([].slice.call(this.scheduleObj.element.querySelectorAll('.e-selected-cell')), 'e-selected-cell');
      this.selectedTarget.classList.add('e-selected-cell');
      this.selectedTarget.setAttribute('aria-selected', 'true');
    }
    this.menuObj.hideItems(['Save', 'Delete', 'EditRecurrenceEvent', 'DeleteRecurrenceEvent'], true);
    this.menuObj.showItems(['Add', 'AddRecurrence', 'Today'], true);
  }

  public onMenuItemSelect(args: MenuEventArgs): void {
    const selectedMenuItem: string = args.item?.id ?? '';
    let eventObj: { [key: string]: number } | undefined = this.selectedTarget.classList.contains('e-appointment')
      ? (this.scheduleObj.getEventDetails(this.selectedTarget) as { [key: string]: number })
      : undefined;

    switch (selectedMenuItem) {
      case 'Today':
        this.scheduleObj.selectedDate = new Date();
        break;
      case 'Add':
      case 'AddRecurrence':
        const selectedCells: Element[] = this.scheduleObj.getSelectedElements();
        const isRightClickInSelectedCells: boolean = selectedCells.some((cell: Element) => cell === this.selectedTarget);
        const activeCellsData: CellClickEventArgs = this.scheduleObj.getCellDetails(isRightClickInSelectedCells ? selectedCells : [this.selectedTarget]);
        if (selectedMenuItem === 'Add') {
          this.scheduleObj.openEditor(activeCellsData, 'Add');
        } else {
          this.scheduleObj.openEditor(activeCellsData, 'Add', undefined, 1);
        }
        break;
      case 'Save':
      case 'EditOccurrence':
      case 'EditSeries':
        if (!eventObj) {
          return;
        }
        if (selectedMenuItem === 'EditSeries') {
          const recurrenceId = eventObj['RecurrenceID'];
          const eventIdField = this.scheduleObj.eventFields.id ?? 'Id';
          const query: Query = new Query().where(eventIdField, 'equal', recurrenceId);
          const recurrenceEvent = new DataManager(this.scheduleObj.eventsData).executeLocal(query)[0] as { [key: string]: number } | undefined;
          if (recurrenceEvent) {
            eventObj = recurrenceEvent;
          }
        }
        this.scheduleObj.openEditor(eventObj, selectedMenuItem);
        break;
      case 'Delete':
        if (eventObj) {
          this.scheduleObj.deleteEvent(eventObj);
        }
        break;
      case 'DeleteOccurrence':
      case 'DeleteSeries':
        if (eventObj) {
          this.scheduleObj.deleteEvent(eventObj, selectedMenuItem);
        }
        break;
    }
  }

  public onPrintClick(): void {
    this.scheduleObj.print();
  }

  public onExportClick(args: any): void {
    if (args.item.text === 'Excel') {
      let exportDatas: Record<string, any>[] = [];
      const eventCollection: Record<string, any>[] = this.scheduleObj.getEvents();
      const resourceCollection: ResourcesModel[] = this.scheduleObj.getResourceCollections();
      const resourceData: Record<string, any>[] = (resourceCollection[0]?.dataSource ?? []) as Record<string, any>[];
      for (const resource of resourceData) {
        const data: Record<string, any>[] = eventCollection.filter((e: Record<string, any>) => e['CalendarId'] === resource['CalendarId']);
        exportDatas = exportDatas.concat(data as Record<string, any>[]);
      }
      this.scheduleObj.exportToExcel({
        exportType: 'xlsx', customData: exportDatas, fields: ['Id', 'Subject', 'StartTime', 'EndTime', 'CalendarId']
      });
    } else {
      this.scheduleObj.exportToICalendar();
    }
  }

  public ngOnDestroy(): void {
    if (this.liveTimeInterval) {
      clearInterval(this.liveTimeInterval);
    }
  }

}

```

### src/components/scheduler-default/overview.html

```html
<div class="col-lg-12 control-section">
  <div class="content-wrapper">
    <div class="schedule-overview">
      <ejs-appbar colorMode="Primary">
        <span class="time e-icons e-time-zone"></span>
        <span id="timezoneBtn" class="time ">{{timezone}}</span>
        <span class="time e-icons e-clock"></span>
        <span id="timeBtn" class="time current-time">{{liveTimeUpdate}}</span>
        <div class="e-appbar-spacer"></div>
        <button ejs-button id="printBtn" cssClass="title-bar-btn e-inherit" iconCss="e-icons e-print"
                (click)="onPrintClick()">Print</button>
        <div class="control-panel import-button">
          <ejs-uploader id='icalendar' cssClass='calendar-import' [multiple]='multiple' [buttons]='buttons'
            [showFileList]='showFileList' allowedExtensions='.ics' (selected)='onSelected($event)' (created)= 'OnUploaderCreated()'></ejs-uploader>
        </div>
        <div class="control-panel calendar-export">
          <button ejs-dropdownbutton id="exportBtn"  (select)="onExportClick($event)"
            [items]='exportItems' cssClass = "e-inherit">Export</button>
        </div>
        <button ejs-button id="settingsBtn" iconCss="e-icons e-settings" cssClass="overview-toolbar-settings e-inherit"
            iconPosition="Top" (click)="onSettingsClick($event)"></button>
      </ejs-appbar>
          <ejs-toolbar id="toolbarOptions" cssClass="overview-toolbar" height="70px" overflowMode="Scrollable" scrollStep="100"
            (created)="onToolbarCreated()" (clicked)="onToolbarItemClicked($event)">
            <e-items>
              <e-item prefixIcon='e-icons e-plus' tooltipText='New Event' text='New Event' tabIndex={0}>
              </e-item>
              <e-item prefixIcon='e-icons e-repeat' tooltipText='New Recurring Event' text='New Recurring Event' tabIndex={0}>
              </e-item>
              <e-item type='Separator'></e-item>
              <e-item prefixIcon='e-icons e-day' tooltipText='Day' text='Day' tabIndex={0}></e-item>
              <e-item prefixIcon='e-icons e-week' tooltipText='Week' text='Week' tabIndex={0}></e-item>
              <e-item prefixIcon='e-icons e-week' tooltipText='WorkWeek' text='WorkWeek' tabIndex={0}></e-item>
              <e-item prefixIcon='e-icons e-month' tooltipText='Month' text='Month' tabIndex={0}>
              </e-item>
              <e-item prefixIcon='e-icons e-month' tooltipText='Year' text='Year' tabIndex={0}></e-item>
              <e-item prefixIcon='e-icons e-agenda-date-range' tooltipText='Agenda' text='Agenda' tabIndex={0}>
              </e-item>
              <e-item tooltipText='Timeline Views'>
                <ng-template #template>
                  <div class="template">
                    <label>
                      <div class="icon-child">
                        <ejs-checkbox #viewSwitch id="timeline_views" [checked]="false"
                          (change)="onTimelineViewChange($event)"></ejs-checkbox>
                      </div>
                      <div class="text-child">Timeline Views</div>
                    </label>
                  </div>
                </ng-template>
              </e-item>
              <e-item type='Separator'></e-item>
              <e-item tooltipText='Resource Grouping'>
                <ng-template #template>
                  <div class="template">
                    <label>
                      <div class="icon-child">
                        <ejs-checkbox #groupSwitch id="grouping" [checked]="true" (change)="onGroupingChange($event)">
                        </ejs-checkbox>
                      </div>
                      <div class="text-child">Grouping</div>
                    </label>
                  </div>
                </ng-template>
              </e-item>
              <e-item tooltipText='Time Slots'>
                <ng-template #template>
                  <div class="template">
                    <label>
                      <div class="icon-child">
                        <ejs-checkbox #gridlinesSwitch id="gridlines" [checked]="true" (change)="onGridlinesChange($event)">
                        </ejs-checkbox>
                      </div>
                      <div class="text-child">Time Slots</div>
                    </label>
                  </div>
                </ng-template>
              </e-item>
              <e-item tooltipText='Auto Fit Rows'>
                <ng-template #template>
                  <div class="template">
                    <label>
                      <div class="icon-child">
                        <ejs-checkbox #rowHeightSwitch id="row_auto_height" [checked]="false"
                          (change)="onRowAutoHeightChange($event)"></ejs-checkbox>
                      </div>
                      <div class="text-child">Auto Fit Rows</div>
                    </label>
                  </div>
                </ng-template>
              </e-item>
            </e-items>
          </ejs-toolbar>
      <div class="overview-content">
        <div class="left-panel">
          <div class="overview-scheduler">
            <ejs-schedule #scheduleObj cssClass='schedule-overview' height='100%' [group]='group'
              [(currentView)]="currentView" timezone='UTC' [eventSettings]="eventSettings">
              <ng-template #dateHeaderTemplate let-data>
                <div class="date-text">{{getDateHeaderDay(data.date)}}</div>
                <div class="date-text">{{getDateHeaderDate(data.date)}}</div>
                <div [innerHTML]="getWeatherImage(data.date)"></div>
              </ng-template>
              <e-views>
                <e-view option="Day"></e-view>
                <e-view option="Week"></e-view>
                <e-view option="WorkWeek"></e-view>
                <e-view option="Month"></e-view>
                <e-view option="Year"></e-view>
                <e-view option="Agenda"></e-view>
                <e-view option="TimelineDay"></e-view>
                <e-view option="TimelineWeek"></e-view>
                <e-view option="TimelineWorkWeek"></e-view>
                <e-view option="TimelineMonth"></e-view>
                <e-view option="TimelineYear"></e-view>
              </e-views>
              <e-resources>
                <e-resource field='CalendarId' title='Calendars' [dataSource]='resourceDataSource'
                  [query]='resourceQuery' [allowMultiple]='allowMultiple' name='Calendars' textField='CalendarText'
                  idField='CalendarId' colorField='CalendarColor'>
                </e-resource>
              </e-resources>
            </ejs-schedule>
            <ejs-contextmenu #menuObj cssClass='schedule-context-menu' target='.e-schedule' [items]='menuItems'
              (beforeOpen)='onContextMenuBeforeOpen($event)' (select)='onMenuItemSelect($event)'></ejs-contextmenu>
          </div>
        </div>
        <div class="right-panel hide">
          <div class="control-panel e-css">
            <div class="col-row">
              <div class="col-left">
                <label style="line-height: 34px; margin: 0;">Calendar</label>
              </div>
              <div class="col-right">
                <ejs-multiselect #resouresObj id='resources' [dataSource]='resourceDataSource'
                  [mode]='checkboxMode' [fields]='calendarFields'  [showClearButton]='false'
                  [showDropDownIcon]='true' [value]='calendarsValue' (change)='onResourceChange($event)' cssClass='schedule-resource'>
                </ejs-multiselect>
              </div>
            </div>
            <div class="col-row">
              <div class="col-left">
                <label style="line-height: 34px; margin: 0;">First Day of Week</label>
              </div>
              <div class="col-right">
                <ejs-dropdownlist id='weekFirstDay' [dataSource]='weekDays'
                  (change)='onWeekDayChange($event)' [value]='firstDayOfWeek' [fields]='fields'>
                </ejs-dropdownlist>
              </div>
            </div>
            <div class="col-row">
              <div class="col-left">
                <label style="line-height: 34px; margin: 0;">Work week</label>
              </div>
              <div class="col-right">
                <ejs-multiselect #workWeekDaysObj id='workWeekDays' [dataSource]='weekDays'
                  [showClearButton]='false' [showDropDownIcon]='true' [mode]='checkboxMode' [fields]='fields'
                  [value]='workDays' (change)='onWorkWeekDayChange($event)'></ejs-multiselect>
              </div>
            </div>
            <div class="col-row">
              <div class="col-left">
                <label style="line-height: 34px; margin: 0;">Timezone</label>
              </div>
              <div class="col-right">
                <ejs-dropdownlist id='timezone' [dataSource]='timezoneData'
                  (change)='onTimezoneChange($event)' value='Etc/GMT' [fields]='fields' popupHeight='150px'>
                </ejs-dropdownlist>
              </div>
            </div>
            <div class="col-row">
              <div class="col-left">
                <label style="line-height: 34px; margin: 0;">Day Start Hour</label>
              </div>
              <div class="col-right">
                <ejs-timepicker id='dayStartHour' [showClearButton]='false' [value]='dayStartHourValue'
                  (change)='onDayStartHourChange($event)'>
                </ejs-timepicker>
              </div>
            </div>
            <div class="col-row">
              <div class="col-left">
                <label style="line-height: 34px; margin: 0;">Day End Hour</label>
              </div>
              <div class="col-right">
                <ejs-timepicker id='dayEndHour' [showClearButton]='false' [value]='dayEndHourValue'
                  (change)='onDayEndHourChange($event)'>
                </ejs-timepicker>
              </div>
            </div>
            <div class="col-row">
              <div class="col-left">
                <label style="line-height: 34px; margin: 0;">Work Start Hour</label>
              </div>
              <div class="col-right">
                <ejs-timepicker id='workHourStart' [showClearButton]='false' [value]='workStartHourValue'
                  (change)='onWorkStartHourChange($event)'>
                </ejs-timepicker>
              </div>
            </div>
            <div class="col-row">
              <div class="col-left">
                <label style="line-height: 34px; margin: 0;">Work End Hour</label>
              </div>
              <div class="col-right">
                <ejs-timepicker id='workHourEnd' [showClearButton]='false' [value]='workEndHourValue'
                  (change)='onWorkEndHourChange($event)'></ejs-timepicker>
              </div>
            </div>
            <div class="col-row">
              <div class="col-left">
                <label style="line-height: 34px; margin: 0;">Slot Duration</label>
              </div>
              <div class="col-right">
                <ejs-dropdownlist id='slotDuration' [dataSource]='timeSlotDuration'
                  [fields]='timeSlotFields' (change)='onTimescaleDurationChange($event)' [value]='timeSlotDurationValue'
                  popupHeight='150px'></ejs-dropdownlist>
              </div>
            </div>
            <div class="col-row">
              <div class="col-left">
                <label style="line-height: 34px; margin: 0;">Slot Interval</label>
              </div>
              <div class="col-right">
                <ejs-dropdownlist id='slotInterval' [dataSource]='timeSlotCount'
                  (change)='onTimescaleIntervalChange($event)' [value]='timeSlotCountValue' popupHeight='150px'>
                </ejs-dropdownlist>
              </div>
            </div>
            <div class="col-row">
              <div class="col-left">
                <label style="line-height: 34px; margin: 0;">Time Format</label>
              </div>
              <div class="col-right">
                <ejs-dropdownlist id='timeFormat' [dataSource]='timeFormatData'
                  (change)='onTimeFormatChange($event)' [fields]='timeSlotFields' [value]='timeFormatValue'
                  popupHeight='150px'></ejs-dropdownlist>
              </div>
            </div>
            <div class="col-row">
              <div class="col-left">
                <label style="line-height: 34px; margin: 0;">Week Numbers</label>
              </div>
              <div class="col-right">
                <ejs-dropdownlist id='weekNumber' [dataSource]='weekNumberData'
                  (change)='onWeekNumberChange($event)' [fields]='timeSlotFields' [value]='weekNumberValue'
                  popupHeight='150px'></ejs-dropdownlist>
              </div>
            </div>
            <div class="col-row">
              <div class="col-left">
                <label style="line-height: 34px; margin: 0;">Tooltip</label>
              </div>
              <div class="col-right">
                <ejs-dropdownlist id='tooltip' [dataSource]='tooltipData'
                  (change)='onTooltipChange($event)' [fields]='timeSlotFields' [value]='tooltipValue'
                  popupHeight='150px'></ejs-dropdownlist>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```

### src/components/scheduler-default/overview.style.css

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#exportBtn {
  white-space: nowrap;
}

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

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

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

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

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

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

}

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

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

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

```