@heartlandone/vega-sandbox-pr-1520-691bff7087c621eb9bbbfe1797636727b1277984 2.27.0

package/dist/esm/vega-calendar_3.entry.js

@@ -0,0 +1,4048 @@
+import { h, F as Fragment, f as forceUpdate, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-187f71d1.js';
+import { s as sanitizeVegaComponent } from './component-cae24190.js';
+import { c as MapToComponentField, V as VegaSlimmer, M as MapToComponentMethod, L as LogUtility, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
+import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-b3f6ac79.js';
+import { D as DomNodeSubjectObserverFactory, d as domNodeSubjectFactory } from './dom-node-subject-observer-factory-9461cd67.js';
+import { a as VegaClick, e as VegaChange, b as VegaDropdownClick, f as VegaEventClick, g as VegaDateDblClick, h as VegaMoreActionClick } from './vega-event-id-7465a011.js';
+import { V as VegaInternalIconManager } from './internal-icon-manager-9671142a.js';
+import { p as pad } from './date-732bc749.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-eee9fd41.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-345c46c5.js';
+import { i as VegaInternalCalendarMonthEventsChange } from './vega-internal-event-id-7e05cf4a.js';
+import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
+import { f as flatNestedArray } from './array-506b88b9.js';
+import { g as generateUUID } from './create-public-api-runtime-metrics-slimmer-928ad7f0.js';
+import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-994c1e1b.js';
+import { d as debounce } from './timer-9321173b.js';
+import { C as ChangeManager } from './change-manager-6a7eb88c.js';
+import { c as createSubStateNotifySlimmer, S as SubStateObserverSlimmer } from './sub-state-observer-slimmer-af28076b.js';
+import { T as TranslationSlimmer } from './translation-slimmer-79f9a9c9.js';
+import { s as slotPlaceholder } from './placeholder-bf562081.js';
+import { p as isBackgroundColorTokenType } from './type-guard-63caf78b.js';
+import { s as stateBackgroundColorFormatter } from './state-background-color-formatter-0540d006.js';
+import { b as parsePixelStringToNumber } from './pixel-f32c07ce.js';
+import './observer-3959f9dd.js';
+import './ui-0132dbb5.js';
+import './icon-manager-0f030f8a.js';
+import './dynamic-slimmer-90b8af32.js';
+import './internal-vega-event-manager-722461c1.js';
+import './vega-env-manager-8f8dc473.js';
+import './feature-flag-controller-10780eeb.js';
+import './index-0863eec6.js';
+import './number-e2519d1c.js';
+import './breakpoints-36a3ed69.js';
+import './ui-8424715a.js';
+import './translation-0fa7cf77.js';
+import './static-subject-title-6987a80b.js';
+import './regex-dfe11abf.js';
+import './typography-a8fc4764.js';
+
+var __decorate$o = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** The `VegaCalendarRenderer` class in TypeScript React renders switch panel and view components for a calendar using VegaSlimmer. */
+class VegaCalendarRenderer extends VegaSlimmer {
+  /**
+   * The render function returns a Fragment containing the rendered output of switchPanelRenderer and viewRenderer components.
+   *
+   * @returns {HTMLElement} An HTMLElement containing the rendered output of the switchPanelRenderer and viewRenderer components.
+   */
+  render() {
+    return (h(Fragment, null,
+      this.switchPanelRenderer.render(),
+      this.viewRenderer.render()));
+  }
+}
+__decorate$o([
+  MapToComponentField()
+], VegaCalendarRenderer.prototype, "switchPanelRenderer", void 0);
+__decorate$o([
+  MapToComponentField()
+], VegaCalendarRenderer.prototype, "viewRenderer", void 0);
+
+const chevronRight = {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>`,
+};
+
+const chevronLeft = {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg>`,
+};
+
+/**
+ * get month name from the month number
+ *
+ * @param {Date} date the date object
+ * @param {boolean} isShortName short or long name
+ * @returns {string} the month English name
+ */
+function getMonthName(date, isShortName = false) {
+  return date.toLocaleDateString('en-US', { month: isShortName ? 'short' : 'long' });
+}
+/**
+ * The function `getTimeIndex` calculates the index of a given time string based on a specified time unit.
+ *
+ * @param {string} timeString - A string representing a time in the format "HH:MM", where HH is the hour and MM is the minutes.
+ * @param {number} [unit=15] - The `unit` parameter in the `getTimeIndex` function is used to specify
+ * the interval in minutes for dividing the day. By default, it is set to 15 minutes, meaning that the
+ * day will be divided into 15-minute intervals.
+ * @returns {number} the index of the given time string based on the specified time unit.
+ */
+function getTimeIndex(timeString, unit = 15) {
+  const [hour, minutes] = timeString.split(':');
+  return Math.round((Number(hour) * 60 + Number(minutes)) / unit);
+}
+/**
+ * Returns a string that includes the event key for a calendar event slot.
+ *
+ * @param {string} eventKey - represents the key or identifier of a calendar event.
+ * @returns {string} a string that is a concatenation of 'vega-calendar-event-slot-' and the eventKey parameter.
+ */
+function getCalendarEventSlotName(eventKey) {
+  return 'vega-calendar-event-slot-' + eventKey;
+}
+
+const ellipsisVertical = {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M48 464a48 48 0 1 1 0-96 48 48 0 1 1 0 96zm0-160a48 48 0 1 1 0-96 48 48 0 1 1 0 96zM0 96a48 48 0 1 1 96 0A48 48 0 1 1 0 96z"/></svg>`,
+};
+
+var __decorate$n = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** The `VegaCalendarSwitchPanelRenderer` class in TypeScript React renders a calendar switch panel with date navigation, view selection, and action buttons. */
+class VegaCalendarSwitchPanelRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * This function is responsible for updating the `viewMode` property of the `VegaCalendarSwitchPanelRenderer` class with the value extracted from the `input` parameter.
+     *
+     * @param {NotifyObserverPayload<VegaCalendarViewModeType>} input mark which view should be selected
+     */
+    this.handleViewChange = (input) => {
+      this.currentPeriodController.updateCalendarPeriod(input.detail, this.currentPeriod.current);
+    };
+    /**
+     * reset view content to today
+     */
+    this.todayButtonClick = () => {
+      this.currentPeriodController.setCurrentPeriod(this.currentPeriod.now());
+    };
+    /**
+     * update view content after click next button
+     */
+    this.nextButtonClick = () => {
+      this.currentPeriodController.setCurrentPeriod(this.currentPeriod.next());
+    };
+    /**
+     * update view content after click previous button
+     */
+    this.prevButtonClick = () => {
+      this.currentPeriodController.setCurrentPeriod(this.currentPeriod.previous());
+    };
+    /**
+     * The more action menu ite click
+     *
+     * @param {NotifyObserverPayload<string>} payload The object contains the menu item key
+     */
+    this.moreActionMenuClick = (payload) => {
+      this.moreActionClickEmitter.emit(payload.detail);
+    };
+  }
+  /**
+   * get the switch panel container element
+   *
+   * @returns {HTMLElement} container element
+   */
+  getSwitchPanelRef() {
+    return this.switchPanelRef;
+  }
+  /**
+   * calendar switch panel with date switch, view switch, add new button, and more action components.
+   *
+   * @returns {HTMLElement} html element
+   */
+  render() {
+    return (h("vega-flex", { direction: "row", gap: "size-16", justifyContent: "space-between", alignItems: "center", class: "calendar-switch-panel", ref: (node) => (this.switchPanelRef = node) },
+      this.renderDateSwitch(),
+      h("div", { class: "calendar-view-switch-container" },
+        this.renderViewSwitch(),
+        this.renderMoreActionMenu())));
+  }
+  /**
+   * The `renderDateSwitch` function returns a container with buttons for switching dates and displaying the current date.
+   *
+   * @returns {HTMLDivElement} action button elements container.
+   */
+  renderDateSwitch() {
+    return (h("div", { class: "calendar-date-switch-container" },
+      h("vega-button", { variant: "secondary", size: "small", ref: (button) => {
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(button, VegaClick, this.todayButtonClick);
+        }, label: this.translationSlimmer.t('Today') }),
+      h("vega-button-circle", { variant: "secondary", size: "small", icon: VegaInternalIconManager.getIconKey('chevron-left'), label: "previous", showTooltip: false, ref: (button) => {
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(button, VegaClick, this.prevButtonClick);
+        } }),
+      h("vega-button-circle", { variant: "secondary", size: "small", icon: VegaInternalIconManager.getIconKey('chevron-right'), label: "next", showTooltip: false, ref: (button) => {
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(button, VegaClick, this.nextButtonClick);
+        } }),
+      this.renderCurrentPeriod()));
+  }
+  /**
+   * The function `renderCurrentPeriod` returns an HTML element displaying the view date content summary info.
+   *
+   * @returns {HTMLVegaFontElement} The text content inside the element is "Current Date Test".
+   */
+  renderCurrentPeriod() {
+    return (h("vega-font", { class: "calendar-current-date", variant: "font-field-label", color: "text-primary" }, this.getViewDateSummary()));
+  }
+  /**
+   * The function `renderViewSwitch` returns a JSX element for rendering a segment control component in a TypeScript React application.
+   *
+   * @returns {HTMLElement} An HTMLElement containing a vega-segment-control element with specific attributes and event handling.
+   */
+  renderViewSwitch() {
+    return (h("vega-segment-control", { segments: VegaCalendarSwitchPanelRenderer.views.map((item) => (Object.assign(Object.assign({}, item), { text: this.translationSlimmer.t(item.text) }))), size: "small", variant: "text-only", selected: this.viewMode, ref: (node) => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaChange, this.handleViewChange);
+      } }));
+  }
+  /**
+   * Render an more action button if dropdown source is not empty
+   *
+   * @returns {Nullable<HTMLElement>} the additional element
+   */
+  renderMoreActionMenu() {
+    var _a, _b;
+    if ((_b = (_a = this.moreActionDropdownProps) === null || _a === void 0 ? void 0 : _a.source) === null || _b === void 0 ? void 0 : _b.length) {
+      return (h("vega-dropdown", Object.assign({ alignment: "end", trigger: "click" }, this.moreActionDropdownProps, { ref: (node) => {
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaDropdownClick, this.moreActionMenuClick);
+        } }),
+        h("vega-button-circle", { size: "small", icon: VegaInternalIconManager.getIconKey('ellipsis-vertical'), variant: "icon-only" })));
+    }
+  }
+  /**
+   * Get the view content date summary info, such as `January, 2024` or `10 January, 2024` or `28 December, 2023 - 3 January, 2024`
+   *
+   * @returns {string} string
+   */
+  getViewDateSummary() {
+    const currentDate = this.currentPeriod.current;
+    let result = '';
+    switch (this.viewMode) {
+      case 'day': {
+        const monthName = this.translationSlimmer.t(getMonthName(currentDate.toDate()));
+        result = `${currentDate.date} ${monthName}, ${currentDate.year}`;
+        break;
+      }
+      case 'week': {
+        const start = this.currentPeriod.startDate;
+        const end = this.currentPeriod.endDate;
+        const [startMonthName, endMonthName] = [start, end].map((item) => this.translationSlimmer.t(getMonthName(item.toDate())));
+        result = `${start.date} ${startMonthName}${start.year === end.year ? '' : ', ' + start.year} - ${end.date} ${endMonthName}, ${end.year}`;
+        break;
+      }
+      case 'month': {
+        const monthName = this.translationSlimmer.t(getMonthName(currentDate.toDate()));
+        result = `${monthName}, ${currentDate.year}`;
+        break;
+      }
+    }
+    return result;
+  }
+}
+(() => {
+  VegaInternalIconManager.register({
+    'chevron-right': chevronRight,
+    'chevron-left': chevronLeft,
+    'ellipsis-vertical': ellipsisVertical,
+  });
+})();
+VegaCalendarSwitchPanelRenderer.views = [
+  { text: 'Day', key: 'day' },
+  { text: 'Week', key: 'week' },
+  { text: 'Month', key: 'month' },
+];
+__decorate$n([
+  MapToComponentField()
+], VegaCalendarSwitchPanelRenderer.prototype, "viewMode", void 0);
+__decorate$n([
+  MapToComponentField()
+], VegaCalendarSwitchPanelRenderer.prototype, "calendarView", void 0);
+__decorate$n([
+  MapToComponentField()
+], VegaCalendarSwitchPanelRenderer.prototype, "currentPeriod", void 0);
+__decorate$n([
+  MapToComponentField()
+], VegaCalendarSwitchPanelRenderer.prototype, "moreActionDropdownProps", void 0);
+__decorate$n([
+  MapToComponentField()
+], VegaCalendarSwitchPanelRenderer.prototype, "moreActionClickEmitter", void 0);
+__decorate$n([
+  MapToComponentField()
+], VegaCalendarSwitchPanelRenderer.prototype, "currentPeriodController", void 0);
+__decorate$n([
+  MapToComponentField()
+], VegaCalendarSwitchPanelRenderer.prototype, "calendarViewController", void 0);
+__decorate$n([
+  MapToComponentField()
+], VegaCalendarSwitchPanelRenderer.prototype, "translationSlimmer", void 0);
+
+var __decorate$m = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** renders different views based on the specified view mode using month, week, and day view render. */
+class VegaCalendarViewRenderer extends VegaSlimmer {
+  /**
+   * render the calendar month/week/day view
+   *
+   * @returns {HTMLElement} html element
+   */
+  render() {
+    return (h("div", { class: `calendar-view calendar-view-${this.viewMode}` }, this.viewMode === 'month'
+      ? this.monthViewRenderer.render()
+      : this.viewWithTimeRenderer.render()));
+  }
+}
+__decorate$m([
+  MapToComponentField()
+], VegaCalendarViewRenderer.prototype, "viewMode", void 0);
+__decorate$m([
+  MapToComponentField()
+], VegaCalendarViewRenderer.prototype, "monthViewRenderer", void 0);
+__decorate$m([
+  MapToComponentField()
+], VegaCalendarViewRenderer.prototype, "viewWithTimeRenderer", void 0);
+
+var __decorate$l = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** The code provided is defining a TypeScript class called `VegaCalendarMonthViewRenderer` that extends `VegaSlimmer`. This class is responsible for rendering a month view of a calendar component. */
+class VegaCalendarMonthViewRenderer extends VegaSlimmer {
+  /**
+   * the HTML elements that represent the month view of a calendar component.
+   *
+   * @returns {HTMLElement} the month view calendar content
+   */
+  render() {
+    const weekHead = this.calendarView.weekdays;
+    return (h("div", { class: "calendar-view-month-container" },
+      h("div", { class: "calendar-view-row calendar-view-title border-divider-bottom" }, weekHead.map((title) => (h("div", { key: title }, this.translationSlimmer.t(title))))),
+      this.renderMonthViewContent()));
+  }
+  /**
+   * generating the HTML elements that represent the content of the month view in a calendar component
+   *
+   * @returns {HTMLElement[]} month view content and event content
+   */
+  renderMonthViewContent() {
+    const monthSource = this.calendarView.dateItems;
+    const currentDate = this.currentPeriod.current;
+    return monthSource.map((dateArray, index) => {
+      const eventsArray = this.monthEventRenderer.getCurrentRowEvents(dateArray);
+      const displayEventsArray = this.monthEventRenderer.filterRowDisplayEvents(eventsArray);
+      return (h("div", { key: index, class: "calendar-view-row border-divider-bottom" }, dateArray.map((item, itemIndex) => {
+        return (h("div", { class: {
+            'row-cell border-divider-right': true,
+            'current-month-day': item.compare(currentDate).inMonth,
+            'active': item.isToday(),
+            'disabled': false,
+          }, key: `${item.month}-${item.date}`, 
+          // eslint-disable-next-line react/jsx-no-bind
+          onDblClick: (e) => this.handleDateBlockClick(e, item) },
+          this.renderDateBlock(item),
+          this.monthEventRenderer.render(item, eventsArray[itemIndex], displayEventsArray[itemIndex], itemIndex)));
+      })));
+    });
+  }
+  /**
+   * It takes a `CalendarDate` object as a parameter and returns an HTML element representing a date block in the calendar view.
+   *
+   * @param {CalendarDate} item the day object
+   * @returns {HTMLElement} the date block element
+   */
+  renderDateBlock(item) {
+    const isMonthFirstDay = item.date === 1;
+    return (h("div", { class: "date" },
+      isMonthFirstDay && h("div", { class: "month-block" }, getMonthName(item.toDate(), true)),
+      h("div", { role: "button", tabIndex: 0, class: "grid-col", 
+        // eslint-disable-next-line react/jsx-no-bind
+        onDblClick: (e) => this.goToCurrentDayView(e, item) }, item.date)));
+  }
+  /**
+   * switch to current date day view
+   *
+   * @param {MouseEvent} e the double click event object
+   * @param {CalendarDate} calendarDate the calendar date object
+   */
+  goToCurrentDayView(e, calendarDate) {
+    e.stopPropagation();
+    this.currentPeriodController.updateCalendarPeriod('day', calendarDate);
+  }
+  /**
+   * emit vega click event when click the date block
+   *
+   * @param {MouseEvent} e the mouse event object
+   * @param {CalendarDate} calendarDate the calendar date object
+   */
+  handleDateBlockClick(e, calendarDate) {
+    const { target, clientX, clientY } = e;
+    if (this.isMonthBlockBlankArea(target)) {
+      const { year, month, date } = calendarDate;
+      this.dateDblClickEmitter.emit({
+        year,
+        month,
+        date,
+        hour: 0,
+        mouseEventInfo: { clientX, clientY },
+      });
+    }
+  }
+  /**
+   * determine if the clicked element is blank area
+   *
+   * @param {HTMLElement} element the target element
+   * @returns {boolean} true or false
+   */
+  isMonthBlockBlankArea(element) {
+    // the more button and the calendar event component should not trigger dateDblClick event
+    return !element.classList.contains('more-button') && element.tagName !== 'VEGA-CALENDAR-EVENT';
+  }
+}
+__decorate$l([
+  MapToComponentField()
+], VegaCalendarMonthViewRenderer.prototype, "viewMode", void 0);
+__decorate$l([
+  MapToComponentField()
+], VegaCalendarMonthViewRenderer.prototype, "calendarView", void 0);
+__decorate$l([
+  MapToComponentField()
+], VegaCalendarMonthViewRenderer.prototype, "currentPeriod", void 0);
+__decorate$l([
+  MapToComponentField()
+], VegaCalendarMonthViewRenderer.prototype, "calendarViewController", void 0);
+__decorate$l([
+  MapToComponentField()
+], VegaCalendarMonthViewRenderer.prototype, "currentPeriodController", void 0);
+__decorate$l([
+  MapToComponentField()
+], VegaCalendarMonthViewRenderer.prototype, "monthEventRenderer", void 0);
+__decorate$l([
+  MapToComponentField()
+], VegaCalendarMonthViewRenderer.prototype, "dateDblClickEmitter", void 0);
+__decorate$l([
+  MapToComponentField()
+], VegaCalendarMonthViewRenderer.prototype, "translationSlimmer", void 0);
+
+var __decorate$k = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** The `VegaCalendarViewWithTimeRenderer` class in TypeScript React renders a day view for a calendar component with title, content, and hour blocks. */
+class VegaCalendarViewWithTimeRenderer extends VegaSlimmer {
+  /**
+   * The render function in TypeScript React returns an array of HTMLElements containing the week calendar view for a specific day.
+   *
+   * @returns {HTMLElement} An array of HTMLElement elements containing the rendered content of a calendar view for a
+   * specific day in the week. The content includes the title and the main content of the calendar view
+   * for that day.
+   */
+  render() {
+    return (h("div", { class: "calendar-view-container" },
+      this.renderViewTitle(),
+      this.renderViewContent()));
+  }
+  /**
+   * The function `renderViewTitle` renders a calendar view title and events based on the provided source data.
+   *
+   * @returns {HTMLElement} The `renderViewTitle` function returns an HTML element (HTMLElement) that contains a calendar view title container with rows for each day's information.
+   */
+  renderViewTitle() {
+    const source = this.calendarView.dateItems[0];
+    const weekHead = this.calendarView.weekdays;
+    return (h("div", { class: "calendar-view-title-container" },
+      h("div", { class: "calendar-view-row" },
+        h("div", { class: "time-line-empty" }),
+        h("div", { class: "calendar-view-title" }, source.map((item, index) => (h("div", { key: item.date, class: { active: item.isToday() } },
+          h("div", null, this.translationSlimmer.t(weekHead[index])),
+          h("div", { class: "week-day" }, item.date)))))),
+      h("div", { class: "calendar-view-row calendar-view-event-all-container border-divider-bottom" },
+        h("div", { class: "time-line-all" }, this.translationSlimmer.t('All Day')),
+        this.dayViewFullDayEventRenderer.render())));
+  }
+  /**
+   * The `renderViewContent` function in TypeScript React renders a calendar view with day blocks and time markers based on the provided data.
+   *
+   * @returns {HTMLElement} An HTMLElement containing a calendar view row with day containers, a timeline renderer, a content container, a day list, and hour blocks for each item in the source array.
+   */
+  renderViewContent() {
+    const source = this.calendarView.dateItems[0];
+    return (h("div", { class: "calendar-view-row calendar-view-day-container" },
+      this.timeLineRenderer.render(),
+      h("div", { class: "calendar-view-content-container" },
+        h("div", { class: "calendar-view-content" }, source.map((item) => {
+          return (h("div", { class: "grid-col border-divider-left", key: item.date },
+            h("div", { class: "hour-empty border-divider-top" }),
+            this.renderHourBlock(item)));
+        })),
+        this.dayViewTimedEventRenderer.render(),
+        this.timeLineRenderer.renderTimeMarker(source))));
+  }
+  /**
+   * The function `renderHourBlock` returns an array of HTML elements representing hour blocks with time information.
+   *
+   * @param {CalendarDate} calendarDate then current calendar date object
+   * @returns {HTMLElement[]} An array of HTMLElements is being returned. Each HTMLElement represents an hour block with a time value inside a div element.
+   */
+  renderHourBlock(calendarDate) {
+    const timeLineSource = Array(24).fill('');
+    return timeLineSource.map((_item, index) => {
+      return (h("div", { class: "grid-cell border-divider-top", 
+        // eslint-disable-next-line react/jsx-no-bind
+        onDblClick: (e) => {
+          this.handleDateBlockClick(calendarDate, index, e);
+        } }));
+    });
+  }
+  /**
+   * emit vega click event when click the date block
+   *
+   * @param {CalendarDate} calendarDate the calendar date object
+   */
+  handleDateBlockClick(calendarDate, hour, e) {
+    const { year, month, date } = calendarDate;
+    const { clientX, clientY } = e;
+    this.dateDblClickEmitter.emit({ year, month, date, hour, mouseEventInfo: { clientX, clientY } });
+  }
+}
+__decorate$k([
+  MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "viewMode", void 0);
+__decorate$k([
+  MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "timeLineRenderer", void 0);
+__decorate$k([
+  MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "dayViewTimedEventRenderer", void 0);
+__decorate$k([
+  MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "dayViewFullDayEventRenderer", void 0);
+__decorate$k([
+  MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "calendarView", void 0);
+__decorate$k([
+  MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "calendarViewController", void 0);
+__decorate$k([
+  MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "dateDblClickEmitter", void 0);
+__decorate$k([
+  MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "translationSlimmer", void 0);
+
+var __decorate$j = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** The `VegaCalendarTimeLineRenderer` class in TypeScript React renders a time line with custom time format options and includes methods for rendering time markers and the time line itself. */
+class VegaCalendarTimeLineRenderer extends VegaSlimmer {
+  /**
+   * takes an array of `CalendarDate` objects as input and returns an HTML element
+   *
+   * @param {CalendarDate[]} source
+   * @returns {HTMLElement} the html element
+   */
+  renderTimeMarker(source) {
+    const isVisible = source.findIndex((calendarDate) => calendarDate.isToday()) >= 0;
+    return (h("div", { class: {
+        'time-marker-container': true,
+        'hidden': !isVisible,
+      } },
+      h("div", { class: "time-marker", style: { top: this.getTimeMarkerPosition() }, ref: (div) => (this.timeMarkerRef = div) }, source.map((item) => {
+        return h("div", { key: item.date, class: { active: item.isToday() } });
+      }))));
+  }
+  /**
+   * rendering the time line component as an HTML element
+   *
+   * @returns {HTMLElement} the html element
+   */
+  render() {
+    const timeLineSource = this.getTimeLineTitles();
+    return (h("div", { class: "time-line", ref: (div) => (this.timeLineRef = div) },
+      h("div", { class: "hour-empty" }),
+      timeLineSource.map((time, index) => {
+        return (h("div", { key: time },
+          h("div", { class: "time-text", "data-time": index === 0 ? 24 : index }, time)));
+      })));
+  }
+  /**
+   * scroll to current time line block if change view mode to week or day
+   *
+   * @param {VegaCalendarViewModeType} viewMode the view mode
+   */
+  updateTimeLine(viewMode) {
+    this.scrollToTargetTimeBlock(viewMode);
+    this.syncTimeMarkerPosition(viewMode);
+  }
+  /**
+   * remove setInterval when component destroy
+   */
+  clearTimer() {
+    clearInterval(this.timeMarkerPositionTimer);
+  }
+  /**
+   * Add the time mark position update logic if the component add back to page
+   */
+  updateTimeLineIfComponentAddBack() {
+    this.syncTimeMarkerPosition(this.viewMode);
+  }
+  /**
+   * Should display the current time block in the view if the default view mode is not month
+   */
+  displayCurrentTimeBlockByDefault() {
+    this.scrollToTargetTimeBlock(this.viewMode);
+  }
+  /**
+   * The function `getTimeMarkerPosition` calculates the position of the current time marker as a percentage of the day.
+   *
+   * @returns {string} a string representing the current time marker position as a percentage of the day.
+   */
+  getTimeMarkerPosition() {
+    const now = new Date();
+    const minutesOneDay = 24 * 60;
+    return ((now.getHours() * 60 + now.getMinutes()) / minutesOneDay) * 100 + '%';
+  }
+  /**
+   * The function `getTimeLineTitles` generates a time line array based on the specified time format (24-hour) and stores it in the `timeLineSource` property.
+   *
+   * @returns {string[]} returns an array of strings representing the time line
+   */
+  getTimeLineTitles() {
+    const timeLine = [];
+    if (this.timeFormat === '12-hour') {
+      timeLine.push('12 AM');
+      for (let i = 1; i < 12; i++) {
+        timeLine.push(`${i} AM`);
+      }
+      timeLine.push('12 PM');
+      for (let i = 1; i < 12; i++) {
+        timeLine.push(`${i} PM`);
+      }
+    }
+    else {
+      for (let i = 0; i < 24; i++) {
+        timeLine.push(pad(i));
+      }
+    }
+    return timeLine;
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-calendar-scroll-to-current-time}
+   */
+  /* istanbul ignore next */
+  /**
+   * Update the time marker position with the time
+   *
+   * @param {VegaCalendarViewModeType} viewMode view mode value
+   */
+  syncTimeMarkerPosition(viewMode) {
+    clearInterval(this.timeMarkerPositionTimer);
+    if (viewMode !== 'month') {
+      this.timeMarkerPositionTimer = setInterval(() => {
+        if (this.timeMarkerRef) {
+          this.timeMarkerRef.style.top = this.getTimeMarkerPosition();
+        }
+      }, 60 * 1000);
+    }
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-calendar-scroll-to-current-time}
+   */
+  /* istanbul ignore next */
+  /**
+   * scroll the time line in to current view
+   *
+   * @param {VegaCalendarViewModeType} viewMode view mode value
+   */
+  scrollToTargetTimeBlock(viewMode) {
+    if (viewMode !== 'month') {
+      // add setTimeout here to make sure call the scroll into view after time line rendered.
+      const oneFrame = 16;
+      setTimeout(() => {
+        var _a, _b;
+        const hour = new Date().getHours();
+        (_b = (_a = this.timeLineRef) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-time='${hour < 23 ? hour + 1 : hour}']`)) === null || _b === void 0 ? void 0 : _b.scrollIntoView({ block: 'end' });
+      }, oneFrame);
+    }
+  }
+}
+__decorate$j([
+  MapToComponentField()
+], VegaCalendarTimeLineRenderer.prototype, "timeFormat", void 0);
+__decorate$j([
+  MapToComponentField()
+], VegaCalendarTimeLineRenderer.prototype, "viewMode", void 0);
+__decorate$j([
+  MapToComponentMethod('watchViewModeChange')
+], VegaCalendarTimeLineRenderer.prototype, "updateTimeLine", null);
+__decorate$j([
+  MapToComponentMethod('disconnectedCallback')
+], VegaCalendarTimeLineRenderer.prototype, "clearTimer", null);
+__decorate$j([
+  MapToComponentMethod('connectedCallback')
+], VegaCalendarTimeLineRenderer.prototype, "updateTimeLineIfComponentAddBack", null);
+__decorate$j([
+  MapToComponentMethod('componentDidLoad')
+], VegaCalendarTimeLineRenderer.prototype, "displayCurrentTimeBlockByDefault", null);
+
+/**
+ * Get a week days array
+ *
+ * @param {number} firstWeekDay - The first week day (0: Sunday, 1: Monday, ...)
+ * @returns {number[]} - The week days array
+ */
+const getWeekdays = (firstWeekDay = 0) => {
+  const weekdays = [0, 1, 2, 3, 4, 5, 6];
+  return weekdays.concat(weekdays).slice(firstWeekDay, firstWeekDay + 7);
+};
+
+/**
+ * Calendar view generator abstract class.
+ */
+class CalendarViewGenerator {
+  constructor() {
+    this.WEEKDAYS_SHORT = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+    this.weekdays = getWeekdays();
+  }
+  /**
+   * Get weekday names.
+   *
+   * @returns {string[]} - The weekday strings
+   */
+  getWeekdayNames() {
+    return this.WEEKDAYS_SHORT;
+  }
+  /**
+   * Generate calendar dates
+   *
+   * @param {CalendarPeriod} period - The calendar period
+   * @returns {Date[]} - The date result
+   */
+  generateDates(period) {
+    const cursor = period.startDate.toDate();
+    const dates = [];
+    for (let i = 0; i < period.count; i++) {
+      dates.push(new Date(cursor));
+      cursor.setDate(cursor.getDate() + 1);
+    }
+    return dates;
+  }
+  /**
+   * Generate calendar head
+   *
+   * @returns {string[]} - The data of week head
+   */
+  generateWeekHead() {
+    return this.weekdays.map((day) => this.getWeekdayNames()[day]);
+  }
+}
+
+/**
+ * Calendar view
+ */
+class CalendarView {
+  constructor(weekdays, dateItems) {
+    this._weekdays = weekdays;
+    this._dateItems = dateItems;
+  }
+  /**
+   * The week head of the calendar view
+   *
+   * @type {string[]}
+   */
+  get weekdays() {
+    return this._weekdays;
+  }
+  /**
+   * The date items of the calendar view
+   *
+   * @type {CalendarDate[][]}
+   */
+  get dateItems() {
+    return this._dateItems;
+  }
+}
+
+/**
+ * Day view calendar generator
+ */
+class DayViewGenerator extends CalendarViewGenerator {
+  /**
+   * @inheritDoc
+   */
+  generate(period) {
+    return new CalendarView([this.generateWeekHead()[period.current.toDate().getDay()]], [[period.current]]);
+  }
+}
+
+/**
+ * Calendar date class
+ */
+class CalendarDate {
+  constructor(year, month, date) {
+    this._date = date;
+    this._month = month;
+    this._year = year;
+  }
+  /**
+   * Create a calendar date from a Date object
+   *
+   * @param {Date} date - The Date object
+   * @returns {CalendarDate} - Return a CalendarDate object
+   */
+  static from(date) {
+    return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
+  }
+  /**
+   * The year of the calendar date
+   *
+   * @type {number}
+   */
+  get year() {
+    return this._year;
+  }
+  set year(value) {
+    this._year = value;
+  }
+  /**
+   * The month of the calendar date
+   *
+   * @type {number}
+   */
+  get month() {
+    return this._month;
+  }
+  set month(value) {
+    this._month = value;
+  }
+  /**
+   * The date of the calendar date
+   *
+   * @type {number}
+   */
+  get date() {
+    return this._date;
+  }
+  set date(value) {
+    this._date = value;
+  }
+  /**
+   * Verify whether the calendar date is today
+   *
+   * @returns {boolean} - Return true if the calendar date is today. Otherwise, return false.
+   */
+  isToday() {
+    const today = new Date();
+    return (today.getFullYear() === this.year &&
+      today.getMonth() + 1 === this.month &&
+      today.getDate() === this.date);
+  }
+  /**
+   * Convert the calendar date to a Date object
+   *
+   * @returns {Date} - Return a Date object
+   */
+  toDate() {
+    return new Date(this.year, this.month - 1, this.date);
+  }
+  /**
+   * Compare with another calendar date
+   *
+   * @param {CalendarDate} date - The calendar date to compare with
+   * @returns {DateCompareResult} - Return a DateCompareResult object
+   */
+  compare(date) {
+    const { year, month } = date;
+    const result = {
+      isPreviousMonth: false,
+      inMonth: false,
+      isNextMonth: false,
+    };
+    if (this.year === year) {
+      if (this.month < month) {
+        result.isPreviousMonth = true;
+      }
+      else if (this.month > month) {
+        result.isNextMonth = true;
+      }
+      else {
+        result.inMonth = true;
+      }
+    }
+    else if (this.year > year) {
+      result.isNextMonth = true;
+    }
+    else {
+      result.isPreviousMonth = true;
+    }
+    return result;
+  }
+  /**
+   * The function "equal" compares the year, month, and date of two CalendarDate objects and returns  true if they are equal.
+   *
+   * @param {CalendarDate} calendarDate - The `equal` method in the code snippet is a function that compares the year, month, and date of the current `CalendarDate` object with another
+   * `CalendarDate` object passed as a parameter. The method returns `true` if all three values (year, month, date) are equal
+   * @returns {boolean} The date is same day with current
+   */
+  equal(calendarDate) {
+    const { year, month, date } = calendarDate;
+    return this._year === year && this._month === month && this._date === date;
+  }
+}
+
+/**
+ * Calendar week view generator
+ */
+class WeekViewGenerator extends CalendarViewGenerator {
+  /**
+   * @inheritDoc
+   */
+  generate(period) {
+    const dates = this.generateDates(period);
+    return new CalendarView(this.generateWeekHead(), [dates.map(CalendarDate.from)]);
+  }
+}
+
+/**
+ * Calendar month view generator
+ */
+class MonthViewGenerator extends CalendarViewGenerator {
+  /**
+   * @inheritDoc
+   */
+  generate(period) {
+    const calendarDates = [];
+    let week = [];
+    const dates = this.generateDates(period);
+    dates.forEach((date, i) => {
+      if (!(i % 7)) {
+        calendarDates[i / 7] = week = [];
+      }
+      const item = CalendarDate.from(date);
+      week.push(item);
+    });
+    return new CalendarView(this.generateWeekHead(), calendarDates);
+  }
+}
+
+/**
+ * CalendarPeriod is an abstract class that represents a period of date for calendar.
+ */
+class CalendarPeriod {
+  constructor(count, current) {
+    this._count = count;
+    this._current = current ? current : CalendarDate.from(new Date());
+    this.calculatePeriod(this._current);
+  }
+  /**
+   * The current date of the period.
+   *
+   * @type {CalendarDate}
+   */
+  get current() {
+    return this._current;
+  }
+  /**
+   * The start date of the period
+   *
+   * @type {CalendarDate}
+   */
+  get startDate() {
+    return this._startDate;
+  }
+  /**
+   * The end date of the period
+   *
+   * @type {CalendarDate}
+   */
+  get endDate() {
+    return this._endDate;
+  }
+  /**
+   * The count of the period
+   *
+   * @type {number}
+   */
+  get count() {
+    return this._count;
+  }
+  /**
+   * This function returns the type of the object.
+   *
+   * @type {string}
+   */
+  get type() {
+    return this._type;
+  }
+  /**
+   * Go to a specific date.
+   *
+   * @param {CalendarDate} date - The date to go to.
+   * @returns {this} - The current period.
+   */
+  goTo(date) {
+    return this.createBy(date);
+  }
+  /**
+   * Go to now.
+   *
+   * @returns {this} - The current period.
+   */
+  now() {
+    return this.createBy(CalendarDate.from(new Date()));
+  }
+  /**
+   * Calculate the period start date and end date.
+   *
+   * @param {CalendarDate} date - The date to calculate the period from.
+   */
+  calculatePeriod(date) {
+    const cursor = date.toDate();
+    if (this.count > 1) {
+      cursor.setDate(cursor.getDate() - getWeekdays().indexOf(cursor.getDay()));
+    }
+    this._startDate = CalendarDate.from(cursor);
+    cursor.setDate(cursor.getDate() + this.count - 1);
+    this._endDate = CalendarDate.from(cursor);
+  }
+}
+
+/**
+ * Period of day.
+ */
+class DayPeriod extends CalendarPeriod {
+  constructor(current) {
+    super(DayPeriod.DISPLAY_DATE_COUNT, current);
+    this._type = 'day';
+  }
+  /**
+   * @inheritDoc
+   */
+  next() {
+    const nextDate = this.current.toDate();
+    nextDate.setDate(nextDate.getDate() + 1);
+    return this.createBy(CalendarDate.from(nextDate));
+  }
+  /**
+   * @inheritDoc
+   */
+  previous() {
+    const previousDate = this.current.toDate();
+    previousDate.setDate(previousDate.getDate() - 1);
+    return this.createBy(CalendarDate.from(previousDate));
+  }
+  /**
+   * @inheritDoc
+   */
+  createBy(current) {
+    return new DayPeriod(current);
+  }
+}
+DayPeriod.DISPLAY_DATE_COUNT = 1;
+
+/**
+ * Period of the week
+ */
+class WeekPeriod extends CalendarPeriod {
+  constructor(current) {
+    super(WeekPeriod.DISPLAY_DATE_COUNT, current);
+    this._type = 'week';
+  }
+  /**
+   * @inheritDoc
+   */
+  next() {
+    const nextWeekStartDate = this.current.toDate();
+    nextWeekStartDate.setDate(nextWeekStartDate.getDate() - getWeekdays().indexOf(nextWeekStartDate.getDay()) + 7);
+    return this.createBy(CalendarDate.from(nextWeekStartDate));
+  }
+  /**
+   * @inheritDoc
+   */
+  previous() {
+    const previousWeekStartDate = this.current.toDate();
+    previousWeekStartDate.setDate(previousWeekStartDate.getDate() - getWeekdays().indexOf(previousWeekStartDate.getDay()) - 7);
+    return this.createBy(CalendarDate.from(previousWeekStartDate));
+  }
+  /**
+   * @inheritDoc
+   */
+  createBy(current) {
+    return new WeekPeriod(current);
+  }
+}
+WeekPeriod.DISPLAY_DATE_COUNT = 7;
+
+/**
+ * Period of month
+ */
+class MonthPeriod extends CalendarPeriod {
+  constructor(current) {
+    super(MonthPeriod.DISPLAY_DATE_COUNT, MonthPeriod.getMonthFirstDay(current));
+    this._type = 'month';
+  }
+  /**
+   * The function `getMonthFirstDay` returns the first day of a given month in a calendar.
+   *
+   * @param {CalendarDate} [calendarDate] - The `calendarDate` parameter is an optional parameter of
+   * type `CalendarDate`. It represents a specific date in the calendar. If a `calendarDate` is
+   * provided, the function will use that date to determine the first day of the month. If no
+   * `calendarDate` is provided, the function
+   * @returns {CalendarDate} A new `CalendarDate` object representing the first day of the month from the provided
+   * `calendarDate` parameter or the current date if no parameter is provided.
+   */
+  static getMonthFirstDay(calendarDate) {
+    const date = calendarDate || CalendarDate.from(new Date());
+    return new CalendarDate(date.year, date.month, 1);
+  }
+  /**
+   * @inheritDoc
+   */
+  next() {
+    const next = this.current.toDate();
+    next.setMonth(next.getMonth() + 1);
+    return this.createBy(CalendarDate.from(next));
+  }
+  /**
+   * @inheritDoc
+   */
+  previous() {
+    const previous = this.current.toDate();
+    previous.setMonth(previous.getMonth() - 1);
+    return this.createBy(CalendarDate.from(previous));
+  }
+  /**
+   * @inheritDoc
+   */
+  createBy(current) {
+    return new MonthPeriod(current);
+  }
+}
+MonthPeriod.DISPLAY_DATE_COUNT = 6 * 7;
+
+var __decorate$i = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** The `VegaCalendarViewController` class manages the calendar view based on the current period and view mode in TypeScript. */
+class VegaCalendarViewController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.monthViewGenerator = new MonthViewGenerator();
+    this.weekViewGenerator = new WeekViewGenerator();
+    this.dayViewGenerator = new DayViewGenerator();
+  }
+  /**
+   * set default calendar view
+   */
+  initialCalendarView() {
+    this.setCalendarView(this.getCalendarViewByPeriod(this.currentPeriod));
+  }
+  /**
+   * generator new calendar view if the calendar current period changes
+   *
+   * @param {CalendarPeriod} newValue the new calendar period
+   */
+  generateCalendarView(newValue) {
+    this.setCalendarView(this.getCalendarViewByPeriod(newValue));
+  }
+  /**
+   * The function `getCalendarViewByPeriod` returns a specific calendar view based on the current period.
+   *
+   * @param {CalendarPeriod} newPeriod the new period
+   * @returns {CalendarView} get the match calendar view by the period
+   */
+  getCalendarViewByPeriod(newPeriod) {
+    switch (newPeriod.type) {
+      case 'week':
+        return this.weekViewGenerator.generate(newPeriod);
+      case 'day':
+        return this.dayViewGenerator.generate(newPeriod);
+      default:
+        return this.monthViewGenerator.generate(newPeriod);
+    }
+  }
+  /**
+   * update the calendar view
+   *
+   * @param {CalendarView} newView new calendar view
+   */
+  setCalendarView(newView) {
+    this.calendarView = newView;
+  }
+}
+__decorate$i([
+  MapToComponentField({ writable: true })
+], VegaCalendarViewController.prototype, "calendarView", void 0);
+__decorate$i([
+  MapToComponentField()
+], VegaCalendarViewController.prototype, "currentPeriod", void 0);
+__decorate$i([
+  MapToComponentField()
+], VegaCalendarViewController.prototype, "currentPeriodController", void 0);
+__decorate$i([
+  MapToComponentMethod('componentWillLoad')
+], VegaCalendarViewController.prototype, "initialCalendarView", null);
+__decorate$i([
+  MapToComponentMethod('watchCurrentPeriodChange')
+], VegaCalendarViewController.prototype, "generateCalendarView", null);
+
+var __decorate$h = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** This TypeScript class `VegaCalendarCurrentPeriodController` updates the current period based on the view mode in a calendar component. */
+class VegaCalendarCurrentPeriodController extends VegaSlimmer {
+  /**
+   * set new current period
+   *
+   * @param {CalendarPeriod} newPeriod new value
+   */
+  setCurrentPeriod(newPeriod) {
+    this.currentPeriod = newPeriod;
+  }
+  /**
+   * set new current period by the view mode and the current date
+   *
+   * @param {VegaCalendarViewModeType} viewMode view mode value
+   * @param {CalendarDate} date current date
+   */
+  updateCalendarPeriod(viewMode, date) {
+    switch (viewMode) {
+      case 'month':
+        this.setCurrentPeriod(new MonthPeriod(date));
+        break;
+      case 'week':
+        this.setCurrentPeriod(new WeekPeriod(date));
+        break;
+      case 'day':
+        this.setCurrentPeriod(new DayPeriod(date));
+        break;
+    }
+  }
+  /**
+   * default current period is month period, re-create period if the default view mode is not month
+   * set default calendar view
+   */
+  initialCurrentPeriod() {
+    this.updateCalendarPeriod(this.viewMode, CalendarDate.from(new Date()));
+  }
+  /**
+   * emit period change event
+   *
+   * @param {CalendarPeriod} newValue the new calendar period
+   * @param {CalendarPeriod} oldValue the prev calendar period
+   */
+  emitChangeEvent(newValue, oldValue) {
+    if (newValue &&
+      oldValue &&
+      newValue.startDate.equal(oldValue.startDate) &&
+      newValue.endDate.equal(oldValue.endDate)) {
+      return;
+    }
+    if (newValue && newValue.type !== this.viewMode) {
+      this.viewMode = newValue.type;
+    }
+    this.changeEventEmitter.emit({
+      viewMode: newValue.type,
+      currentPeriod: this.getCurrentPeriodSummary(),
+    });
+  }
+  /**
+   * update the current period when view mode change
+   *
+   * @param {VegaCalendarViewModeType} viewMode new view mode value
+   */
+  updateCurrentPeriodByViewMode(viewMode) {
+    if (this.currentPeriod && viewMode !== this.currentPeriod.type) {
+      this.updateCalendarPeriod(viewMode, this.currentPeriod.current);
+    }
+  }
+  /**
+   * The function `getStartDateAndEndDate` returns an array of `VegaCalendarDateType` objects based on the `startDate` and `endDate` properties of the `currentPeriod` object.
+   *
+   * @returns {VegaCalendarChangeEventType['currentPeriod']} An array of objects containing the date, month, and year properties of the currentPeriod's
+   * start date and end date.
+   */
+  getCurrentPeriodSummary() {
+    const { current, startDate, endDate } = this.currentPeriod;
+    return {
+      year: current.year,
+      month: current.month,
+      startDate: {
+        date: startDate.date,
+        month: startDate.month,
+        year: startDate.year,
+      },
+      endDate: {
+        date: endDate.date,
+        month: endDate.month,
+        year: endDate.year,
+      },
+    };
+  }
+}
+__decorate$h([
+  MapToComponentField({ writable: true })
+], VegaCalendarCurrentPeriodController.prototype, "currentPeriod", void 0);
+__decorate$h([
+  MapToComponentField()
+], VegaCalendarCurrentPeriodController.prototype, "changeEventEmitter", void 0);
+__decorate$h([
+  MapToComponentField({ writable: true })
+], VegaCalendarCurrentPeriodController.prototype, "viewMode", void 0);
+__decorate$h([
+  MapToComponentMethod('componentWillLoad')
+], VegaCalendarCurrentPeriodController.prototype, "initialCurrentPeriod", null);
+__decorate$h([
+  MapToComponentMethod('watchCurrentPeriodChange')
+], VegaCalendarCurrentPeriodController.prototype, "emitChangeEvent", null);
+__decorate$h([
+  MapToComponentMethod('watchViewModeChange')
+], VegaCalendarCurrentPeriodController.prototype, "updateCurrentPeriodByViewMode", null);
+
+var __decorate$g = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** This code snippet defines a TypeScript class `VegaCalendarMonthEventRenderer` that extends `VegaSlimmer`. Here's a breakdown of what the class and its methods are doing: */
+class VegaCalendarMonthEventRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.maxMonthDisplayEventsCount = 2;
+  }
+  /**
+   * current row dates all events.
+   *
+   * @param {CalendarDate[]} rowDate the current view date object
+   * @returns {(CalendarEvent|null)[][]} the current view events
+   */
+  getCurrentRowEvents(rowDate) {
+    const result = [];
+    rowDate.forEach((item) => {
+      const currentDateEvents = this.calendarEventController.getCurrentDateEvents(item);
+      result.push(currentDateEvents);
+    });
+    return this.fullDayEventLayoutRenderer.sortLongEvents(result);
+  }
+  /**
+   * The function filterRowDisplayEvents processes a 2D array of CalendarEvent objects to limit the number of events displayed per row.
+   *
+   * @param {(CalendarEvent|null)[][]} rowEvents - `rowEvents` is an array of arrays of `CalendarEvent` objects. Each inner array represents events for a specific row in a calendar display.
+   * @returns {(CalendarEvent|null)[][]} the current row should display events array
+   */
+  filterRowDisplayEvents(rowEvents) {
+    const result = [];
+    rowEvents.forEach((events) => {
+      const displayEvents = events.length > this.maxMonthDisplayEventsCount
+        ? events.slice(0, this.maxMonthDisplayEventsCount - 1)
+        : events;
+      result.push(displayEvents);
+    });
+    return this.hideTheCutOffEvents(rowEvents, result);
+  }
+  /**
+   * Get the month event container element ref
+   *
+   * @returns {HTMLDivElement} the container element
+   */
+  getMonthEventContainerRef() {
+    return this.eventContainerRef;
+  }
+  /**
+   * render the current date events
+   *
+   * @param {CalendarDate} calendarDate current day
+   * @param {Nullable<CalendarEvent>[]} allEvents current row events
+   * @param {Nullable<CalendarEvent>[]} displayEvents current row should display events
+   * @param {number} currentViewIndex current day index of week
+   * @returns {HTMLDivElement} the events container
+   */
+  render(calendarDate, allEvents, displayEvents, currentViewIndex) {
+    const hiddenEventsLength = allEvents
+      .slice(displayEvents.length)
+      .filter((item) => item).length;
+    return (h("div", { class: "events-container", ref: (node) => (this.eventContainerRef = node) },
+      h("div", { class: "event-list" }, this.fullDayEventLayoutRenderer.render(displayEvents, currentViewIndex)),
+      this.renderMoreButton(allEvents, hiddenEventsLength, `${calendarDate.date} ${getMonthName(calendarDate.toDate())} ${calendarDate.year}`)));
+  }
+  /**
+   * Add a month event display count change observer, than update the component
+   */
+  addMaxDisplayCountChange() {
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.host, VegaInternalCalendarMonthEventsChange, (payload) => {
+      this.maxMonthDisplayEventsCount = payload.detail;
+      if (this.viewMode === 'month') {
+        forceUpdate(this.host);
+      }
+    });
+  }
+  /**
+   * Render the event more button if there is no enough space to display all event
+   *
+   * @param {Nullable<CalendarEvent>[]} events all event list array
+   * @param {number} moreItemsLength popover events length
+   * @param {string} title the popover title
+   * @returns {HTMLDivElement | null} the more button or null
+   */
+  renderMoreButton(events, moreItemsLength, title) {
+    if (moreItemsLength) {
+      const backgroundColorEvents = events.filter((eventItem) => {
+        return eventItem && (eventItem.isAllDayEvent || eventItem.isGroupEvent());
+      });
+      const otherEvents = events.filter((eventItem) => {
+        return eventItem && !eventItem.isAllDayEvent && !eventItem.isGroupEvent();
+      });
+      return (h("div", { class: "month-event-more" },
+        h("vega-popover", { trigger: "click", placement: "right" },
+          h("div", { tabIndex: 0, slot: "popover-content", role: "button", class: "more-button", onKeyDown: createEnterKeyHandlerToTriggerClick() }, `${moreItemsLength} More`),
+          h("vega-flex", { slot: "popover", direction: "col", gap: "0" },
+            h("vega-font", { textAlign: "center", variant: "font-field-label", color: "text-primary", style: { padding: '4px 0', marginBottom: '8px' } }, title),
+            h("vega-flex", { direction: "col", gap: "size-4", style: { paddingBottom: otherEvents.length ? '4px' : '0px' } }, backgroundColorEvents.map((item) => {
+              return this.eventItemRenderer.render(item, {
+                'month-event': true,
+                'calendar-event-large-size': true,
+                'calendar-event-in-popover': true,
+              });
+            })),
+            otherEvents.map((item) => {
+              return this.eventItemRenderer.render(item, {
+                'month-event': true,
+                'calendar-event-large-size': true,
+                'calendar-event-in-popover': true,
+              });
+            })))));
+    }
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-calendar-render-full-day-event-correct}
+   */
+  /* istanbul ignore next */
+  /**
+   * The `hideTheCutOffEvents` method in the `VegaCalendarMonthEventRenderer` class is responsible for removing any cut-off events from the displayed events in each row
+   *
+   * @param {Nullable<CalendarEvent>[][]} allEvents the all events
+   * @param {Nullable<CalendarEvent>[][]} rowEvents the display events
+   * @returns {Nullable<CalendarEvent>[][]} new event array
+   */
+  hideTheCutOffEvents(allEvents, rowEvents) {
+    const result = [];
+    const removeItems = [];
+    const shouldCheckEvents = rowEvents
+      .map((items) => items[items.length - 1])
+      .filter((item) => item && item.isGroupEvent());
+    if (shouldCheckEvents.length) {
+      shouldCheckEvents.forEach((checkItem) => {
+        if (allEvents.filter((items) => items.includes(checkItem)).length >
+          rowEvents.filter((items) => items.includes(checkItem)).length) {
+          removeItems.push(checkItem);
+        }
+      });
+    }
+    if (removeItems.length) {
+      rowEvents.forEach((items) => {
+        if (items.length && removeItems.includes(items[items.length - 1])) {
+          result.push(items.slice(0, items.length - 1));
+        }
+        else {
+          result.push(items);
+        }
+      });
+      return result;
+    }
+    return rowEvents;
+  }
+}
+__decorate$g([
+  MapToComponentField()
+], VegaCalendarMonthEventRenderer.prototype, "viewMode", void 0);
+__decorate$g([
+  MapToComponentField()
+], VegaCalendarMonthEventRenderer.prototype, "host", void 0);
+__decorate$g([
+  MapToComponentField()
+], VegaCalendarMonthEventRenderer.prototype, "calendarEventController", void 0);
+__decorate$g([
+  MapToComponentField()
+], VegaCalendarMonthEventRenderer.prototype, "eventItemRenderer", void 0);
+__decorate$g([
+  MapToComponentField()
+], VegaCalendarMonthEventRenderer.prototype, "fullDayEventLayoutRenderer", void 0);
+__decorate$g([
+  MapToComponentMethod('componentWillLoad')
+], VegaCalendarMonthEventRenderer.prototype, "addMaxDisplayCountChange", null);
+
+/** The above code defines an abstract class `CalendarEventBaseRepeatPattern` in TypeScript that represents a repeat pattern for calendar events. Here is a summary of what the code is doing: */
+class CalendarEventBaseRepeatPattern {
+  /**
+   * The constructor initializes the current date for a given date range and interval.
+   *
+   * @param {CalendarDate} repeatStartDate - The `repeatStartDate` parameter represents the starting date of a
+   * calendar event or interval. It is of type `CalendarDate`, which likely contains information such as
+   * the year, month, and day of the event.
+   * @param {number} interval - The `interval` parameter represents the frequency at which the event
+   * occurs. For example, if the interval is set to 2, it means the event occurs every 2 units of time
+   * (e.g., every 2 days, weeks, months, etc.).
+   * @param {Nullable<number>} count - The `count` parameter specifies the number of occurrences of the event. If `count`
+   * is provided, the event will repeat `count` times within the specified interval. If `count` is
+   * `null`, the event will repeat indefinitely until the `until` date is reached.
+   * @param {Nullable<CalendarDate>} until - The `until` parameter in the constructor represents a date until which the recurring
+   * event will occur. If this date is reached, the recurring event will stop.
+   */
+  constructor(repeatStartDate, interval, count, until) {
+    this.repeatStartDate = repeatStartDate;
+    this.interval = interval;
+    this.count = count;
+    this.until = until;
+  }
+  /**
+   * The function `getRepeatSeries` retrieves a series of repeated events within a specified calendar period.
+   *
+   * @param {CalendarPeriod} period - The `period` parameter in the `getRepeatSeries` method represents
+   * a specific time period in the form of a `CalendarPeriod` object. This object typically contains a
+   * `startDate` and an `endDate`, which define the range of dates for which you want to generate repeat series.
+   * @param {number} eventSpansDays - the current repeat series cross days, default value is one
+   * @returns {CalendarDate[]}  repeat start date array
+   */
+  getRepeatSeries(period, eventSpansDays = 1) {
+    this.generateRepeatDateCacheUntilEndDate(period.endDate);
+    return this.cache.filter((item) => {
+      return this.isSeriesInPeriod(item, eventSpansDays, period);
+    });
+  }
+  /**
+   * The function `isSeriesInPeriod` checks if a series of dates falls within a specified date range.
+   *
+   * @param {CalendarDate} series - The `series` parameter represents a specific date in the form of a
+   * `CalendarDate` object.
+   * @param {number} seriesSpansDays - The `seriesSpansDays` parameter represents the number of days
+   * that the series spans. It is used to calculate the end date of the series based on the start date.
+   * @param {CalendarPeriod} period - Date period
+   * @returns {boolean} a boolean value indicating whether the given series falls within the specified date
+   * range.
+   */
+  isSeriesInPeriod(series, seriesSpansDays, period) {
+    const seriesStart = series.toDate();
+    const seriesEnd = new Date(series.year, series.month - 1, series.date + seriesSpansDays - 1);
+    const { startDate, endDate } = period;
+    const rangeStart = startDate.toDate();
+    const rangeEnd = endDate.toDate();
+    return ((seriesStart >= rangeStart && seriesStart <= rangeEnd) ||
+      (seriesEnd >= rangeStart && seriesEnd <= rangeEnd) ||
+      (seriesStart <= rangeStart && seriesEnd >= rangeEnd));
+  }
+}
+CalendarEventBaseRepeatPattern.daySeconds = 24 * 60 * 60 * 1000;
+
+/** The `CalendarEventDailyRepeatPattern` class in TypeScript represents a daily repeating pattern for calendar events. */
+class CalendarEventDailyRepeatPattern extends CalendarEventBaseRepeatPattern {
+  /**
+   * The constructor initializes the current date for a given date range and interval.
+   *
+   * @param {CalendarDate} startDate - The `startDate` parameter is of type `CalendarDate` and represents the starting date for a specific interval or range.
+   * @param {number} interval - The `interval` parameter represents the frequency at which the event
+   * occurs. For example, if the interval is set to 1, it means the event occurs every day. If the
+   * interval is set to 2, it means the event occurs every other day.
+   * @param {Nullable<number>} count - The `count` parameter specifies the number of occurrences of the event. If `count`
+   * is provided, the event will repeat `count` times within the specified interval. If `count` is
+   * `null`, the event will repeat indefinitely until the `until` date is reached.
+   * @param {Nullable<CalendarDate>} until - The `until` parameter in the constructor is of type `Nullable<CalendarDate>`, which
+   * means it can either accept a `CalendarDate` object or be `null`. This parameter is used to specify
+   * a date until which the recurring event should repeat. If `until` is provided, the event
+   */
+  constructor(startDate, interval, count, until) {
+    super(startDate, interval, count, until);
+    this.initCache();
+  }
+  /**
+   * The function generates and caches repeated dates before a specified end date.
+   *
+   * @param {CalendarDate} endDate - The `endDate` parameter represents the date until which you want to
+   * generate repeat dates in the cache. The function `generateRepeatDateCacheBeforeEndDate` is
+   * responsible for populating the cache with repeat dates until the specified `endDate`. It checks the
+   * last date in the cache and generates subsequent repeat dates until
+   */
+  generateRepeatDateCacheUntilEndDate(endDate) {
+    const lastMatchDate = this.cache[this.cache.length - 1];
+    if (lastMatchDate.toDate() < endDate.toDate() &&
+      (!this.count || (typeof this.count === 'number' && this.cache.length < this.count))) {
+      let nextMatchDate = this.getNextRepeatStartDate(lastMatchDate);
+      while (nextMatchDate && nextMatchDate.toDate() < endDate.toDate()) {
+        nextMatchDate = this.getNextRepeatStartDate(nextMatchDate);
+        if (typeof this.count === 'number' && this.cache.length >= this.count) {
+          break;
+        }
+      }
+    }
+  }
+  /**
+   * The function `initCache` initializes a cache array with the `startDate` value.
+   */
+  initCache() {
+    this.cache = [this.repeatStartDate];
+  }
+  /**
+   * The function getNextRepeatStartDate calculates the next repeat start date based on a given date and certain conditions.
+   *
+   * @param {CalendarDate} date - The `date` parameter represents the current date for which you want to
+   * calculate the next repeat start date. It is an instance of the `CalendarDate` class.
+   * @returns {Nullable<CalendarDate>} The function `getNextRepeatStartDate` returns either a `CalendarDate` object if certain
+   * conditions are met, or `null` if the conditions are not met.
+   */
+  getNextRepeatStartDate(date) {
+    const nextDate = new Date(date.year, date.month - 1, date.date + this.interval);
+    const nextCalendarDate = CalendarDate.from(nextDate);
+    if ((this.until && nextDate > this.until.toDate()) ||
+      (typeof this.count === 'number' && this.cache.length >= this.count)) {
+      return null;
+    }
+    else {
+      this.cache.push(nextCalendarDate);
+      return nextCalendarDate;
+    }
+  }
+}
+
+/** The `CalendarEventMonthlyRepeatPattern` class in TypeScript represents a monthly repeat pattern for calendar events. */
+class CalendarEventMonthlyRepeatPattern extends CalendarEventBaseRepeatPattern {
+  /**
+   * The constructor initializes the event with specified start and end dates, interval, count, and until date, and sets the byMonthDay property to the start date's day.
+   *
+   * @param {CalendarDate} startDate - The `startDate` parameter represents the starting date of the
+   * event or interval. It is of type `CalendarDate`, which likely includes the year, month, and day
+   * components of the date.
+   * @param {number} interval - The `interval` parameter specifies the frequency of the recurring
+   * events. For example, if the interval is set to 2, the event will occur every 2 units of time (days,
+   * weeks, months, etc.).
+   * @param {Nullable<number>} count - The `count` parameter specifies the number of occurrences of the event. If `count`
+   * is provided, the event will repeat `count` times within the specified interval. If `count` is not
+   * provided (or is `null`), the event will repeat indefinitely based on the other parameters like `
+   * @param {Nullable<CalendarDate>} until - The `until` parameter is a nullable `CalendarDate` that specifies the end date for
+   * the recurring event. If provided, the event will repeat until this date. If not provided, the event
+   * will repeat indefinitely based on the other parameters like `count` or `endDate`.
+   */
+  constructor(startDate, interval, count, until) {
+    super(startDate, interval, count, until);
+    this.byMonthDay = this.repeatStartDate.date;
+    this.initCache();
+  }
+  /**
+   * This function generates and caches repeated dates before a specified end date.
+   *
+   * @param {CalendarDate} endDate - The `endDate` parameter in the
+   * `generateRepeatDateCacheUntilEndDate` function is a CalendarDate object that represents the end
+   * date until which the repeat dates need to be generated and cached. The function checks if the last
+   * cached date is before the `endDate` and generates additional repeat dates until it reaches
+   */
+  generateRepeatDateCacheUntilEndDate(endDate) {
+    const lastMatchDate = this.cache[this.cache.length - 1];
+    if (lastMatchDate.toDate() < endDate.toDate() &&
+      (!this.count || (typeof this.count === 'number' && this.cache.length < this.count))) {
+      let nextMatchDate = this.getNextRepeatStartDate(lastMatchDate);
+      while (nextMatchDate && nextMatchDate.toDate() < endDate.toDate()) {
+        nextMatchDate = this.getNextRepeatStartDate(nextMatchDate);
+        if (typeof this.count === 'number' && this.cache.length >= this.count) {
+          break;
+        }
+      }
+    }
+  }
+  /**
+   * The function `initCache` initializes a cache array with the startDate value.
+   */
+  initCache() {
+    this.cache = [this.repeatStartDate];
+  }
+  /**
+   * The getNextRepeatStartDate function calculates the next start date based on a given date and interval, considering constraints such as end date and count limit.
+   *
+   * @param {CalendarDate} date - The `date` parameter represents the current date for which you want to
+   * calculate the next repeat start date. It is of type `CalendarDate`.
+   * @returns {Nullable<CalendarDate>} The function `getNextRepeatStartDate` returns a nullable `CalendarDate`. It either returns
+   * the next calculated `CalendarDate` based on the input date and interval, or it returns `null` if
+   * certain conditions are met (such as reaching the specified end date or count limit).
+   */
+  getNextRepeatStartDate(date) {
+    const nextDate = this.getNextStartDate(date.year, date.month - 1 + this.interval);
+    const nextCalendarDate = CalendarDate.from(nextDate);
+    if ((this.until && nextDate > this.until.toDate()) ||
+      (typeof this.count === 'number' && this.cache.length >= this.count)) {
+      return null;
+    }
+    else {
+      this.cache.push(nextCalendarDate);
+      return nextCalendarDate;
+    }
+  }
+  /**
+   * get the new date with fixed date, if the date.getDate() not equal the fixed date, find the next month
+   *
+   * @param {number} year year
+   * @param {number} month month
+   * @returns {Date} the new date
+   */
+  getNextStartDate(year, month) {
+    const nextDate = new Date(year, month, this.byMonthDay);
+    if (nextDate.getDate() === this.byMonthDay) {
+      return nextDate;
+    }
+    else {
+      return this.getNextStartDate(year, month + 1);
+    }
+  }
+}
+
+/** The `CalendarEventWeeklyRepeatPattern` class in TypeScript represents a weekly repeat pattern for calendar events, allowing for matching dates based on specific weekdays and generating future dates with optional constraints. */
+class CalendarEventWeeklyRepeatPattern extends CalendarEventBaseRepeatPattern {
+  /**
+   * This TypeScript constructor initializes a calendar date range with specified parameters including start date, end date, interval, count, until date, and an array of week days.
+   *
+   * @param {CalendarDate} startDate - The `startDate` parameter represents the starting date of the
+   * calendar event or schedule. It is of type `CalendarDate`, which likely includes the year, month, and day components of a date.
+   * @param {number} interval - The `interval` parameter represents the frequency of the recurrence. For
+   * example, if `interval` is set to 1, the event will occur every week. If it's set to 2, the event
+   * will occur every two weeks.
+   * @param {Nullable<number>} count - The `count` parameter specifies the number of occurrences of the rule. If `count` is
+   * provided, the recurrence will generate at most that many occurrences. If `count` is not provided,
+   * the recurrence will continue indefinitely based on other parameters like `endDate` or `until`.
+   * @param {Nullable<CalendarDate>} until - The `until` parameter specifies the end date for the recurrence rule. If provided,
+   * the recurrence will continue until this date. If not provided, the recurrence will continue
+   * indefinitely based on other parameters like `count` or `interval`.
+   * @param {Nullable<VegaCalendarWeekDayType[]>} byWeekDay - The `byWeekDay` parameter is an array of
+   * `VegaCalendarWeekDayType` values, which represent the days of the week for which the event should occur.
+   */
+  constructor(startDate, interval, count, until, byWeekDay) {
+    super(startDate, interval, count, until);
+    this.byWeekDay = this.sortWeekDay(byWeekDay);
+    this.initCache();
+  }
+  /**
+   * The function `getRepeatSeries` retrieves a series of repeated events within a specified calendar period.
+   *
+   * @param {CalendarPeriod} period - The `period` parameter in the `getRepeatSeries` method represents
+   * a specific time period in the form of a `CalendarPeriod` object. This object typically contains a
+   * `startDate` and an `endDate`, which define the range of dates for which you want to generate repeat series.
+   * @param {number} eventSpansDays - the current repeat series cross days, default value is one
+   * @returns {CalendarDate[]} repeat start date array
+   */
+  getRepeatSeries(period, eventSpansDays = 1) {
+    this.generateRepeatDateCacheUntilEndDate(period.endDate);
+    return this.getValidCache().filter((item) => {
+      return this.isSeriesInPeriod(item, eventSpansDays, period);
+    });
+  }
+  /**
+   * This function generates repeated dates and caches them until a specified end date.
+   *
+   * @param {CalendarDate} endDate - The `endDate` parameter is a `CalendarDate` object that represents
+   * the date until which the repeat date cache needs to be generated. The function
+   * `generateRepeatDateCacheUntilEndDate` generates repeat dates until this specified end date.
+   */
+  generateRepeatDateCacheUntilEndDate(endDate) {
+    const lastMatchDate = this.cache[this.cache.length - 1];
+    if (lastMatchDate[0].toDate() < endDate.toDate() &&
+      (!this.count || (typeof this.count === 'number' && this.cache.length < this.count))) {
+      let nextMatchDate = this.getNextRepeatStartDate(lastMatchDate);
+      while (nextMatchDate && nextMatchDate[0].toDate() < endDate.toDate()) {
+        nextMatchDate = this.getNextRepeatStartDate(nextMatchDate);
+        if (typeof this.count === 'number' && this.getValidCache().length >= this.count) {
+          break;
+        }
+      }
+    }
+  }
+  /**
+   * The function getNextRepeatStartDate calculates the next start dates based on a given array of CalendarDate objects and returns them if certain conditions are met.
+   *
+   * @param {CalendarDate[]} dates - The `dates` parameter is an array of `CalendarDate` objects.
+   * @returns {Nullable<CalendarDate[]>} The `getNextRepeatStartDate` function returns a nullable array of `CalendarDate` objects.
+   * If there are no next dates available or if the cache count exceeds a specified limit, it returns
+   * `null`. Otherwise, it returns an array of `CalendarDate` objects representing the next start dates.
+   */
+  getNextRepeatStartDate(dates) {
+    const nextDate = this.getNextStartDates(dates);
+    if (nextDate.length === 0 ||
+      (typeof this.count === 'number' && this.getValidCache().length >= this.count)) {
+      return null;
+    }
+    else {
+      const nextCalendarDates = nextDate.map((item) => CalendarDate.from(item));
+      this.cache.push(nextCalendarDates);
+      return nextCalendarDates;
+    }
+  }
+  /**
+   * The function `getNextStartDates` takes an array of `CalendarDate` objects, calculates the next dates based on a specified interval, and filters out dates that are after a specified end date.
+   *
+   * @param {CalendarDate[]} dates - The `dates` parameter is an array of `CalendarDate` objects
+   * representing specific dates in a calendar. Each `CalendarDate` object has properties for the year,
+   * month, and date.
+   * @returns {Date[]} The `getNextStartDates` function returns an array of `Date` objects representing the next
+   * start dates based on the input `CalendarDate` array. The function calculates the next start dates
+   * by adding a specific interval (multiplied by 7 to represent weeks) to each date in the input array.
+   * Finally, it filters out any dates that are after a specified `until` date, if provided.
+   */
+  getNextStartDates(dates) {
+    const nextDates = dates.map((dateItem) => new Date(dateItem.year, dateItem.month - 1, dateItem.date + this.interval * 7));
+    return nextDates.filter((item) => !this.until || item <= this.until.toDate());
+  }
+  /**
+   * The `initCache` function initializes a cache of calendar dates based on the start date and weekly repeat pattern.
+   */
+  initCache() {
+    const result = [];
+    const currentWeekDayIndex = this.getCurrentDayIndex(this.repeatStartDate);
+    this.byWeekDay.forEach((day) => {
+      const index = CalendarEventWeeklyRepeatPattern.weekDay.indexOf(day);
+      const days = index - currentWeekDayIndex;
+      const { year, month, date } = this.repeatStartDate;
+      const dateItem = CalendarDate.from(new Date(year, month - 1, date + days));
+      result.push(dateItem);
+    });
+    this.cache = [result];
+  }
+  /**
+   * The function `sortWeekDay` sorts an array of week days based on their position in a predefined list.
+   *
+   * @param {boolean} weekDay - The `weekDay` parameter is an array of week day values that need to be sorted in a
+   * specific order. The function `sortWeekDay` takes this array and sorts it based on a predefined
+   * order specified in `CalendarEventWeeklyRepeatPattern.weekDay`.
+   * @returns {VegaCalendarWeekDayType[]} The `sortWeekDay` function is returning the `weekDay` array sorted based on the index of
+   * each `VegaCalendarWeekDayType` item in the `CalendarEventWeeklyRepeatPattern.weekDay` array.
+   */
+  sortWeekDay(weekDay) {
+    if (weekDay && weekDay.length) {
+      return weekDay
+        .map((item) => item.toLocaleLowerCase())
+        .sort((itemA, itemB) => {
+        return (CalendarEventWeeklyRepeatPattern.weekDay.indexOf(itemA) -
+          CalendarEventWeeklyRepeatPattern.weekDay.indexOf(itemB));
+      });
+    }
+    else {
+      return [CalendarEventWeeklyRepeatPattern.weekDay[this.getCurrentDayIndex(this.repeatStartDate)]];
+    }
+  }
+  /**
+   * This function returns the index of the current day in a week, with Sunday represented as 0.
+   *
+   * @param {CalendarDate} date - The `date` parameter in the `getCurrentDayIndex` function is of type
+   * `CalendarDate`, which is a custom data type representing a date in a calendar.
+   * @returns {number} The function `getCurrentDayIndex` returns the index of the current day in the week, with
+   * Sunday being represented as 0 and Saturday being represented as 6.
+   */
+  getCurrentDayIndex(date) {
+    return date.toDate().getDay();
+  }
+  /**
+   * The function `getValidCache` returns a filtered and concatenated array of CalendarDate objects from the cache based on a start date.
+   *
+   * @returns {CalendarDate[]} The `getValidCache` method returns an array of `CalendarDate` objects that meet the
+   * condition of having a date greater than or equal to the `startDate` property. The method first
+   * flattens a nested array of `CalendarDate` objects stored in the `cache` property, then filters out
+   * the `CalendarDate` objects that do not meet the condition, and finally concatenates the filtered
+   * array
+   */
+  getValidCache() {
+    const flatArr = flatNestedArray(this.cache.slice(1));
+    return this.cache[0]
+      .filter((item) => item.toDate() >= this.repeatStartDate.toDate())
+      .concat(flatArr)
+      .slice(0, typeof this.count === 'number' ? this.count : undefined);
+  }
+}
+CalendarEventWeeklyRepeatPattern.weekDay = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map((item) => item.toLowerCase());
+
+/** The `CalendarEventYearlyRepeatPattern` class defines a yearly repeat pattern for calendar events, checking for matches and generating future dates based on specified criteria. */
+class CalendarEventYearlyRepeatPattern extends CalendarEventBaseRepeatPattern {
+  /**
+   * The constructor initializes a new instance with specified start and end dates, interval, count, and until date.
+   *
+   * @param {CalendarDate} startDate - The `startDate` parameter is of type `CalendarDate` and
+   * represents the starting date of a calendar event or interval.
+   * @param {number} interval - The `interval` parameter represents the frequency at which the event
+   * occurs. For example, if the interval is set to 2, the event will occur every 2 units of time (days,
+   * weeks, months, etc.).
+   * @param {Nullable<number>} count - The `count` parameter specifies the number of occurrences of the event. If `count`
+   * is provided, the event will repeat `count` times within the specified interval. If `count` is not
+   * provided, the event will repeat indefinitely based on the other parameters like `endDate` or
+   * `until`.
+   * @param {Nullable<CalendarDate>} until - The `until` parameter in the constructor is of type `Nullable<CalendarDate>`. This
+   * means that it can either accept a `CalendarDate` object or be `null`. It is used to specify a date
+   * until which the recurring event should repeat. If `until` is provided, the event
+   */
+  constructor(startDate, interval, count, until) {
+    super(startDate, interval, count, until);
+    this.matchDay = this.repeatStartDate.date;
+    this.matchMonth = this.repeatStartDate.month;
+    this.initCache();
+  }
+  /**
+   * The function generates repeat dates and caches them until reaching the specified end date.
+   *
+   * @param {CalendarDate} endDate - The `endDate` parameter in the
+   * `generateRepeatDateCacheUntilEndDate` function is a CalendarDate object that represents the date
+   * until which the repeat date cache should be generated. The function checks if the last date in the
+   * cache is before the `endDate`, and if so, it generates additional repeat dates
+   */
+  generateRepeatDateCacheUntilEndDate(endDate) {
+    const lastMatchDate = this.cache[this.cache.length - 1];
+    if (lastMatchDate.toDate() < endDate.toDate() &&
+      (!this.count || (typeof this.count === 'number' && this.cache.length < this.count))) {
+      let nextMatchDate = this.getNextRepeatStartDate(lastMatchDate);
+      while (nextMatchDate && nextMatchDate.toDate() < endDate.toDate()) {
+        nextMatchDate = this.getNextRepeatStartDate(nextMatchDate);
+        if (typeof this.count === 'number' && this.cache.length >= this.count) {
+          break;
+        }
+      }
+    }
+  }
+  /**
+   * The function getNextRepeatStartDate calculates the next repeat start date based on a given date and certain conditions.
+   *
+   * @param {CalendarDate} date - The `date` parameter represents the current date for which you want to
+   * calculate the next repeat start date. It is of type `CalendarDate`, which seems to be a custom
+   * class or structure that holds year, month, and day information.
+   * @returns {Nullable<CalendarDate>} The function `getNextRepeatStartDate` returns either a `CalendarDate` object or `null`
+   * based on certain conditions. If the next date exceeds the `until` date or the count limit has been
+   * reached, it returns `null`. Otherwise, it adds the next date to the cache and returns it as a
+   * `CalendarDate`.
+   */
+  getNextRepeatStartDate(date) {
+    const nextDate = this.getNextStartDate(date.year + this.interval);
+    const nextCalendarDate = CalendarDate.from(nextDate);
+    if ((this.until && nextDate > this.until.toDate()) ||
+      (typeof this.count === 'number' && this.cache.length >= this.count)) {
+      return null;
+    }
+    else {
+      this.cache.push(nextCalendarDate);
+      return nextCalendarDate;
+    }
+  }
+  /**
+   * get the new date with fixed month and fixed date, if the date.getDate() not equal the fixed date or fixed month, find the next year
+   *
+   * @param {number} year year
+   * @returns {Date} the new date
+   */
+  getNextStartDate(year) {
+    const nextDate = new Date(year, this.matchMonth - 1, this.matchDay);
+    if (nextDate.getDate() === this.matchDay && nextDate.getMonth() + 1 === this.matchMonth) {
+      return nextDate;
+    }
+    else {
+      return this.getNextStartDate(year + 1);
+    }
+  }
+  /**
+   * The function `initCache` initializes a cache array with the `startDate` value.
+   */
+  initCache() {
+    this.cache = [this.repeatStartDate];
+  }
+}
+
+/** This code snippet defines a TypeScript class `CalendarEventRepeatPatternFactory` that serves as a factory for creating different types of repeat patterns for calendar events. Here's a breakdown of what the class and its methods are doing: */
+class CalendarEventRepeatPatternFactory {
+  /**
+   * This `getPattern` method within the `CalendarEventRepeatPatternFactory` class is a public method that is responsible for creating and returning a specific type of repeat pattern for a calendar event based on the input parameters provided. Here's a breakdown of what this method is doing:
+   *
+   * @param {Date} startDate repeat start date
+   * @param {VegaCalendarEventRepeatOptions|undefined} repeatOptions repeat options
+   * @returns {CalendarEventBaseRepeatPattern} the match repeat pattern
+   */
+  getPattern(startDate, repeatOptions) {
+    const repeatStartDate = CalendarDate.from(startDate);
+    const { frequency, interval = 1, byWeekDay, until, count, } = repeatOptions;
+    const repeatEndDate = this.initDate(until);
+    return this.initRepeatPattern(frequency, repeatStartDate, interval < 1 ? 1 : interval, count, repeatEndDate, byWeekDay);
+  }
+  /**
+   * The `initDate` function initializes a `CalendarDate` object based on the input date string or Date object provided.
+   *
+   * @param {Nullable<string | Date>} date - The `date` parameter can be either a string or a Date object.
+   * @returns {Nullable<CalendarDate>} The function `initDate` returns a `Nullable<CalendarDate>`, which means it can return either a `CalendarDate` object or `null`.
+   */
+  initDate(date) {
+    if (date && typeof date === 'object') {
+      return CalendarDate.from(date);
+    }
+    else if (date && typeof date === 'string') {
+      const [month, day, year] = date.split('/');
+      return new CalendarDate(Number(year), Number(month), Number(day));
+    }
+  }
+  /**
+   * The function `initRepeatPattern` initializes a repeat pattern based on the frequency specified for a calendar event.
+   *
+   * @param {VegaCalendarEventRepeatType} frequency event frequency
+   * @param {CalendarDate} repeatStartDate event start date
+   * @param {number} interval event repeat interval
+   * @param {Nullable<number>} count the event repeat count
+   * @param {Nullable<CalendarDate>} repeatEndDate repeat end date
+   * @param {Nullable<VegaCalendarWeekDayType[]>} byWeekDay weekly week days
+   * @returns {CalendarEventBaseRepeatPattern} calendar event repeat pattern instance
+   */
+  initRepeatPattern(frequency, repeatStartDate, interval, count, repeatEndDate, byWeekDay) {
+    switch (frequency) {
+      case 'daily':
+        return new CalendarEventDailyRepeatPattern(repeatStartDate, interval, count, repeatEndDate);
+      case 'weekly':
+        return new CalendarEventWeeklyRepeatPattern(repeatStartDate, interval, count, repeatEndDate, byWeekDay);
+      case 'monthly':
+        return new CalendarEventMonthlyRepeatPattern(repeatStartDate, interval, count, repeatEndDate);
+      default:
+        return new CalendarEventYearlyRepeatPattern(repeatStartDate, interval, count, repeatEndDate);
+    }
+  }
+}
+const calendarEventRepeatPatternFactory = new CalendarEventRepeatPatternFactory();
+
+const CalendarDateFormatReg = /^\d{1,2}\/\d{1,2}\/\d{4}/;
+const CalendarTimeFormatReg = /^\d{1,2}:\d{1,2}/;
+/** The `CalendarEvent` class in TypeScript represents a calendar event with methods to validate required fields, initialize dates and times, and determine if it is a group event. */
+class CalendarEvent {
+  /**
+   * The constructor initializes a VegaCalendarRawEvent object and performs validation checks on required fields.
+   *
+   * @param {VegaCalendarRawEvent} eventOptions - The `eventOptions` parameter in the constructor
+   * represents the raw event data for a Vega calendar event. It contains information such as the event
+   * title, start and end dates, location, description, and any other relevant details about the event.
+   * @param {string} eventKey If a value is not provided for `eventKey`, a UUID (Universally
+   * Unique Identifier) will be generated as a default value. This identifier is used to distinguish
+   * different events and can be helpful for tracking
+   */
+  constructor(eventOptions, eventKey) {
+    // the default value is 1 when the event end date is same as start date
+    this._eventSpansDays = 1;
+    this.repeatPattern = null;
+    this._event = eventOptions;
+    this._eventKey = eventKey || generateUUID();
+    this.checkEventRequireField(eventOptions);
+    this.initDate(eventOptions);
+    this.initEventSpansDays();
+    this.initRepeatPattern();
+  }
+  /**
+   * The function returns the raw event data for a VegaCalendar event.
+   *
+   * @returns {VegaCalendarRawEvent} The `get event()` method is returning a `VegaCalendarRawEvent` object, which is stored in the `_event` property.
+   */
+  get event() {
+    return this._event;
+  }
+  /**
+   * This function returns the key of an event in TypeScript.
+   *
+   * @returns {string} event key
+   */
+  get eventKey() {
+    return this._eventKey;
+  }
+  /**
+   * This function returns the title of an event in TypeScript.
+   *
+   * @returns {string} The title of the event.
+   */
+  get title() {
+    return this._event.title;
+  }
+  /**
+   * This function returns the disabled of an event in TypeScript.
+   *
+   * @returns {boolean} The disabled of the event.
+   */
+  get disabled() {
+    return !!this._event.disabled;
+  }
+  /**
+   * This function returns the variant of an event in TypeScript.
+   *
+   * @returns {VegaCalendarEventVariantType|null} The variant of the event.
+   */
+  get variant() {
+    return this._event.variant;
+  }
+  /**
+   * This function returns the color of an event in TypeScript.
+   *
+   * @returns {string|null} The color of the event.
+   */
+  get color() {
+    return this._event.color;
+  }
+  /**
+   * The function isAllDayEvent returns a boolean value indicating whether the event is an all-day event.
+   *
+   * @returns {boolean} The method `isAllDayEvent()` is returning a boolean value indicating whether the event is an all-day event or not. It returns `true` if the event is an all-day event, and `false` if it is not.
+   */
+  get isAllDayEvent() {
+    return !!this._event.isAllDay;
+  }
+  /**
+   * The function isRepeatEvent returns a boolean value based on whether the event's repeatOptions property is not equal to 'none'.
+   *
+   * @returns {boolean} The method `isRepeatEvent` returns a boolean value indicating whether the `_event` has a repeat value other than 'none'.
+   */
+  get isRepeatEvent() {
+    return this.repeatPattern !== null;
+  }
+  /**
+   * The function returns the start date property of an object.
+   *
+   * @returns {Date} The `startDate` property of type `Date` is being returned.
+   */
+  get startDate() {
+    return this._startDate;
+  }
+  /**
+   * The function returns the end date property of an object.
+   *
+   * @returns {Date} The `endDate` property of type `Date` is being returned.
+   */
+  get endDate() {
+    return this._endDate;
+  }
+  /**
+   * This function returns the start time as a string.
+   *
+   * @returns {string} The `_startTime` property, which is a string, is being returned.
+   */
+  get startTime() {
+    return this._startTime;
+  }
+  /**
+   * This function returns the end time as a string.
+   *
+   * @returns {string} The `_endTime` property, which is a string, is being returned.
+   */
+  get endTime() {
+    return this._endTime;
+  }
+  /**
+   * This function returns the number of days that an event spans.
+   *
+   * @returns {number} The method `get eventSpansDays()` is returning the value of the property
+   * `_eventSpansDays`, which is of type `number`.
+   */
+  get eventSpansDays() {
+    return this._eventSpansDays;
+  }
+  /**
+   * The function `copyTo` copies a calendar event with updated start and end dates.
+   *
+   * @param {string} eventKey - The `eventKey` parameter in the `copyTo` function is a string that represents the key or identifier of the new calendar event that will be created.
+   * @param {CalendarDate} startDate - The `startDate` parameter in the `copyTo` function represents
+   * the starting date of a calendar event. It is of type `CalendarDate`, which may contain information such as the day, month, and year of the event.
+   * @returns {CalendarEvent} A new `CalendarEvent` object is being returned with the properties from the original
+   * `_event` object (excluding `repeatOptions`) and the `startDate` and `endDate` properties set to
+   * the `toDate()` values of the `startDate` and `endDate` parameters.
+   */
+  copyTo(eventKey, startDate) {
+    const endDate = this._eventSpansDays > 1
+      ? new Date(startDate.year, startDate.month - 1, startDate.date + (this._eventSpansDays - 1))
+      : startDate.toDate();
+    const result = new CalendarEvent(Object.assign(Object.assign({}, this._event), { startDate: startDate.toDate(), endDate: endDate, startTime: this.startTime, endTime: this.endTime }), eventKey);
+    return result;
+  }
+  /**
+   * Check the event is a group event or not
+   *
+   * @returns {boolean} true or false
+   */
+  isGroupEvent() {
+    return this._eventSpansDays > 1;
+  }
+  /**
+   * This TypeScript function checks if a given date falls within the range of a calendar event based on its start and end dates, considering different repeat types like daily, weekly, monthly, and yearly.
+   *
+   * @param {CalendarDate} date - The `date` parameter represents the current date for which you want to
+   * check if it falls within the range of the `calendarEvent`. It is of type `CalendarDate`.
+   * @returns {boolean} a boolean value, either `true` or `false`, based on whether the `calendarEvent` falls on the `date` provided.
+   */
+  isCurrentDayEvent(date) {
+    const { startDate, endDate } = this;
+    const startCalendarDate = CalendarDate.from(startDate);
+    const endCalendarDate = CalendarDate.from(new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate() + 1));
+    const currentDate = date.toDate();
+    return startCalendarDate.toDate() <= currentDate && endCalendarDate.toDate() > currentDate;
+  }
+  /**
+   * Get the number of minutes the event lasted
+   *
+   * @returns {number} the minutes
+   */
+  getEventDuration() {
+    const [startHour, startMinutes] = this.startTime.split(':');
+    const [endHour, endMinutes] = this.endTime.split(':');
+    const now = CalendarDate.from(new Date());
+    const startDate = new Date(now.year, now.month, now.date, Number(startHour), Number(startMinutes));
+    const endDate = new Date(now.year, now.month, now.date, Number(endHour) === 0 && Number(startHour) !== 0 ? 24 : Number(endHour), Number(endMinutes));
+    return (endDate.valueOf() - startDate.valueOf()) / (60 * 1000);
+  }
+  /**
+   * This function returns an array of repeat series based on a given calendar period.
+   *
+   * @param {CalendarPeriod} period - The `period` parameter in the `getRepeatSeries` method is of type
+   * `CalendarPeriod`. It represents a specific time period within a calendar, typically defined by a
+   * start date and an end date. The method uses this period to generate a series of repeated events
+   * based on a daily repeat pattern specified
+   * @returns {CalendarDate[]} repeat start date array
+   */
+  getRepeatSeries(period) {
+    if (this.repeatPattern) {
+      return this.repeatPattern.getRepeatSeries(period, this._eventSpansDays);
+    }
+    return [];
+  }
+  /**
+   * The function `convertTimeTo24Hour` converts a time string from 12-hour format to 24-hour format in TypeScript.
+   *
+   * @param {string} timeString - The `convertTimeTo24Hour` function you provided is used to convert a
+   * time string from 12-hour format to 24-hour format. The function checks if the input time string is
+   * in 12-hour format and contains either 'am' or 'pm'.
+   * @returns {string} The `convertTimeTo24Hour` function returns a string representing the input time string
+   * converted to 24-hour format. If the input time string is in 12-hour format and contains 'am' or
+   * 'pm', it converts it to 24-hour format. If the input time string is not in 12-hour format or does
+   * not contain 'am' or 'pm', it returns the original input
+   */
+  convertTimeTo24Hour(timeString) {
+    timeString = timeString.toLocaleLowerCase();
+    if (timeString.indexOf('am') > 0 || timeString.indexOf('pm') > 0) {
+      if (timeString.indexOf('am') > 0) {
+        timeString = timeString.replace('am', '').trim();
+        const [hour, minutes] = timeString.split(':');
+        return `${hour === '12' ? '00' : hour}:${minutes}`;
+      }
+      else {
+        timeString = timeString.replace('pm', '').trim();
+        const [hour, minutes] = timeString.split(':');
+        return `${hour === '12' ? '12' : Number(hour) + 12}:${minutes}`;
+      }
+    }
+    return timeString;
+  }
+  /**
+   * The function `checkEventRequireField` validates the required fields of a calendar event item in TypeScript.
+   *
+   * @param {VegaCalendarRawEvent} eventOptions - The `eventOptions` parameter is an object of type
+   * `VegaCalendarRawEvent` that contains information about a calendar event
+   */
+  checkEventRequireField(eventOptions) {
+    const { title, startDate, endDate, startTime, endTime } = eventOptions;
+    if ((startDate && typeof startDate === 'string' && !CalendarDateFormatReg.test(startDate)) ||
+      (endDate && typeof endDate === 'string' && !CalendarDateFormatReg.test(endDate))) {
+      throw new Error('Invalid calendar event item, the date format should be MM/DD/YYYY!');
+    }
+    if ((startTime && typeof startTime === 'string' && !CalendarTimeFormatReg.test(startTime)) ||
+      (endTime && typeof endTime === 'string' && !CalendarTimeFormatReg.test(endTime))) {
+      throw new Error('Invalid calendar event item, the time format should be HH:mm!');
+    }
+    if (!title || !startDate || (!endDate && !endTime)) {
+      throw new Error('Invalid calendar event item, the required field should not empty!');
+    }
+  }
+  /**
+   * The `initDate` function in TypeScript initializes start and end dates and times for a calendar event based on the provided options.
+   *
+   * @param {VegaCalendarRawEvent} eventOptions - The `initDate` method you provided is used to
+   * initialize the start and end dates for a calendar event based on the options provided in the
+   * `eventOptions` object. The `eventOptions` object contains properties such as `startDate`,
+   * `startTime`, `endDate`, and `endTime` which are used
+   */
+  initDate(eventOptions) {
+    const { startDate, startTime, endDate, endTime } = eventOptions;
+    if (startDate && typeof startDate === 'object') {
+      this._startDate = startDate;
+    }
+    else if (startDate && typeof startDate === 'string') {
+      const [month, day, year] = startDate.split('/');
+      this._startDate = new Date(Number(year), Number(month) - 1, Number(day));
+    }
+    if (!startTime) {
+      this._startTime = `${this._startDate.getHours()}:${this._startDate.getMinutes()}`;
+    }
+    else {
+      this._startTime = this.convertTimeTo24Hour(startTime);
+    }
+    if (endDate && typeof endDate === 'object') {
+      this._endDate = endDate;
+    }
+    else if (endDate && typeof endDate === 'string') {
+      const [month, day, year] = endDate.split('/');
+      this._endDate = new Date(Number(year), Number(month) - 1, Number(day), 23, 59, 59);
+    }
+    else {
+      this._endDate = new Date(this._startDate.getFullYear(), this._startDate.getMonth(), this._startDate.getDate(), 23, 59, 59);
+    }
+    if (!endTime) {
+      this._endTime = `${this._endDate.getHours()}:${this._endDate.getMinutes()}`;
+    }
+    else {
+      this._endTime = this.convertTimeTo24Hour(endTime);
+    }
+  }
+  /**
+   * The function initializes a repeat pattern controller for a calendar event with specified start and end dates and repeat options.
+   */
+  initRepeatPattern() {
+    if (this._event.repeatOptions && this._event.repeatOptions.frequency) {
+      this.repeatPattern = calendarEventRepeatPatternFactory.getPattern(this._startDate, this._event.repeatOptions);
+    }
+  }
+  /**
+   * Initializes the event cross days by the event start date and end date.
+   */
+  initEventSpansDays() {
+    const start = CalendarDate.from(this.startDate);
+    const end = CalendarDate.from(this.endDate);
+    this._eventSpansDays =
+      (end.toDate().valueOf() - start.toDate().valueOf()) / (24 * 60 * 60 * 1000) + 1;
+  }
+}
+
+var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** The `VegaCalendarEventController` class in TypeScript manages calendar events, initializes event layouts, retrieves events for the current date, and checks if a date falls within the range of a calendar event. */
+class VegaCalendarEventController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    // This map is cache for newly generated calendar events
+    this.repeatEventMap = new Map();
+  }
+  /**
+   * The function `getCurrentDateEvent` returns an array of calendar events for the current date, including both normal events and group events.
+   *
+   * @param {CalendarDate} date - The `date` parameter in the `getCurrentDateEvent` function is of type `CalendarDate`, which is used to represent a specific date with properties for year, month, and date.
+   * @returns {CalendarEvent[]} The `getCurrentDateEvent` function returns an array of `CalendarEvent` objects. It
+   * first retrieves all group events and normal events for the specified date, then filters out the
+   * events that are specific to the current day. Finally, it concatenates the current day events with
+   * the group events and returns the combined array.
+   */
+  getCurrentDateEvents(date) {
+    const allEvents = this.createRepeatEvents();
+    return allEvents.filter((item) => item.isCurrentDayEvent(date));
+  }
+  /**
+   * initial calendar events when component props events change
+   *
+   * @param {VegaCalendarRawEvent[]} newEvents new event options array
+   */
+  updateAfterEventChange(newEvents) {
+    this.initCalendarEvents(newEvents);
+    this.repeatEventMap.clear();
+  }
+  /**
+   * initial calendar events in first time
+   */
+  updateWhenComponentWillLoad() {
+    this.initCalendarEvents(this.events);
+  }
+  /**
+   * initial calendar events
+   *
+   * @param {VegaCalendarRawEvent[]} newEvents new event options array
+   */
+  initCalendarEvents(newEvents) {
+    const result = [];
+    if (newEvents) {
+      newEvents.forEach((item) => {
+        try {
+          const calendarEvent = new CalendarEvent(item);
+          result.push(calendarEvent);
+        }
+        catch (_a) {
+          LogUtility.warn('Invalid calendar event item:', item);
+        }
+      });
+    }
+    this.calendarEvents = result;
+  }
+  /**
+   * We need generate new calendar event from the full-day repeat calendar event, so we can render those event as normal full-day event
+   *
+   * @returns {CalendarEvent[]} The `handleRepeatEvents` method returns an array of `CalendarEvent` objects.
+   */
+  createRepeatEvents() {
+    const allEvents = this.calendarEvents;
+    const otherEvents = [];
+    const newRepeatEvents = [];
+    allEvents.forEach((item) => {
+      if (item.isRepeatEvent) {
+        const repeatSeries = item.getRepeatSeries(this.currentPeriod);
+        repeatSeries.forEach((series) => {
+          newRepeatEvents.push(this.generateCalendarEventByRepeatSeries(item, series));
+        });
+      }
+      else {
+        otherEvents.push(item);
+      }
+    });
+    return newRepeatEvents.concat(otherEvents);
+  }
+  /**
+   * This function generates a calendar event based on a repeat series and stores it in a map to avoid duplicate creation.
+   *
+   * @param {CalendarEvent} calendarEvent - The `calendarEvent` parameter represents a single event on
+   * a calendar. It contains information such as the event's start date, end date, and other details.
+   * @param {CalendarDate} series - The repeat start date
+   * @returns {CalendarEvent} The function `generateCalendarEventByRepeatSeries` returns a `CalendarEvent` object. If
+   * the event key already exists in the `repeatEventMap`, it returns the corresponding `CalendarEvent`
+   * object from the map. Otherwise, it creates a new `CalendarEvent` object based on the input
+   * `calendarEvent` and `series` parameters, adds it to the `repeatEventMap`, and then
+   */
+  generateCalendarEventByRepeatSeries(calendarEvent, series) {
+    const eventKey = `${calendarEvent.eventKey}-${series.year}${series.month}${series.date}`;
+    if (this.repeatEventMap.has(eventKey)) {
+      return this.repeatEventMap.get(eventKey);
+    }
+    else {
+      const result = calendarEvent.copyTo(eventKey, series);
+      this.repeatEventMap.set(eventKey, result);
+      return result;
+    }
+  }
+}
+__decorate$f([
+  MapToComponentField({ writable: true })
+], VegaCalendarEventController.prototype, "calendarEvents", void 0);
+__decorate$f([
+  MapToComponentField()
+], VegaCalendarEventController.prototype, "currentPeriod", void 0);
+__decorate$f([
+  MapToComponentField()
+], VegaCalendarEventController.prototype, "events", void 0);
+__decorate$f([
+  MapToComponentMethod('watchEventsChange')
+], VegaCalendarEventController.prototype, "updateAfterEventChange", null);
+__decorate$f([
+  MapToComponentMethod('componentWillLoad')
+], VegaCalendarEventController.prototype, "updateWhenComponentWillLoad", null);
+
+var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** The `VegaCalendarEventItemRenderer` class in TypeScript React is used for rendering calendar event items with specific layout and styling properties. */
+class VegaCalendarEventItemRenderer extends VegaSlimmer {
+  /**
+   * render event component
+   *
+   * @param {CalendarEvent} item the calendar event object
+   * @param {Record<string,boolean>} classMap the class name map
+   * @returns {HTMLVegaCalendarEventElement} calendar event element
+   */
+  render(item, classMap) {
+    return (h("vega-calendar-event", { "data-calendar-ref": this.host, key: item.eventKey, calendarEvent: item, class: classMap, onKeyDown: createEnterKeyHandlerToTriggerClick(), 
+      // eslint-disable-next-line react/jsx-no-bind
+      onClick: () => this.handleEventClick(item) }, !item.isRepeatEvent && h("slot", { name: getCalendarEventSlotName(item.event.key) })));
+  }
+  /**
+   * emit vega click event
+   *
+   * @param {CalendarEvent} eventItem the event item
+   */
+  handleEventClick(eventItem) {
+    this.eventClickEmitter.emit({ rawEvent: eventItem.event });
+  }
+}
+VegaCalendarEventItemRenderer.backgroundColorModeEventHeight = 18;
+__decorate$e([
+  MapToComponentField()
+], VegaCalendarEventItemRenderer.prototype, "host", void 0);
+__decorate$e([
+  MapToComponentField()
+], VegaCalendarEventItemRenderer.prototype, "calendarView", void 0);
+__decorate$e([
+  MapToComponentField()
+], VegaCalendarEventItemRenderer.prototype, "eventClickEmitter", void 0);
+
+var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** The `VegaCalendarEventResponsiveController` class extends `PageResizeObserverSlimmer` and updates the max display count of month events with debounce in a VegaCalendar component. */
+class VegaCalendarEventResponsiveController extends PageResizeObserverSlimmer {
+  /**
+   * update the event view when the calendar layout update
+   */
+  constructor() {
+    super({
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      target: /* istanbul ignore next */ () => this.host,
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      callback: /* istanbul ignore next */ () => this.updateMaxDisplayCountWithDebounce(),
+    });
+    this.updateMaxDisplayCountWithDebounce = debounce(this.updateMaxDisplayCount, 500, this);
+  }
+  /**
+   * Update the month event display items.
+   */
+  updateMaxDisplayCount() {
+    // The debounce method will case this method called after component disconnect, then the slimmer will get issue to get viewMode from component class, this issue will catch in spec.ts
+    try {
+      const eventContainerRef = this.monthEventRenderer.getMonthEventContainerRef();
+      if (this.viewMode === 'month' && eventContainerRef) {
+        const maxContainerHeight = eventContainerRef.parentElement.getBoundingClientRect().height;
+        const count = Math.floor((maxContainerHeight - VegaCalendarEventResponsiveController.monthDateTitleHeight) /
+          VegaCalendarEventItemRenderer.backgroundColorModeEventHeight);
+        ChangeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalCalendarMonthEventsChange), {
+          host: this.host,
+          detail: count,
+        });
+      }
+      // eslint-disable-next-line no-empty
+    }
+    catch (_a) { }
+  }
+  /**
+   * update the max display count when switch view mode
+   *
+   * @param {VegaCalendarViewModeType} viewMode new view mode value
+   */
+  updateMaxDisplayCountAfterSwitchToMonthView(viewMode) {
+    if (viewMode === 'month') {
+      this.updateMaxDisplayCountWithDebounce();
+    }
+  }
+}
+VegaCalendarEventResponsiveController.monthDateTitleHeight = 26;
+__decorate$d([
+  MapToComponentField()
+], VegaCalendarEventResponsiveController.prototype, "host", void 0);
+__decorate$d([
+  MapToComponentField()
+], VegaCalendarEventResponsiveController.prototype, "monthEventRenderer", void 0);
+__decorate$d([
+  MapToComponentField()
+], VegaCalendarEventResponsiveController.prototype, "viewMode", void 0);
+__decorate$d([
+  MapToComponentMethod('componentDidLoad')
+], VegaCalendarEventResponsiveController.prototype, "updateMaxDisplayCount", null);
+__decorate$d([
+  MapToComponentMethod('watchViewModeChange')
+], VegaCalendarEventResponsiveController.prototype, "updateMaxDisplayCountAfterSwitchToMonthView", null);
+
+var __decorate$c = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** renders all-day events in a calendar view, with options to display a limited number of events and show a "more" button for additional events. */
+class VegaCalendarFullDayEventRenderer extends VegaSlimmer {
+  /**
+   * render current preiod all day events
+   *
+   * @returns {HTMLElement} event element
+   */
+  render() {
+    const viewSource = this.calendarView.dateItems[0];
+    const events = viewSource.map((calendarDate) => {
+      return this.calendarEventController
+        .getCurrentDateEvents(calendarDate)
+        .filter((eventItem) => eventItem.isAllDayEvent || eventItem.isGroupEvent());
+    });
+    const orderEvents = this.fullDayEventLayoutRenderer.sortLongEvents(events);
+    const displayEvents = this.filterDisplayEvents(orderEvents);
+    return (h("div", { class: "calendar-view-event-all" }, viewSource.map((item, index) => (h("div", { class: "event-all-col border-divider-left", key: item.date }, this.renderCurrentFullDayEvents(displayEvents[index], index, orderEvents[index]))))));
+  }
+  /**
+   * render current date all day events
+   *
+   * @param {Nullable<CalendarEvent>[]} events displayed calendar events
+   * @param {number} currentViewIndex the current date index of the array
+   * @param {Nullable<CalendarEvent>[]} allEvents all calendar events
+   * @returns {HTMLVegaCalendarEventElement[]} event component array
+   */
+  renderCurrentFullDayEvents(events, currentViewIndex, allEvents) {
+    const height = events.length * VegaCalendarEventItemRenderer.backgroundColorModeEventHeight - 2;
+    const hideEventsLength = allEvents.slice(events.length).filter(Boolean).length;
+    return (h(Fragment, null,
+      h("div", { class: "placeholder-block", style: { height: height + 'px' } },
+        h("span", null,
+          events.length,
+          " events")),
+      this.fullDayEventLayoutRenderer.render(events, currentViewIndex),
+      hideEventsLength > 0 && this.dayViewFullDayEventMoreButtonRenderer.render(hideEventsLength)));
+  }
+  /**
+   * Get the display events base on the show all events flag
+   *
+   * @param {Nullable<CalendarEvent>[][]} rowEvents row events array
+   * @returns {Nullable<CalendarEvent>[][]} the part of the events or the whole events
+   */
+  filterDisplayEvents(rowEvents) {
+    if (!this.showAllEventsInDayOrWeekView) {
+      const result = [];
+      const maxLength = VegaCalendarFullDayEventRenderer.maxDisplayEventLength;
+      rowEvents.forEach((events) => {
+        const displayEvents = events.length > maxLength ? events.slice(0, maxLength) : events;
+        result.push(displayEvents);
+      });
+      return result;
+    }
+    else {
+      return rowEvents;
+    }
+  }
+}
+VegaCalendarFullDayEventRenderer.maxDisplayEventLength = 2;
+__decorate$c([
+  MapToComponentField()
+], VegaCalendarFullDayEventRenderer.prototype, "calendarView", void 0);
+__decorate$c([
+  MapToComponentField()
+], VegaCalendarFullDayEventRenderer.prototype, "calendarEventController", void 0);
+__decorate$c([
+  MapToComponentField()
+], VegaCalendarFullDayEventRenderer.prototype, "eventItemRenderer", void 0);
+__decorate$c([
+  MapToComponentField()
+], VegaCalendarFullDayEventRenderer.prototype, "fullDayEventLayoutRenderer", void 0);
+__decorate$c([
+  MapToComponentField()
+], VegaCalendarFullDayEventRenderer.prototype, "showAllEventsInDayOrWeekView", void 0);
+__decorate$c([
+  MapToComponentField()
+], VegaCalendarFullDayEventRenderer.prototype, "dayViewFullDayEventMoreButtonRenderer", void 0);
+
+var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** The `VegaCalendarDayViewEventLayoutRenderer` class in TypeScript React renders event layouts for a day view calendar. */
+class VegaCalendarDayViewEventLayoutRenderer extends VegaSlimmer {
+  /**
+   * The `render` function in TypeScript React renders a layout of calendar events for a day view.
+   *
+   * @param {VegaCalendarDayViewTimedEventLayout} layout - The `layout` parameter in the `render` function is
+   * of type `VegaCalendarDayViewTimedEventLayout`, which contains information about the layout of events for
+   * a day view in a calendar. It has properties like `eventLayoutColumns`, which is an array of `VegaCalendarDayViewEvent
+   * @returns {HTMLElement[]} An array of HTMLElements representing the rendered event nodes based on the provided layout and event data.
+   */
+  render(layout) {
+    const layoutColumns = layout.eventLayoutCells;
+    const eventNodes = [];
+    layoutColumns.forEach((columns, index) => {
+      let renderEvent = columns.getEventBySlotIndex(0);
+      let start = 0;
+      for (let i = 0; i < VegaCalendarDayViewEventLayoutRenderer.totalNumberOfCells; i++) {
+        const currentEvent = columns.getEventBySlotIndex(i);
+        if (currentEvent !== renderEvent) {
+          if (renderEvent) {
+            eventNodes.push(h("div", { key: index, class: "time-event-block", style: this.getTimeEventStyle(start, i, index, layout.getEventColumnsSpannedCount(renderEvent)) }, this.eventItemRenderer.render(renderEvent, {
+              'day-event': true,
+              'bg-shadow': index > 0,
+            })));
+          }
+          renderEvent = currentEvent;
+          start = i;
+        }
+      }
+    });
+    return eventNodes;
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-calendar-render-timed-event-correct}
+   */
+  /* istanbul ignore next */
+  /**
+   * This function calculates and returns the style properties for positioning and sizing a calendar event within a grid layout.
+   *
+   * @param {number} startIndex - The `startIndex` parameter represents the index of the starting cell for the time event in the calendar grid.
+   * @param {number} endIndex - The `endIndex` parameter represents the index of the end position of the time event within a column. It indicates where the time event ends vertically within the column layout.
+   * @param {number} columnIndex - The `columnIndex` parameter represents the index of the column in which the event is being displayed. It is used to calculate the `left` position of the event element within the container based on the total number of columns spanned by the event.
+   * @param {number} columnsSpannedCount - The `columnsSpannedCount` parameter represents the number of columns spanned by the event in a calendar layout. It is used to calculate the left position of the event within the calendar grid.
+   * @returns {VegaCalendarEventStyle} The function `getTimeEventStyle` returns an object of type `VegaCalendarEventStyle` with properties for position, left, top, width, height, and zIndex.
+   */
+  getTimeEventStyle(startIndex, endIndex, columnIndex, columnsSpannedCount) {
+    const left = columnIndex * (1 / columnsSpannedCount);
+    return {
+      position: 'absolute',
+      left: `${left * 100}%`,
+      top: `${(100 / VegaCalendarDayViewEventLayoutRenderer.totalNumberOfCells) * startIndex}%`,
+      width: `calc(100% - ${left * 100}%)`,
+      height: `${(100 / VegaCalendarDayViewEventLayoutRenderer.totalNumberOfCells) * (endIndex - startIndex)}%`,
+      zIndex: columnIndex > 0 ? `${columnIndex}` : null,
+    };
+  }
+}
+VegaCalendarDayViewEventLayoutRenderer.totalNumberOfCells = 24 * 4;
+__decorate$b([
+  MapToComponentField()
+], VegaCalendarDayViewEventLayoutRenderer.prototype, "eventItemRenderer", void 0);
+
+/** This code snippet is defining an abstract class named `VegaCalendarBaseEventLayoutGenerator` in TypeScript. The class contains an abstract method `generate` that must be implemented by any class that extends `VegaCalendarBaseEventLayoutGenerator`. */
+class VegaCalendarBaseEventLayoutGenerator {
+  /**
+   * The function `addCurrentEventToLayout` adds a long event view to a layout row without overlapping with existing events.
+   *
+   * @param {VegaCalendarBaseEventLayoutCell[]} layoutCells - The `layoutCells` parameter is an array of
+   * `VegaCalendarBaseEventLayoutCell` objects. These objects represent rows in a layout where long events are displayed without overlapping each other.
+   * @param {unknown} input - The `currentView` parameter represents the current long event view that you want to add to the layout rows without overlapping with existing events. The function `addCurrentEventToLayoutRow` searches for a layout row that does not have any overlap with the current view. If such a row is found,
+   */
+  addCurrentEventToLayout(layoutCells, input) {
+    let noOverlapCell = layoutCells.find((layoutCell) => {
+      return !layoutCell.hasOverlapEvent(input);
+    });
+    if (!noOverlapCell) {
+      noOverlapCell = this.createNewLayoutCell();
+      noOverlapCell.updateSlots(input);
+      layoutCells.push(noOverlapCell);
+    }
+    else {
+      noOverlapCell.updateSlots(input);
+    }
+  }
+}
+
+/** This TypeScript code snippet defines an abstract class `VegaCalendarBaseEventLayout` that serves as a base for event layout functionality in a calendar application. */
+class VegaCalendarBaseEventLayout {
+  /**
+   * The function returns an array of VegaCalendarBaseEventLayoutCell objects.
+   *
+   * @returns {VegaCalendarBaseEventLayoutCell[]} An array of VegaCalendarLongEventLayoutRow objects is being returned.
+   */
+  get eventLayoutCells() {
+    return this.cells;
+  }
+}
+
+/** This TypeScript class, VegaCalendarDayViewTimedEventLayout, manages the layout of events in a day view calendar. */
+class VegaCalendarDayViewTimedEventLayout extends VegaCalendarBaseEventLayout {
+  /**
+   * The constructor function initializes the columns property with the provided array of VegaCalendarDayViewTimedEventLayoutColumn objects.
+   *
+   * @param {VegaCalendarDayViewTimedEventLayoutColumn[]} columns - An array of VegaCalendarDayViewTimedEventLayoutColumn objects.
+   */
+  constructor(columns) {
+    super();
+    this.cells = columns;
+  }
+  /**
+   * The function `getEventColumnsSpannedCount` calculates the number of columns spanned by a given calendar event in a day view layout.
+   *
+   * @param {CalendarEvent} eventItem - The `getEventColumnsSpannedCount` function takes a `CalendarEvent` object as the `eventItem` parameter. This function calculates the number of columns spanned by the given event within the calendar view.
+   * @returns {number} The function `getEventColumnsSpannedCount` returns the number of columns spanned by the given `eventItem` in the `VegaCalendarDayViewTimedEventLayoutColumn` array `columns`.
+   */
+  getEventColumnsSpannedCount(eventItem) {
+    const eventColumnIndex = this.cells.findIndex((column) => {
+      return column.getEventStartIndex(eventItem) >= 0;
+    });
+    let count = eventColumnIndex + 1;
+    if (eventColumnIndex < this.cells.length - 1) {
+      this.cells
+        .slice(eventColumnIndex + 1)
+        .forEach((column) => {
+        if (column.hasOverlapEvent(eventItem)) {
+          count++;
+        }
+      });
+    }
+    return count;
+  }
+}
+
+/** This code snippet is defining an abstract class named `VegaCalendarBaseEventLayoutCell`. Here's a breakdown of what it does: */
+class VegaCalendarBaseEventLayoutCell {
+  /**
+   * This function retrieves a calendar event based on the slot index provided.
+   *
+   * @param {number} index - The `index` parameter is a number that represents the position of a slot in an array.
+   * @returns {CalendarEvent | null} The `getEventBySlotIndex` method is returning a `CalendarEvent` object from the `slots` array at the specified `index`.
+   */
+  getEventBySlotIndex(index) {
+    return this.slots[index];
+  }
+  /**
+   * The function `getEventStartIndex` returns the index of a given `CalendarEvent` object within an array of `CalendarEvent` objects.
+   *
+   * @param {CalendarEvent} eventItem - CalendarEvent
+   * @returns {number} The function `getEventStartIndex` returns the index of the `eventItem` within the `slots` array.
+   */
+  getEventStartIndex(eventItem) {
+    return this.slots.findIndex((item) => item === eventItem);
+  }
+  /**
+   * This TypeScript function calculates the end index of a calendar event within a specified range of slots.
+   *
+   * @param {CalendarEvent} eventItem - CalendarEvent - the event item for which we want to find the end index in the calendar.
+   * @returns {number} The `getEventEndIndex` function returns the index of the end of the calendar event in the `VegaCalendarLongEventLayoutRow.defaultSlots` array.
+   */
+  getEventEndIndex(eventItem) {
+    const startIndex = this.getEventStartIndex(eventItem);
+    let endIndex = startIndex;
+    if (startIndex >= 0) {
+      for (let i = startIndex + 1; i < this.slots.length; i++) {
+        if (this.slots[i] !== eventItem) {
+          endIndex = i - 1;
+          break;
+        }
+        else if (i === this.slots.length - 1) {
+          endIndex = i;
+        }
+      }
+    }
+    return endIndex;
+  }
+}
+
+/** The class `VegaCalendarDayViewEventLayoutColumn` manages the layout of events in a day view calendar by storing event slots and providing methods to interact with them. */
+class VegaCalendarDayViewTimedEventLayoutColumn extends VegaCalendarBaseEventLayoutCell {
+  constructor() {
+    super(...arguments);
+    this.slots = VegaCalendarDayViewTimedEventLayoutColumn.defaultSlots;
+  }
+  /**
+   * The function `hasOverlapEvent` checks if a given calendar event overlaps with existing events in the calendar.
+   *
+   * @param {CalendarEvent} eventItem - The `eventItem` parameter in the `hasOverlapEvent` function represents a `CalendarEvent` object that contains information about an event such as its start time, end time, and possibly other details related to the event.
+   * @returns {boolean} The function `hasOverlapEvent` returns a boolean value indicating whether there is an overlap in the calendar event slots. If there is an overlap, it returns `true`, otherwise it returns `false`.
+   */
+  hasOverlapEvent(eventItem) {
+    const [start, end] = this.getIndexRangeFromEvent(eventItem);
+    let overlapFlag = false;
+    for (let i = start; i < end; i++) {
+      if (this.slots[i]) {
+        overlapFlag = true;
+        break;
+      }
+    }
+    return overlapFlag;
+  }
+  /**
+   * The function `updateColumnSlots` updates the slots array by replacing a range of elements with a given event item.
+   *
+   * @param {CalendarEvent} eventItem - The `eventItem` parameter is a `CalendarEvent` object that represents an event in a calendar.
+   */
+  updateSlots(eventItem) {
+    const [start, end] = this.getIndexRangeFromEvent(eventItem);
+    if (end > start) {
+      this.slots = this.slots
+        .slice(0, start)
+        .concat(Array(end - start).fill(eventItem), this.slots.slice(end));
+    }
+  }
+  /**
+   * The function `getIndexRangeFromEvent` takes a `CalendarEvent` object and returns an array of time indices based on the start and end times of the event.
+   *
+   * @param {CalendarEvent} eventItem - A CalendarEvent object containing information about a specific event in a calendar, such as its start time and end time.
+   * @returns {number[]} An array of two numbers representing the index range of the start and end times of the given CalendarEvent.
+   */
+  getIndexRangeFromEvent(eventItem) {
+    const { startTime, endTime } = eventItem;
+    return [getTimeIndex(startTime), getTimeIndex(endTime)];
+  }
+}
+VegaCalendarDayViewTimedEventLayoutColumn.defaultSlots = Array(96).fill(null);
+
+/** The `VegaCalendarDayViewEventLayoutGenerator` class in TypeScript generates a layout for calendar events in a day view. */
+class VegaCalendarDayViewTimedEventLayoutGenerator extends VegaCalendarBaseEventLayoutGenerator {
+  /**
+   * The function generates a layout for displaying calendar events in a day view.
+   *
+   * @param {CalendarEvent[]} calendarEvents - CalendarEvent[] - an array of calendar events containing information such as event title, start time, end time, and other relevant details.
+   * @returns {VegaCalendarDayViewTimedEventLayout} A `VegaCalendarDayViewTimedEventLayout` object is being returned, which is constructed using the `layoutColumns` array containing `VegaCalendarDayViewTimedEventLayoutColumn` objects.
+   */
+  generate(calendarEvents) {
+    const layoutColumns = [
+      new VegaCalendarDayViewTimedEventLayoutColumn(),
+    ];
+    calendarEvents.forEach((eventItem) => {
+      this.addCurrentEventToLayout(layoutColumns, eventItem);
+    });
+    return new VegaCalendarDayViewTimedEventLayout(layoutColumns);
+  }
+  /**
+   * The function creates a new instance of VegaCalendarDayViewTimedEventLayoutColumn.
+   *
+   * @returns {VegaCalendarDayViewTimedEventLayoutColumn} An instance of the class `VegaCalendarDayViewTimedEventLayoutColumn` is being returned.
+   */
+  createNewLayoutCell() {
+    return new VegaCalendarDayViewTimedEventLayoutColumn();
+  }
+}
+
+/** The VegaCalendarEventSorter class in TypeScript provides a sort method to sort an array of CalendarEvent objects. */
+class VegaCalendarEventSorter {
+  /**
+   * The function "sort" takes an array of CalendarEvent objects and returns the same array without performing any sorting.
+   *
+   * @param {CalendarEvent[]} events - CalendarEvent[] - an array of CalendarEvent objects that need to be sorted.
+   * @param {number} currentViewIndex - The current index of the row
+   * @param {VegaCalendarFullDayEventLayout} fullDayEventLayout - The current row all long event layout
+   * @returns {Nullable<CalendarEvent>} The `sort` function is currently returning the input array of `CalendarEvent` objects as is, without performing any sorting operation.
+   */
+  sort(events, currentViewIndex, fullDayEventLayout) {
+    const allDayEvents = [];
+    const groupEvents = [];
+    const otherEvents = [];
+    for (let i = 0; i < events.length; i++) {
+      const currentEvent = events[i];
+      if (currentEvent) {
+        if (currentEvent.isGroupEvent()) {
+          groupEvents.push(currentEvent);
+        }
+        else if (currentEvent.isAllDayEvent) {
+          allDayEvents.push(currentEvent);
+        }
+        else {
+          otherEvents.push(currentEvent);
+        }
+      }
+    }
+    let result = allDayEvents.concat(this.sortCalendarEventByTime(otherEvents));
+    let currentViewOrderGroupEvents = fullDayEventLayout.getEventsByIndex(currentViewIndex);
+    const currentEvents = currentViewOrderGroupEvents.filter((item) => item);
+    result = groupEvents
+      .filter((groupEvent) => {
+      return currentEvents.findIndex((item) => item === groupEvent) < 0;
+    })
+      .concat(result);
+    if (currentViewOrderGroupEvents.length > currentEvents.length) {
+      const insertItems = result.slice(0, currentViewOrderGroupEvents.length - currentEvents.length);
+      result = result.slice(currentViewOrderGroupEvents.length - currentEvents.length);
+      currentViewOrderGroupEvents = this.insertEventsToEmptyPosition(currentViewOrderGroupEvents, insertItems);
+    }
+    result = currentViewOrderGroupEvents.concat(result);
+    return result;
+  }
+  /**
+   * The function `sortCalendarEventByTime` sorts an array of `CalendarEvent` objects based on their start and end times.
+   *
+   * @param {CalendarEvent[]} events - An array of CalendarEvent objects. Each CalendarEvent object contains information about a specific event, such as startTime and endTime.
+   * @returns {CalendarEvent[]} The `sortCalendarEventByTime` function is returning an array of `CalendarEvent` objects sorted by their start time and end time. The events are sorted in ascending order based on their start time, and if two events have the same start time, they are further sorted in descending order based on their end time.
+   */
+  sortCalendarEventByTime(events) {
+    return events.sort((eventA, eventB) => {
+      const eventAStartIndex = getTimeIndex(eventA.startTime);
+      const eventBStartIndex = getTimeIndex(eventB.startTime);
+      if (eventAStartIndex === eventBStartIndex) {
+        return getTimeIndex(eventB.endTime) - getTimeIndex(eventA.endTime);
+      }
+      else {
+        return eventAStartIndex - eventBStartIndex;
+      }
+    });
+  }
+  /**
+   * The function inserts events from a given array into empty positions in another array of events.
+   *
+   * @param {Nullable<CalendarEvent>[]} viewEvents - `viewEvents` is an array of nullable
+   * `CalendarEvent` objects representing the events currently displayed in the calendar view. Each
+   * element in the array can either be a `CalendarEvent` object or `null`.
+   * @param {CalendarEvent[]} events - The `events` parameter in the `insertEventsToEmptyPosition`
+   * function represents an array of `CalendarEvent` objects that need to be inserted into the
+   * `viewEvents` array at empty positions. The function iterates over the `viewEvents` array and
+   * inserts events from the `events` array
+   * @returns {CalendarEvent|null[]} The `insertEventsToEmptyPosition` function returns an array of `Nullable<CalendarEvent>`
+   * where events from the `events` array are inserted into empty positions in the `viewEvents` array.
+   * If there are no empty positions in `viewEvents`, the function returns the original `viewEvents`
+   * array.
+   */
+  insertEventsToEmptyPosition(viewEvents, events) {
+    return viewEvents.map((item) => {
+      if (events.length && !item) {
+        const insertItem = events[0];
+        events = events.slice(1);
+        return insertItem;
+      }
+      else {
+        return item;
+      }
+    });
+  }
+}
+
+var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** The `VegaCalendarTimedEventRenderer` class in TypeScript React renders timed events for a calendar view based on the current day's events. timed events render for day view and week view */
+class VegaCalendarTimedEventRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.calendarEventSorter = new VegaCalendarEventSorter();
+    this.dayViewTimedEventLayoutGenerator = new VegaCalendarDayViewTimedEventLayoutGenerator();
+  }
+  /**
+   * render current preiod normal events
+   *
+   * @returns {HTMLElement} events element
+   */
+  render() {
+    const viewSource = this.calendarView.dateItems[0];
+    return (h("div", { class: "day-event-container" }, viewSource.map((item) => {
+      return (h("div", { key: `${item.month}-${item.date}`, class: "day-event-col" }, this.renderTimedEvents(item)));
+    })));
+  }
+  /**
+   * render current day events
+   *
+   * @param {CalendarDate} date calendar Date
+   * @returns {HTMLElement[]} event elements
+   */
+  renderTimedEvents(date) {
+    const events = this.calendarEventController
+      .getCurrentDateEvents(date)
+      .filter((eventItem) => !eventItem.isAllDayEvent && !eventItem.isGroupEvent());
+    const sortEvents = this.calendarEventSorter.sortCalendarEventByTime(events);
+    const layout = this.dayViewTimedEventLayoutGenerator.generate(sortEvents);
+    return this.dayViewEventLayoutRenderer.render(layout);
+  }
+}
+__decorate$a([
+  MapToComponentField()
+], VegaCalendarTimedEventRenderer.prototype, "calendarView", void 0);
+__decorate$a([
+  MapToComponentField()
+], VegaCalendarTimedEventRenderer.prototype, "calendarEventController", void 0);
+__decorate$a([
+  MapToComponentField()
+], VegaCalendarTimedEventRenderer.prototype, "dayViewEventLayoutRenderer", void 0);
+
+/** The VegaCalendarLongEventLayout class manages the layout of long events in a calendar by organizing them into rows. */
+class VegaCalendarFullDayEventLayout extends VegaCalendarBaseEventLayout {
+  /**
+   * The constructor function initializes a VegaCalendarFullDayEventLayoutRow array in TypeScript.
+   *
+   * @param {VegaCalendarFullDayEventLayoutRow[]} rows - An array of VegaCalendarFullDayEventLayoutRow objects.
+   */
+  constructor(rows) {
+    super();
+    this.cells = rows;
+  }
+  /**
+   * This TypeScript function returns the index of a row containing a specific calendar event.
+   *
+   * @param {CalendarEvent} eventItem - The `eventItem` parameter is a `CalendarEvent` object that represents an event in a calendar.
+   * @returns {number} The function `getEventRowsIndex` returns the index of the row in the `rows` array where the `eventItem` is found based on the condition specified in the `findIndex` method.
+   */
+  getEventRowsIndex(eventItem) {
+    return this.cells.findIndex((row) => row.getEventStartIndex(eventItem) >= 0);
+  }
+  /**
+   * This function retrieves CalendarEvents from each row in a calendar layout based on a specified index.
+   *
+   * @param {number} index - The `index` parameter in the `getEventsByIndex` method is a number that
+   * represents the slot index for which you want to retrieve calendar events. The method iterates
+   * through each row in the `rows` array and retrieves the calendar event at the specified slot index from each row. The method
+   * @returns {(Nullable<CalendarEvent>)[]} An array of CalendarEvent objects is being returned.
+   */
+  getEventsByIndex(index) {
+    const result = [];
+    let lastItemIndex = 0;
+    this.cells.forEach((row, rowIndex) => {
+      const currentEvent = row.getEventBySlotIndex(index);
+      result.push(currentEvent);
+      if (currentEvent) {
+        lastItemIndex = rowIndex;
+      }
+    });
+    return result.slice(0, lastItemIndex + 1);
+  }
+}
+
+/** The `VegaCalendarLongEventLayoutRow` class in TypeScript manages the layout of long events in a calendar by updating slots and checking for overlaps. */
+class VegaCalendarFullDayEventLayoutRow extends VegaCalendarBaseEventLayoutCell {
+  constructor() {
+    super(...arguments);
+    this.slots = VegaCalendarFullDayEventLayoutRow.defaultSlots;
+  }
+  /**
+   * The function `updateRowSlots` updates a row of slots in a calendar view with a long event.
+   *
+   * @param {VegaCalendarFullDayEventView} eventView - The `eventView` parameter in the `updateRowSlots` method is of type `VegaCalendarFullDayEventView`. It contains information about a long event in a
+   */
+  updateSlots(eventView) {
+    const { start, end } = eventView;
+    this.slots = this.slots
+      .slice(0, start)
+      .concat(Array(end - start + 1).fill(eventView.event), this.slots.slice(end + 1));
+  }
+  /**
+   * The function checks if a given event overlaps with existing events in a calendar view.
+   *
+   * @param {VegaCalendarFullDayEventView} eventView - The `eventView` parameter in the `hasOverlapEvent`
+   * function represents a view of a long event in a Vega calendar. It contains the `start` and `end`
+   * properties which specify the start and end times of the event. The function checks if there is any
+   * overlap with existing events in
+   * @returns {boolean} The function `hasOverlapEvent` returns a boolean value indicating whether there is an
+   * overlap in the slots between the start and end times of the given `VegaCalendarFullDayEventView` event.
+   */
+  hasOverlapEvent(eventView) {
+    const { start, end } = eventView;
+    let overlapFlag = false;
+    for (let i = start; i < end + 1; i++) {
+      if (this.slots[i]) {
+        overlapFlag = true;
+        break;
+      }
+    }
+    return overlapFlag;
+  }
+}
+VegaCalendarFullDayEventLayoutRow.defaultSlots = Array(7).fill(null);
+
+/** The `VegaCalendarLongEventLayoutGenerator` class in TypeScript generates a layout for long calendar events with overlapping prevention logic. */
+class VegaCalendarFullDayEventLayoutGenerator extends VegaCalendarBaseEventLayoutGenerator {
+  /**
+   * The function generates a long event layout for a calendar based on the input calendar events.
+   *
+   * @param {CalendarEvent[][]} calendarEvents - CalendarEvent[][] is a two-dimensional array where each
+   * element represents a day in the calendar and contains an array of CalendarEvent objects representing events on that day.
+   * @returns {VegaCalendarFullDayEventLayout} A new instance of `VegaCalendarFullDayEventLayout` is being returned, which is constructed
+   * using the `layoutRows` array containing `VegaCalendarFullDayEventLayoutRow` objects.
+   */
+  generate(calendarEvents) {
+    const allShouldOrderLongEvents = this.collectAllShouldOrderLongEvents(calendarEvents);
+    const layoutRows = [new VegaCalendarFullDayEventLayoutRow()];
+    allShouldOrderLongEvents.forEach((eventView) => {
+      this.addCurrentEventToLayout(layoutRows, eventView);
+    });
+    return new VegaCalendarFullDayEventLayout(layoutRows);
+  }
+  /**
+   * The function creates a new instance of VegaCalendarFullDayEventLayoutRow.
+   *
+   * @returns {VegaCalendarFullDayEventLayoutRow} An instance of the class `VegaCalendarFullDayEventLayoutRow` is being returned.
+   */
+  createNewLayoutCell() {
+    return new VegaCalendarFullDayEventLayoutRow();
+  }
+  /**
+   * Filter the all should order group event from event list
+   *
+   * @param {CalendarEvent[][]} allEvents all event list
+   * @returns {VegaCalendarFullDayEventView[]} the group event view list
+   */
+  collectAllShouldOrderLongEvents(allEvents) {
+    const allLongEventViews = {};
+    allEvents.forEach((items, index) => {
+      const longEvents = items.filter((item) => item && item.isGroupEvent());
+      longEvents.forEach((groupEvent) => {
+        if (!allLongEventViews[groupEvent.eventKey]) {
+          allLongEventViews[groupEvent.eventKey] = {
+            start: index,
+            end: index,
+            event: groupEvent,
+          };
+        }
+        else {
+          allLongEventViews[groupEvent.eventKey] = Object.assign(Object.assign({}, allLongEventViews[groupEvent.eventKey]), { end: index, start: index - allLongEventViews[groupEvent.eventKey].end !== 1
+              ? index
+              : allLongEventViews[groupEvent.eventKey].start });
+        }
+      });
+    });
+    const shouldSortLongEventViews = Object.values(allLongEventViews);
+    return this.sortLongEventViews(shouldSortLongEventViews);
+  }
+  /**
+   * This function sorts an array of VegaCalendarFullDayEventView objects based on their start and end times.
+   *
+   * @param {VegaCalendarFullDayEventView[]} eventViews - The `eventViews` parameter is an array of
+   * `VegaCalendarFullDayEventView` objects that represent long events in a calendar. The function
+   * `sortLongEventViews` takes this array as input and sorts it based on the start and end times of the events.
+   * @returns {VegaCalendarFullDayEventView[]} The function `sortLongEventViews` is returning an array of `VegaCalendarFullDayEventView`
+   * objects that have been sorted based on the comparison logic provided in the sorting function. The sorting is done based on the `start` and `end` properties of the objects in the array.
+   */
+  sortLongEventViews(eventViews) {
+    return eventViews.sort((itemA, itemB) => {
+      const { startDate: startA, endDate: endA } = itemA.event;
+      const { startDate: startB, endDate: endB } = itemB.event;
+      startA.setHours(0, 0, 0);
+      startB.setHours(0, 0, 0);
+      endA.setHours(23, 59, 59);
+      endB.setHours(23, 59, 59);
+      const num = endB.valueOf() - startB.valueOf() - (endA.valueOf() - startA.valueOf());
+      if (startA.valueOf() !== startB.valueOf()) {
+        return startA.valueOf() - startB.valueOf();
+      }
+      else {
+        return num;
+      }
+    });
+  }
+}
+
+var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** This code snippet defines a TypeScript class `VegaCalendarFullDayEventLayoutRenderer` that extends `VegaSlimmer`. Here's a breakdown of what the class and its methods are doing: */
+class VegaCalendarFullDayEventLayoutRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.longEventLayoutGenerator = new VegaCalendarFullDayEventLayoutGenerator();
+    this.calendarEventSorter = new VegaCalendarEventSorter();
+  }
+  /**
+   * The function `sortLongEvents` sorts calendar events based on a fixed layout generated by `longEventLayoutGenerator`.
+   *
+   * @param {CalendarEvent[][]} calendarEvents - calendar current row all events
+   * @returns {Nullable<CalendarEvent>[][]} the events after sorter
+   */
+  sortLongEvents(calendarEvents) {
+    this.fullDayEventLayout = this.longEventLayoutGenerator.generate(calendarEvents);
+    return calendarEvents.map((items, index) => {
+      return this.calendarEventSorter.sort(items, index, this.fullDayEventLayout);
+    });
+  }
+  /**
+   * render the month view or week view long events
+   *
+   * @param {Nullable<CalendarEvent>[]} calendarEvents current events
+   * @param {currentViewIndex} currentViewIndex the current index of the row
+   * @returns {HTMLElement[]} event elements
+   */
+  render(calendarEvents, currentViewIndex) {
+    return calendarEvents.map((item, index) => {
+      if (item) {
+        return (h("div", { key: item.eventKey, class: this.viewMode === 'month' ? 'month-event-block' : 'day-event-block', style: this.getEventStyle(item, currentViewIndex, index, this.viewMode === 'month'
+            ? VegaCalendarFullDayEventLayoutRenderer.monthViewEventOffsetTop
+            : 0) }, this.eventItemRenderer.render(item, {
+          'month-event': this.viewMode === 'month',
+          'day-event': this.viewMode !== 'month',
+        })));
+      }
+    });
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-calendar-render-full-day-event-correct}
+   */
+  /* istanbul ignore next */
+  /**
+   * Get the current event layout style from the params
+   *
+   * @param {CalendarEvent} calendarEvent current event item
+   * @param {number} currentViewIndex the current date index of the row
+   * @param {number} itemIndex the current event index of the event array
+   * @param {number} offsetTop the default offset top for the event
+   * @returns {VegaCalendarEventStyle} layout style object
+   */
+  getEventStyle(calendarEvent, currentViewIndex, itemIndex, offsetTop) {
+    const cellCount = this.calendarView.weekdays.length;
+    const start = currentViewIndex;
+    let end = currentViewIndex + 1;
+    const top = itemIndex;
+    let visible = true;
+    const order = this.fullDayEventLayout.getEventRowsIndex(calendarEvent);
+    if (order >= 0) {
+      const startIndex = this.fullDayEventLayout.eventLayoutCells[order].getEventStartIndex(calendarEvent);
+      const endIndex = this.fullDayEventLayout.eventLayoutCells[order].getEventEndIndex(calendarEvent);
+      if (startIndex === currentViewIndex) {
+        end = endIndex + 1;
+      }
+      else {
+        visible = false;
+      }
+    }
+    return {
+      position: 'absolute',
+      left: `${(100 / cellCount) * start}%`,
+      top: `${top * VegaCalendarEventItemRenderer.backgroundColorModeEventHeight + offsetTop}px`,
+      width: `${(100 / cellCount) * (end - start)}%`,
+      opacity: visible ? '1' : '0',
+    };
+  }
+}
+VegaCalendarFullDayEventLayoutRenderer.monthViewEventOffsetTop = 26;
+__decorate$9([
+  MapToComponentField()
+], VegaCalendarFullDayEventLayoutRenderer.prototype, "eventItemRenderer", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaCalendarFullDayEventLayoutRenderer.prototype, "viewMode", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaCalendarFullDayEventLayoutRenderer.prototype, "calendarView", void 0);
+
+var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class VegaCalendarFullDayEventMoreButtonRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * Update the show all flag to true when click the more button
+     *
+     * @param {MouseEvent} e event object
+     */
+    this.updateShowAllFlag = (e) => {
+      e.stopPropagation();
+      this.showAllEventsInDayOrWeekView = true;
+    };
+  }
+  /**
+   * Render the more button element
+   *
+   * @param {number} count the hidden elements count
+   * @returns {HTMLElement} more button
+   */
+  render(count) {
+    if (!this.showAllEventsInDayOrWeekView) {
+      return (h("div", { tabIndex: 0, role: "button", class: "more-button", onKeyDown: createEnterKeyHandlerToTriggerClick(), onClick: this.updateShowAllFlag }, `${count} More`));
+    }
+  }
+  /**
+   * Reset the show all event flag when view mode change
+   */
+  resetShowAllFlag() {
+    this.showAllEventsInDayOrWeekView = false;
+  }
+}
+__decorate$8([
+  MapToComponentField({ writable: true })
+], VegaCalendarFullDayEventMoreButtonRenderer.prototype, "showAllEventsInDayOrWeekView", void 0);
+__decorate$8([
+  MapToComponentMethod('watchViewModeChange')
+], VegaCalendarFullDayEventMoreButtonRenderer.prototype, "resetShowAllFlag", null);
+
+const vegaCalendarCss = ".border-divider-top{border:1px solid rgba(var(--v-border-divider-secondary, 199, 217, 229, 1));border-left-width:0px;border-right-width:0px;border-bottom-width:0px}.border-divider-left{border:1px solid rgba(var(--v-border-divider-secondary, 199, 217, 229, 1));border-top-width:0px;border-right-width:0px;border-bottom-width:0px}.border-divider-right{border:1px solid rgba(var(--v-border-divider-secondary, 199, 217, 229, 1));border-top-width:0px;border-left-width:0px;border-bottom-width:0px}.border-divider-bottom{border:1px solid rgba(var(--v-border-divider-secondary, 199, 217, 229, 1));border-top-width:0px;border-left-width:0px;border-right-width:0px}:host{display:flex;flex-direction:column;border-radius:12px;border:1px solid rgba(var(--v-border-divider, 171, 198, 216, 1));background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));overflow:hidden;width:100%;height:100%;box-sizing:border-box;max-height:1966px}.calendar-switch-panel{padding:24px;border-bottom-width:1px;border-top-width:0px;border-left-width:0px;border-right-width:0px;border-style:solid;border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));flex-shrink:0;width:100%;box-sizing:border-box}.calendar-switch-panel .calendar-date-switch-container{display:flex;gap:8px;align-items:center;flex-direction:row}.calendar-switch-panel .calendar-view-switch-container{display:flex;gap:16px;align-items:center;flex-direction:row}.calendar-switch-panel .calendar-current-date{padding-left:8px}.calendar-view{width:100%;position:relative;flex-grow:1;overflow-y:auto;overflow-x:hidden}.calendar-view-month .calendar-view-month-container{width:100%;display:grid;min-height:100%;grid-template-rows:43px repeat(6, minmax(64px, 1fr))}.calendar-view-month .calendar-view-title{background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));top:0;left:0;z-index:62}.calendar-view-month .calendar-view-title div{padding-top:12px;padding-bottom:12px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;text-align:center}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-month .calendar-view-title div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-month .calendar-view-title div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-month .calendar-view-title div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}.calendar-view-month .calendar-view-row{position:relative;display:grid;grid-template-rows:1fr;grid-template-columns:repeat(7, minmax(64px, 1fr))}.calendar-view-month .calendar-view-row.calendar-view-title{position:sticky}.calendar-view-month .calendar-view-row:last-child{border-bottom-width:0px}.calendar-view-month .calendar-view-row .row-cell{overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}.calendar-view-month .calendar-view-row .row-cell:last-child{border-right-width:0px}.calendar-view-month .calendar-view-row .row-cell .date{padding-top:4px;padding-bottom:4px;padding-right:12px;padding-left:8px}.calendar-view-month .calendar-view-row .row-cell .date>div{display:inline-block;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-month .calendar-view-row .row-cell .date>div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-month .calendar-view-row .row-cell .date>div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-month .calendar-view-row .row-cell .date>div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}.calendar-view-month .calendar-view-row .row-cell .date .month-block{margin-right:2px}.calendar-view-month .calendar-view-row .row-cell .date .grid-col{text-align:center;border-top-left-radius:9999px;border-bottom-left-radius:9999px;border-top-right-radius:9999px;border-bottom-right-radius:9999px;cursor:pointer;width:18px;height:18px;line-height:18px}.calendar-view-month .calendar-view-row .row-cell .date .grid-col:hover{background-color:rgba(var(--v-bg-action-secondary-hover, 4, 112, 236, 0.1))}.calendar-view-month .calendar-view-row .row-cell .date .grid-col:active{background-color:rgba(var(--v-bg-action-secondary-active, 29, 65, 195, 0.1))}.calendar-view-month .calendar-view-row .row-cell .date .grid-col:focus-visible{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:2px}.calendar-view-month .calendar-view-row .row-cell.current-month-day .date>div{color:rgba(var(--v-text-primary, 32, 54, 69, 1))}.calendar-view-month .calendar-view-row .row-cell.disabled{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1))}.calendar-view-month .calendar-view-row .row-cell.disabled .date>div{color:rgba(var(--v-text-disabled, 176, 180, 181, 1))}.calendar-view-month .calendar-view-row .row-cell.active .date .grid-col{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1));border-top-left-radius:9999px;border-bottom-left-radius:9999px;color:rgba(var(--v-text-on-action, 252, 252, 252, 1))}.calendar-view-month .calendar-view-row .row-cell.active .date .grid-col:hover{background-color:rgba(var(--v-bg-action-hover, 4, 112, 236, 1))}.calendar-view-month .calendar-view-row .row-cell.active .date .grid-col:active{background-color:rgba(var(--v-bg-action-active, 29, 65, 195, 1))}.calendar-view-month .calendar-view-row .row-cell.active .date .grid-col:focus-visible{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:2px}.calendar-view-container{width:100%}.calendar-view-container .calendar-view-title-container{background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));position:sticky;top:0;left:0;z-index:62}.calendar-view-container .calendar-view-row{box-sizing:border-box;width:100%;display:flex;flex-direction:row}.calendar-view-container .calendar-view-row .time-line,.calendar-view-container .calendar-view-row .time-line-empty,.calendar-view-container .calendar-view-row .time-line-all{width:72px;text-align:right;padding-right:8px;box-sizing:border-box;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));flex-shrink:0}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-container .calendar-view-row .time-line,.calendar-view-container .calendar-view-row .time-line-empty,.calendar-view-container .calendar-view-row .time-line-all{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-container .calendar-view-row .time-line,.calendar-view-container .calendar-view-row .time-line-empty,.calendar-view-container .calendar-view-row .time-line-all{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-container .calendar-view-row .time-line,.calendar-view-container .calendar-view-row .time-line-empty,.calendar-view-container .calendar-view-row .time-line-all{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}.calendar-view-container .calendar-view-title{width:100%}.calendar-view-container .calendar-view-title>div{padding:12px;padding-bottom:8px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;text-align:center;display:flex;flex-direction:column;gap:8px}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-container .calendar-view-title>div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-container .calendar-view-title>div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-container .calendar-view-title>div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}.calendar-view-container .calendar-view-title .week-day{color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-container .calendar-view-title .week-day{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-container .calendar-view-title .week-day{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-container .calendar-view-title .week-day{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}}.calendar-view-container .calendar-view-title .active div{color:rgba(var(--v-text-link, 19, 98, 226, 1))}.calendar-view-container .calendar-view-event-all-container{align-items:center}.calendar-view-container .calendar-view-event-all{display:grid;grid-template-rows:1fr;flex-grow:1;min-height:18px}.calendar-view-container .calendar-view-day-container .time-line{display:grid;grid-template-rows:16px repeat(24, minmax(74px, 1fr))}.calendar-view-container .calendar-view-day-container .time-line .time-text{margin-top:-9px}.calendar-view-container .calendar-view-day-container .calendar-view-content{width:100%}.calendar-view-container .calendar-view-day-container .calendar-view-content .grid-col{display:grid;grid-template-rows:16px repeat(24, minmax(74px, 1fr));grid-template-columns:minmax(64px, 1fr)}.calendar-view-container .calendar-view-day-container .calendar-view-content .grid-col>.border-divider-top:first-child{border-top-width:0px}.calendar-view-container .calendar-view-content-container{width:100%;position:relative}.calendar-view-week .calendar-view-container{min-height:100%}.calendar-view-week .calendar-view-container .calendar-view-title{display:grid;grid-template-rows:1fr;grid-template-columns:repeat(7, minmax(64px, 1fr))}.calendar-view-week .calendar-view-container .calendar-view-event-all{grid-template-columns:repeat(7, minmax(64px, 1fr))}.calendar-view-week .calendar-view-container .calendar-view-day-container .calendar-view-content{display:grid;grid-template-columns:repeat(7, minmax(64px, 1fr))}.calendar-view-week .time-marker-container .time-marker{display:grid;grid-template-columns:repeat(7, minmax(64px, 1fr))}.calendar-view-week .day-event-container{display:grid;grid-template-columns:repeat(7, minmax(64px, 1fr))}.calendar-view-day .calendar-view-container{min-height:100%}.time-marker-container{position:absolute;min-width:100%;left:0;top:16px;height:calc(100% - 16px);pointer-events:none}.time-marker-container.hidden{display:none}.time-marker-container .time-marker{position:absolute;height:2px;display:grid;min-width:100%;left:0;top:0;z-index:61}.time-marker-container .time-marker div{width:100%;height:2px;background-color:rgba(var(--v-bg-status-error, 255, 110, 139, 1));opacity:0.3}.time-marker-container .time-marker div.active{opacity:1;position:relative}.time-marker-container .time-marker div.active::before{content:\"\";display:block;border-top-left-radius:9999px;border-bottom-left-radius:9999px;border-top-right-radius:9999px;border-bottom-right-radius:9999px;position:absolute;width:8px;height:8px;background-color:rgba(var(--v-bg-status-error, 255, 110, 139, 1));top:-3px;left:-4px}.day-event-container{position:absolute;min-width:100%;left:0;top:16px;height:calc(100% - 16px);pointer-events:none}.day-event-container .day-event-col{height:100%;overflow:hidden}.day-event-container vega-calendar-event{pointer-events:auto;height:100%}.calendar-view-month .month-event-row{position:absolute;width:100%;overflow:hidden;height:calc(100% - 26px);left:0;bottom:0}.calendar-view-month .events-container{width:100%;box-sizing:border-box;overflow:hidden;padding:2px;display:flex;flex-direction:column;gap:2px;justify-content:space-between;flex-grow:1}.calendar-view-month .events-container .event-list{display:flex;flex-direction:column;gap:2px;flex-grow:1}.calendar-view-month .events-container .event-list .month-event-block{box-sizing:border-box;padding-left:2px;padding-right:3px}.calendar-view-month .events-container .month-event-more .more-button{display:inline-block;height:16px;font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px;color:rgba(var(--v-text-link, 19, 98, 226, 1));cursor:pointer;border-radius:2px}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-month .events-container .month-event-more .more-button{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-month .events-container .month-event-more .more-button{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-month .events-container .month-event-more .more-button{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}.calendar-view-month .events-container .month-event-more .more-button:focus-visible{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:0px}.calendar-view-container .calendar-view-event-all{position:relative}.calendar-view-container .calendar-view-event-all .placeholder-block{padding-top:2px;padding-bottom:2px;box-sizing:content-box}.calendar-view-container .calendar-view-event-all .placeholder-block span{display:none}.calendar-view-container .calendar-view-event-all .day-event-block{padding-top:2px;padding-right:2px;box-sizing:border-box;padding-left:3px}.calendar-view-container .calendar-view-event-all .more-button{display:inline-block;height:16px;font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px;color:rgba(var(--v-text-link, 19, 98, 226, 1));cursor:pointer;border-radius:2px;margin-left:2px;padding:2px}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-container .calendar-view-event-all .more-button{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-container .calendar-view-event-all .more-button{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-container .calendar-view-event-all .more-button{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}.calendar-view-container .calendar-view-event-all .more-button:focus-visible{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:0px}.calendar-view-container .calendar-view-event-all .event-all-col{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start}.calendar-view-container .day-event-col{position:relative}.calendar-view-container .day-event-col .time-event-block{box-sizing:border-box;padding-right:8px;padding-bottom:2px;padding-top:3px}.calendar-view-container .day-event-col .time-event-block vega-calendar-event.bg-shadow::part(event-container):not(:focus){outline:2px solid rgba(var(--v-bg-primary, 252, 252, 252, 1))}.calendar-view-container .day-event-col .time-event-block:focus-within{z-index:60 !important}.calendar-event-slot-container{display:none}";
+
+var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const VegaCalendar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.vegaChange = createEvent(this, "vegaChange", 7);
+    this.change = createEvent(this, "change", 7);
+    this.vegaEventClick = createEvent(this, "vegaEventClick", 7);
+    this.eventClick = createEvent(this, "eventClick", 7);
+    this.vegaDateDblClick = createEvent(this, "vegaDateDblClick", 7);
+    this.dateDblClick = createEvent(this, "dateDblClick", 7);
+    this.vegaMoreActionClick = createEvent(this, "vegaMoreActionClick", 7);
+    this.moreActionClick = createEvent(this, "moreActionClick", 7);
+    this.globalSlimmer = {};
+    this.translationSlimmer = new TranslationSlimmer();
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.renderer = new VegaCalendarRenderer();
+    this.switchPanelRenderer = new VegaCalendarSwitchPanelRenderer();
+    this.viewRenderer = new VegaCalendarViewRenderer();
+    this.monthViewRenderer = new VegaCalendarMonthViewRenderer();
+    this.viewWithTimeRenderer = new VegaCalendarViewWithTimeRenderer();
+    this.timeLineRenderer = new VegaCalendarTimeLineRenderer();
+    this.monthEventRenderer = new VegaCalendarMonthEventRenderer();
+    //The  current period controller  should be before the calendar view controller because the initial current period should be before the initial calendar view
+    this.currentPeriodController = new VegaCalendarCurrentPeriodController();
+    this.calendarViewController = new VegaCalendarViewController();
+    this.dayViewFullDayEventRenderer = new VegaCalendarFullDayEventRenderer();
+    this.dayViewFullDayEventMoreButtonRenderer = new VegaCalendarFullDayEventMoreButtonRenderer();
+    this.dayViewTimedEventRenderer = new VegaCalendarTimedEventRenderer();
+    this.eventItemRenderer = new VegaCalendarEventItemRenderer();
+    this.dayViewEventLayoutRenderer = new VegaCalendarDayViewEventLayoutRenderer();
+    this.fullDayEventLayoutRenderer = new VegaCalendarFullDayEventLayoutRenderer();
+    this.calendarEventController = new VegaCalendarEventController();
+    this.eventResponsiveController = new VegaCalendarEventResponsiveController();
+    this.changeEventEmitter = createEventEmitSlimmer(VegaCalendar, VegaChange);
+    this.eventClickEmitter = createEventEmitSlimmer(VegaCalendar, VegaEventClick);
+    this.dateDblClickEmitter = createEventEmitSlimmer(VegaCalendar, VegaDateDblClick);
+    this.moreActionClickEmitter = createEventEmitSlimmer(VegaCalendar, VegaMoreActionClick);
+    this.changeEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.switchPanelRenderer.getSwitchPanelRef());
+    this.timeFormatNotifySlimmer = createSubStateNotifySlimmer(VegaCalendar, 'timeFormat', 'watchTimeFormat');
+    this.showEventColorBarNotifySlimmer = createSubStateNotifySlimmer(VegaCalendar, 'showEventColorBar', 'watchShowEventColorBar');
+    this.showAllEventsInDayOrWeekView = false;
+    this.calendarEvents = [];
+    /**
+     * Specifies the current view mode of the calendar.
+     *
+     * @vegaVersion 2.14.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.viewMode = 'month';
+    /**
+     * Specifies the time format of the calendar.
+     *
+     * @vegaVersion 2.14.0
+     */
+    this.timeFormat = '24-hour';
+    /**
+     * Controls the visibility of the calendar's event color bar.
+     *
+     * @vegaVersion 2.21.0
+     */
+    this.showEventColorBar = true;
+  }
+  /**
+   * Tracks changes to the current period state.
+   *
+   * @param {CalendarPeriod} newValue Specifies the new calendar period.
+   * @param {CalendarPeriod} oldValue Specifies the old calendar period.
+   */
+  watchCurrentPeriodChange(newValue, oldValue) {
+  }
+  /**
+   * Watch the view mode change
+   *
+   * @param {VegaCalendarViewModeType} newValue the new value of view mode
+   */
+  watchViewModeChange(newValue) {
+  }
+  /**
+   * Watch the calendar events change
+   *
+   * @param {VegaCalendarRawEvent[]} newValue
+   */
+  watchEventsChange(newValue) {
+  }
+  /**
+   * Watches changes in the calendar's time format.
+   *
+   * @param {TimeFormat} newValue
+   */
+  watchTimeFormat(newValue) {
+  }
+  /**
+   * Monitors changes in the visibility of the calendar's event color bar.
+   *
+   * @param {boolean} newValue
+   */
+  watchShowEventColorBar(newValue) {
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, null, this.renderer.render()), this.host);
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "currentPeriod": ["watchCurrentPeriodChange"],
+    "viewMode": ["watchViewModeChange"],
+    "events": ["watchEventsChange"],
+    "timeFormat": ["watchTimeFormat"],
+    "showEventColorBar": ["watchShowEventColorBar"]
+  }; }
+};
+__decorate$7([
+  InjectVegaGlobalSlimmer()
+], VegaCalendar.prototype, "globalSlimmer", void 0);
+__decorate$7([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "translationSlimmer", void 0);
+__decorate$7([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate$7([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "renderer", void 0);
+__decorate$7([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "switchPanelRenderer", void 0);
+__decorate$7([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "viewRenderer", void 0);
+__decorate$7([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "monthViewRenderer", void 0);
+__decorate$7([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "viewWithTimeRenderer", void 0);
+__decorate$7([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "timeLineRenderer", void 0);
+__decorate$7([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "monthEventRenderer", void 0);
+__decorate$7([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "currentPeriodController", void 0);
+__decorate$7([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "calendarViewController", void 0);
+__decorate$7([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "dayViewFullDayEventRenderer", void 0);
+__decorate$7([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "dayViewFullDayEventMoreButtonRenderer", void 0);
+__decorate$7([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "dayViewTimedEventRenderer", void 0);
+__decorate$7([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "eventItemRenderer", void 0);
+__decorate$7([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "dayViewEventLayoutRenderer", void 0);
+__decorate$7([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "fullDayEventLayoutRenderer", void 0);
+__decorate$7([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "calendarEventController", void 0);
+__decorate$7([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "eventResponsiveController", void 0);
+__decorate$7([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "changeEventEmitter", void 0);
+__decorate$7([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "eventClickEmitter", void 0);
+__decorate$7([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "dateDblClickEmitter", void 0);
+__decorate$7([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "moreActionClickEmitter", void 0);
+__decorate$7([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "changeEventPrevent", void 0);
+__decorate$7([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "timeFormatNotifySlimmer", void 0);
+__decorate$7([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "showEventColorBarNotifySlimmer", void 0);
+VegaCalendar.style = vegaCalendarCss;
+
+const clockThree = {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120V256c0 13.3 10.7 24 24 24H360c13.3 0 24-10.7 24-24s-10.7-24-24-24H280V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z"/></svg>`,
+};
+
+var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** The `VegaCalendarEventRenderer` class is a TypeScript React component used for rendering calendar events with different display modes and custom styling. */
+class VegaCalendarEventRenderer extends VegaSlimmer {
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-calendar-event-title-max-height-e2e}
+   */
+  /* istanbul ignore next */
+  /**
+   * This function returns the event title container as a nullable HTMLDivElement.
+   *
+   * @returns {Nullable<HTMLDivElement>} The method `getEventTitleContainer` is returning a nullable HTMLDivElement.
+   */
+  getEventTitleContainerRef() {
+    return this.eventTitleContainerRef;
+  }
+  /**
+   * Get the calendar event slot container element
+   *
+   * @returns {Nullable<HTMLDivElement>} a div element
+   */
+  getSlotContainerRef() {
+    return this.slotContainerRef;
+  }
+  /**
+   * The function conditionally renders either a group event or a normal event based on a boolean flag.
+   *
+   * @returns {HTMLElement} the event element
+   */
+  render() {
+    return (h(Fragment, null,
+      this.injectBackgroundColorStyle(),
+      this.calendarEventRender()));
+  }
+  /**
+   * The vega calendar event default render
+   *
+   * @returns {HTMLElement} calendar event element
+   */
+  calendarEventRender() {
+    return this.calendarEvent.isAllDayEvent || this.calendarEvent.isGroupEvent()
+      ? this.renderBackgroundModeEvent()
+      : this.renderNormalEvent();
+  }
+  /**
+   * render background mode event element
+   *
+   * @returns {HTMLDivElement} div element
+   */
+  renderBackgroundModeEvent() {
+    const disabled = this.calendarEvent.disabled;
+    return (h("div", { role: "button", tabIndex: 0, class: {
+        'slot-container': this.slotMode,
+        'background-color-mode': true,
+        'event-bg-color': !disabled,
+        'bg-disabled': disabled,
+      }, ref: (node) => (this.slotContainerRef = node) }, this.slotMode ? this.getSlotElement() : this.calendarEvent.title));
+  }
+  /**
+   * render event element
+   *
+   * @returns {HTMLAnchorElement} event element
+   */
+  renderNormalEvent() {
+    const { variant = 'primary', disabled } = this.calendarEvent;
+    const isMonthEvent = !this.host.classList.contains('day-event');
+    const classMap = {
+      'slot-container': this.slotMode,
+      'event-container': true,
+      'disabled': disabled,
+      [variant]: true,
+    };
+    if (isMonthEvent) {
+      return (h("div", { role: "button", tabIndex: 0, class: classMap, ref: (node) => (this.slotContainerRef = node) },
+        !this.slotMode && this.renderEventStatus(),
+        this.slotMode ? this.getSlotElement() : this.defaultNormalMonthEventContentRender()));
+    }
+    else {
+      const eventDuration = this.calendarEvent.getEventDuration();
+      return (h("div", { part: "event-container", class: Object.assign(Object.assign({}, classMap), { 'vertical': eventDuration > 30, 'duration-half-an-hour': eventDuration === 30, 'event-bg-color': !disabled, 'bg-disabled': disabled }), role: "button", tabIndex: 0, ref: (node) => (this.slotContainerRef = node) },
+        !this.slotMode && this.renderEventStatus(),
+        h("div", { class: "cover-block" }),
+        this.slotMode
+          ? this.getSlotElement()
+          : this.defaultNormalTimedEventContentRender(eventDuration)));
+    }
+  }
+  /**
+   * render event status element, a color badge or a color bar element
+   *
+   * @returns {Nullable<HTMLDivElement>} div element
+   */
+  renderEventStatus() {
+    if (this.showColorBar) {
+      const disabled = this.calendarEvent.disabled;
+      return (h("div", { class: {
+          'event-status': true,
+          'event-bg-color': !disabled,
+          'bg-disabled': disabled,
+        } },
+        h("span", { class: {
+            stripe: this.calendarEvent.variant === 'secondary',
+          } })));
+    }
+  }
+  /**
+   * Render the month view timed event.
+   *
+   * @returns {HTMLElement} a div element
+   */
+  defaultNormalMonthEventContentRender() {
+    const { startTime, title } = this.calendarEvent;
+    return h("div", { class: "event-title" }, `${this.formatDisplayTime(startTime)} ${title}`);
+  }
+  /**
+   * Render the day view timed event.
+   *
+   * @param {number} eventDuration the event duration
+   * @returns {HTMLElement} a div element
+   */
+  defaultNormalTimedEventContentRender(eventDuration) {
+    const { startTime, endTime, title } = this.calendarEvent;
+    return (h("div", { class: "event-content" },
+      h("div", { class: {
+          'event-title': true,
+          'title-word-wrap': eventDuration > 30,
+        }, ref: (node) => (this.eventTitleContainerRef = node) }, title),
+      h("div", { class: "event-time" },
+        h("vega-icon", { size: "size-12", icon: VegaInternalIconManager.getIconKey('clock-three') }),
+        h("span", null, `${this.formatDisplayTime(startTime)} - ${this.formatDisplayTime(endTime)}`))));
+  }
+  /**
+   * Return a slot element if the calendar is not a repeat event
+   *
+   * @returns {Nullable<HTMLElement>} slot element or null
+   */
+  getSlotElement() {
+    if (!this.calendarEvent.isRepeatEvent) {
+      return h("slot", null);
+    }
+  }
+  /**
+   * render the custom color style tag element
+   *
+   * @returns {HTMLStyleElement} style element
+   */
+  injectBackgroundColorStyle() {
+    return h("style", null, this.colorController.getBackgroundColorStyle());
+  }
+  /**
+   * Takes a time string as input and formats it to ensure it always has two digits for hours and minutes.
+   *
+   * @param {string} timeString the event time string
+   * @returns {string} time string after format
+   */
+  formatDisplayTime(timeString) {
+    const [hour, minutes] = timeString.split(':');
+    if (this.timeFormat === '24-hour') {
+      return `${hour.padStart(2, '0')}:${minutes.padStart(2, '0')}`;
+    }
+    else {
+      const hourNum = Number(hour);
+      const amPm = hourNum >= 12 ? 'pm' : 'am';
+      const minutesResult = minutes.padStart(2, '0');
+      if (hourNum > 12) {
+        return `${hourNum - 12}:${minutesResult} pm`;
+      }
+      else if (hourNum === 0) {
+        return `12:${minutesResult} am`;
+      }
+      else {
+        return `${hourNum}:${minutesResult} ${amPm}`;
+      }
+    }
+  }
+}
+(() => {
+  VegaInternalIconManager.register({
+    'clock-three': clockThree,
+  });
+})();
+__decorate$6([
+  MapToComponentField()
+], VegaCalendarEventRenderer.prototype, "host", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaCalendarEventRenderer.prototype, "timeFormat", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaCalendarEventRenderer.prototype, "calendarEvent", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaCalendarEventRenderer.prototype, "slotMode", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaCalendarEventRenderer.prototype, "showColorBar", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaCalendarEventRenderer.prototype, "colorController", void 0);
+
+var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** The `VegaCalendarEventBgColorController` class in TypeScript provides methods to handle background color for calendar events based on a color map and custom color variables. */
+class VegaCalendarEventBgColorController extends VegaSlimmer {
+  /**
+   * Get the background color css string from the background token or background color string
+   *
+   * @returns {string} css string
+   */
+  getBackgroundColorStyle() {
+    const color = this.calendarEvent.color || 'bg-accent6-primary';
+    if (isBackgroundColorTokenType(color)) {
+      return `.event-bg-color{${stateBackgroundColorFormatter.formatToken(color)}}`;
+    }
+    else {
+      return `.event-bg-color{background-color:${color}}`;
+    }
+  }
+}
+__decorate$5([
+  MapToComponentField()
+], VegaCalendarEventBgColorController.prototype, "calendarEvent", void 0);
+
+var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** The `VegaCalendarEventSubStateController` class in TypeScript initializes a calendar with specified subStates. */
+class VegaCalendarEventSubStateController extends SubStateObserverSlimmer {
+  /**
+   * The constructor function initializes a calendar with specified subStates in TypeScript.
+   */
+  constructor() {
+    super({
+      /**
+       * Get the calendar event component parent calendar component
+       *
+       * @returns {HTMLElement} the parent calendar component
+       */
+      parent: () => {
+        return this.host['data-calendar-ref'];
+      },
+      subStates: [
+        {
+          subStateName: 'timeFormat',
+          parentStateName: 'timeFormat',
+        },
+        {
+          subStateName: 'showColorBar',
+          parentStateName: 'showEventColorBar',
+        },
+      ],
+    });
+  }
+}
+__decorate$4([
+  MapToComponentField({ writable: true })
+], VegaCalendarEventSubStateController.prototype, "timeFormat", void 0);
+__decorate$4([
+  MapToComponentField({ writable: true })
+], VegaCalendarEventSubStateController.prototype, "showColorBar", void 0);
+
+var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * The `VegaCalendarTitleMaxHeightController` class in TypeScript sets the maximum height for
+ * a vertical title element based on its line height and current height.
+ */
+class VegaCalendarTitleMaxHeightController extends VegaSlimmer {
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-calendar-event-title-max-height-e2e}
+   */
+  /* istanbul ignore next */
+  /**
+   * The function sets the maximum height of a vertical title element based on its line height and
+   * current height.
+   */
+  setVerticalTitleMaxHeight() {
+    const title = this.renderer.getEventTitleContainerRef();
+    if (title && title.classList.contains('title-word-wrap')) {
+      const styles = window.getComputedStyle(title);
+      const height = parsePixelStringToNumber(styles.height);
+      const lineHeight = parsePixelStringToNumber(styles.lineHeight);
+      // We need to ensure that at least one line is displayed
+      const maxLines = Math.max(Math.floor(height / lineHeight), 1);
+      title.style.maxHeight = `${maxLines * lineHeight}px`;
+    }
+  }
+}
+__decorate$3([
+  MapToComponentField()
+], VegaCalendarTitleMaxHeightController.prototype, "renderer", void 0);
+
+var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** The controller will check the calendar render mode when component will mode and copy the slot element to calendar event if the calendar event is a repeat event or the event displayed in popover */
+class VegaCalendarEventSlotController extends VegaSlimmer {
+  /**
+   * Find the current calendar event slot element, if the slot element is exists, set the calendar even slotMode to true, and store the current slot element.
+   */
+  findTheCalendarEventSlot() {
+    if (this.calendarEvent) {
+      const { event: rawEvent } = this.calendarEvent;
+      const calendar = this.getParentCalendarElement();
+      if (calendar) {
+        const matchSlot = calendar.querySelector(`vega-calendar-event-slot[event-key='${rawEvent.key}']`);
+        if (matchSlot) {
+          this.slotMode = true;
+          this.matchSlotElement = matchSlot;
+        }
+      }
+    }
+  }
+  /**
+   * Append the current slot content to slot container if the calendar event is a repeat event or the calendar event render in a popover.
+   */
+  appendTheRepeatEventSlotToContainer() {
+    const slotContainerRef = this.renderer.getSlotContainerRef();
+    if (this.slotMode && slotContainerRef && this.matchSlotElement) {
+      if (this.calendarEvent.isRepeatEvent || this.isPopoverContent()) {
+        const contentElement = this.matchSlotElement.cloneNode(true);
+        contentElement.removeAttribute('slot');
+        const existSlot = slotContainerRef.querySelector('vega-calendar-event-slot');
+        if (!existSlot) {
+          slotContainerRef.appendChild(contentElement);
+        }
+      }
+    }
+  }
+  /**
+   * This method is responsible for finding and returning the parent `vega-calendar` element of the current component instance
+   *
+   * @returns {HTMLElement} The vega calendar element
+   */
+  getParentCalendarElement() {
+    return this.host['data-calendar-ref'];
+  }
+  /**
+   * Check the calendar is in popover
+   *
+   * @returns {boolean} true or false
+   */
+  isPopoverContent() {
+    return this.host.classList.contains('calendar-event-in-popover');
+  }
+}
+__decorate$2([
+  MapToComponentField()
+], VegaCalendarEventSlotController.prototype, "host", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaCalendarEventSlotController.prototype, "calendarEvent", void 0);
+__decorate$2([
+  MapToComponentField({ writable: true })
+], VegaCalendarEventSlotController.prototype, "slotMode", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaCalendarEventSlotController.prototype, "renderer", void 0);
+__decorate$2([
+  MapToComponentMethod('componentWillLoad')
+], VegaCalendarEventSlotController.prototype, "findTheCalendarEventSlot", null);
+__decorate$2([
+  MapToComponentMethod('componentDidLoad')
+], VegaCalendarEventSlotController.prototype, "appendTheRepeatEventSlotToContainer", null);
+
+const vegaCalendarEventCss = ".bg-disabled{background-color:rgba(var(--v-bg-disabled, 176, 180, 181, 1))}:host{display:block;box-sizing:border-box;width:100%}:host .background-color-mode{border-radius:2px;color:rgba(var(--v-text-black, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px;cursor:pointer;overflow:hidden;white-space:nowrap}@media screen and (min-width: 768px) and (max-width: 1023px){:host .background-color-mode{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .background-color-mode{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .background-color-mode{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}:host .background-color-mode:not(.slot-container){padding-left:8px;padding-right:8px}:host .background-color-mode:focus{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:0px}:host .event-container{display:block;width:100%;border-radius:4px;cursor:pointer;box-sizing:border-box;overflow:hidden}:host .background-color-mode.slot-container{height:16px;line-height:16px}:host ::slotted(vega-calendar-event-slot){position:relative;pointer-events:none}:host(.month-event) .event-container{display:flex;flex-direction:row;gap:4px;align-items:center;min-height:16px}:host(.month-event) .event-container:not(.slot-container){padding-left:2px;padding-right:2px}:host(.month-event) .event-container .event-status{width:8px;height:8px;box-sizing:border-box;border-top-left-radius:9999px;border-bottom-left-radius:9999px;border-top-right-radius:9999px;border-bottom-right-radius:9999px;margin-left:2px;flex-shrink:0}:host(.month-event) .event-container .event-status span{display:none;width:100%;height:100%;border-top-left-radius:9999px;border-bottom-left-radius:9999px;border-top-right-radius:9999px;border-bottom-right-radius:9999px}:host(.month-event) .event-container .event-title{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.month-event) .event-container .event-title{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.month-event) .event-container .event-title{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.month-event) .event-container .event-title{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}:host(.month-event) .event-container.secondary .event-status span{display:block;background-size:4px 4px;opacity:0.8}:host(.month-event) .event-container.tertiary .event-status{padding:1px}:host(.month-event) .event-container.tertiary .event-status span{display:block;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1))}:host(.month-event) .event-container.disabled .event-status{background-color:rgba(var(--v-bg-disabled, 176, 180, 181, 1))}:host(.month-event) .event-container:hover{background-color:rgba(var(--v-bg-action-secondary-hover, 4, 112, 236, 0.1))}:host(.month-event) .event-container:active{background-color:rgba(var(--v-bg-action-secondary-active, 29, 65, 195, 0.1))}:host(.month-event) .event-container:focus{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:0px}:host(.day-event) .event-container{position:relative}:host(.day-event) .event-container:not(.slot-container){padding-left:8px;padding-right:8px}:host(.day-event) .event-container .event-status{position:absolute;width:4px;height:100%;left:0;top:0;z-index:1}:host(.day-event) .event-container .event-status span{display:none}:host(.day-event) .event-container .cover-block{position:absolute;height:100%;width:100%;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));border-radius:4px;left:0;top:0;opacity:0.7}:host(.day-event) .event-container .event-content,:host(.day-event) .event-container .event-time{display:flex;flex-direction:row;align-items:center}:host(.day-event) .event-container .event-content{gap:8px;position:relative;height:100%;box-sizing:border-box}:host(.day-event) .event-container .event-time{gap:4px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.day-event) .event-container .event-time{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.day-event) .event-container .event-time{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.day-event) .event-container .event-time{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}:host(.day-event) .event-container .event-time vega-icon{flex-shrink:0}:host(.day-event) .event-container .event-time span{white-space:nowrap}:host(.day-event) .event-container .event-title{color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.day-event) .event-container .event-title{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.day-event) .event-container .event-title{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.day-event) .event-container .event-title{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}:host(.day-event) .event-container .event-title.title-word-wrap{overflow:hidden}:host(.day-event) .event-container .event-title:not(.title-word-wrap){white-space:nowrap}:host(.day-event) .event-container.duration-half-an-hour{padding-top:8px;padding-bottom:8px}:host(.day-event) .event-container.vertical{height:100%}:host(.day-event) .event-container.vertical .event-content{flex-direction:column;align-items:flex-start;gap:4px;padding-top:8px;padding-bottom:8px}:host(.day-event) .event-container.secondary .event-status span,:host(.day-event) .event-container.tertiary .event-status span{display:block;position:absolute;border-top-left-radius:4px;border-bottom-left-radius:4px}:host(.day-event) .event-container.secondary .cover-block,:host(.day-event) .event-container.tertiary .cover-block{width:calc(100% - 2px);height:calc(100% - 2px);top:1px;left:1px}:host(.day-event) .event-container.secondary .event-status span{width:100%;height:100%;top:0px;left:0px;background-size:4px 4px;opacity:0.8}:host(.day-event) .event-container.secondary .cover-block{opacity:0.9}:host(.day-event) .event-container.tertiary .event-status span{background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));width:2px;height:calc(100% - 2px);top:1px;left:1px}:host(.day-event) .event-container.tertiary .cover-block{opacity:1}:host(.day-event) .event-container.disabled{background-color:rgba(var(--v-bg-disabled, 176, 180, 181, 1))}:host(.day-event) .event-container.disabled .event-status{background-color:rgba(var(--v-bg-disabled, 176, 180, 181, 1))}:host(.day-event) .event-container:focus{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:0px}:host(.day-event) .slot-container{min-height:16px}:host(.month-event.calendar-event-large-size) .background-color-mode{border-radius:4px}:host(.month-event.calendar-event-large-size) .background-color-mode:not(.slot-container){padding-top:4px;padding-bottom:4px}:host(.month-event.calendar-event-large-size) .event-container:not(.slot-container){padding-top:4px;padding-bottom:4px}:host(.month-event.calendar-event-large-size) .slot-container{height:24px;display:flex;align-items:center;line-height:24px}.stripe{background-image:linear-gradient(-45deg, transparent 25%, rgba(var(--v-bg-primary, 252, 252, 252, 1)) 25% 50%, transparent 50% 75%, rgba(var(--v-bg-primary, 252, 252, 252, 1)) 75% 100%)}";
+
+var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const VegaCalendarEvent = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.globalSlimmer = {};
+    this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer({
+      target: () => this.host,
+      callback: 
+      /**
+       * The below method is e2e-test covered in
+       * @see{module:vega-calendar-event-title-max-height-e2e}
+       */
+      /* istanbul ignore next */
+      () => this.titleMaxHeightController.setVerticalTitleMaxHeight(),
+    });
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.renderer = new VegaCalendarEventRenderer();
+    this.colorController = new VegaCalendarEventBgColorController();
+    this.slotController = new VegaCalendarEventSlotController();
+    this.subStateController = new VegaCalendarEventSubStateController();
+    this.titleMaxHeightController = new VegaCalendarTitleMaxHeightController();
+    this.timeFormat = '24-hour';
+    this.slotMode = false;
+    this.showColorBar = true;
+  }
+  render() {
+    slotPlaceholder(h("slot", null));
+    return sanitizeVegaComponent(h(Host, null, this.calendarEvent ? this.renderer.render() : null), this.host);
+  }
+  get host() { return getElement(this); }
+};
+__decorate$1([
+  InjectVegaGlobalSlimmer()
+], VegaCalendarEvent.prototype, "globalSlimmer", void 0);
+__decorate$1([
+  InjectVegaSlimmer()
+], VegaCalendarEvent.prototype, "pageResizeObserverSlimmer", void 0);
+__decorate$1([
+  InjectVegaSlimmer()
+], VegaCalendarEvent.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate$1([
+  InjectVegaSlimmer()
+], VegaCalendarEvent.prototype, "renderer", void 0);
+__decorate$1([
+  InjectVegaSlimmer()
+], VegaCalendarEvent.prototype, "colorController", void 0);
+__decorate$1([
+  InjectVegaSlimmer()
+], VegaCalendarEvent.prototype, "slotController", void 0);
+__decorate$1([
+  InjectVegaSlimmer()
+], VegaCalendarEvent.prototype, "subStateController", void 0);
+__decorate$1([
+  InjectVegaSlimmer()
+], VegaCalendarEvent.prototype, "titleMaxHeightController", void 0);
+VegaCalendarEvent.style = vegaCalendarEventCss;
+
+const vegaCalendarEventSlotCss = ":host{width:100%;height:100%;position:relative}";
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const VegaCalendarEventSlot = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.globalSlimmer = {};
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, { slot: getCalendarEventSlotName(this.eventKey) }, h("slot", null)), this.host);
+  }
+  get host() { return getElement(this); }
+};
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaCalendarEventSlot.prototype, "globalSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCalendarEventSlot.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+VegaCalendarEventSlot.style = vegaCalendarEventSlotCss;
+
+export { VegaCalendar as vega_calendar, VegaCalendarEvent as vega_calendar_event, VegaCalendarEventSlot as vega_calendar_event_slot };