react-big-schedule 8.1.0 → 9.0.1

package/dist/components/SchedulerData.js

@@ -1,1271 +1,1341 @@
 import dayjs from 'dayjs';
 import isoWeek from 'dayjs/plugin/isoWeek';
 import quarterOfYear from 'dayjs/plugin/quarterOfYear';
+import timezone from 'dayjs/plugin/timezone';
 import utc from 'dayjs/plugin/utc';
 import weekday from 'dayjs/plugin/weekday';
 import { RRuleSet, rrulestr } from 'rrule';
 import { CellUnit, DATE_FORMAT, DATETIME_FORMAT, ViewType } from '../config/default';
 import { getDefaultLabels, getLabel } from '../config/i18n';
 import config from '../config/scheduler';
-import behaviors from '../helper/behaviors';
+import behaviors, { toDate } from '../helper/behaviors';
 import { normalizeEventEnd, normalizeEventStart } from '../helper/utility';
+// dayjs's quarterOfYear plugin adds 'quarters' to add() but not to the ManipulateType the base overload accepts.
+const addUnit = (d, amount, unit) => d.add(amount, unit);
+const isPercent = (value) => typeof value === 'string' && value.endsWith('%');
+const percentOf = (base, percent) => Math.trunc((base * Number(String(percent).slice(0, -1))) / 100);
+// Non-percent widths are pixel numbers by contract.
+const asPx = (value) => value;
 export default class SchedulerData {
-  constructor(date = dayjs(), viewType = ViewType.Week, showAgenda = false, isEventPerspective = false, newConfig = undefined, newBehaviors = undefined) {
-    this.resources = [];
-    this.events = [];
-    this.eventGroups = [];
-    this.eventGroupsAutoGenerated = true;
-    this.viewType = viewType;
-    this.cellUnit = viewType === ViewType.Day || viewType === ViewType.VerticalResource ? CellUnit.Hour : CellUnit.Day;
-    this.showAgenda = showAgenda;
-    this.isEventPerspective = isEventPerspective;
-    this.resizing = false;
-    this.scrollToSpecialDayjs = false;
-    this.documentWidth = 0;
-    this.documentHeight = 0;
-    this.schedulerHeaderHeight = 0;
-    this._shouldReloadViewType = false;
-    this.version = 0;
-    this._batchCount = 0;
-    this._versionChangeCallback = null;
-    this.calendarPopoverLocale = undefined;
-    dayjs.extend(quarterOfYear);
-    dayjs.extend(weekday);
-    dayjs.extend(utc);
-    dayjs.extend(isoWeek);
-    this.localeDayjs = this._createLocaleDayjs();
-    this.config = newConfig === undefined ? config : {
-      ...config,
-      ...newConfig
-    };
-    this._updateLabelsFromI18n();
-    this._validateMinuteStep(this.config.minuteStep);
-    this.behaviors = newBehaviors === undefined ? behaviors : {
-      ...behaviors,
-      ...newBehaviors
-    };
-    this._resolveDate(0, date);
-    this._createHeaders();
-    this._createRenderData();
-  }
-
-  // Per-instance dayjs: the locale is applied to each created date instead of the global dayjs
-  // singleton, so schedulers (and the host app) don't overwrite each other's locale (#146).
-  _createLocaleDayjs() {
-    let locale;
-    const localeDayjs = (...args) => {
-      const d = dayjs(...args);
-      return locale ? d.locale(locale) : d;
-    };
-    localeDayjs.locale = preset => {
-      if (preset === undefined) return locale || dayjs.locale();
-      // dayjs accepts a locale name or a locale object; resolve (and register) it once to a name
-      locale = dayjs().locale(preset).locale();
-      return localeDayjs;
-    };
-    return localeDayjs;
-  }
-
-  /**
-   * Update user-facing labels from the i18n provider
-   * This allows apps to provide localized labels via setLabelsProvider()
-   * @private
-   */
-  _updateLabelsFromI18n(locale) {
-    // Get labels from the i18n provider if available
-    const defaults = getDefaultLabels();
-    const applyIfProvided = (key, current) => {
-      const value = getLabel(key, locale);
-      if (value === undefined || value === null) return current;
-      return value !== defaults[key] ? value : current;
-    };
-    this.config.resourceName = applyIfProvided('resourceName', this.config.resourceName);
-    this.config.taskName = applyIfProvided('taskName', this.config.taskName);
-    this.config.agendaViewHeader = applyIfProvided('agendaViewHeader', this.config.agendaViewHeader);
-    this.config.weekNumberLabel = applyIfProvided('weekNumberLabel', this.config.weekNumberLabel);
-  }
-  setVersionChangeNotifier(callback) {
-    this._versionChangeCallback = typeof callback === 'function' ? callback : null;
-  }
-  beginBatch() {
-    this._batchCount = (this._batchCount || 0) + 1;
-  }
-  endBatch() {
-    if (this._batchCount === undefined || this._batchCount <= 0) {
-      this._batchCount = 0;
-      console.warn('SchedulerData.endBatch called without a matching beginBatch');
-      return;
-    }
-    if (this._batchCount > 0) {
-      this._batchCount -= 1;
-      if (this._batchCount === 0 && this._pendingVersion !== undefined) {
-        const pendingVersion = this._pendingVersion;
-        this._pendingVersion = undefined;
-        if (typeof this._versionChangeCallback === 'function') {
-          this._versionChangeCallback(pendingVersion);
-        }
-      }
-    }
-  }
-  bumpVersion() {
-    this.version += 1;
-    if (this._batchCount > 0) {
-      // Defer callback until batch ends
-      this._pendingVersion = this.version;
-    } else if (typeof this._versionChangeCallback === 'function') {
-      this._versionChangeCallback(this.version);
-    }
-  }
-  getVersion() {
-    return this.version;
-  }
-  isVerticalResourceView() {
-    return this.viewType === ViewType.VerticalResource;
-  }
-  setSchedulerLocale(preset) {
-    if (!preset) return;
-    this.localeDayjs.locale(preset);
-    this._updateLabelsFromI18n(preset);
-    this._shouldReloadViewType = true;
-    this.setViewType(this.viewType, this.showAgenda, this.isEventPerspective);
-  }
-  setCalendarPopoverLocale(lang) {
-    if (lang) {
-      this.calendarPopoverLocale = lang;
-    }
-  }
-  setResources(resources) {
-    this._validateResource(resources);
-    this.resources = Array.from(new Set(resources));
-    // vertical view builds its headers from the resources
-    if (this.isVerticalResourceView()) {
-      this._createHeaders();
-    }
-    this._createRenderData();
-    this.setScrollToSpecialDayjs(true);
-    this.bumpVersion();
-  }
-  setEventGroupsAutoGenerated(autoGenerated) {
-    this.eventGroupsAutoGenerated = autoGenerated;
-  }
-
-  // optional
-  setEventGroups(eventGroups) {
-    this._validateEventGroups(eventGroups);
-    this.eventGroups = Array.from(new Set(eventGroups));
-    this.eventGroupsAutoGenerated = false;
-    this._createRenderData();
-    this.setScrollToSpecialDayjs(true);
-    this.bumpVersion();
-  }
-  setMinuteStep(minuteStep) {
-    if (this.config.minuteStep !== minuteStep) {
-      this._validateMinuteStep(minuteStep);
-      this.config.minuteStep = minuteStep;
-      this._createHeaders();
-      this._createRenderData();
-      this.bumpVersion();
-    }
-  }
-  setUnderneathHeight(underneathHeight) {
-    if (underneathHeight >= 0 && this.config.underneathHeight !== underneathHeight) {
-      this.config.underneathHeight = underneathHeight;
-      this.bumpVersion();
-    }
-  }
-  getMinuteStepsInHour() {
-    return 60 / this.config.minuteStep;
-  }
-  addResource(resource) {
-    const existedResources = this.resources.filter(x => x.id === resource.id);
-    if (existedResources.length === 0) {
-      this.resources.push(resource);
-      if (this.isVerticalResourceView()) {
-        this._createHeaders();
-      }
-      this._createRenderData();
-      this.bumpVersion();
-    }
-  }
-  addEventGroup(eventGroup) {
-    const existedEventGroups = this.eventGroups.filter(x => x.id === eventGroup.id);
-    if (existedEventGroups.length === 0) {
-      this.eventGroups.push(eventGroup);
-      this._createRenderData();
-      this.bumpVersion();
-    }
-  }
-  removeEventGroupById(eventGroupId) {
-    let index = -1;
-    this.eventGroups.forEach((item, idx) => {
-      if (item.id === eventGroupId) index = idx;
-    });
-    if (index !== -1) {
-      this.eventGroups.splice(index, 1);
-      this._createRenderData();
-      this.bumpVersion();
-    }
-  }
-  containsEventGroupId(eventGroupId) {
-    let index = -1;
-    this.eventGroups.forEach((item, idx) => {
-      if (item.id === eventGroupId) index = idx;
-    });
-    return index !== -1;
-  }
-  setEvents(events) {
-    this._validateEvents(events);
-    this.events = Array.from(events);
-    if (this.eventGroupsAutoGenerated) this._generateEventGroups();
-    if (this.config.recurringEventsEnabled) this._handleRecurringEvents();
-    this._createRenderData();
-    this.bumpVersion();
-  }
-  setScrollToSpecialDayjs(scrollToSpecialDayjs) {
-    if (this.config.scrollToSpecialDayjsEnabled) this.scrollToSpecialDayjs = scrollToSpecialDayjs;
-  }
-  prev() {
-    this._resolveDate(-1);
-    this.events = [];
-    this._createHeaders();
-    this._createRenderData();
-    this.bumpVersion();
-  }
-  next() {
-    this._resolveDate(1);
-    this.events = [];
-    this._createHeaders();
-    this._createRenderData();
-    this.bumpVersion();
-  }
-  setDate(date = dayjs(new Date())) {
-    this._resolveDate(0, date);
-    this.events = [];
-    this._createHeaders();
-    this._createRenderData();
-    this.bumpVersion();
-  }
-  setViewType(viewType = ViewType.Week, showAgenda = false, isEventPerspective = false) {
-    const previousShowAgenda = this.showAgenda;
-    const previousIsEventPerspective = this.isEventPerspective;
-    this.showAgenda = showAgenda;
-    this.isEventPerspective = isEventPerspective;
-    const isCustomView = viewType === ViewType.Custom || viewType === ViewType.Custom1 || viewType === ViewType.Custom2;
-    const isVerticalView = viewType === ViewType.VerticalResource;
-    if (!isCustomView && viewType !== ViewType.Day && !isVerticalView) {
-      this.cellUnit = CellUnit.Day;
-    } else if (viewType === ViewType.Day || isVerticalView) {
-      this.cellUnit = CellUnit.Hour;
-    }
-
-    // If showAgenda or isEventPerspective changed, force reload
-    if (previousShowAgenda !== showAgenda || previousIsEventPerspective !== isEventPerspective) {
-      this._shouldReloadViewType = true;
-    }
-    if (this.viewType !== viewType || this._shouldReloadViewType) {
-      let date = this.startDate;
-      if (viewType === ViewType.Custom || viewType === ViewType.Custom1 || viewType === ViewType.Custom2) {
+    resources;
+    events;
+    eventGroups;
+    eventGroupsAutoGenerated;
+    viewType;
+    cellUnit;
+    showAgenda;
+    isEventPerspective;
+    resizing;
+    scrollToSpecialDayjs;
+    documentWidth;
+    documentHeight;
+    schedulerHeaderHeight;
+    version;
+    localeDayjs;
+    config;
+    behaviors;
+    selectDate;
+    startDate;
+    endDate;
+    timeSlots;
+    headers;
+    renderData;
+    _shouldReloadViewType;
+    _batchCount;
+    _versionChangeCallback;
+    _pendingVersion;
+    constructor(date = dayjs(), viewType = ViewType.Week, showAgenda = false, isEventPerspective = false, newConfig = undefined, newBehaviors = undefined) {
+        this.resources = [];
+        this.events = [];
+        this.eventGroups = [];
+        this.eventGroupsAutoGenerated = true;
         this.viewType = viewType;
+        this.cellUnit = viewType === ViewType.Day || viewType === ViewType.VerticalResource ? CellUnit.Hour : CellUnit.Day;
+        this.showAgenda = showAgenda;
+        this.isEventPerspective = isEventPerspective;
+        this.resizing = false;
+        this.scrollToSpecialDayjs = false;
+        this.documentWidth = 0;
+        this.documentHeight = 0;
+        this.schedulerHeaderHeight = 0;
+        this._shouldReloadViewType = false;
+        this.version = 0;
+        this._batchCount = 0;
+        this._versionChangeCallback = null;
+        dayjs.extend(quarterOfYear);
+        dayjs.extend(weekday);
+        dayjs.extend(utc);
+        dayjs.extend(timezone);
+        dayjs.extend(isoWeek);
+        this.localeDayjs = this._createLocaleDayjs();
+        this.config = newConfig === undefined ? config : { ...config, ...newConfig };
+        this._updateLabelsFromI18n();
+        this._validateMinuteStep(this.config.minuteStep);
+        this.behaviors = newBehaviors === undefined ? behaviors : { ...behaviors, ...newBehaviors };
         this._resolveDate(0, date);
-      } else {
-        if (this.viewType < viewType) {
-          if (viewType === ViewType.Week) {
-            this.startDate = this.localeDayjs(new Date(date)).startOf('isoWeek');
-            this.endDate = this.localeDayjs(new Date(this.startDate)).endOf('isoWeek');
-          } else if (viewType === ViewType.Month) {
-            this.startDate = this.localeDayjs(new Date(date)).startOf('month');
-            this.endDate = this.localeDayjs(new Date(this.startDate)).endOf('month');
-          } else if (viewType === ViewType.Quarter) {
-            this.startDate = this.localeDayjs(new Date(date)).startOf('quarter');
-            this.endDate = this.localeDayjs(new Date(this.startDate)).endOf('quarter');
-          } else if (viewType === ViewType.Year) {
-            this.startDate = this.localeDayjs(new Date(date)).startOf('year');
-            this.endDate = this.localeDayjs(new Date(this.startDate)).endOf('year');
-          }
-        } else {
-          const start = this.localeDayjs(new Date(this.startDate));
-          const end = this.localeDayjs(new Date(this.endDate)).add(1, 'days');
-          if (this.selectDate !== undefined) {
-            const selectDate = this.localeDayjs(new Date(this.selectDate));
-            if (selectDate >= start && selectDate < end) {
-              date = this.selectDate;
+        this._createHeaders();
+        this._createRenderData();
+    }
+    // Per-instance dayjs: the locale is applied to each created date instead of the global dayjs
+    // singleton, so schedulers (and the host app) don't overwrite each other's locale (#146).
+    _createLocaleDayjs() {
+        let locale;
+        const create = (date, format, strict) => {
+            const d = dayjs(date, format, strict);
+            return locale ? d.locale(locale) : d;
+        };
+        function setLocale(preset) {
+            if (preset === undefined)
+                return locale || dayjs.locale();
+            // dayjs accepts a locale name or a locale object; resolve (and register) it once to a name
+            locale = dayjs().locale(preset).locale();
+            return localeDayjs;
+        }
+        // wall-clock `date` interpreted in IANA zone `zone` (instants / Dates / Dayjs are converted instead)
+        const tz = (date, zone) => {
+            const d = dayjs.tz(date, zone);
+            return locale ? d.locale(locale) : d;
+        };
+        const localeDayjs = Object.assign(create, { locale: setLocale, utc: dayjs.utc, tz });
+        return localeDayjs;
+    }
+    /**
+     * Update user-facing labels from the i18n provider
+     * This allows apps to provide localized labels via setLabelsProvider()
+     * @private
+     */
+    _updateLabelsFromI18n(locale) {
+        // Get labels from the i18n provider if available
+        const defaults = getDefaultLabels();
+        const applyIfProvided = (key, current) => {
+            const value = getLabel(key, locale);
+            if (value === undefined || value === null)
+                return current;
+            return value !== defaults[key] ? value : current;
+        };
+        this.config.resourceName = applyIfProvided('resourceName', this.config.resourceName);
+        this.config.taskName = applyIfProvided('taskName', this.config.taskName);
+        this.config.agendaViewHeader = applyIfProvided('agendaViewHeader', this.config.agendaViewHeader);
+        this.config.weekNumberLabel = applyIfProvided('weekNumberLabel', this.config.weekNumberLabel);
+    }
+    setVersionChangeNotifier(callback) {
+        this._versionChangeCallback = typeof callback === 'function' ? callback : null;
+    }
+    beginBatch() {
+        this._batchCount = (this._batchCount || 0) + 1;
+    }
+    endBatch() {
+        if (this._batchCount === undefined || this._batchCount <= 0) {
+            this._batchCount = 0;
+            console.warn('SchedulerData.endBatch called without a matching beginBatch');
+            return;
+        }
+        if (this._batchCount > 0) {
+            this._batchCount -= 1;
+            if (this._batchCount === 0 && this._pendingVersion !== undefined) {
+                const pendingVersion = this._pendingVersion;
+                this._pendingVersion = undefined;
+                if (typeof this._versionChangeCallback === 'function') {
+                    this._versionChangeCallback(pendingVersion);
+                }
+            }
+        }
+    }
+    bumpVersion() {
+        this.version += 1;
+        if (this._batchCount > 0) {
+            // Defer callback until batch ends
+            this._pendingVersion = this.version;
+        }
+        else if (typeof this._versionChangeCallback === 'function') {
+            this._versionChangeCallback(this.version);
+        }
+    }
+    getVersion() {
+        return this.version;
+    }
+    isVerticalResourceView() {
+        return this.viewType === ViewType.VerticalResource;
+    }
+    setSchedulerLocale(preset) {
+        if (!preset)
+            return;
+        this.localeDayjs.locale(preset);
+        this._updateLabelsFromI18n(preset);
+        this._shouldReloadViewType = true;
+        this.setViewType(this.viewType, this.showAgenda, this.isEventPerspective);
+    }
+    setResources(resources) {
+        this._validateResource(resources);
+        this.resources = Array.from(new Set(resources));
+        // vertical view builds its headers from the resources
+        if (this.isVerticalResourceView()) {
+            this._createHeaders();
+        }
+        this._createRenderData();
+        this.setScrollToSpecialDayjs(true);
+        this.bumpVersion();
+    }
+    setEventGroupsAutoGenerated(autoGenerated) {
+        this.eventGroupsAutoGenerated = autoGenerated;
+    }
+    // optional
+    setEventGroups(eventGroups) {
+        this._validateEventGroups(eventGroups);
+        this.eventGroups = Array.from(new Set(eventGroups));
+        this.eventGroupsAutoGenerated = false;
+        this._createRenderData();
+        this.setScrollToSpecialDayjs(true);
+        this.bumpVersion();
+    }
+    setMinuteStep(minuteStep) {
+        if (this.config.minuteStep !== minuteStep) {
+            this._validateMinuteStep(minuteStep);
+            this.config.minuteStep = minuteStep;
+            this._createHeaders();
+            this._createRenderData();
+            this.bumpVersion();
+        }
+    }
+    setUnderneathHeight(underneathHeight) {
+        if (underneathHeight >= 0 && this.config.underneathHeight !== underneathHeight) {
+            this.config.underneathHeight = underneathHeight;
+            this.bumpVersion();
+        }
+    }
+    getMinuteStepsInHour() {
+        return 60 / this.config.minuteStep;
+    }
+    addResource(resource) {
+        const existedResources = this.resources.filter(x => x.id === resource.id);
+        if (existedResources.length === 0) {
+            this.resources.push(resource);
+            if (this.isVerticalResourceView()) {
+                this._createHeaders();
             }
-          }
-          const now = this.localeDayjs();
-          if (now >= start && now < end) {
-            date = now.startOf('day');
-          }
-          if (viewType === ViewType.Day || viewType === ViewType.VerticalResource) {
-            this.startDate = this.localeDayjs(new Date(date)).startOf('day');
-            this.endDate = this.startDate;
+            this._createRenderData();
+            this.bumpVersion();
+        }
+    }
+    addEventGroup(eventGroup) {
+        const existedEventGroups = this.eventGroups.filter(x => x.id === eventGroup.id);
+        if (existedEventGroups.length === 0) {
+            this.eventGroups.push(eventGroup);
+            this._createRenderData();
+            this.bumpVersion();
+        }
+    }
+    removeEventGroupById(eventGroupId) {
+        let index = -1;
+        this.eventGroups.forEach((item, idx) => {
+            if (item.id === eventGroupId)
+                index = idx;
+        });
+        if (index !== -1) {
+            this.eventGroups.splice(index, 1);
+            this._createRenderData();
+            this.bumpVersion();
+        }
+    }
+    containsEventGroupId(eventGroupId) {
+        let index = -1;
+        this.eventGroups.forEach((item, idx) => {
+            if (item.id === eventGroupId)
+                index = idx;
+        });
+        return index !== -1;
+    }
+    setEvents(events) {
+        this._validateEvents(events);
+        this.events = Array.from(events);
+        if (this.eventGroupsAutoGenerated)
+            this._generateEventGroups();
+        if (this.config.recurringEventsEnabled)
+            this._handleRecurringEvents();
+        this._createRenderData();
+        this.bumpVersion();
+    }
+    setScrollToSpecialDayjs(scrollToSpecialDayjs) {
+        if (this.config.scrollToSpecialDayjsEnabled)
+            this.scrollToSpecialDayjs = scrollToSpecialDayjs;
+    }
+    prev() {
+        this._resolveDate(-1);
+        this.events = [];
+        this._createHeaders();
+        this._createRenderData();
+        this.bumpVersion();
+    }
+    next() {
+        this._resolveDate(1);
+        this.events = [];
+        this._createHeaders();
+        this._createRenderData();
+        this.bumpVersion();
+    }
+    setDate(date = dayjs(new Date())) {
+        this._resolveDate(0, date);
+        this.events = [];
+        this._createHeaders();
+        this._createRenderData();
+        this.bumpVersion();
+    }
+    setViewType(viewType = ViewType.Week, showAgenda = false, isEventPerspective = false) {
+        const previousShowAgenda = this.showAgenda;
+        const previousIsEventPerspective = this.isEventPerspective;
+        this.showAgenda = showAgenda;
+        this.isEventPerspective = isEventPerspective;
+        const isCustomView = viewType === ViewType.Custom || viewType === ViewType.Custom1 || viewType === ViewType.Custom2;
+        const isVerticalView = viewType === ViewType.VerticalResource;
+        if (!isCustomView && viewType !== ViewType.Day && !isVerticalView) {
+            this.cellUnit = CellUnit.Day;
+        }
+        else if (viewType === ViewType.Day || isVerticalView) {
             this.cellUnit = CellUnit.Hour;
-          } else if (viewType === ViewType.Week) {
-            this.startDate = this.localeDayjs(new Date(date)).startOf('isoWeek');
-            this.endDate = this.localeDayjs(new Date(this.startDate)).endOf('isoWeek');
-          } else if (viewType === ViewType.Month) {
-            this.startDate = this.localeDayjs(new Date(date)).startOf('month');
-            this.endDate = this.localeDayjs(new Date(this.startDate)).endOf('month');
-          } else if (viewType === ViewType.Quarter) {
-            this.startDate = this.localeDayjs(new Date(date)).startOf('quarter');
-            this.endDate = this.localeDayjs(new Date(this.startDate)).endOf('quarter');
-          }
         }
-        this.viewType = viewType;
-      }
-      this._shouldReloadViewType = false;
-      this.events = [];
-      this._createHeaders();
-      this._createRenderData();
-      this.setScrollToSpecialDayjs(true);
-      this.bumpVersion();
-    }
-  }
-  setSchedulerMaxHeight(newSchedulerMaxHeight) {
-    if (newSchedulerMaxHeight < 0) {
-      return;
-    }
-    if (this.config.schedulerMaxHeight !== newSchedulerMaxHeight) {
-      this.config.schedulerMaxHeight = newSchedulerMaxHeight;
-      this.bumpVersion();
-    }
-  }
-  isSchedulerResponsive() {
-    return !!this.config.schedulerWidth.endsWith && this.config.schedulerWidth.endsWith('%');
-  }
-  toggleExpandStatus(slotId) {
-    let slotEntered = false;
-    let slotIndent = -1;
-    let isExpanded = false;
-    let changed = false;
-    const expandedMap = new Map();
-    this.renderData.forEach(item => {
-      if (slotEntered === false) {
-        if (item.slotId === slotId && item.hasChildren) {
-          slotEntered = true;
-          isExpanded = !item.expanded;
-          item.expanded = isExpanded;
-          changed = true;
-          slotIndent = item.indent;
-          expandedMap.set(item.indent, {
-            expanded: item.expanded,
-            render: item.render
-          });
+        // If showAgenda or isEventPerspective changed, force reload
+        if (previousShowAgenda !== showAgenda || previousIsEventPerspective !== isEventPerspective) {
+            this._shouldReloadViewType = true;
+        }
+        if (this.viewType !== viewType || this._shouldReloadViewType) {
+            let date = this.startDate;
+            if (viewType === ViewType.Custom || viewType === ViewType.Custom1 || viewType === ViewType.Custom2) {
+                this.viewType = viewType;
+                this._resolveDate(0, date);
+            }
+            else {
+                if (this.viewType < viewType) {
+                    if (viewType === ViewType.Week) {
+                        this.startDate = this.localeDayjs(toDate(date)).startOf('isoWeek');
+                        this.endDate = this.localeDayjs(toDate(this.startDate)).endOf('isoWeek');
+                    }
+                    else if (viewType === ViewType.Month) {
+                        this.startDate = this.localeDayjs(toDate(date)).startOf('month');
+                        this.endDate = this.localeDayjs(toDate(this.startDate)).endOf('month');
+                    }
+                    else if (viewType === ViewType.Quarter) {
+                        this.startDate = this.localeDayjs(toDate(date)).startOf('quarter');
+                        this.endDate = this.localeDayjs(toDate(this.startDate)).endOf('quarter');
+                    }
+                    else if (viewType === ViewType.Year) {
+                        this.startDate = this.localeDayjs(toDate(date)).startOf('year');
+                        this.endDate = this.localeDayjs(toDate(this.startDate)).endOf('year');
+                    }
+                }
+                else {
+                    const start = this.localeDayjs(toDate(this.startDate));
+                    const end = this.localeDayjs(toDate(this.endDate)).add(1, 'days');
+                    if (this.selectDate !== undefined) {
+                        const selectDate = this.localeDayjs(toDate(this.selectDate));
+                        if (selectDate >= start && selectDate < end) {
+                            date = this.selectDate;
+                        }
+                    }
+                    const now = this.localeDayjs();
+                    if (now >= start && now < end) {
+                        date = now.startOf('day');
+                    }
+                    if (viewType === ViewType.Day || viewType === ViewType.VerticalResource) {
+                        this.startDate = this.localeDayjs(toDate(date)).startOf('day');
+                        this.endDate = this.startDate;
+                        this.cellUnit = CellUnit.Hour;
+                    }
+                    else if (viewType === ViewType.Week) {
+                        this.startDate = this.localeDayjs(toDate(date)).startOf('isoWeek');
+                        this.endDate = this.localeDayjs(toDate(this.startDate)).endOf('isoWeek');
+                    }
+                    else if (viewType === ViewType.Month) {
+                        this.startDate = this.localeDayjs(toDate(date)).startOf('month');
+                        this.endDate = this.localeDayjs(toDate(this.startDate)).endOf('month');
+                    }
+                    else if (viewType === ViewType.Quarter) {
+                        this.startDate = this.localeDayjs(toDate(date)).startOf('quarter');
+                        this.endDate = this.localeDayjs(toDate(this.startDate)).endOf('quarter');
+                    }
+                }
+                this.viewType = viewType;
+            }
+            this._shouldReloadViewType = false;
+            this.events = [];
+            this._createHeaders();
+            this._createRenderData();
+            this.setScrollToSpecialDayjs(true);
+            this.bumpVersion();
         }
-      } else if (item.indent > slotIndent) {
-        const expandStatus = expandedMap.get(item.indent - 1);
-        const newRender = expandStatus.expanded && expandStatus.render;
-        if (item.render !== newRender) {
-          item.render = newRender;
-          changed = true;
+    }
+    setSchedulerMaxHeight(newSchedulerMaxHeight) {
+        if (newSchedulerMaxHeight < 0) {
+            return;
         }
-        if (item.hasChildren) {
-          expandedMap.set(item.indent, {
-            expanded: item.expanded,
-            render: item.render
-          });
+        if (this.config.schedulerMaxHeight !== newSchedulerMaxHeight) {
+            this.config.schedulerMaxHeight = newSchedulerMaxHeight;
+            this.bumpVersion();
         }
-      } else {
-        slotEntered = false;
-      }
-    });
-    if (changed) {
-      this.bumpVersion();
-    }
-  }
-  isResourceViewResponsive() {
-    const resourceTableWidth = this.getResourceTableConfigWidth();
-    return !!resourceTableWidth.endsWith && resourceTableWidth.endsWith('%');
-  }
-  isContentViewResponsive() {
-    const contentCellWidth = this.getContentCellConfigWidth();
-    return !!contentCellWidth.endsWith && contentCellWidth.endsWith('%');
-  }
-  getSchedulerWidth() {
-    const baseWidth = this.documentWidth > 0 ? this.documentWidth : 0;
-    return this.isSchedulerResponsive() ? parseInt(baseWidth * Number(this.config.schedulerWidth.slice(0, -1)) / 100, 10) : this.config.schedulerWidth;
-  }
-  getSchedulerHeight() {
-    // Use the header height tracked in SchedulerData (set via _setSchedulerHeaderHeight)
-    const headerHeight = this.schedulerHeaderHeight || 0;
-    const underneathHeight = this.config.underneathHeight || 0;
-    const baseHeight = this.documentHeight - headerHeight - this.config.tableHeaderHeight - underneathHeight;
-    const validBaseHeight = baseHeight > 0 ? baseHeight : 0;
-    if (this.isSchedulerResponsive() && this.config.schedulerHeight?.endsWith?.('%')) {
-      return parseInt(validBaseHeight * Number(this.config.schedulerHeight.slice(0, -1)) / 100, 10);
-    }
-    // fallback to max height if set, else just use base height
-    return this.config.schedulerMaxHeight || validBaseHeight;
-  }
-
-  // configured resource column width in px (config may be a percentage of the scheduler width)
-  _getConfiguredResourceTableWidth() {
-    const resourceTableConfigWidth = this.getResourceTableConfigWidth();
-    return this.isResourceViewResponsive() ? parseInt(this.getSchedulerWidth() * Number(resourceTableConfigWidth.slice(0, -1)) / 100, 10) : resourceTableConfigWidth;
-  }
-  getResourceTableWidth() {
-    const schedulerWidth = this.getSchedulerWidth();
-    let resourceTableWidth = this._getConfiguredResourceTableWidth();
-    // only the few px left after the cells are stretched go to the resource column
-    if (this.isSchedulerResponsive() && this.getContentTableWidth() + resourceTableWidth < schedulerWidth) resourceTableWidth = schedulerWidth - this.getContentTableWidth();
-    return resourceTableWidth;
-  }
-  getContentCellWidth() {
-    const contentCellConfigWidth = this.getContentCellConfigWidth();
-    const schedulerWidth = this.getSchedulerWidth();
-    const cellWidth = this.isContentViewResponsive() ? parseInt(schedulerWidth * Number(contentCellConfigWidth.slice(0, -1)) / 100, 10) : contentCellConfigWidth;
-
-    // stretch the cells to fill the container instead of widening the resource column
-    if (this.isSchedulerResponsive() && !this.showAgenda && this.headers?.length) {
-      const resourceWidth = this.config.resourceViewEnabled === false ? 0 : this._getConfiguredResourceTableWidth();
-      const fillWidth = Math.floor((schedulerWidth - resourceWidth) / this.headers.length);
-      return Math.max(cellWidth, fillWidth);
-    }
-    return cellWidth;
-  }
-  getContentTableWidth() {
-    return this.headers.length * this.getContentCellWidth();
-  }
-  getScrollToSpecialDayjs() {
-    if (this.config.scrollToSpecialDayjsEnabled) return this.scrollToSpecialDayjs;
-    return false;
-  }
-  getSlots() {
-    return this.isEventPerspective ? this.eventGroups : this.resources;
-  }
-  getSlotById(slotId) {
-    const slots = this.getSlots();
-    let slot;
-    slots.forEach(item => {
-      if (item.id === slotId) slot = item;
-    });
-    return slot;
-  }
-  getResourceById(resourceId) {
-    let resource;
-    this.resources.forEach(item => {
-      if (item.id === resourceId) resource = item;
-    });
-    return resource;
-  }
-
-  // height of the optional group rows (month / week number) rendered above the main header row
-  getHeaderGroupRowsHeight() {
-    const {
-      showMonthRow,
-      monthRowHeight = 24,
-      showWeekNumber,
-      weekNumberRowHeight = 24
-    } = this.config;
-    return (showMonthRow ? monthRowHeight : 0) + (showWeekNumber ? weekNumberRowHeight : 0);
-  }
-  getTableHeaderHeight() {
-    return this.config.tableHeaderHeight;
-  }
-  getSchedulerContentDesiredHeight() {
-    let height = 0;
-    this.renderData.forEach(item => {
-      if (item.render) height += item.rowHeight;
-    });
-    return height;
-  }
-  getCellMaxEvents() {
-    const viewConfigMap = {
-      [ViewType.Week]: 'weekMaxEvents',
-      [ViewType.Day]: 'dayMaxEvents',
-      [ViewType.Month]: 'monthMaxEvents',
-      [ViewType.Year]: 'yearMaxEvents',
-      [ViewType.Quarter]: 'quarterMaxEvents'
-    };
-    const configProperty = viewConfigMap[this.viewType] || 'customMaxEvents';
-    return this.config[configProperty];
-  }
-  getCalendarPopoverLocale() {
-    return this.calendarPopoverLocale;
-  }
-  getSelectedDate() {
-    return this.selectDate.format(DATE_FORMAT);
-  }
-  getViewStartDate() {
-    return this.startDate;
-  }
-  getViewEndDate() {
-    return this.endDate;
-  }
-  getViewDates() {
-    return {
-      startDate: this.startDate,
-      endDate: this.endDate
-    };
-  }
-  getDateLabel() {
-    const start = this.localeDayjs(new Date(this.startDate));
-    const end = this.localeDayjs(new Date(this.endDate));
-    let dateLabel = start.format('LL');
-    if (start !== end) dateLabel = `${start.format('LL')}-${end.format('LL')}`;
-    if (this.behaviors.getDateLabelFunc) dateLabel = this.behaviors.getDateLabelFunc(this, this.viewType, this.startDate, this.endDate);
-    return dateLabel;
-  }
-  addEvent(newEvent) {
-    this._attachEvent(newEvent);
-    if (this.eventGroupsAutoGenerated) this._generateEventGroups();
-    this._createRenderData();
-    this.bumpVersion();
-  }
-  updateEventStart(event, newStart) {
-    this._detachEvent(event);
-    event.start = newStart;
-    this._attachEvent(event);
-    this._createRenderData();
-    this.bumpVersion();
-  }
-  updateEventEnd(event, newEnd) {
-    event.end = newEnd;
-    this._createRenderData();
-    this.bumpVersion();
-  }
-  swapEvent(eventSource, eventDest) {
-    // Swap group or resource IDs
-    if (this.isEventPerspective) {
-      [eventSource.groupId, eventDest.groupId] = [eventDest.groupId, eventSource.groupId];
-      [eventSource.groupName, eventDest.groupName] = [eventDest.groupName, eventSource.groupName];
-    } else {
-      [eventSource.resourceId, eventDest.resourceId] = [eventDest.resourceId, eventSource.resourceId];
-    }
-
-    // Swap start and end times
-    [eventSource.start, eventDest.start] = [eventDest.start, eventSource.start];
-    [eventSource.end, eventDest.end] = [eventDest.end, eventSource.end];
-
-    // Update the events
-    this._detachEvent(eventSource);
-    this._detachEvent(eventDest);
-    this._attachEvent(eventSource);
-    this._attachEvent(eventDest);
-    this._createRenderData();
-    this.bumpVersion();
-  }
-  swapEvent2(eventSource, eventDest) {
-    const tempEventSource = {
-      ...eventSource
-    };
-    const tempEventDest = {
-      ...eventDest
-    };
-    this._detachEvent(eventSource);
-    this._detachEvent(eventDest);
-    if (this.isEventPerspective) {
-      tempEventSource.groupId = eventDest.groupId;
-      tempEventSource.groupName = eventDest.groupName;
-      tempEventDest.groupId = eventSource.groupId;
-      tempEventDest.groupName = eventSource.groupName;
-    } else {
-      tempEventSource.resourceId = eventDest.resourceId;
-      tempEventDest.resourceId = eventSource.resourceId;
-    }
-    tempEventSource.end = eventDest.end;
-    tempEventSource.start = eventDest.start;
-    tempEventDest.end = eventSource.end;
-    tempEventDest.start = eventSource.start;
-    this._attachEvent(tempEventSource);
-    this._attachEvent(tempEventDest);
-    this._createRenderData();
-    this.bumpVersion();
-  }
-  moveEvent(event, newSlotId, newSlotName, newStart, newEnd) {
-    this._detachEvent(event);
-    if (this.isEventPerspective) {
-      event.groupId = newSlotId;
-      event.groupName = newSlotName;
-    } else event.resourceId = newSlotId;
-    event.end = newEnd;
-    event.start = newStart;
-    this._attachEvent(event);
-    this._createRenderData();
-    this.bumpVersion();
-  }
-  isEventInTimeWindow(eventStart, eventEnd, windowStart, windowEnd) {
-    return eventStart < windowEnd && eventEnd > windowStart;
-  }
-  removeEvent(event) {
-    const index = this.events.indexOf(event);
-    if (index !== -1) {
-      this.events.splice(index, 1);
-      this._createRenderData();
-      this.bumpVersion();
-    }
-  }
-  removeEventById(eventId) {
-    let index = -1;
-    this.events.forEach((item, idx) => {
-      if (item.id === eventId) index = idx;
-    });
-    if (index !== -1) {
-      this.events.splice(index, 1);
-      this._createRenderData();
-      this.bumpVersion();
-    }
-  }
-  getResourceTableConfigWidth() {
-    if (this.showAgenda) {
-      return this.config.agendaResourceTableWidth;
-    }
-    const viewConfigMap = {
-      [ViewType.Week]: 'weekResourceTableWidth',
-      [ViewType.Day]: 'dayResourceTableWidth',
-      [ViewType.Month]: 'monthResourceTableWidth',
-      [ViewType.Year]: 'yearResourceTableWidth',
-      [ViewType.Quarter]: 'quarterResourceTableWidth',
-      [ViewType.VerticalResource]: 'customResourceTableWidth'
-    };
-    const configProperty = viewConfigMap[this.viewType] || 'customResourceTableWidth';
-    return this.config[configProperty];
-  }
-  getContentCellConfigWidth() {
-    const viewConfigMap = {
-      [ViewType.Week]: 'weekCellWidth',
-      [ViewType.Day]: 'dayCellWidth',
-      [ViewType.Month]: 'monthCellWidth',
-      [ViewType.Year]: 'yearCellWidth',
-      [ViewType.Quarter]: 'quarterCellWidth',
-      [ViewType.VerticalResource]: 'customCellWidth'
-    };
-    const configProperty = viewConfigMap[this.viewType] || 'customCellWidth';
-    return this.config[configProperty];
-  }
-  _setDocumentWidth(documentWidth) {
-    if (documentWidth >= 0 && documentWidth !== this.documentWidth) {
-      this.documentWidth = documentWidth;
-      this.bumpVersion();
-    }
-  }
-  _setDocumentHeight(documentHeight) {
-    if (documentHeight >= 0 && documentHeight !== this.documentHeight) {
-      this.documentHeight = documentHeight;
-      this.bumpVersion();
-    }
-  }
-  _setSchedulerHeaderHeight(schedulerHeaderHeight) {
-    if (schedulerHeaderHeight >= 0 && schedulerHeaderHeight !== this.schedulerHeaderHeight) {
-      this.schedulerHeaderHeight = schedulerHeaderHeight;
-      this.bumpVersion();
-    }
-  }
-  _detachEvent(event) {
-    const index = this.events.indexOf(event);
-    if (index !== -1) this.events.splice(index, 1);
-  }
-  _attachEvent(event) {
-    let pos = 0;
-    const eventStart = this.localeDayjs(new Date(event.start));
-    this.events.forEach((item, index) => {
-      const start = this.localeDayjs(new Date(item.start));
-      if (eventStart >= start) pos = index + 1;
-    });
-    this.events.splice(pos, 0, event);
-  }
-  _handleRecurringEvents() {
-    const recurringEvents = this.events.filter(x => !!x.rrule);
-    recurringEvents.forEach(item => {
-      this._detachEvent(item);
-    });
-    recurringEvents.forEach(item => {
-      const windowStart = this.startDate;
-      const windowEnd = this.endDate.add(1, 'days');
-      const oldStart = this.localeDayjs(new Date(item.start));
-      const oldEnd = this.localeDayjs(new Date(item.end));
-      let rule = rrulestr(item.rrule);
-      let oldDtstart;
-      const oldUntil = rule.origOptions.until || windowEnd.toDate();
-      if (rule.origOptions.dtstart) {
-        oldDtstart = this.localeDayjs(new Date(rule.origOptions.dtstart));
-      }
-      // rule.origOptions.dtstart = oldStart.toDate();
-      if (windowEnd < oldUntil) {
-        rule.origOptions.until = windowEnd.toDate();
-      }
-
-      // reload
-      rule = rrulestr(rule.toString());
-      if (item.exdates || item.exrule) {
-        const rruleSet = new RRuleSet();
-        rruleSet.rrule(rule);
-        if (item.exrule) {
-          rruleSet.exrule(rrulestr(item.exrule));
+    }
+    isSchedulerResponsive() {
+        return isPercent(this.config.schedulerWidth);
+    }
+    toggleExpandStatus(slotId) {
+        let slotEntered = false;
+        let slotIndent = -1;
+        let isExpanded = false;
+        let changed = false;
+        const expandedMap = new Map();
+        this.renderData.forEach(item => {
+            if (slotEntered === false) {
+                if (item.slotId === slotId && item.hasChildren) {
+                    slotEntered = true;
+                    isExpanded = !item.expanded;
+                    item.expanded = isExpanded;
+                    changed = true;
+                    slotIndent = item.indent;
+                    expandedMap.set(item.indent, {
+                        expanded: item.expanded,
+                        render: item.render,
+                    });
+                }
+            }
+            else if (item.indent > slotIndent) {
+                const expandStatus = expandedMap.get(item.indent - 1);
+                const newRender = expandStatus.expanded && expandStatus.render;
+                if (item.render !== newRender) {
+                    item.render = newRender;
+                    changed = true;
+                }
+                if (item.hasChildren) {
+                    expandedMap.set(item.indent, {
+                        expanded: item.expanded,
+                        render: item.render,
+                    });
+                }
+            }
+            else {
+                slotEntered = false;
+            }
+        });
+        if (changed) {
+            this.bumpVersion();
         }
-        if (item.exdates) {
-          item.exdates.forEach(exdate => {
-            rruleSet.exdate(this.localeDayjs(exdate).toDate());
-          });
+    }
+    isResourceViewResponsive() {
+        return isPercent(this.getResourceTableConfigWidth());
+    }
+    isContentViewResponsive() {
+        return isPercent(this.getContentCellConfigWidth());
+    }
+    getSchedulerWidth() {
+        const baseWidth = this.documentWidth > 0 ? this.documentWidth : 0;
+        return this.isSchedulerResponsive()
+            ? percentOf(baseWidth, this.config.schedulerWidth)
+            : asPx(this.config.schedulerWidth);
+    }
+    getSchedulerHeight() {
+        // Use the header height tracked in SchedulerData (set via _setSchedulerHeaderHeight)
+        const headerHeight = this.schedulerHeaderHeight || 0;
+        const underneathHeight = this.config.underneathHeight || 0;
+        const baseHeight = this.documentHeight - headerHeight - this.config.tableHeaderHeight - underneathHeight;
+        const validBaseHeight = baseHeight > 0 ? baseHeight : 0;
+        const { schedulerHeight } = this.config;
+        if (this.isSchedulerResponsive() && schedulerHeight !== undefined && isPercent(schedulerHeight)) {
+            return percentOf(validBaseHeight, schedulerHeight);
         }
-        rule = rruleSet;
-      }
-      const all = rule.between(new Date(windowStart), new Date(windowEnd));
-      all.forEach((time, index) => {
-        const newEvent = {
-          ...item,
-          recurringEventId: item.id,
-          recurringEventStart: item.start,
-          recurringEventEnd: item.end,
-          id: `${item.id}-${index}`,
-          start: rule.origOptions.tzid ? this.localeDayjs.utc(time).utcOffset(this.localeDayjs(new Date()).utcOffset(), true).format(DATETIME_FORMAT) : this.localeDayjs(new Date(time)).format(DATETIME_FORMAT),
-          end: rule.origOptions.tzid ? this.localeDayjs.utc(time).utcOffset(this.localeDayjs(new Date()).utcOffset(), true).add(oldEnd.diff(oldStart), 'ms').add(this.localeDayjs(new Date(oldUntil)).utcOffset() - this.localeDayjs(new Date(item.start)).utcOffset(), 'm').format(DATETIME_FORMAT) : this.localeDayjs(new Date(time)).add(oldEnd.diff(oldStart), 'ms').format(DATETIME_FORMAT)
+        // fallback to max height if set, else just use base height
+        return this.config.schedulerMaxHeight || validBaseHeight;
+    }
+    // configured resource column width in px (config may be a percentage of the scheduler width)
+    _getConfiguredResourceTableWidth() {
+        const resourceTableConfigWidth = this.getResourceTableConfigWidth();
+        return this.isResourceViewResponsive()
+            ? percentOf(this.getSchedulerWidth(), resourceTableConfigWidth)
+            : asPx(resourceTableConfigWidth);
+    }
+    getResourceTableWidth() {
+        const schedulerWidth = this.getSchedulerWidth();
+        let resourceTableWidth = this._getConfiguredResourceTableWidth();
+        // only the few px left after the cells are stretched go to the resource column
+        if (this.isSchedulerResponsive() && this.getContentTableWidth() + resourceTableWidth < schedulerWidth)
+            resourceTableWidth = schedulerWidth - this.getContentTableWidth();
+        return resourceTableWidth;
+    }
+    getContentCellWidth() {
+        const contentCellConfigWidth = this.getContentCellConfigWidth();
+        const schedulerWidth = this.getSchedulerWidth();
+        const cellWidth = this.isContentViewResponsive()
+            ? percentOf(schedulerWidth, contentCellConfigWidth)
+            : asPx(contentCellConfigWidth);
+        // stretch the cells to fill the container instead of widening the resource column
+        if (this.isSchedulerResponsive() && !this.showAgenda && this.headers?.length) {
+            const resourceWidth = this.config.resourceViewEnabled === false ? 0 : this._getConfiguredResourceTableWidth();
+            const fillWidth = Math.floor((schedulerWidth - resourceWidth) / this.headers.length);
+            return Math.max(cellWidth, fillWidth);
+        }
+        return cellWidth;
+    }
+    getContentTableWidth() {
+        return this.headers.length * this.getContentCellWidth();
+    }
+    getScrollToSpecialDayjs() {
+        if (this.config.scrollToSpecialDayjsEnabled)
+            return this.scrollToSpecialDayjs;
+        return false;
+    }
+    getSlots() {
+        return this.isEventPerspective ? this.eventGroups : this.resources;
+    }
+    getSlotById(slotId) {
+        const slots = this.getSlots();
+        let slot = undefined;
+        slots.forEach(item => {
+            if (item.id === slotId)
+                slot = item;
+        });
+        return slot;
+    }
+    getResourceById(resourceId) {
+        let resource = undefined;
+        this.resources.forEach(item => {
+            if (item.id === resourceId)
+                resource = item;
+        });
+        return resource;
+    }
+    // height of the optional group rows (month / week number) rendered above the main header row
+    getHeaderGroupRowsHeight() {
+        const { showMonthRow, monthRowHeight = 24, showWeekNumber, weekNumberRowHeight = 24 } = this.config;
+        return (showMonthRow ? monthRowHeight : 0) + (showWeekNumber ? weekNumberRowHeight : 0);
+    }
+    getTableHeaderHeight() {
+        return this.config.tableHeaderHeight;
+    }
+    getSchedulerContentDesiredHeight() {
+        let height = 0;
+        this.renderData.forEach(item => {
+            if (item.render)
+                height += item.rowHeight;
+        });
+        return height;
+    }
+    getCellMaxEvents() {
+        const viewConfigMap = {
+            [ViewType.Week]: 'weekMaxEvents',
+            [ViewType.Day]: 'dayMaxEvents',
+            [ViewType.Month]: 'monthMaxEvents',
+            [ViewType.Year]: 'yearMaxEvents',
+            [ViewType.Quarter]: 'quarterMaxEvents',
         };
-        const eventStart = normalizeEventStart(newEvent.start);
-        const eventEnd = normalizeEventEnd(newEvent.end);
-        if (this.isEventInTimeWindow(eventStart, eventEnd, windowStart, windowEnd) && (!oldDtstart || eventStart >= oldDtstart)) {
-          this._attachEvent(newEvent);
+        const configProperty = viewConfigMap[this.viewType] || 'customMaxEvents';
+        return this.config[configProperty];
+    }
+    getSelectedDate() {
+        return this.selectDate.format(DATE_FORMAT);
+    }
+    getViewStartDate() {
+        return this.startDate;
+    }
+    getViewEndDate() {
+        return this.endDate;
+    }
+    getViewDates() {
+        return {
+            startDate: this.startDate,
+            endDate: this.endDate,
+        };
+    }
+    getDateLabel() {
+        const start = this.localeDayjs(toDate(this.startDate));
+        const end = this.localeDayjs(toDate(this.endDate));
+        let dateLabel = start.format('LL');
+        if (start !== end)
+            dateLabel = `${start.format('LL')}-${end.format('LL')}`;
+        if (this.behaviors.getDateLabelFunc)
+            dateLabel = this.behaviors.getDateLabelFunc(this, this.viewType, this.startDate, this.endDate);
+        return dateLabel;
+    }
+    addEvent(newEvent) {
+        this._attachEvent(newEvent);
+        if (this.eventGroupsAutoGenerated)
+            this._generateEventGroups();
+        this._createRenderData();
+        this.bumpVersion();
+    }
+    updateEventStart(event, newStart) {
+        this._detachEvent(event);
+        event.start = newStart;
+        this._attachEvent(event);
+        this._createRenderData();
+        this.bumpVersion();
+    }
+    updateEventEnd(event, newEnd) {
+        event.end = newEnd;
+        this._createRenderData();
+        this.bumpVersion();
+    }
+    swapEvent(eventSource, eventDest) {
+        // Swap group or resource IDs
+        if (this.isEventPerspective) {
+            [eventSource.groupId, eventDest.groupId] = [eventDest.groupId, eventSource.groupId];
+            [eventSource.groupName, eventDest.groupName] = [eventDest.groupName, eventSource.groupName];
         }
-      });
-    });
-  }
-  _resolveDate(num, date = undefined) {
-    if (date !== undefined) {
-      this.selectDate = this.localeDayjs(date);
-    }
-    const setStartAndEndDates = unit => {
-      this.startDate = date !== undefined ? this.selectDate.startOf(unit) : this.startDate.add(num, `${unit}s`);
-      this.endDate = this.startDate.endOf(unit);
-    };
-    switch (this.viewType) {
-      case ViewType.Week:
-        if (date !== undefined) {
-          this.startDate = this.selectDate.startOf('isoWeek');
-        } else {
-          this.startDate = this.startDate.add(num, 'weeks');
+        else {
+            [eventSource.resourceId, eventDest.resourceId] = [eventDest.resourceId, eventSource.resourceId];
         }
-        this.endDate = this.startDate.endOf('isoWeek');
-        break;
-      case ViewType.Day:
-      case ViewType.VerticalResource:
-        this.startDate = (date !== undefined ? this.selectDate : this.startDate.add(num, 'days')).startOf('day');
-        this.endDate = this.startDate;
-        break;
-      case ViewType.Month:
-        setStartAndEndDates('month');
-        break;
-      case ViewType.Quarter:
-        setStartAndEndDates('quarter');
-        break;
-      case ViewType.Year:
-        setStartAndEndDates('year');
-        break;
-      case ViewType.Custom:
-      case ViewType.Custom1:
-      case ViewType.Custom2:
-        if (this.behaviors.getCustomDateFunc !== undefined) {
-          const customDate = this.behaviors.getCustomDateFunc(this, num, date);
-          this.startDate = this.localeDayjs(customDate.startDate);
-          this.endDate = this.localeDayjs(customDate.endDate);
-          if (customDate.cellUnit) {
-            this.cellUnit = customDate.cellUnit;
-          }
-        } else {
-          throw new Error('This is a custom view type, set behaviors.getCustomDateFunc func ' + 'to resolve the time window (startDate and endDate) yourself');
+        // Swap start and end times
+        [eventSource.start, eventDest.start] = [eventDest.start, eventSource.start];
+        [eventSource.end, eventDest.end] = [eventDest.end, eventSource.end];
+        // Update the events
+        this._detachEvent(eventSource);
+        this._detachEvent(eventDest);
+        this._attachEvent(eventSource);
+        this._attachEvent(eventDest);
+        this._createRenderData();
+        this.bumpVersion();
+    }
+    swapEvent2(eventSource, eventDest) {
+        const tempEventSource = { ...eventSource };
+        const tempEventDest = { ...eventDest };
+        this._detachEvent(eventSource);
+        this._detachEvent(eventDest);
+        if (this.isEventPerspective) {
+            tempEventSource.groupId = eventDest.groupId;
+            tempEventSource.groupName = eventDest.groupName;
+            tempEventDest.groupId = eventSource.groupId;
+            tempEventDest.groupName = eventSource.groupName;
         }
-        break;
-      default:
-        break;
-    }
-  }
-  _createHeaders() {
-    const timeSlots = [];
-    let start = this.localeDayjs(new Date(this.startDate));
-    let end = this.localeDayjs(new Date(this.endDate));
-    let header = start;
-    const width = this.getContentCellWidth();
-    if (this.showAgenda) {
-      timeSlots.push({
-        time: header.format(DATETIME_FORMAT),
-        nonWorkingTime: false
-      });
-    } else if (this.cellUnit === CellUnit.Hour) {
-      if (start.hour() === 0) {
-        start = start.hour(this.config.dayStartFrom);
-      }
-      if (end.hour() === 0) {
-        end = end.hour(this.config.dayStopTo);
-      }
-      header = start;
-      let prevHour = -1;
-      while (header >= start && header <= end) {
-        // prevent doubled hours on time change
-        if (header.hour() === prevHour) {
-          header = header.add(1, 'hours');
-          continue;
+        else {
+            tempEventSource.resourceId = eventDest.resourceId;
+            tempEventDest.resourceId = eventSource.resourceId;
         }
-        prevHour = header.hour();
-        const minuteSteps = this.getMinuteStepsInHour();
-        for (let i = 0; i < minuteSteps; i += 1) {
-          const hour = header.hour();
-          if (hour >= this.config.dayStartFrom && hour <= this.config.dayStopTo) {
-            const time = header.format(DATETIME_FORMAT);
-            const nonWorkingTime = this.behaviors.isNonWorkingTimeFunc(this, time);
-            timeSlots.push({
-              time,
-              nonWorkingTime
-            });
-          }
-          header = header.add(this.config.minuteStep, 'minutes');
+        tempEventSource.end = eventDest.end;
+        tempEventSource.start = eventDest.start;
+        tempEventDest.end = eventSource.end;
+        tempEventDest.start = eventSource.start;
+        this._attachEvent(tempEventSource);
+        this._attachEvent(tempEventDest);
+        this._createRenderData();
+        this.bumpVersion();
+    }
+    moveEvent(event, newSlotId, newSlotName, newStart, newEnd) {
+        this._detachEvent(event);
+        if (this.isEventPerspective) {
+            event.groupId = newSlotId;
+            event.groupName = newSlotName;
+        }
+        else
+            event.resourceId = newSlotId;
+        event.end = newEnd;
+        event.start = newStart;
+        this._attachEvent(event);
+        this._createRenderData();
+        this.bumpVersion();
+    }
+    isEventInTimeWindow(eventStart, eventEnd, windowStart, windowEnd) {
+        return eventStart < windowEnd && eventEnd > windowStart;
+    }
+    removeEvent(event) {
+        const index = this.events.indexOf(event);
+        if (index !== -1) {
+            this.events.splice(index, 1);
+            this._createRenderData();
+            this.bumpVersion();
         }
-      }
-    } else if (this.cellUnit === CellUnit.Day) {
-      while (header >= start && header <= end) {
-        const time = header.format(DATETIME_FORMAT);
-        const style = {
-          width,
-          minWidth: width
+    }
+    removeEventById(eventId) {
+        let index = -1;
+        this.events.forEach((item, idx) => {
+            if (item.id === eventId)
+                index = idx;
+        });
+        if (index !== -1) {
+            this.events.splice(index, 1);
+            this._createRenderData();
+            this.bumpVersion();
+        }
+    }
+    getResourceTableConfigWidth() {
+        if (this.showAgenda) {
+            return this.config.agendaResourceTableWidth;
+        }
+        const viewConfigMap = {
+            [ViewType.Week]: 'weekResourceTableWidth',
+            [ViewType.Day]: 'dayResourceTableWidth',
+            [ViewType.Month]: 'monthResourceTableWidth',
+            [ViewType.Year]: 'yearResourceTableWidth',
+            [ViewType.Quarter]: 'quarterResourceTableWidth',
+            [ViewType.VerticalResource]: 'customResourceTableWidth',
         };
-        const dayOfWeek = header.day();
-        if (this.config.displayWeekend || dayOfWeek !== 0 && dayOfWeek !== 6) {
-          const nonWorkingTime = this.behaviors.isNonWorkingTimeFunc(this, time);
-          timeSlots.push({
-            time,
-            nonWorkingTime,
-            style
-          });
+        const configProperty = viewConfigMap[this.viewType] || 'customResourceTableWidth';
+        return this.config[configProperty];
+    }
+    getContentCellConfigWidth() {
+        const viewConfigMap = {
+            [ViewType.Week]: 'weekCellWidth',
+            [ViewType.Day]: 'dayCellWidth',
+            [ViewType.Month]: 'monthCellWidth',
+            [ViewType.Year]: 'yearCellWidth',
+            [ViewType.Quarter]: 'quarterCellWidth',
+            [ViewType.VerticalResource]: 'customCellWidth',
+        };
+        const configProperty = viewConfigMap[this.viewType] || 'customCellWidth';
+        return this.config[configProperty];
+    }
+    _setDocumentWidth(documentWidth) {
+        if (documentWidth >= 0 && documentWidth !== this.documentWidth) {
+            this.documentWidth = documentWidth;
+            this.bumpVersion();
+        }
+    }
+    _setDocumentHeight(documentHeight) {
+        if (documentHeight >= 0 && documentHeight !== this.documentHeight) {
+            this.documentHeight = documentHeight;
+            this.bumpVersion();
+        }
+    }
+    _setSchedulerHeaderHeight(schedulerHeaderHeight) {
+        if (schedulerHeaderHeight >= 0 && schedulerHeaderHeight !== this.schedulerHeaderHeight) {
+            this.schedulerHeaderHeight = schedulerHeaderHeight;
+            this.bumpVersion();
         }
-        header = header.add(1, 'days');
-      }
-    } else if (this.cellUnit === CellUnit.Week) {
-      while (header >= start && header <= end) {
-        const time = header.format(DATE_FORMAT);
-        timeSlots.push({
-          time
+    }
+    _detachEvent(event) {
+        const index = this.events.indexOf(event);
+        if (index !== -1)
+            this.events.splice(index, 1);
+    }
+    _attachEvent(event) {
+        let pos = 0;
+        const eventStart = this.localeDayjs(new Date(event.start));
+        this.events.forEach((item, index) => {
+            const start = this.localeDayjs(new Date(item.start));
+            if (eventStart >= start)
+                pos = index + 1;
         });
-        header = header.add(1, 'weeks').startOf('isoWeek');
-      }
-    } else if (this.cellUnit === CellUnit.Month) {
-      while (header >= start && header <= end) {
-        const time = header.format(DATE_FORMAT);
-        timeSlots.push({
-          time
+        this.events.splice(pos, 0, event);
+    }
+    _handleRecurringEvents() {
+        const recurringEvents = this.events.filter((x) => !!x.rrule);
+        recurringEvents.forEach(item => {
+            this._detachEvent(item);
         });
-        header = header.add(1, 'months').startOf('month');
-      }
-    } else if (this.cellUnit === CellUnit.Quarter) {
-      while (header >= start && header <= end) {
-        const time = header.format(DATE_FORMAT);
-        timeSlots.push({
-          time
+        recurringEvents.forEach(item => {
+            const windowStart = this.startDate;
+            const windowEnd = this.endDate.add(1, 'days');
+            const oldStart = this.localeDayjs(new Date(item.start));
+            const oldEnd = this.localeDayjs(new Date(item.end));
+            let rule = rrulestr(item.rrule);
+            let oldDtstart;
+            const oldUntil = rule.origOptions.until || windowEnd.toDate();
+            if (rule.origOptions.dtstart) {
+                oldDtstart = this.localeDayjs(new Date(rule.origOptions.dtstart));
+            }
+            // rule.origOptions.dtstart = oldStart.toDate();
+            if (windowEnd.valueOf() < oldUntil.valueOf()) {
+                rule.origOptions.until = windowEnd.toDate();
+            }
+            // reload
+            rule = rrulestr(rule.toString());
+            if (item.exdates || item.exrule) {
+                const rruleSet = new RRuleSet();
+                rruleSet.rrule(rule);
+                if (item.exrule) {
+                    rruleSet.exrule(rrulestr(item.exrule));
+                }
+                if (item.exdates) {
+                    item.exdates.forEach(exdate => {
+                        rruleSet.exdate(this.localeDayjs(exdate).toDate());
+                    });
+                }
+                rule = rruleSet;
+            }
+            const all = rule.between(toDate(windowStart), toDate(windowEnd));
+            all.forEach((time, index) => {
+                const newEvent = {
+                    ...item,
+                    recurringEventId: item.id,
+                    recurringEventStart: item.start,
+                    recurringEventEnd: item.end,
+                    id: `${item.id}-${index}`,
+                    start: rule.origOptions.tzid
+                        ? this.localeDayjs
+                            .utc(time)
+                            .utcOffset(this.localeDayjs(new Date()).utcOffset(), true)
+                            .format(DATETIME_FORMAT)
+                        : this.localeDayjs(new Date(time)).format(DATETIME_FORMAT),
+                    end: rule.origOptions.tzid
+                        ? this.localeDayjs
+                            .utc(time)
+                            .utcOffset(this.localeDayjs(new Date()).utcOffset(), true)
+                            .add(oldEnd.diff(oldStart), 'ms')
+                            .add(this.localeDayjs(new Date(oldUntil)).utcOffset() - this.localeDayjs(new Date(item.start)).utcOffset(), 'm')
+                            .format(DATETIME_FORMAT)
+                        : this.localeDayjs(new Date(time)).add(oldEnd.diff(oldStart), 'ms').format(DATETIME_FORMAT),
+                };
+                const eventStart = normalizeEventStart(newEvent.start);
+                const eventEnd = normalizeEventEnd(newEvent.end);
+                if (this.isEventInTimeWindow(eventStart, eventEnd, windowStart, windowEnd) &&
+                    (!oldDtstart || eventStart >= oldDtstart)) {
+                    this._attachEvent(newEvent);
+                }
+            });
         });
-        header = header.add(1, 'quarters').startOf('quarter');
-      }
-    } else if (this.cellUnit === CellUnit.Year) {
-      while (header >= start && header <= end) {
-        const time = header.format(DATE_FORMAT);
-        timeSlots.push({
-          time
+    }
+    _resolveDate(num, date = undefined) {
+        if (date !== undefined) {
+            this.selectDate = this.localeDayjs(date);
+        }
+        const setStartAndEndDates = (unit) => {
+            this.startDate = date !== undefined ? this.selectDate.startOf(unit) : this.startDate.add(num, `${unit}s`);
+            this.endDate = this.startDate.endOf(unit);
+        };
+        switch (this.viewType) {
+            case ViewType.Week:
+                if (date !== undefined) {
+                    this.startDate = this.selectDate.startOf('isoWeek');
+                }
+                else {
+                    this.startDate = this.startDate.add(num, 'weeks');
+                }
+                this.endDate = this.startDate.endOf('isoWeek');
+                break;
+            case ViewType.Day:
+            case ViewType.VerticalResource:
+                this.startDate = (date !== undefined ? this.selectDate : this.startDate.add(num, 'days')).startOf('day');
+                this.endDate = this.startDate;
+                break;
+            case ViewType.Month:
+                setStartAndEndDates('month');
+                break;
+            case ViewType.Quarter:
+                setStartAndEndDates('quarter');
+                break;
+            case ViewType.Year:
+                setStartAndEndDates('year');
+                break;
+            case ViewType.Custom:
+            case ViewType.Custom1:
+            case ViewType.Custom2:
+                if (this.behaviors.getCustomDateFunc !== undefined) {
+                    const customDate = this.behaviors.getCustomDateFunc(this, num, date);
+                    this.startDate = this.localeDayjs(customDate.startDate);
+                    this.endDate = this.localeDayjs(customDate.endDate);
+                    if (customDate.cellUnit) {
+                        this.cellUnit = customDate.cellUnit;
+                    }
+                }
+                else {
+                    throw new Error('This is a custom view type, set behaviors.getCustomDateFunc func ' +
+                        'to resolve the time window (startDate and endDate) yourself');
+                }
+                break;
+            default:
+                break;
+        }
+    }
+    _createHeaders() {
+        const timeSlots = [];
+        let start = this.localeDayjs(toDate(this.startDate));
+        let end = this.localeDayjs(toDate(this.endDate));
+        let header = start;
+        const width = this.getContentCellWidth();
+        if (this.showAgenda) {
+            timeSlots.push({
+                time: header.format(DATETIME_FORMAT),
+                nonWorkingTime: false,
+            });
+        }
+        else if (this.cellUnit === CellUnit.Hour) {
+            if (start.hour() === 0) {
+                start = start.hour(this.config.dayStartFrom);
+            }
+            if (end.hour() === 0) {
+                end = end.hour(this.config.dayStopTo);
+            }
+            header = start;
+            let prevHour = -1;
+            while (header >= start && header <= end) {
+                // prevent doubled hours on time change
+                if (header.hour() === prevHour) {
+                    header = header.add(1, 'hours');
+                    continue;
+                }
+                prevHour = header.hour();
+                const minuteSteps = this.getMinuteStepsInHour();
+                for (let i = 0; i < minuteSteps; i += 1) {
+                    const hour = header.hour();
+                    if (hour >= this.config.dayStartFrom && hour <= this.config.dayStopTo) {
+                        const time = header.format(DATETIME_FORMAT);
+                        const nonWorkingTime = this.behaviors.isNonWorkingTimeFunc(this, time);
+                        timeSlots.push({ time, nonWorkingTime });
+                    }
+                    header = header.add(this.config.minuteStep, 'minutes');
+                }
+            }
+        }
+        else if (this.cellUnit === CellUnit.Day) {
+            while (header >= start && header <= end) {
+                const time = header.format(DATETIME_FORMAT);
+                const style = { width, minWidth: width };
+                const dayOfWeek = header.day();
+                if (this.config.displayWeekend || (dayOfWeek !== 0 && dayOfWeek !== 6)) {
+                    const nonWorkingTime = this.behaviors.isNonWorkingTimeFunc(this, time);
+                    timeSlots.push({ time, nonWorkingTime, style });
+                }
+                header = header.add(1, 'days');
+            }
+        }
+        else if (this.cellUnit === CellUnit.Week) {
+            while (header >= start && header <= end) {
+                const time = header.format(DATE_FORMAT);
+                timeSlots.push({ time });
+                header = header.add(1, 'weeks').startOf('isoWeek');
+            }
+        }
+        else if (this.cellUnit === CellUnit.Month) {
+            while (header >= start && header <= end) {
+                const time = header.format(DATE_FORMAT);
+                timeSlots.push({ time });
+                header = header.add(1, 'months').startOf('month');
+            }
+        }
+        else if (this.cellUnit === CellUnit.Quarter) {
+            while (header >= start && header <= end) {
+                const time = header.format(DATE_FORMAT);
+                timeSlots.push({ time });
+                header = header.add(1, 'quarters').startOf('quarter');
+            }
+        }
+        else if (this.cellUnit === CellUnit.Year) {
+            while (header >= start && header <= end) {
+                const time = header.format(DATE_FORMAT);
+                timeSlots.push({ time });
+                header = header.add(1, 'years').startOf('year');
+            }
+        }
+        this.timeSlots = timeSlots;
+        if (this.isVerticalResourceView()) {
+            const currentViewDate = this.localeDayjs(toDate(this.startDate)).format(DATETIME_FORMAT);
+            this.headers = this.resources.map(r => ({
+                ...r,
+                time: currentViewDate,
+                nonWorkingTime: false,
+            }));
+        }
+        else {
+            this.headers = timeSlots;
+        }
+    }
+    _createInitHeaderEvents(header) {
+        const start = this.localeDayjs(new Date(header.time));
+        const startValue = start.format(DATETIME_FORMAT);
+        let endValue;
+        if (this.showAgenda) {
+            const incrementUnits = {
+                [ViewType.Day]: 'days',
+                [ViewType.Week]: 'weeks',
+                [ViewType.Month]: 'months',
+                [ViewType.Year]: 'years',
+                [ViewType.Quarter]: 'quarters',
+            };
+            const incrementUnit = incrementUnits[this.viewType] || 'days';
+            if (incrementUnit === 'days') {
+                endValue = this.localeDayjs(toDate(this.endDate)).add(1, 'days').format(DATETIME_FORMAT);
+            }
+            else {
+                endValue = addUnit(start, 1, incrementUnit).format(DATETIME_FORMAT);
+            }
+        }
+        else if (this.isVerticalResourceView()) {
+            // In vertical view, headers are resources. They don't have a time span.
+            // But we need a start/end for the headerEvent structure.
+            endValue = startValue;
+        }
+        else {
+            const { amount, unit } = this._getCellStep();
+            // Keep the full timestamp so cell bounds match _getSpan/normalizeEventEnd in every time zone.
+            endValue = addUnit(start, amount, unit).format(DATETIME_FORMAT);
+        }
+        return {
+            time: header.time,
+            nonWorkingTime: header.nonWorkingTime,
+            start: startValue,
+            end: endValue,
+            count: 0,
+            addMore: 0,
+            addMoreIndex: 0,
+            events: [],
+            id: header.id || header.time,
+            style: header.style || { width: this.getContentCellWidth(), minWidth: this.getContentCellWidth() },
+        };
+    }
+    _createHeaderEvent(render, span, eventItem) {
+        return { render, span, eventItem };
+    }
+    _getEventSlotId(event) {
+        if (this.isEventPerspective) {
+            return this._getEventGroupId(event);
+        }
+        // Support for multi-resource events
+        if (event.resourceIds && event.resourceIds.length > 0) {
+            // For multi-resource events, return the first resourceId for backward compatibility
+            // The rendering logic will handle showing on multiple rows
+            return event.resourceIds[0];
+        }
+        // Fallback to single resourceId
+        return event.resourceId;
+    }
+    _getEventGroupId(event) {
+        return event.groupId ? event.groupId.toString() : event.id.toString();
+    }
+    _getEventGroupName(event) {
+        return event.groupName ? event.groupName : event.title;
+    }
+    _generateEventGroups() {
+        const eventGroups = [];
+        const set = new Set();
+        this.events.forEach(item => {
+            const groupId = this._getEventGroupId(item);
+            const groupName = this._getEventGroupName(item);
+            if (!set.has(groupId)) {
+                eventGroups.push({
+                    id: groupId,
+                    name: groupName,
+                    state: item,
+                });
+                set.add(groupId);
+            }
         });
-        header = header.add(1, 'years').startOf('year');
-      }
-    }
-    this.timeSlots = timeSlots;
-    if (this.isVerticalResourceView()) {
-      const currentViewDate = this.localeDayjs(new Date(this.startDate)).format(DATETIME_FORMAT);
-      this.headers = this.resources.map(r => ({
-        ...r,
-        time: currentViewDate,
-        nonWorkingTime: false
-      }));
-    } else {
-      this.headers = timeSlots;
-    }
-  }
-  _createInitHeaderEvents(header) {
-    const start = this.localeDayjs(new Date(header.time));
-    const startValue = start.format(DATETIME_FORMAT);
-    let endValue;
-    if (this.showAgenda) {
-      const incrementUnit = {
-        [ViewType.Day]: 'days',
-        [ViewType.Week]: 'weeks',
-        [ViewType.Month]: 'months',
-        [ViewType.Year]: 'years',
-        [ViewType.Quarter]: 'quarters'
-      }[this.viewType] || 'days';
-      if (incrementUnit === 'days') {
-        endValue = this.localeDayjs(new Date(this.endDate)).add(1, 'days').format(DATETIME_FORMAT);
-      } else {
-        endValue = start.add(1, incrementUnit).format(DATETIME_FORMAT);
-      }
-    } else if (this.isVerticalResourceView()) {
-      // In vertical view, headers are resources. They don't have a time span.
-      // But we need a start/end for the headerEvent structure.
-      endValue = startValue;
-    } else {
-      const {
-        amount,
-        unit
-      } = this._getCellStep();
-
-      // Keep the full timestamp so cell bounds match _getSpan/normalizeEventEnd in every time zone.
-      endValue = start.add(amount, unit).format(DATETIME_FORMAT);
-    }
-    return {
-      time: header.time,
-      nonWorkingTime: header.nonWorkingTime,
-      start: startValue,
-      end: endValue,
-      count: 0,
-      addMore: 0,
-      addMoreIndex: 0,
-      events: [],
-      id: header.id || header.time,
-      style: header.style || {
-        width: this.getContentCellWidth(),
-        minWidth: this.getContentCellWidth()
-      }
-    };
-  }
-  _createHeaderEvent(render, span, eventItem) {
-    return {
-      render,
-      span,
-      eventItem
-    };
-  }
-  _getEventSlotId(event) {
-    if (this.isEventPerspective) {
-      return this._getEventGroupId(event);
-    }
-    // Support for multi-resource events
-    if (event.resourceIds && event.resourceIds.length > 0) {
-      // For multi-resource events, return the first resourceId for backward compatibility
-      // The rendering logic will handle showing on multiple rows
-      return event.resourceIds[0];
-    }
-    // Fallback to single resourceId
-    return event.resourceId;
-  }
-  _getEventGroupId(event) {
-    return event.groupId ? event.groupId.toString() : event.id.toString();
-  }
-  _getEventGroupName(event) {
-    return event.groupName ? event.groupName : event.title;
-  }
-  _generateEventGroups() {
-    const eventGroups = [];
-    const set = new Set();
-    this.events.forEach(item => {
-      const groupId = this._getEventGroupId(item);
-      const groupName = this._getEventGroupName(item);
-      if (!set.has(groupId)) {
-        eventGroups.push({
-          id: groupId,
-          name: groupName,
-          state: item
+        this.eventGroups = eventGroups;
+    }
+    _createInitRenderData(isEventPerspective, eventGroups, resources, headers) {
+        const slots = this.isVerticalResourceView()
+            ? this.timeSlots.map(ts => ({
+                ...ts,
+                id: ts.time,
+                name: ts.time,
+                slotId: ts.time,
+                slotName: ts.time,
+            }))
+            : isEventPerspective
+                ? eventGroups
+                : resources;
+        const slotTree = [];
+        const slotMap = new Map();
+        slots.forEach(slot => {
+            const headerEvents = headers.map(header => this._createInitHeaderEvents(header));
+            const slotRenderData = {
+                ...slot,
+                slotId: slot.id,
+                slotName: slot.name,
+                slotTitle: slot.title,
+                parentId: slot.parentId,
+                groupOnly: slot.groupOnly,
+                hasSummary: false,
+                rowMaxCount: 0,
+                rowHeight: this.config.nonAgendaSlotMinHeight !== 0
+                    ? this.config.nonAgendaSlotMinHeight
+                    : this.config.eventItemLineHeight + 2,
+                headerItems: headerEvents,
+                indent: 0,
+                hasChildren: false,
+                expanded: true,
+                render: true,
+            };
+            const { id } = slot;
+            let value;
+            if (slotMap.has(id)) {
+                value = slotMap.get(id);
+                value.data = slotRenderData;
+            }
+            else {
+                value = {
+                    data: slotRenderData,
+                    children: [],
+                };
+                slotMap.set(id, value);
+            }
+            const { parentId } = slot;
+            if (!parentId || parentId === id) {
+                slotTree.push(value);
+            }
+            else {
+                let parentValue;
+                if (slotMap.has(parentId)) {
+                    parentValue = slotMap.get(parentId);
+                }
+                else {
+                    parentValue = {
+                        data: undefined,
+                        children: [],
+                    };
+                    slotMap.set(parentId, parentValue);
+                }
+                parentValue.children.push(value);
+            }
         });
-        set.add(groupId);
-      }
-    });
-    this.eventGroups = eventGroups;
-  }
-  _createInitRenderData(isEventPerspective, eventGroups, resources, headers) {
-    const slots = this.isVerticalResourceView() ? this.timeSlots.map(ts => ({
-      ...ts,
-      id: ts.time,
-      name: ts.time,
-      slotId: ts.time,
-      slotName: ts.time
-    })) : isEventPerspective ? eventGroups : resources;
-    const slotTree = [];
-    const slotMap = new Map();
-    slots.forEach(slot => {
-      const headerEvents = headers.map(header => this._createInitHeaderEvents(header));
-      const slotRenderData = {
-        ...slot,
-        slotId: slot.id,
-        slotName: slot.name,
-        slotTitle: slot.title,
-        parentId: slot.parentId,
-        groupOnly: slot.groupOnly,
-        hasSummary: false,
-        rowMaxCount: 0,
-        rowHeight: this.config.nonAgendaSlotMinHeight !== 0 ? this.config.nonAgendaSlotMinHeight : this.config.eventItemLineHeight + 2,
-        headerItems: headerEvents,
-        indent: 0,
-        hasChildren: false,
-        expanded: true,
-        render: true
-      };
-      const {
-        id
-      } = slot;
-      let value;
-      if (slotMap.has(id)) {
-        value = slotMap.get(id);
-        value.data = slotRenderData;
-      } else {
-        value = {
-          data: slotRenderData,
-          children: []
+        const slotStack = [];
+        let i;
+        for (i = slotTree.length - 1; i >= 0; i -= 1) {
+            slotStack.push(slotTree[i]);
+        }
+        const initRenderData = [];
+        while (slotStack.length > 0) {
+            const currentNode = slotStack.pop();
+            // every node reached from the tree roots has its data set (placeholders only exist for missing parents)
+            const data = currentNode.data;
+            if (data.indent > 0) {
+                data.render = this.config.defaultExpanded;
+            }
+            if (currentNode.children.length > 0) {
+                data.hasChildren = true;
+                data.expanded = this.config.defaultExpanded;
+            }
+            initRenderData.push(data);
+            for (i = currentNode.children.length - 1; i >= 0; i -= 1) {
+                currentNode.children[i].data.indent = data.indent + 1;
+                slotStack.push(currentNode.children[i]);
+            }
+        }
+        return initRenderData;
+    }
+    _getCellStep() {
+        const units = {
+            [CellUnit.Hour]: 'minutes',
+            [CellUnit.Week]: 'weeks',
+            [CellUnit.Month]: 'months',
+            [CellUnit.Year]: 'years',
+            [CellUnit.Quarter]: 'quarters',
         };
-        slotMap.set(id, value);
-      }
-      const {
-        parentId
-      } = slot;
-      if (!parentId || parentId === id) {
-        slotTree.push(value);
-      } else {
-        let parentValue;
-        if (slotMap.has(parentId)) {
-          parentValue = slotMap.get(parentId);
-        } else {
-          parentValue = {
-            data: undefined,
-            children: []
-          };
-          slotMap.set(parentId, parentValue);
+        const unit = units[this.cellUnit] || 'days';
+        return { amount: unit === 'minutes' ? this.config.minuteStep : 1, unit };
+    }
+    // Span = number of visible header cells the event overlaps, using the same overlap rule as
+    // _createRenderData. Headers only cover the visible window (and visible days), so the event is
+    // clamped consistently across views, and calendar-aware dayjs math keeps DST days at one cell.
+    _getSpan(startTime, endTime, headers) {
+        if (this.showAgenda || this.isVerticalResourceView())
+            return 1;
+        const eventStart = normalizeEventStart(startTime);
+        const eventEnd = normalizeEventEnd(endTime);
+        const { amount, unit } = this._getCellStep();
+        return headers.filter(header => {
+            const cellStart = this.localeDayjs(new Date(header.time));
+            return cellStart.isBefore(eventEnd) && addUnit(cellStart, amount, unit).isAfter(eventStart);
+        }).length;
+    }
+    _validateResource(resources) {
+        if (Object.prototype.toString.call(resources) !== '[object Array]') {
+            throw new Error('Resources should be Array object');
         }
-        parentValue.children.push(value);
-      }
-    });
-    const slotStack = [];
-    let i;
-    for (i = slotTree.length - 1; i >= 0; i -= 1) {
-      slotStack.push(slotTree[i]);
-    }
-    const initRenderData = [];
-    let currentNode;
-    while (slotStack.length > 0) {
-      currentNode = slotStack.pop();
-      if (currentNode.data.indent > 0) {
-        currentNode.data.render = this.config.defaultExpanded;
-      }
-      if (currentNode.children.length > 0) {
-        currentNode.data.hasChildren = true;
-        currentNode.data.expanded = this.config.defaultExpanded;
-      }
-      initRenderData.push(currentNode.data);
-      for (i = currentNode.children.length - 1; i >= 0; i -= 1) {
-        currentNode.children[i].data.indent = currentNode.data.indent + 1;
-        slotStack.push(currentNode.children[i]);
-      }
-    }
-    return initRenderData;
-  }
-  _getCellStep() {
-    const unit = {
-      [CellUnit.Hour]: 'minutes',
-      [CellUnit.Week]: 'weeks',
-      [CellUnit.Month]: 'months',
-      [CellUnit.Year]: 'years',
-      [CellUnit.Quarter]: 'quarters'
-    }[this.cellUnit] || 'days';
-    return {
-      amount: unit === 'minutes' ? this.config.minuteStep : 1,
-      unit
-    };
-  }
-
-  // Span = number of visible header cells the event overlaps, using the same overlap rule as
-  // _createRenderData. Headers only cover the visible window (and visible days), so the event is
-  // clamped consistently across views, and calendar-aware dayjs math keeps DST days at one cell.
-  _getSpan(startTime, endTime, headers) {
-    if (this.showAgenda || this.isVerticalResourceView()) return 1;
-    const eventStart = normalizeEventStart(startTime);
-    const eventEnd = normalizeEventEnd(endTime);
-    const {
-      amount,
-      unit
-    } = this._getCellStep();
-    return headers.filter(header => {
-      const cellStart = this.localeDayjs(new Date(header.time));
-      return cellStart.isBefore(eventEnd) && cellStart.add(amount, unit).isAfter(eventStart);
-    }).length;
-  }
-  _validateResource(resources) {
-    if (Object.prototype.toString.call(resources) !== '[object Array]') {
-      throw new Error('Resources should be Array object');
-    }
-    resources.forEach((item, index) => {
-      if (item === undefined) {
-        console.error(`Resource undefined: ${index}`);
-        throw new Error(`Resource undefined: ${index}`);
-      }
-      if (item.id === undefined || item.name === undefined) {
-        console.error('Resource property missed', index, item);
-        throw new Error(`Resource property undefined: ${index}`);
-      }
-    });
-  }
-  _validateEventGroups(eventGroups) {
-    if (Object.prototype.toString.call(eventGroups) !== '[object Array]') {
-      throw new Error('Event groups should be Array object');
-    }
-    eventGroups.forEach((item, index) => {
-      if (item === undefined) {
-        console.error(`Event group undefined: ${index}`);
-        throw new Error(`Event group undefined: ${index}`);
-      }
-      if (item.id === undefined || item.name === undefined) {
-        console.error('Event group property missed', index, item);
-        throw new Error(`Event group property undefined: ${index}`);
-      }
-    });
-  }
-  _validateEvents(events) {
-    if (Object.prototype.toString.call(events) !== '[object Array]') {
-      throw new Error('Events should be Array object');
-    }
-    events.forEach((e, index) => {
-      if (e === undefined) {
-        console.error(`Event undefined: ${index}`);
-        throw new Error(`Event undefined: ${index}`);
-      }
-      const hasResourceTarget = e.resourceId !== undefined || Array.isArray(e.resourceIds) && e.resourceIds.length > 0;
-      if (e.id === undefined || !hasResourceTarget || e.title === undefined || e.start === undefined || e.end === undefined) {
-        console.error('Event property missed (id, resourceId/resourceIds, title, start, end)', index, e);
-        throw new Error(`Event property undefined (id/resourceId|resourceIds/title/start/end): ${index}`);
-      }
-    });
-  }
-  _validateMinuteStep(minuteStep) {
-    if (60 % minuteStep !== 0) {
-      console.error('Minute step is not set properly - 60 minutes must be divisible without remainder by this number');
-      throw new Error('Minute step is not set properly - 60 minutes must be divisible without remainder by this number');
-    }
-  }
-  _compare(event1, event2) {
-    const start1 = this.localeDayjs(event1.start);
-    const start2 = this.localeDayjs(event2.start);
-    if (start1 !== start2) return start1 < start2 ? -1 : 1;
-    const end1 = this.localeDayjs(event1.end);
-    const end2 = this.localeDayjs(event2.end);
-    if (end1 !== end2) return end1 < end2 ? -1 : 1;
-    return event1.id < event2.id ? -1 : 1;
-  }
-  _createRenderData() {
-    const initRenderData = this._createInitRenderData(this.isEventPerspective, this.eventGroups, this.resources, this.headers);
-    // this.events.sort(this._compare);
-    const cellMaxEventsCount = this.getCellMaxEvents();
-    const cellMaxEventsCountValue = 30;
-    this.events.forEach(item => {
-      let targetSlotIds = [];
-      if (this.isVerticalResourceView()) {
-        const eventStart = new Date(item.start);
-        const eventEnd = new Date(item.end);
-        this.timeSlots.forEach(ts => {
-          // Check if the time slot overlaps with the event's time
-          const tsStart = new Date(ts.time);
-          const tsEnd = this.localeDayjs(ts.time).add(this.config.minuteStep, 'minutes').toDate();
-          if (tsEnd > eventStart && tsStart < eventEnd) {
-            targetSlotIds.push(ts.time);
-          }
+        resources.forEach((item, index) => {
+            if (item === undefined) {
+                console.error(`Resource undefined: ${index}`);
+                throw new Error(`Resource undefined: ${index}`);
+            }
+            if (item.id === undefined || item.name === undefined) {
+                console.error('Resource property missed', index, item);
+                throw new Error(`Resource property undefined: ${index}`);
+            }
         });
-      } else if (this.isEventPerspective) {
-        targetSlotIds = [this._getEventSlotId(item)];
-      } else if (item.resourceIds && item.resourceIds.length > 0) {
-        // Multi-resource event
-        targetSlotIds = item.resourceIds;
-      } else if (item.resourceId) {
-        // Single resource event (backward compatibility)
-        targetSlotIds = [item.resourceId];
-      }
-      targetSlotIds.forEach(slotId => {
-        const resourceEventsList = initRenderData.filter(x => x.slotId === slotId);
-        if (resourceEventsList.length > 0) {
-          const resourceEvents = resourceEventsList[0];
-          const span = this._getSpan(item.start, item.end, this.headers);
-          const eventStart = normalizeEventStart(item.start).toDate();
-          const eventEnd = normalizeEventEnd(item.end).toDate();
-          let pos = -1;
-          resourceEvents.headerItems.forEach((header, index) => {
-            let isOverlapping = false;
-            if (this.isVerticalResourceView()) {
-              // In vertical view, headers are resources. Check if event belongs to this resource.
-              const itemResourceIds = item.resourceIds || [item.resourceId];
-              const targetId = header.id;
-              isOverlapping = itemResourceIds.includes(targetId);
-            } else {
-              const headerStart = new Date(header.start);
-              const headerEnd = new Date(header.end);
-              isOverlapping = headerEnd > eventStart && headerStart < eventEnd;
+    }
+    _validateEventGroups(eventGroups) {
+        if (Object.prototype.toString.call(eventGroups) !== '[object Array]') {
+            throw new Error('Event groups should be Array object');
+        }
+        eventGroups.forEach((item, index) => {
+            if (item === undefined) {
+                console.error(`Event group undefined: ${index}`);
+                throw new Error(`Event group undefined: ${index}`);
             }
-            if (isOverlapping) {
-              header.count += 1;
-              if (header.count > resourceEvents.rowMaxCount) {
-                resourceEvents.rowMaxCount = header.count;
-                const rowsCount = cellMaxEventsCount <= cellMaxEventsCountValue && resourceEvents.rowMaxCount > cellMaxEventsCount ? cellMaxEventsCount : resourceEvents.rowMaxCount;
-                const newRowHeight = rowsCount * this.config.eventItemLineHeight + (this.config.creatable && this.config.checkConflict === false ? 20 : 2);
-                if (newRowHeight > resourceEvents.rowHeight) resourceEvents.rowHeight = newRowHeight;
-              }
-              if (pos === -1) {
-                let tmp = 0;
-                while (header.events[tmp] !== undefined) tmp += 1;
-                pos = tmp;
-              }
-              let render = false;
-              if (this.isVerticalResourceView()) {
-                render = true;
-              } else {
-                const headerStart = new Date(header.start);
-                render = headerStart <= eventStart || index === 0;
-                if (render === false) {
-                  const previousHeader = resourceEvents.headerItems[index - 1];
-                  const previousHeaderStart = new Date(previousHeader.start);
-                  const previousHeaderEnd = new Date(previousHeader.end);
-                  if (previousHeaderEnd <= eventStart || previousHeaderStart >= eventEnd) render = true;
-                }
-              }
-              header.events[pos] = this._createHeaderEvent(render, span, item);
+            if (item.id === undefined || item.name === undefined) {
+                console.error('Event group property missed', index, item);
+                throw new Error(`Event group property undefined: ${index}`);
             }
-          });
+        });
+    }
+    _validateEvents(events) {
+        if (Object.prototype.toString.call(events) !== '[object Array]') {
+            throw new Error('Events should be Array object');
+        }
+        events.forEach((e, index) => {
+            if (e === undefined) {
+                console.error(`Event undefined: ${index}`);
+                throw new Error(`Event undefined: ${index}`);
+            }
+            const hasResourceTarget = e.resourceId !== undefined || (Array.isArray(e.resourceIds) && e.resourceIds.length > 0);
+            if (e.id === undefined ||
+                !hasResourceTarget ||
+                e.title === undefined ||
+                e.start === undefined ||
+                e.end === undefined) {
+                console.error('Event property missed (id, resourceId/resourceIds, title, start, end)', index, e);
+                throw new Error(`Event property undefined (id/resourceId|resourceIds/title/start/end): ${index}`);
+            }
+        });
+    }
+    _validateMinuteStep(minuteStep) {
+        if (60 % minuteStep !== 0) {
+            console.error('Minute step is not set properly - 60 minutes must be divisible without remainder by this number');
+            throw new Error('Minute step is not set properly - 60 minutes must be divisible without remainder by this number');
         }
-      });
-    });
-    if (cellMaxEventsCount <= cellMaxEventsCountValue || this.behaviors.getSummaryFunc !== undefined) {
-      initRenderData.forEach(resourceEvents => {
-        let hasSummary = false;
-        resourceEvents.headerItems.forEach(headerItem => {
-          if (cellMaxEventsCount <= cellMaxEventsCountValue) {
-            let renderItemsCount = 0;
-            let addMoreIndex = 0;
-            let index = 0;
-            while (index < cellMaxEventsCount - 1) {
-              if (headerItem.events[index] !== undefined) {
-                renderItemsCount += 1;
-                addMoreIndex = index + 1;
-              }
-              index += 1;
+    }
+    _compare(event1, event2) {
+        const start1 = this.localeDayjs(event1.start);
+        const start2 = this.localeDayjs(event2.start);
+        if (start1 !== start2)
+            return start1 < start2 ? -1 : 1;
+        const end1 = this.localeDayjs(event1.end);
+        const end2 = this.localeDayjs(event2.end);
+        if (end1 !== end2)
+            return end1 < end2 ? -1 : 1;
+        return event1.id < event2.id ? -1 : 1;
+    }
+    _createRenderData() {
+        const initRenderData = this._createInitRenderData(this.isEventPerspective, this.eventGroups, this.resources, this.headers);
+        // this.events.sort(this._compare);
+        const cellMaxEventsCount = this.getCellMaxEvents();
+        const cellMaxEventsCountValue = 30;
+        this.events.forEach(item => {
+            let targetSlotIds = [];
+            if (this.isVerticalResourceView()) {
+                const eventStart = new Date(item.start);
+                const eventEnd = new Date(item.end);
+                this.timeSlots.forEach(ts => {
+                    // Check if the time slot overlaps with the event's time
+                    const tsStart = new Date(ts.time);
+                    const tsEnd = this.localeDayjs(ts.time).add(this.config.minuteStep, 'minutes').toDate();
+                    if (tsEnd > eventStart && tsStart < eventEnd) {
+                        targetSlotIds.push(ts.time);
+                    }
+                });
             }
-            if (headerItem.events[index] !== undefined) {
-              if (renderItemsCount + 1 < headerItem.count) {
-                headerItem.addMore = headerItem.count - renderItemsCount;
-                headerItem.addMoreIndex = addMoreIndex;
-              }
-            } else if (renderItemsCount < headerItem.count) {
-              headerItem.addMore = headerItem.count - renderItemsCount;
-              headerItem.addMoreIndex = addMoreIndex;
+            else if (this.isEventPerspective) {
+                targetSlotIds = [this._getEventSlotId(item)];
             }
-          }
-          if (this.behaviors.getSummaryFunc !== undefined) {
-            const events = [];
-            headerItem.events.forEach(e => {
-              if (e?.eventItem) events.push(e.eventItem);
+            else if (item.resourceIds && item.resourceIds.length > 0) {
+                // Multi-resource event
+                targetSlotIds = item.resourceIds;
+            }
+            else if (item.resourceId) {
+                // Single resource event (backward compatibility)
+                targetSlotIds = [item.resourceId];
+            }
+            targetSlotIds.forEach(slotId => {
+                const resourceEventsList = initRenderData.filter(x => x.slotId === slotId);
+                if (resourceEventsList.length > 0) {
+                    const resourceEvents = resourceEventsList[0];
+                    const span = this._getSpan(item.start, item.end, this.headers);
+                    const eventStart = normalizeEventStart(item.start).toDate();
+                    const eventEnd = normalizeEventEnd(item.end).toDate();
+                    let pos = -1;
+                    resourceEvents.headerItems.forEach((header, index) => {
+                        let isOverlapping = false;
+                        if (this.isVerticalResourceView()) {
+                            // In vertical view, headers are resources. Check if event belongs to this resource.
+                            const itemResourceIds = item.resourceIds || [item.resourceId];
+                            const targetId = header.id;
+                            isOverlapping = itemResourceIds.includes(targetId);
+                        }
+                        else {
+                            const headerStart = new Date(header.start);
+                            const headerEnd = new Date(header.end);
+                            isOverlapping = headerEnd > eventStart && headerStart < eventEnd;
+                        }
+                        if (isOverlapping) {
+                            header.count += 1;
+                            if (header.count > resourceEvents.rowMaxCount) {
+                                resourceEvents.rowMaxCount = header.count;
+                                const rowsCount = cellMaxEventsCount <= cellMaxEventsCountValue && resourceEvents.rowMaxCount > cellMaxEventsCount
+                                    ? cellMaxEventsCount
+                                    : resourceEvents.rowMaxCount;
+                                const newRowHeight = rowsCount * this.config.eventItemLineHeight +
+                                    (this.config.creatable && this.config.checkConflict === false ? 20 : 2);
+                                if (newRowHeight > resourceEvents.rowHeight)
+                                    resourceEvents.rowHeight = newRowHeight;
+                            }
+                            if (pos === -1) {
+                                let tmp = 0;
+                                while (header.events[tmp] !== undefined)
+                                    tmp += 1;
+                                pos = tmp;
+                            }
+                            let render = false;
+                            if (this.isVerticalResourceView()) {
+                                render = true;
+                            }
+                            else {
+                                const headerStart = new Date(header.start);
+                                render = headerStart <= eventStart || index === 0;
+                                if (render === false) {
+                                    const previousHeader = resourceEvents.headerItems[index - 1];
+                                    const previousHeaderStart = new Date(previousHeader.start);
+                                    const previousHeaderEnd = new Date(previousHeader.end);
+                                    if (previousHeaderEnd <= eventStart || previousHeaderStart >= eventEnd)
+                                        render = true;
+                                }
+                            }
+                            header.events[pos] = this._createHeaderEvent(render, span, item);
+                        }
+                    });
+                }
             });
-            headerItem.summary = this.behaviors.getSummaryFunc(this, events, resourceEvents.slotId, resourceEvents.slotName, headerItem.start, headerItem.end);
-            if (headerItem.summary && headerItem.summary.text !== undefined) hasSummary = true;
-          }
         });
-        resourceEvents.hasSummary = hasSummary;
-        if (hasSummary) {
-          const rowsCount = cellMaxEventsCount <= cellMaxEventsCountValue && resourceEvents.rowMaxCount > cellMaxEventsCount ? cellMaxEventsCount : resourceEvents.rowMaxCount;
-          const newRowHeight = (rowsCount + 1) * this.config.eventItemLineHeight + (this.config.creatable && this.config.checkConflict === false ? 20 : 2);
-          if (newRowHeight > resourceEvents.rowHeight) resourceEvents.rowHeight = newRowHeight;
+        if (cellMaxEventsCount <= cellMaxEventsCountValue || this.behaviors.getSummaryFunc !== undefined) {
+            initRenderData.forEach(resourceEvents => {
+                let hasSummary = false;
+                resourceEvents.headerItems.forEach(headerItem => {
+                    if (cellMaxEventsCount <= cellMaxEventsCountValue) {
+                        let renderItemsCount = 0;
+                        let addMoreIndex = 0;
+                        let index = 0;
+                        while (index < cellMaxEventsCount - 1) {
+                            if (headerItem.events[index] !== undefined) {
+                                renderItemsCount += 1;
+                                addMoreIndex = index + 1;
+                            }
+                            index += 1;
+                        }
+                        if (headerItem.events[index] !== undefined) {
+                            if (renderItemsCount + 1 < headerItem.count) {
+                                headerItem.addMore = headerItem.count - renderItemsCount;
+                                headerItem.addMoreIndex = addMoreIndex;
+                            }
+                        }
+                        else if (renderItemsCount < headerItem.count) {
+                            headerItem.addMore = headerItem.count - renderItemsCount;
+                            headerItem.addMoreIndex = addMoreIndex;
+                        }
+                    }
+                    if (this.behaviors.getSummaryFunc !== undefined) {
+                        const events = [];
+                        headerItem.events.forEach(e => {
+                            if (e?.eventItem)
+                                events.push(e.eventItem);
+                        });
+                        headerItem.summary = this.behaviors.getSummaryFunc(this, events, resourceEvents.slotId, resourceEvents.slotName, headerItem.start, headerItem.end);
+                        if (headerItem.summary && headerItem.summary.text !== undefined)
+                            hasSummary = true;
+                    }
+                });
+                resourceEvents.hasSummary = hasSummary;
+                if (hasSummary) {
+                    const rowsCount = cellMaxEventsCount <= cellMaxEventsCountValue && resourceEvents.rowMaxCount > cellMaxEventsCount
+                        ? cellMaxEventsCount
+                        : resourceEvents.rowMaxCount;
+                    const newRowHeight = (rowsCount + 1) * this.config.eventItemLineHeight +
+                        (this.config.creatable && this.config.checkConflict === false ? 20 : 2);
+                    if (newRowHeight > resourceEvents.rowHeight)
+                        resourceEvents.rowHeight = newRowHeight;
+                }
+            });
         }
-      });
-    }
-    this.renderData = initRenderData;
-  }
-  _startResizing() {
-    this.resizing = true;
-  }
-  _stopResizing() {
-    this.resizing = false;
-  }
-  _isResizing() {
-    return this.resizing;
-  }
-}
+        this.renderData = initRenderData;
+    }
+    _startResizing() {
+        this.resizing = true;
+    }
+    _stopResizing() {
+        this.resizing = false;
+    }
+    _isResizing() {
+        return this.resizing;
+    }
+}