@globalpayments/vega 2.58.0 → 2.59.1

package/dist/esm/{vega-calendar_3.entry.js → vega-calendar_4.entry.js}

@@ -1,46 +1,46 @@
-import { h, F as Fragment, f as forceUpdate, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-d0a47531.js';
+import { h, F as Fragment, f as forceUpdate, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-057d0f70.js';
 import { s as sanitizeVegaComponent } from './component-7d906393.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-a84cc93e.js';
-import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-c345ca2e.js';
-import { a as VegaClick, f as VegaChange, b as VegaDropdownClick, d as domNodeSubjectFactory, g as VegaEventClick, h as VegaDateDblClick, i as VegaMoreActionClick } from './dom-node-subject-factory-6374611f.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-999e21e3.js';
+import { a as VegaClick, f as VegaChange, b as VegaDropdownClick, N as VegaPopoverHide, d as domNodeSubjectFactory, g as VegaEventClick, h as VegaDateDblClick, i as VegaMoreActionClick } from './dom-node-subject-factory-202655e7.js';
 import { V as VegaInternalIconManager } from './internal-icon-manager-7eac52c8.js';
 import { p as pad } from './date-c55b97f0.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-b5cb9b81.js';
-import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-b59a578e.js';
-import { t as VegaInternalCalendarMonthEventsChange } from './vega-internal-event-id-4072659b.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-40973ec2.js';
+import { V as VegaInternalTranslation } from './translation-833d9ef4.js';
+import { s as stateBackgroundColorFormatter } from './state-background-color-formatter-da5e76e8.js';
+import { q as isBackgroundColorTokenType } from './type-guard-84b1f192.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-6b5b31f5.js';
+import { v as VegaInternalCalendarMonthEventsChange, w as VegaInternalCalendarEventPreviewClear, x as VegaInternalCalendarEventPreviewUpdate } from './vega-internal-event-id-b7c865de.js';
 import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
+import { O as Observer } from './observer-3959f9dd.js';
+import { C as ChangeManager } from './change-manager-6a7eb88c.js';
+import { m as CALENDAR_EVENT_PREVIEW_POPOVER_HIDE } from './static-subject-title-633b3474.js';
 import { f as flatNestedArray } from './array-7888f339.js';
 import { g as generateUUID } from './create-public-api-runtime-metrics-slimmer-bedf3a1e.js';
 import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-0bf7fbf3.js';
 import { d as debounce } from './timer-9321173b.js';
-import { C as ChangeManager } from './change-manager-6a7eb88c.js';
-import { c as createSubStateNotifySlimmer } from './sub-state-notify-slimmer-0a6c3cbb.js';
-import { T as TranslationSlimmer } from './translation-slimmer-f28e4708.js';
+import { c as createSubStateNotifySlimmer } from './sub-state-notify-slimmer-b3524c09.js';
+import { T as TranslationSlimmer } from './translation-slimmer-c83b52c1.js';
 import { s as slotPlaceholder } from './placeholder-bf562081.js';
-import { q as isBackgroundColorTokenType } from './type-guard-84b1f192.js';
-import { s as stateBackgroundColorFormatter } from './state-background-color-formatter-da5e76e8.js';
-import { S as SubStateObserverSlimmer } from './sub-state-observer-slimmer-53eec5fb.js';
+import { S as SubStateObserverSlimmer } from './sub-state-observer-slimmer-c823d69c.js';
 import { b as parsePixelStringToNumber } from './pixel-f32c07ce.js';
-import './observer-3959f9dd.js';
-import './ui-7d177fb0.js';
+import './ui-c20be16d.js';
 import './icon-manager-2ee1c619.js';
 import './dynamic-slimmer-90b8af32.js';
-import './internal-vega-event-manager-d80c53c5.js';
+import './internal-vega-event-manager-526f8ed1.js';
 import './try-get-document-bef0f526.js';
+import './breakpoints-d9faf11c.js';
+import './ui-8424715a.js';
+import './regex-dfe11abf.js';
+import './typography-396de03f.js';
 import './vega-env-manager-8f8dc473.js';
 import './feature-flag-controller-51659753.js';
 import './index-e9da316f.js';
 import './_commonjsHelpers-9943807e.js';
 import './number-4398f2e1.js';
-import './ui-8424715a.js';
-import './breakpoints-d9faf11c.js';
-import './translation-a6eacb5f.js';
-import './static-subject-title-ca83d6b6.js';
-import './regex-dfe11abf.js';
-import './typography-396de03f.js';
 
-var __decorate$q = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$t = (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;
@@ -48,6 +48,9 @@ var __decorate$q = (undefined && undefined.__decorate) || function (decorators,
 };
 /** The `VegaCalendarRenderer` class in TypeScript React renders switch panel and view components for a calendar using VegaSlimmer. */
 class VegaCalendarRenderer extends VegaSlimmer {
+  getEventPreviewRef() {
+    return this.eventPreviewRef;
+  }
   /**
    * The render function returns a Fragment containing the rendered output of switchPanelRenderer and viewRenderer components.
    *
@@ -56,13 +59,19 @@ class VegaCalendarRenderer extends VegaSlimmer {
   render() {
     return (h(Fragment, null,
       this.switchPanelRenderer.render(),
-      this.viewRenderer.render()));
+      this.viewRenderer.render(),
+      h("vega-calendar-event-preview", { ref: (el) => {
+          this.eventPreviewRef = el;
+        } })));
   }
 }
-__decorate$q([
+__decorate$t([
+  MapToComponentField()
+], VegaCalendarRenderer.prototype, "host", void 0);
+__decorate$t([
   MapToComponentField()
 ], VegaCalendarRenderer.prototype, "switchPanelRenderer", void 0);
-__decorate$q([
+__decorate$t([
   MapToComponentField()
 ], VegaCalendarRenderer.prototype, "viewRenderer", void 0);
 
@@ -74,1096 +83,1148 @@ 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 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);
+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>`,
 };
 
-/**
- * Calendar view generator abstract class.
- */
-class CalendarViewGenerator {
+var __decorate$s = (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() {
-    this.WEEKDAYS_SHORT = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-    this.weekdays = getWeekdays();
+    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.postOperationDate);
+    };
+    /**
+     * 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 item click
+     *
+     * @param {NotifyObserverPayload<string>} payload The object contains the menu item key
+     */
+    this.moreActionMenuClick = (payload) => {
+      this.moreActionClickEmitter.emit(payload.detail);
+    };
   }
   /**
-   * Get weekday names.
+   * get the switch panel container element
    *
-   * @returns {string[]} - The weekday strings
+   * @returns {HTMLVegaFlexElement} container element
    */
-  getWeekdayNames() {
-    return this.WEEKDAYS_SHORT;
+  getSwitchPanelRef() {
+    return this.switchPanelRef;
   }
   /**
-   * Generate calendar dates
+   * calendar switch panel with date switch, view switch, add new button, and more action components.
    *
-   * @param {CalendarPeriod} period - The calendar period
-   * @returns {Date[]} - The date result
+   * @returns {HTMLElement} html element
    */
-  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;
+  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.showSwitchView ? this.renderViewSwitch() : null,
+        this.renderMoreActionMenu())));
   }
   /**
-   * Generate calendar head
+   * The `renderDateSwitch` function returns a container with buttons for switching dates and displaying the current date.
    *
-   * @returns {string[]} - The data of week head
+   * @returns {HTMLDivElement} action button elements container.
    */
-  generateWeekHead() {
-    return this.weekdays.map((day) => this.getWeekdayNames()[day]);
+  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()));
   }
-}
-
-/**
- * Calendar view
- */
-class CalendarView {
-  constructor(weekdays, dateItems) {
-    this._weekdays = weekdays;
-    this._dateItems = dateItems;
+  /**
+   * 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 week head of the calendar view
+   * The function `renderViewSwitch` returns a JSX element for rendering a segment control component in a TypeScript React application.
    *
-   * @type {string[]}
+   * @returns {HTMLElement} An HTMLElement containing a vega-segment-control element with specific attributes and event handling.
    */
-  get weekdays() {
-    return this._weekdays;
+  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);
+      } }));
   }
   /**
-   * The date items of the calendar view
+   * Render an more action button if dropdown source is not empty
    *
-   * @type {CalendarDate[][]}
+   * @returns {Nullable<HTMLElement>} the additional element
    */
-  get dateItems() {
-    return this._dateItems;
+  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" })));
+    }
   }
-}
-
-/**
- * Day view calendar generator
- */
-class DayViewGenerator extends CalendarViewGenerator {
   /**
-   * @inheritDoc
+   * 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
    */
-  generate(period) {
-    return new CalendarView([this.generateWeekHead()[period.current.toDate().getDay()]], [[period.current]]);
+  getViewDateSummary() {
+    const currentDate = this.currentPeriod.current;
+    let result = '';
+    switch (this.viewMode) {
+      case 'day': {
+        const monthName = this.translationSlimmer.t(currentDate.getMonthName());
+        result = `${currentDate.date} ${monthName}, ${currentDate.year}`;
+        break;
+      }
+      case 'week': {
+        const weekItems = this.calendarView.dateItems[0];
+        const start = weekItems[0];
+        const end = weekItems[weekItems.length - 1];
+        const [startMonthName, endMonthName] = [start, end].map((item) => this.translationSlimmer.t(item.getMonthName()));
+        result = `${start.date} ${startMonthName}${start.year === end.year ? '' : ', ' + start.year} - ${end.date} ${endMonthName}, ${end.year}`;
+        break;
+      }
+      case 'month': {
+        const monthName = this.translationSlimmer.t(currentDate.getMonthName());
+        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$s([
+  MapToComponentField()
+], VegaCalendarSwitchPanelRenderer.prototype, "viewMode", void 0);
+__decorate$s([
+  MapToComponentField()
+], VegaCalendarSwitchPanelRenderer.prototype, "calendarView", void 0);
+__decorate$s([
+  MapToComponentField()
+], VegaCalendarSwitchPanelRenderer.prototype, "currentPeriod", void 0);
+__decorate$s([
+  MapToComponentField()
+], VegaCalendarSwitchPanelRenderer.prototype, "moreActionDropdownProps", void 0);
+__decorate$s([
+  MapToComponentField()
+], VegaCalendarSwitchPanelRenderer.prototype, "moreActionClickEmitter", void 0);
+__decorate$s([
+  MapToComponentField()
+], VegaCalendarSwitchPanelRenderer.prototype, "currentPeriodController", void 0);
+__decorate$s([
+  MapToComponentField()
+], VegaCalendarSwitchPanelRenderer.prototype, "calendarViewController", void 0);
+__decorate$s([
+  MapToComponentField()
+], VegaCalendarSwitchPanelRenderer.prototype, "translationSlimmer", void 0);
+__decorate$s([
+  MapToComponentField()
+], VegaCalendarSwitchPanelRenderer.prototype, "postOperationDate", void 0);
+__decorate$s([
+  MapToComponentField()
+], VegaCalendarSwitchPanelRenderer.prototype, "showSwitchView", void 0);
 
-/**
- * Calendar date class
- */
-class CalendarDate {
-  constructor(year, month, date) {
-    this._date = date;
-    this._month = month;
-    this._year = year;
-  }
+var __decorate$r = (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 {
   /**
-   * Create a calendar date from a Date object
+   * Get the calendar view content element ref
    *
-   * @param {Date} date - The Date object
-   * @returns {CalendarDate} - Return a CalendarDate object
+   * @returns {Nullable<HTMLElement>} The div element.
    */
-  static from(date) {
-    return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
+  getCalendarViewElementRef() {
+    return this.calendarViewElementRef;
   }
   /**
-   * The year of the calendar date
+   * render the calendar month/week/day view
    *
-   * @type {number}
+   * @returns {HTMLElement} html element
    */
-  get year() {
-    return this._year;
-  }
-  set year(value) {
-    this._year = value;
+  render() {
+    return (h("div", { class: `calendar-view calendar-view-${this.viewMode} ${this.showWeekends === false ? 'calendar-hide-weekends' : ''}`, ref: (node) => (this.calendarViewElementRef = node) }, this.viewMode === 'month'
+      ? this.monthViewRenderer.render()
+      : this.viewWithTimeRenderer.render()));
   }
+}
+__decorate$r([
+  MapToComponentField()
+], VegaCalendarViewRenderer.prototype, "viewMode", void 0);
+__decorate$r([
+  MapToComponentField()
+], VegaCalendarViewRenderer.prototype, "showWeekends", void 0);
+__decorate$r([
+  MapToComponentField()
+], VegaCalendarViewRenderer.prototype, "monthViewRenderer", void 0);
+__decorate$r([
+  MapToComponentField()
+], VegaCalendarViewRenderer.prototype, "viewWithTimeRenderer", void 0);
+
+var __decorate$q = (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 month of the calendar date
+   * the HTML elements that represent the month view of a calendar component.
    *
-   * @type {number}
+   * @returns {HTMLElement} the month view calendar content
    */
-  get month() {
-    return this._month;
-  }
-  set month(value) {
-    this._month = value;
+  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()));
   }
   /**
-   * The date of the calendar date
+   * generating the HTML elements that represent the content of the month view in a calendar component
    *
-   * @type {number}
+   * @returns {HTMLElement[]} month view content and event content
    */
-  get date() {
-    return this._date;
-  }
-  set date(value) {
-    this._date = value;
+  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) => {
+        var _a;
+        const isDisabled = (_a = this.isDateDisabled) === null || _a === void 0 ? void 0 : _a.call(this, item.toDate());
+        return (h("div", { class: {
+            'row-cell border-divider-right': true,
+            'current-month-day': item.compare(currentDate).inMonth,
+            'active': item.isToday(),
+            'disabled': isDisabled,
+          }, key: `${item.month}-${item.date}`, 
+          // eslint-disable-next-line react/jsx-no-bind
+          onDblClick: isDisabled
+            ? undefined
+            : (e) => {
+              this.handleDateBlockClick(e, item);
+            } },
+          this.renderDateBlock(item),
+          this.monthEventRenderer.render(item, eventsArray[itemIndex], displayEventsArray[itemIndex], itemIndex)));
+      })));
+    });
   }
   /**
-   * Verify whether the calendar date is today
+   * It takes a `CalendarDate` object as a parameter and returns an HTML element representing a date block in the calendar view.
    *
-   * @returns {boolean} - Return true if the calendar date is today. Otherwise, return false.
+   * @param {CalendarDate} item the day object
+   * @returns {HTMLElement} the date block element
    */
-  isToday() {
-    const today = new Date();
-    return (today.getFullYear() === this.year &&
-      today.getMonth() + 1 === this.month &&
-      today.getDate() === this.date);
+  renderDateBlock(item) {
+    const isMonthFirstDay = item.date === 1;
+    return (h("div", { class: "date" },
+      isMonthFirstDay && h("div", { class: "month-block" }, item.getMonthName(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)));
   }
   /**
-   * Convert the calendar date to a Date object
+   * switch to current date day view
    *
-   * @returns {Date} - Return a Date object
+   * @param {MouseEvent} e the double click event object
+   * @param {CalendarDate} calendarDate the calendar date object
    */
-  toDate() {
-    return new Date(this.year, this.month - 1, this.date);
+  goToCurrentDayView(e, calendarDate) {
+    e.stopPropagation();
+    this.currentPeriodController.updateCalendarPeriod('day', calendarDate);
   }
   /**
-   * Compare with another calendar date
+   * emit vega click event when click the date block
    *
-   * @param {CalendarDate} date - The calendar date to compare with
-   * @returns {DateCompareResult} - Return a DateCompareResult object
+   * @param {MouseEvent} e the mouse event object
+   * @param {CalendarDate} calendarDate the calendar date 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;
+  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 },
+      });
     }
-    return result;
   }
   /**
-   * The function "equal" compares the year, month, and date of two CalendarDate objects and returns  true if they are equal.
+   * determine if the clicked element is blank area
    *
-   * @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
+   * @param {HTMLElement} element the target element
+   * @returns {boolean} true or false
    */
-  generate(period) {
-    const dates = this.generateDates(period);
-    const showWeekends = period.showWeekends;
-    let weekDays = this.generateWeekHead();
-    let dateItems = [dates.map(CalendarDate.from)];
-    if (showWeekends === false) {
-      weekDays = weekDays.slice(1, 6);
-      dateItems = dateItems.map((items) => items.slice(1, 6));
-    }
-    return new CalendarView(weekDays, dateItems);
+  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$q([
+  MapToComponentField()
+], VegaCalendarMonthViewRenderer.prototype, "viewMode", void 0);
+__decorate$q([
+  MapToComponentField()
+], VegaCalendarMonthViewRenderer.prototype, "calendarView", void 0);
+__decorate$q([
+  MapToComponentField()
+], VegaCalendarMonthViewRenderer.prototype, "currentPeriod", void 0);
+__decorate$q([
+  MapToComponentField()
+], VegaCalendarMonthViewRenderer.prototype, "currentPeriodController", void 0);
+__decorate$q([
+  MapToComponentField()
+], VegaCalendarMonthViewRenderer.prototype, "monthEventRenderer", void 0);
+__decorate$q([
+  MapToComponentField()
+], VegaCalendarMonthViewRenderer.prototype, "dateDblClickEmitter", void 0);
+__decorate$q([
+  MapToComponentField()
+], VegaCalendarMonthViewRenderer.prototype, "translationSlimmer", void 0);
+__decorate$q([
+  MapToComponentField()
+], VegaCalendarMonthViewRenderer.prototype, "isDateDisabled", void 0);
 
-/**
- * Calendar month view generator
- */
-class MonthViewGenerator extends CalendarViewGenerator {
+var __decorate$p = (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 {
   /**
-   * @inheritDoc
+   * 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.
    */
-  generate(period) {
-    const showWeekends = period.showWeekends;
-    let 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);
-    });
-    let weekDays = this.generateWeekHead();
-    if (showWeekends === false) {
-      weekDays = weekDays.slice(1, 6);
-      calendarDates = calendarDates.map((items) => items.slice(1, 6));
-    }
-    return new CalendarView(weekDays, 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);
+  render() {
+    return (h("div", { class: "calendar-view-container" },
+      this.renderViewTitle(),
+      this.renderViewContent()));
   }
   /**
-   * The current date of the period.
+   * The function `renderViewTitle` renders a calendar view title and events based on the provided source data.
    *
-   * @type {CalendarDate}
+   * @returns {HTMLElement} The `renderViewTitle` function returns an HTML element (HTMLElement) that contains a calendar view title container with rows for each day's information.
    */
-  get current() {
-    return this._current;
+  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 start date of the period
+   * The `renderViewContent` function in TypeScript React renders a calendar view with day blocks and time markers based on the provided data.
    *
-   * @type {CalendarDate}
+   * @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.
    */
-  get startDate() {
-    return this._startDate;
+  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) => {
+          var _a;
+          const isDisabled = (_a = this.isDateDisabled) === null || _a === void 0 ? void 0 : _a.call(this, item.toDate());
+          return (h("div", { class: {
+              'grid-col border-divider-left': true,
+              'disabled': isDisabled,
+            }, key: item.date },
+            h("div", { class: "hour-empty border-divider-top" }),
+            this.renderHourBlock(item, isDisabled)));
+        })),
+        this.dayViewTimedEventRenderer.render(),
+        this.timeMarkerRenderer.render(source))));
   }
   /**
-   * The end date of the period
+   * The function `renderHourBlock` returns an array of HTML elements representing hour blocks with time information.
    *
-   * @type {CalendarDate}
+   * @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.
    */
-  get endDate() {
-    return this._endDate;
+  renderHourBlock(calendarDate, isDisabled) {
+    const timeLineSource = Array(24).fill('');
+    return timeLineSource.map((_item, index) => {
+      var _a;
+      let isHourDisabled = false;
+      if (!isDisabled) {
+        const dateWithHour = new Date(calendarDate.toDate().setHours(index));
+        isHourDisabled = (_a = this.isDateDisabled) === null || _a === void 0 ? void 0 : _a.call(this, dateWithHour);
+      }
+      return (h("div", { class: {
+          'grid-cell border-divider-top': true,
+          'disabled': isDisabled || isHourDisabled,
+        }, 
+        // eslint-disable-next-line react/jsx-no-bind
+        onDblClick: isDisabled || isHourDisabled
+          ? undefined
+          : (e) => this.handleDateBlockClick(calendarDate, index, e) }));
+    });
   }
   /**
-   * The count of the period
+   * emit vega click event when click the date block
    *
-   * @type {number}
+   * @param {CalendarDate} calendarDate the calendar date object
    */
-  get count() {
-    return this._count;
+  handleDateBlockClick(calendarDate, hour, e) {
+    const { year, month, date } = calendarDate;
+    const { clientX, clientY } = e;
+    this.dateDblClickEmitter.emit({ year, month, date, hour, mouseEventInfo: { clientX, clientY } });
   }
+}
+__decorate$p([
+  MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "viewMode", void 0);
+__decorate$p([
+  MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "timeLineRenderer", void 0);
+__decorate$p([
+  MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "timeMarkerRenderer", void 0);
+__decorate$p([
+  MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "dayViewTimedEventRenderer", void 0);
+__decorate$p([
+  MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "dayViewFullDayEventRenderer", void 0);
+__decorate$p([
+  MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "calendarView", void 0);
+__decorate$p([
+  MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "dateDblClickEmitter", void 0);
+__decorate$p([
+  MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "translationSlimmer", void 0);
+__decorate$p([
+  MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "isDateDisabled", void 0);
+
+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 `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 {
   /**
-   * This function returns the type of the object.
+   * rendering the time line component as an HTML element
    *
-   * @type {string}
+   * @returns {HTMLElement} the html element
    */
-  get type() {
-    return this._type;
+  render() {
+    const timeLineSource = this.getTimeLineTitles();
+    return (h("div", { class: "time-line" },
+      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)));
+      })));
   }
   /**
-   * This function returns the showWeekends of the object.
+   * The function `getTimeLineTitles` generates a time line array based on the specified time format (24-hour) and stores it in the `timeLineSource` property.
    *
-   * @type {boolean}
+   * @returns {string[]} returns an array of strings representing the time line
    */
-  get showWeekends() {
-    return this._showWeekends;
+  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;
+  }
+}
+__decorate$o([
+  MapToComponentField()
+], VegaCalendarTimeLineRenderer.prototype, "timeFormat", void 0);
+
+/**
+ * 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);
+};
+var WeekdayLongNames;
+(function (WeekdayLongNames) {
+  WeekdayLongNames["sun"] = "Sunday";
+  WeekdayLongNames["mon"] = "Monday";
+  WeekdayLongNames["tue"] = "Tuesday";
+  WeekdayLongNames["wed"] = "Wednesday";
+  WeekdayLongNames["thu"] = "Thursday";
+  WeekdayLongNames["fri"] = "Friday";
+  WeekdayLongNames["sat"] = "Saturday";
+})(WeekdayLongNames || (WeekdayLongNames = {}));
+/**
+ * Format display time
+ *
+ * @param {TimeFormat} timeFormat - The time format (24-hour or 12-hour)
+ * @param {string} timeString - The time string to format
+ * @returns {string} - The formatted time string
+ */
+const formatDisplayTime = (timeFormat, timeString) => {
+  const [hour, minutes] = timeString.split(':');
+  if (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} ${VegaInternalTranslation.t('pm')}`;
+    }
+    else if (hourNum === 0) {
+      return `12:${minutesResult} ${VegaInternalTranslation.t('am')}`;
+    }
+    else {
+      return `${hourNum}:${minutesResult} ${VegaInternalTranslation.t(amPm)}`;
+    }
+  }
+};
+
+/**
+ * Calendar view generator abstract class.
+ */
+class CalendarViewGenerator {
+  constructor() {
+    this.WEEKDAYS_SHORT = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+    this.weekdays = getWeekdays();
   }
   /**
-   * Go to a specific date.
+   * Get weekday names.
    *
-   * @param {CalendarDate} date - The date to go to.
-   * @returns {this} - The current period.
+   * @returns {string[]} - The weekday strings
    */
-  goTo(date) {
-    return this.createBy(date);
+  getWeekdayNames() {
+    return this.WEEKDAYS_SHORT;
   }
   /**
-   * Go to now.
+   * Generate calendar dates
    *
-   * @returns {this} - The current period.
+   * @param {CalendarPeriod} period - The calendar period
+   * @returns {Date[]} - The date result
    */
-  now() {
-    return this.createBy(CalendarDate.from(new Date()));
+  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;
   }
   /**
-   * Calculate the period start date and end date.
+   * Generate calendar head
    *
-   * @param {CalendarDate} date - The date to calculate the period from.
+   * @returns {string[]} - The data of week head
    */
-  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);
+  generateWeekHead() {
+    return this.weekdays.map((day) => this.getWeekdayNames()[day]);
   }
 }
 
 /**
- * Period of day.
+ * Calendar view
  */
-class DayPeriod extends CalendarPeriod {
-  constructor(current, showWeekends) {
-    super(DayPeriod.DISPLAY_DATE_COUNT, current);
-    this._type = 'day';
-    this._showWeekends = true;
-    this._showWeekends = showWeekends === false ? false : true;
+class CalendarView {
+  constructor(weekdays, dateItems) {
+    this._weekdays = weekdays;
+    this._dateItems = dateItems;
   }
   /**
-   * @inheritDoc
+   * The week head of the calendar view
+   *
+   * @type {string[]}
    */
-  next() {
-    const nextDate = this.current.toDate();
-    nextDate.setDate(nextDate.getDate() + 1);
-    let calendarDate = CalendarDate.from(nextDate);
-    if (this._showWeekends === false) {
-      calendarDate = getClosestWorkday(calendarDate);
-    }
-    return this.createBy(calendarDate);
+  get weekdays() {
+    return this._weekdays;
   }
   /**
-   * @inheritDoc
+   * The date items of the calendar view
+   *
+   * @type {CalendarDate[][]}
    */
-  previous() {
-    const previousDate = this.current.toDate();
-    previousDate.setDate(previousDate.getDate() - 1);
-    let calendarDate = CalendarDate.from(previousDate);
-    if (this._showWeekends === false) {
-      calendarDate = getClosestWorkday(calendarDate, DateDirection.PREVIOUS);
-    }
-    return this.createBy(calendarDate);
-  }
-  /**
-   * Go to now.
-   *
-   * @returns {this} - The current period.
-   */
-  now() {
-    let calendarDate = CalendarDate.from(new Date());
-    if (this._showWeekends === false) {
-      calendarDate = getClosestWorkday(calendarDate);
-    }
-    return this.createBy(calendarDate);
+  get dateItems() {
+    return this._dateItems;
   }
+}
+
+/**
+ * Day view calendar generator
+ */
+class DayViewGenerator extends CalendarViewGenerator {
   /**
    * @inheritDoc
    */
-  createBy(current) {
-    return new DayPeriod(current, this._showWeekends);
+  generate(period) {
+    return new CalendarView([this.generateWeekHead()[period.current.toDate().getDay()]], [[period.current]]);
   }
 }
-DayPeriod.DISPLAY_DATE_COUNT = 1;
 
 /**
- * Period of the week
+ * Calendar date class
  */
-class WeekPeriod extends CalendarPeriod {
-  constructor(current, showWeekends) {
-    super(WeekPeriod.DISPLAY_DATE_COUNT, current);
-    this._type = 'week';
-    this._showWeekends = true;
-    this._showWeekends = showWeekends === false ? false : true;
+class CalendarDate {
+  constructor(year, month, date) {
+    this._date = date;
+    this._month = month;
+    this._year = year;
   }
   /**
-   * @inheritDoc
+   * Create a calendar date from a Date object
+   *
+   * @param {Date} date - The Date object
+   * @returns {CalendarDate} - Return a CalendarDate object
    */
-  next() {
-    const currentDate = this.current.toDate();
-    currentDate.setDate(currentDate.getDate() + 7);
-    return this.createBy(CalendarDate.from(currentDate));
+  static from(date) {
+    return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
   }
   /**
-   * @inheritDoc
+   * The year of the calendar date
+   *
+   * @type {number}
    */
-  previous() {
-    const currentDate = this.current.toDate();
-    currentDate.setDate(currentDate.getDate() - 7);
-    return this.createBy(CalendarDate.from(currentDate));
+  get year() {
+    return this._year;
+  }
+  set year(value) {
+    this._year = value;
   }
   /**
-   * @inheritDoc
+   * The month of the calendar date
+   *
+   * @type {number}
    */
-  createBy(current) {
-    return new WeekPeriod(current, this._showWeekends);
+  get month() {
+    return this._month;
   }
-}
-WeekPeriod.DISPLAY_DATE_COUNT = 7;
-
-/**
- * Period of month
- */
-class MonthPeriod extends CalendarPeriod {
-  constructor(current, showWeekends) {
-    super(MonthPeriod.DISPLAY_DATE_COUNT, current);
-    this._type = 'month';
-    this._showWeekends = true;
-    this._showWeekends = showWeekends === false ? false : true;
+  set month(value) {
+    this._month = value;
   }
   /**
-   * The function `getMonthFirstDay` returns the first day of a given month in a calendar.
+   * The date of the calendar date
    *
-   * @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.
+   * @type {number}
    */
-  static getMonthFirstDay(calendarDate) {
-    const date = calendarDate || CalendarDate.from(new Date());
-    return new CalendarDate(date.year, date.month, 1);
+  get date() {
+    return this._date;
+  }
+  set date(value) {
+    this._date = value;
   }
   /**
-   * Calculate the period start date and end date.
+   * Verify whether the calendar date is today
    *
-   * @param {CalendarDate} date - The date to calculate the period from.
+   * @returns {boolean} - Return true if the calendar date is today. Otherwise, return false.
    */
-  calculatePeriod(date) {
-    const firstDay = MonthPeriod.getMonthFirstDay(date);
-    const cursor = firstDay.toDate();
-    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);
+  isToday() {
+    const today = new Date();
+    return (today.getFullYear() === this.year &&
+      today.getMonth() + 1 === this.month &&
+      today.getDate() === this.date);
   }
   /**
-   * @inheritDoc
+   * Convert the calendar date to a Date object
+   *
+   * @returns {Date} - Return a Date object
    */
-  next() {
-    const next = this.current.toDate();
-    next.setMonth(next.getMonth() + 1);
-    return this.createBy(CalendarDate.from(next));
+  toDate() {
+    return new Date(this.year, this.month - 1, this.date);
   }
   /**
-   * @inheritDoc
+   * Compare with another calendar date
+   *
+   * @param {CalendarDate} date - The calendar date to compare with
+   * @returns {DateCompareResult} - Return a DateCompareResult object
    */
-  previous() {
-    const previous = this.current.toDate();
-    previous.setMonth(previous.getMonth() - 1);
-    return this.createBy(CalendarDate.from(previous));
+  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;
   }
   /**
-   * @inheritDoc
+   * 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
    */
-  createBy(current) {
-    return new MonthPeriod(current, this._showWeekends);
+  equal(calendarDate) {
+    const { year, month, date } = calendarDate;
+    return this._year === year && this._month === month && this._date === date;
+  }
+  /**
+   * Get month name.
+   *
+   * @param {boolean} isShortName - Whether to get the short name or long name of the month
+   * @returns {string} The name of the month
+   */
+  getMonthName(isShortName = false) {
+    return VegaInternalTranslation.t(this.toDate().toLocaleDateString('en-US', {
+      month: isShortName ? 'short' : 'long',
+    }));
   }
 }
-MonthPeriod.DISPLAY_DATE_COUNT = 6 * 7;
 
-var DateDirection;
-(function (DateDirection) {
-  DateDirection["PREVIOUS"] = "-1";
-  DateDirection["NEXT"] = "1";
-})(DateDirection || (DateDirection = {}));
-/**
- * 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.
+ * Calendar week view generator
  */
-function getTimeIndex(timeString, unit = 15) {
-  const [hour, minutes] = timeString.split(':');
-  return Math.round((Number(hour) * 60 + Number(minutes)) / unit);
+class WeekViewGenerator extends CalendarViewGenerator {
+  /**
+   * @inheritDoc
+   */
+  generate(period) {
+    const dates = this.generateDates(period);
+    const showWeekends = period.showWeekends;
+    let weekDays = this.generateWeekHead();
+    let dateItems = [dates.map(CalendarDate.from)];
+    if (showWeekends === false) {
+      weekDays = weekDays.slice(1, 6);
+      dateItems = dateItems.map((items) => items.slice(1, 6));
+    }
+    return new CalendarView(weekDays, dateItems);
+  }
 }
+
 /**
- * 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.
+ * Calendar month view generator
  */
-function getCalendarEventSlotName(eventKey) {
-  return 'vega-calendar-event-slot-' + eventKey;
+class MonthViewGenerator extends CalendarViewGenerator {
+  /**
+   * @inheritDoc
+   */
+  generate(period) {
+    const showWeekends = period.showWeekends;
+    let 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);
+    });
+    let weekDays = this.generateWeekHead();
+    if (showWeekends === false) {
+      weekDays = weekDays.slice(1, 6);
+      calendarDates = calendarDates.map((items) => items.slice(1, 6));
+    }
+    return new CalendarView(weekDays, calendarDates);
+  }
 }
+
 /**
- * Returns the closest workday to a given calendar date based on a specified direction.
- *
- * @param {Date} date - The starting date from which you want to find the closest workday.
- * @param {'-1' | '1'} [direction=1] - Determines whether to find the closest workday in the past or future. It can have two possible values:
- * @returns {CalendarDate} The closest workday to the input date
+ * CalendarPeriod is an abstract class that represents a period of date for calendar.
  */
-function getClosestWorkday(date, direction = DateDirection.NEXT) {
-  const day = date.toDate().getDay();
-  if (day === 0 || day === 6) {
-    let nextWorkdayGap = day === 0 ? 1 : 2;
-    if (direction === DateDirection.PREVIOUS) {
-      nextWorkdayGap = day === 0 ? -2 : -1;
-    }
-    return CalendarDate.from(new Date(date.year, date.month - 1, date.date + nextWorkdayGap));
-  }
-  return date;
-}
-
-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$p = (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.postOperationDate);
-    };
-    /**
-     * 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 item click
-     *
-     * @param {NotifyObserverPayload<string>} payload The object contains the menu item key
-     */
-    this.moreActionMenuClick = (payload) => {
-      this.moreActionClickEmitter.emit(payload.detail);
-    };
+class CalendarPeriod {
+  constructor(count, current) {
+    this._count = count;
+    this._current = current ? current : CalendarDate.from(new Date());
+    this.calculatePeriod(this._current);
   }
   /**
-   * get the switch panel container element
+   * The current date of the period.
    *
-   * @returns {HTMLVegaFlexElement} container element
+   * @type {CalendarDate}
    */
-  getSwitchPanelRef() {
-    return this.switchPanelRef;
+  get current() {
+    return this._current;
   }
   /**
-   * calendar switch panel with date switch, view switch, add new button, and more action components.
+   * The start date of the period
    *
-   * @returns {HTMLElement} html element
+   * @type {CalendarDate}
    */
-  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.showSwitchView ? this.renderViewSwitch() : null,
-        this.renderMoreActionMenu())));
+  get startDate() {
+    return this._startDate;
   }
   /**
-   * The `renderDateSwitch` function returns a container with buttons for switching dates and displaying the current date.
+   * The end date of the period
    *
-   * @returns {HTMLDivElement} action button elements container.
+   * @type {CalendarDate}
    */
-  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()));
+  get endDate() {
+    return this._endDate;
   }
   /**
-   * The function `renderCurrentPeriod` returns an HTML element displaying the view date content summary info.
+   * The count of the period
    *
-   * @returns {HTMLVegaFontElement} The text content inside the element is "Current Date Test".
+   * @type {number}
    */
-  renderCurrentPeriod() {
-    return (h("vega-font", { class: "calendar-current-date", variant: "font-field-label", color: "text-primary" }, this.getViewDateSummary()));
+  get count() {
+    return this._count;
   }
   /**
-   * The function `renderViewSwitch` returns a JSX element for rendering a segment control component in a TypeScript React application.
+   * This function returns the type of the object.
    *
-   * @returns {HTMLElement} An HTMLElement containing a vega-segment-control element with specific attributes and event handling.
+   * @type {string}
    */
-  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);
-      } }));
+  get type() {
+    return this._type;
   }
   /**
-   * Render an more action button if dropdown source is not empty
+   * This function returns the showWeekends of the object.
    *
-   * @returns {Nullable<HTMLElement>} the additional element
+   * @type {boolean}
    */
-  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 showWeekends() {
+    return this._showWeekends;
   }
   /**
-   * Get the view content date summary info, such as `January, 2024` or `10 January, 2024` or `28 December, 2023 - 3 January, 2024`
+   * Go to a specific date.
    *
-   * @returns {string} string
+   * @param {CalendarDate} date - The date to go to.
+   * @returns {this} - The current period.
    */
-  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 weekItems = this.calendarView.dateItems[0];
-        const start = weekItems[0];
-        const end = weekItems[weekItems.length - 1];
-        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;
+  goTo(date) {
+    return this.createBy(date);
   }
-}
-(() => {
-  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$p([
-  MapToComponentField()
-], VegaCalendarSwitchPanelRenderer.prototype, "viewMode", void 0);
-__decorate$p([
-  MapToComponentField()
-], VegaCalendarSwitchPanelRenderer.prototype, "calendarView", void 0);
-__decorate$p([
-  MapToComponentField()
-], VegaCalendarSwitchPanelRenderer.prototype, "currentPeriod", void 0);
-__decorate$p([
-  MapToComponentField()
-], VegaCalendarSwitchPanelRenderer.prototype, "moreActionDropdownProps", void 0);
-__decorate$p([
-  MapToComponentField()
-], VegaCalendarSwitchPanelRenderer.prototype, "moreActionClickEmitter", void 0);
-__decorate$p([
-  MapToComponentField()
-], VegaCalendarSwitchPanelRenderer.prototype, "currentPeriodController", void 0);
-__decorate$p([
-  MapToComponentField()
-], VegaCalendarSwitchPanelRenderer.prototype, "calendarViewController", void 0);
-__decorate$p([
-  MapToComponentField()
-], VegaCalendarSwitchPanelRenderer.prototype, "translationSlimmer", void 0);
-__decorate$p([
-  MapToComponentField()
-], VegaCalendarSwitchPanelRenderer.prototype, "postOperationDate", void 0);
-__decorate$p([
-  MapToComponentField()
-], VegaCalendarSwitchPanelRenderer.prototype, "showSwitchView", void 0);
-
-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;
-};
-/** renders different views based on the specified view mode using month, week, and day view render. */
-class VegaCalendarViewRenderer extends VegaSlimmer {
   /**
-   * Get the calendar view content element ref
+   * Go to now.
    *
-   * @returns {Nullable<HTMLElement>} The div element.
+   * @returns {this} - The current period.
    */
-  getCalendarViewElementRef() {
-    return this.calendarViewElementRef;
+  now() {
+    return this.createBy(CalendarDate.from(new Date()));
   }
   /**
-   * render the calendar month/week/day view
+   * Calculate the period start date and end date.
    *
-   * @returns {HTMLElement} html element
+   * @param {CalendarDate} date - The date to calculate the period from.
    */
-  render() {
-    return (h("div", { class: `calendar-view calendar-view-${this.viewMode} ${this.showWeekends === false ? 'calendar-hide-weekends' : ''}`, ref: (node) => (this.calendarViewElementRef = node) }, this.viewMode === 'month'
-      ? this.monthViewRenderer.render()
-      : this.viewWithTimeRenderer.render()));
+  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);
   }
 }
-__decorate$o([
-  MapToComponentField()
-], VegaCalendarViewRenderer.prototype, "viewMode", void 0);
-__decorate$o([
-  MapToComponentField()
-], VegaCalendarViewRenderer.prototype, "showWeekends", void 0);
-__decorate$o([
-  MapToComponentField()
-], VegaCalendarViewRenderer.prototype, "monthViewRenderer", void 0);
-__decorate$o([
-  MapToComponentField()
-], VegaCalendarViewRenderer.prototype, "viewWithTimeRenderer", void 0);
 
-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 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()));
+var DateDirection;
+(function (DateDirection) {
+  DateDirection["PREVIOUS"] = "-1";
+  DateDirection["NEXT"] = "1";
+})(DateDirection || (DateDirection = {}));
+/**
+ * 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;
+}
+/**
+ * Returns the closest workday to a given calendar date based on a specified direction.
+ *
+ * @param {Date} date - The starting date from which you want to find the closest workday.
+ * @param {'-1' | '1'} [direction=1] - Determines whether to find the closest workday in the past or future. It can have two possible values:
+ * @returns {CalendarDate} The closest workday to the input date
+ */
+function getClosestWorkday(date, direction = DateDirection.NEXT) {
+  const day = date.toDate().getDay();
+  if (day === 0 || day === 6) {
+    let nextWorkdayGap = day === 0 ? 1 : 2;
+    if (direction === DateDirection.PREVIOUS) {
+      nextWorkdayGap = day === 0 ? -2 : -1;
+    }
+    return CalendarDate.from(new Date(date.year, date.month - 1, date.date + nextWorkdayGap));
   }
-  /**
-   * 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) => {
-        var _a;
-        const isDisabled = (_a = this.isDateDisabled) === null || _a === void 0 ? void 0 : _a.call(this, item.toDate());
-        return (h("div", { class: {
-            'row-cell border-divider-right': true,
-            'current-month-day': item.compare(currentDate).inMonth,
-            'active': item.isToday(),
-            'disabled': isDisabled,
-          }, key: `${item.month}-${item.date}`, 
-          // eslint-disable-next-line react/jsx-no-bind
-          onDblClick: isDisabled
-            ? undefined
-            : (e) => {
-              this.handleDateBlockClick(e, item);
-            } },
-          this.renderDateBlock(item),
-          this.monthEventRenderer.render(item, eventsArray[itemIndex], displayEventsArray[itemIndex], itemIndex)));
-      })));
-    });
+  return date;
+}
+/**
+ * Get event status background color.
+ *
+ * @param {Nullable<string | BackgroundColorsTokenType>} color the background color
+ * @returns {string} background color style string
+ */
+function getEventStatusBgColorStyle(color = 'bg-accent6-primary') {
+  if (isBackgroundColorTokenType(color)) {
+    return `.event-bg-color{${stateBackgroundColorFormatter.formatToken(color)}}`;
+  }
+  else {
+    return `.event-bg-color{background-color:${color}}`;
+  }
+}
+
+/**
+ * Period of day.
+ */
+class DayPeriod extends CalendarPeriod {
+  constructor(current, showWeekends) {
+    super(DayPeriod.DISPLAY_DATE_COUNT, current);
+    this._type = 'day';
+    this._showWeekends = true;
+    this._showWeekends = showWeekends === false ? false : true;
   }
   /**
-   * 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
+   * @inheritDoc
    */
-  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)));
+  next() {
+    const nextDate = this.current.toDate();
+    nextDate.setDate(nextDate.getDate() + 1);
+    let calendarDate = CalendarDate.from(nextDate);
+    if (this._showWeekends === false) {
+      calendarDate = getClosestWorkday(calendarDate);
+    }
+    return this.createBy(calendarDate);
   }
   /**
-   * switch to current date day view
-   *
-   * @param {MouseEvent} e the double click event object
-   * @param {CalendarDate} calendarDate the calendar date object
+   * @inheritDoc
    */
-  goToCurrentDayView(e, calendarDate) {
-    e.stopPropagation();
-    this.currentPeriodController.updateCalendarPeriod('day', calendarDate);
+  previous() {
+    const previousDate = this.current.toDate();
+    previousDate.setDate(previousDate.getDate() - 1);
+    let calendarDate = CalendarDate.from(previousDate);
+    if (this._showWeekends === false) {
+      calendarDate = getClosestWorkday(calendarDate, DateDirection.PREVIOUS);
+    }
+    return this.createBy(calendarDate);
   }
   /**
-   * emit vega click event when click the date block
+   * Go to now.
    *
-   * @param {MouseEvent} e the mouse event object
-   * @param {CalendarDate} calendarDate the calendar date object
+   * @returns {this} - The current period.
    */
-  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 },
-      });
+  now() {
+    let calendarDate = CalendarDate.from(new Date());
+    if (this._showWeekends === false) {
+      calendarDate = getClosestWorkday(calendarDate);
     }
+    return this.createBy(calendarDate);
   }
   /**
-   * determine if the clicked element is blank area
-   *
-   * @param {HTMLElement} element the target element
-   * @returns {boolean} true or false
+   * @inheritDoc
    */
-  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';
+  createBy(current) {
+    return new DayPeriod(current, this._showWeekends);
   }
 }
-__decorate$n([
-  MapToComponentField()
-], VegaCalendarMonthViewRenderer.prototype, "viewMode", void 0);
-__decorate$n([
-  MapToComponentField()
-], VegaCalendarMonthViewRenderer.prototype, "calendarView", void 0);
-__decorate$n([
-  MapToComponentField()
-], VegaCalendarMonthViewRenderer.prototype, "currentPeriod", void 0);
-__decorate$n([
-  MapToComponentField()
-], VegaCalendarMonthViewRenderer.prototype, "currentPeriodController", void 0);
-__decorate$n([
-  MapToComponentField()
-], VegaCalendarMonthViewRenderer.prototype, "monthEventRenderer", void 0);
-__decorate$n([
-  MapToComponentField()
-], VegaCalendarMonthViewRenderer.prototype, "dateDblClickEmitter", void 0);
-__decorate$n([
-  MapToComponentField()
-], VegaCalendarMonthViewRenderer.prototype, "translationSlimmer", void 0);
-__decorate$n([
-  MapToComponentField()
-], VegaCalendarMonthViewRenderer.prototype, "isDateDisabled", void 0);
+DayPeriod.DISPLAY_DATE_COUNT = 1;
 
-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;
-};
-/** The `VegaCalendarViewWithTimeRenderer` class in TypeScript React renders a day view for a calendar component with title, content, and hour blocks. */
-class VegaCalendarViewWithTimeRenderer extends VegaSlimmer {
+/**
+ * Period of the week
+ */
+class WeekPeriod extends CalendarPeriod {
+  constructor(current, showWeekends) {
+    super(WeekPeriod.DISPLAY_DATE_COUNT, current);
+    this._type = 'week';
+    this._showWeekends = true;
+    this._showWeekends = showWeekends === false ? false : true;
+  }
   /**
-   * 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.
+   * @inheritDoc
    */
-  render() {
-    return (h("div", { class: "calendar-view-container" },
-      this.renderViewTitle(),
-      this.renderViewContent()));
+  next() {
+    const currentDate = this.current.toDate();
+    currentDate.setDate(currentDate.getDate() + 7);
+    return this.createBy(CalendarDate.from(currentDate));
   }
   /**
-   * 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.
+   * @inheritDoc
    */
-  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())));
+  previous() {
+    const currentDate = this.current.toDate();
+    currentDate.setDate(currentDate.getDate() - 7);
+    return this.createBy(CalendarDate.from(currentDate));
   }
   /**
-   * 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.
+   * @inheritDoc
    */
-  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) => {
-          var _a;
-          const isDisabled = (_a = this.isDateDisabled) === null || _a === void 0 ? void 0 : _a.call(this, item.toDate());
-          return (h("div", { class: {
-              'grid-col border-divider-left': true,
-              'disabled': isDisabled,
-            }, key: item.date },
-            h("div", { class: "hour-empty border-divider-top" }),
-            this.renderHourBlock(item, isDisabled)));
-        })),
-        this.dayViewTimedEventRenderer.render(),
-        this.timeMarkerRenderer.render(source))));
+  createBy(current) {
+    return new WeekPeriod(current, this._showWeekends);
+  }
+}
+WeekPeriod.DISPLAY_DATE_COUNT = 7;
+
+/**
+ * Period of month
+ */
+class MonthPeriod extends CalendarPeriod {
+  constructor(current, showWeekends) {
+    super(MonthPeriod.DISPLAY_DATE_COUNT, current);
+    this._type = 'month';
+    this._showWeekends = true;
+    this._showWeekends = showWeekends === false ? false : true;
   }
   /**
-   * The function `renderHourBlock` returns an array of HTML elements representing hour blocks with time information.
+   * The function `getMonthFirstDay` returns the first day of a given month in a calendar.
    *
-   * @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.
+   * @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.
    */
-  renderHourBlock(calendarDate, isDisabled) {
-    const timeLineSource = Array(24).fill('');
-    return timeLineSource.map((_item, index) => {
-      var _a;
-      let isHourDisabled = false;
-      if (!isDisabled) {
-        const dateWithHour = new Date(calendarDate.toDate().setHours(index));
-        isHourDisabled = (_a = this.isDateDisabled) === null || _a === void 0 ? void 0 : _a.call(this, dateWithHour);
-      }
-      return (h("div", { class: {
-          'grid-cell border-divider-top': true,
-          'disabled': isDisabled || isHourDisabled,
-        }, 
-        // eslint-disable-next-line react/jsx-no-bind
-        onDblClick: isDisabled || isHourDisabled
-          ? undefined
-          : (e) => this.handleDateBlockClick(calendarDate, index, e) }));
-    });
+  static getMonthFirstDay(calendarDate) {
+    const date = calendarDate || CalendarDate.from(new Date());
+    return new CalendarDate(date.year, date.month, 1);
   }
   /**
-   * emit vega click event when click the date block
+   * Calculate the period start date and end date.
    *
-   * @param {CalendarDate} calendarDate the calendar date object
+   * @param {CalendarDate} date - The date to calculate the period from.
    */
-  handleDateBlockClick(calendarDate, hour, e) {
-    const { year, month, date } = calendarDate;
-    const { clientX, clientY } = e;
-    this.dateDblClickEmitter.emit({ year, month, date, hour, mouseEventInfo: { clientX, clientY } });
+  calculatePeriod(date) {
+    const firstDay = MonthPeriod.getMonthFirstDay(date);
+    const cursor = firstDay.toDate();
+    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);
   }
-}
-__decorate$m([
-  MapToComponentField()
-], VegaCalendarViewWithTimeRenderer.prototype, "viewMode", void 0);
-__decorate$m([
-  MapToComponentField()
-], VegaCalendarViewWithTimeRenderer.prototype, "timeLineRenderer", void 0);
-__decorate$m([
-  MapToComponentField()
-], VegaCalendarViewWithTimeRenderer.prototype, "timeMarkerRenderer", void 0);
-__decorate$m([
-  MapToComponentField()
-], VegaCalendarViewWithTimeRenderer.prototype, "dayViewTimedEventRenderer", void 0);
-__decorate$m([
-  MapToComponentField()
-], VegaCalendarViewWithTimeRenderer.prototype, "dayViewFullDayEventRenderer", void 0);
-__decorate$m([
-  MapToComponentField()
-], VegaCalendarViewWithTimeRenderer.prototype, "calendarView", void 0);
-__decorate$m([
-  MapToComponentField()
-], VegaCalendarViewWithTimeRenderer.prototype, "dateDblClickEmitter", void 0);
-__decorate$m([
-  MapToComponentField()
-], VegaCalendarViewWithTimeRenderer.prototype, "translationSlimmer", void 0);
-__decorate$m([
-  MapToComponentField()
-], VegaCalendarViewWithTimeRenderer.prototype, "isDateDisabled", 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 `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 {
   /**
-   * rendering the time line component as an HTML element
-   *
-   * @returns {HTMLElement} the html element
+   * @inheritDoc
    */
-  render() {
-    const timeLineSource = this.getTimeLineTitles();
-    return (h("div", { class: "time-line" },
-      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)));
-      })));
+  next() {
+    const next = this.current.toDate();
+    next.setMonth(next.getMonth() + 1);
+    return this.createBy(CalendarDate.from(next));
   }
   /**
-   * 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
+   * @inheritDoc
    */
-  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;
+  previous() {
+    const previous = this.current.toDate();
+    previous.setMonth(previous.getMonth() - 1);
+    return this.createBy(CalendarDate.from(previous));
+  }
+  /**
+   * @inheritDoc
+   */
+  createBy(current) {
+    return new MonthPeriod(current, this._showWeekends);
   }
 }
-__decorate$l([
-  MapToComponentField()
-], VegaCalendarTimeLineRenderer.prototype, "timeFormat", void 0);
+MonthPeriod.DISPLAY_DATE_COUNT = 6 * 7;
 
-var __decorate$k = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -1216,26 +1277,26 @@ class VegaCalendarViewController extends VegaSlimmer {
     this.calendarView = newView;
   }
 }
-__decorate$k([
+__decorate$n([
   MapToComponentField({ writable: true })
 ], VegaCalendarViewController.prototype, "calendarView", void 0);
-__decorate$k([
+__decorate$n([
   MapToComponentField()
 ], VegaCalendarViewController.prototype, "currentPeriod", void 0);
-__decorate$k([
+__decorate$n([
   MapToComponentField()
 ], VegaCalendarViewController.prototype, "showWeekends", void 0);
-__decorate$k([
+__decorate$n([
   MapToComponentField()
 ], VegaCalendarViewController.prototype, "currentPeriodController", void 0);
-__decorate$k([
+__decorate$n([
   MapToComponentMethod('componentWillLoad')
 ], VegaCalendarViewController.prototype, "initialCalendarView", null);
-__decorate$k([
+__decorate$n([
   MapToComponentMethod('watchCurrentPeriodChange')
 ], VegaCalendarViewController.prototype, "generateCalendarView", null);
 
-var __decorate$j = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -1339,32 +1400,32 @@ class VegaCalendarCurrentPeriodController extends VegaSlimmer {
     };
   }
 }
-__decorate$j([
+__decorate$m([
   MapToComponentField({ writable: true })
 ], VegaCalendarCurrentPeriodController.prototype, "currentPeriod", void 0);
-__decorate$j([
+__decorate$m([
   MapToComponentField()
 ], VegaCalendarCurrentPeriodController.prototype, "changeEventEmitter", void 0);
-__decorate$j([
+__decorate$m([
   MapToComponentField({ writable: true })
 ], VegaCalendarCurrentPeriodController.prototype, "viewMode", void 0);
-__decorate$j([
+__decorate$m([
   MapToComponentField()
 ], VegaCalendarCurrentPeriodController.prototype, "showWeekends", void 0);
-__decorate$j([
+__decorate$m([
   MapToComponentMethod('componentWillLoad')
 ], VegaCalendarCurrentPeriodController.prototype, "initialCurrentPeriod", null);
-__decorate$j([
+__decorate$m([
   MapToComponentMethod('watchCurrentPeriodChange')
 ], VegaCalendarCurrentPeriodController.prototype, "emitChangeEvent", null);
-__decorate$j([
+__decorate$m([
   MapToComponentMethod('watchViewModeChange')
 ], VegaCalendarCurrentPeriodController.prototype, "updateCurrentPeriodByViewMode", null);
-__decorate$j([
+__decorate$m([
   MapToComponentMethod('watchShowWeekendsChange')
 ], VegaCalendarCurrentPeriodController.prototype, "updateCurrentPeriodAfterHideWeekEndsChange", null);
 
-var __decorate$i = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -1375,6 +1436,7 @@ class VegaCalendarMonthEventRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
     this.maxMonthDisplayEventsCount = 2;
+    this.popoverHideObserver = null;
   }
   /**
    * current row dates all events.
@@ -1428,8 +1490,8 @@ class VegaCalendarMonthEventRenderer extends VegaSlimmer {
       .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}`)));
+      h("div", { class: "event-list" }, this.fullDayEventLayoutRenderer.render(displayEvents, currentViewIndex, calendarDate)),
+      this.renderMoreButton(allEvents, hiddenEventsLength, calendarDate)));
   }
   /**
    * Add a month event display count change observer, than update the component
@@ -1447,10 +1509,10 @@ class VegaCalendarMonthEventRenderer extends VegaSlimmer {
    *
    * @param {Nullable<CalendarEvent>[]} events all event list array
    * @param {number} moreItemsLength popover events length
-   * @param {string} title the popover title
+   * @param {CalendarDate} calendarDate current date
    * @returns {Nullable<HTMLDivElement>} the more button or null
    */
-  renderMoreButton(events, moreItemsLength, title) {
+  renderMoreButton(events, moreItemsLength, calendarDate) {
     if (moreItemsLength) {
       const backgroundColorEvents = events.filter((eventItem) => {
         return eventItem && (eventItem.isAllDayEvent || eventItem.isGroupEvent());
@@ -1459,24 +1521,34 @@ class VegaCalendarMonthEventRenderer extends VegaSlimmer {
         return eventItem && !eventItem.isAllDayEvent && !eventItem.isGroupEvent();
       });
       return (h("div", { class: "month-event-more" },
-        h("vega-popover", { trigger: "click", placement: "right" },
+        h("vega-popover", { trigger: "click", placement: "right", padding: '0', ref: (el) => {
+            this.setPopoverHideObserver(el, events);
+          }, isScreenPosition: true },
           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,
-              });
-            })))));
+          h("vega-flex", { slot: "popover" },
+            h("vega-box", { padding: 'size-12', width: 256 },
+              h("vega-flex", { direction: "col", gap: "0", class: "group-events" },
+                h("vega-font", { textAlign: "center", variant: "font-field-label", color: "text-primary", style: { padding: '4px 0', marginBottom: '8px' } }, `${calendarDate.date} ${calendarDate.getMonthName()} ${calendarDate.year}`),
+                h("vega-box", { maxHeight: 'calc(60vh - 6px)', style: { overflowY: 'auto' }, padding: 'size-4' },
+                  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,
+                    }, calendarDate, true);
+                  })),
+                  otherEvents.map((item) => {
+                    return this.eventItemRenderer.render(item, {
+                      'month-event': true,
+                      'calendar-event-large-size': true,
+                      'calendar-event-in-popover': true,
+                    }, calendarDate, true);
+                  })))),
+            h("div", { class: "preview-container", ref: (el) => {
+                el
+                  ? this.eventPreviewPopoverController.setEventPreviewContainerMap(events, calendarDate, el)
+                  : this.eventPreviewPopoverController.deleteEventPreviewContainer(events, calendarDate);
+              } })))));
     }
   }
   /*
@@ -1520,23 +1592,46 @@ class VegaCalendarMonthEventRenderer extends VegaSlimmer {
     }
     return rowEvents;
   }
+  setPopoverHideObserver(popover, events) {
+    if (popover) {
+      this.popoverHideObserver = new Observer((payload) => events.includes(payload), async () => await popover.hide());
+      ChangeManager.register(CALENDAR_EVENT_PREVIEW_POPOVER_HIDE, this.popoverHideObserver);
+    }
+    else if (this.popoverHideObserver) {
+      ChangeManager.unregister(CALENDAR_EVENT_PREVIEW_POPOVER_HIDE, this.popoverHideObserver);
+    }
+    // we should clear current event in vega-calendar-event-preview when popover hide
+    popover &&
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(popover, VegaPopoverHide, () => {
+        ChangeManager.notify(domNodeSubjectFactory.getSubject(this.renderer.getEventPreviewRef(), VegaInternalCalendarEventPreviewClear), {});
+      });
+  }
 }
-__decorate$i([
+__decorate$l([
   MapToComponentField()
 ], VegaCalendarMonthEventRenderer.prototype, "viewMode", void 0);
-__decorate$i([
+__decorate$l([
   MapToComponentField()
 ], VegaCalendarMonthEventRenderer.prototype, "host", void 0);
-__decorate$i([
+__decorate$l([
   MapToComponentField()
 ], VegaCalendarMonthEventRenderer.prototype, "calendarEventController", void 0);
-__decorate$i([
+__decorate$l([
   MapToComponentField()
 ], VegaCalendarMonthEventRenderer.prototype, "eventItemRenderer", void 0);
-__decorate$i([
+__decorate$l([
   MapToComponentField()
 ], VegaCalendarMonthEventRenderer.prototype, "fullDayEventLayoutRenderer", void 0);
-__decorate$i([
+__decorate$l([
+  MapToComponentField()
+], VegaCalendarMonthEventRenderer.prototype, "eventPreviewPopoverRenderer", void 0);
+__decorate$l([
+  MapToComponentField()
+], VegaCalendarMonthEventRenderer.prototype, "renderer", void 0);
+__decorate$l([
+  MapToComponentField()
+], VegaCalendarMonthEventRenderer.prototype, "eventPreviewPopoverController", void 0);
+__decorate$l([
   MapToComponentMethod('componentWillLoad')
 ], VegaCalendarMonthEventRenderer.prototype, "addMaxDisplayCountChange", null);
 
@@ -1599,6 +1694,21 @@ class CalendarEventBaseRepeatPattern {
       (seriesEnd >= rangeStart && seriesEnd <= rangeEnd) ||
       (seriesStart <= rangeStart && seriesEnd >= rangeEnd));
   }
+  /**
+   * The function generates a string representation of the end condition for a repeating event,
+   * 	either by a specific date or after a certain number of occurrences.
+   *
+   * @returns {string} a string representing the end condition of a repeating event.
+   */
+  generateRepeatEndsString() {
+    if (this.until) {
+      return ` ${VegaInternalTranslation.t('until {0}', `${this.until.getMonthName()} ${this.until.date}, ${this.until.year}`)}`;
+    }
+    else if (this.count) {
+      return ` ${VegaInternalTranslation.t('after {0} occurrences', this.count)}`;
+    }
+    return '';
+  }
 }
 CalendarEventBaseRepeatPattern.daySeconds = 24 * 60 * 60 * 1000;
 
@@ -1622,6 +1732,17 @@ class CalendarEventDailyRepeatPattern extends CalendarEventBaseRepeatPattern {
     super(startDate, interval, count, until);
     this.initCache();
   }
+  /**
+   * Generate repeat display string.
+   *
+   * @returns {string} repeat display string
+   */
+  generateRepeatString() {
+    const repeatString = this.interval > 1
+      ? VegaInternalTranslation.t('Repeat every {0} days', this.interval)
+      : VegaInternalTranslation.t('Repeat daily');
+    return repeatString + this.generateRepeatEndsString();
+  }
   /**
    * The function generates and caches repeated dates before a specified end date.
    *
@@ -1700,6 +1821,17 @@ class CalendarEventMonthlyRepeatPattern extends CalendarEventBaseRepeatPattern {
     this.byMonthDay = this.repeatStartDate.date;
     this.initCache();
   }
+  /**
+   * Generate repeat display string.
+   *
+   * @returns {string} repeat display string
+   */
+  generateRepeatString() {
+    const repeatString = this.interval > 1
+      ? VegaInternalTranslation.t('Repeat every {0} months on day {1}', this.interval, this.byMonthDay)
+      : VegaInternalTranslation.t('Repeat monthly on day {0}', this.byMonthDay);
+    return repeatString + this.generateRepeatEndsString();
+  }
   /**
    * This function generates and caches repeated dates before a specified end date.
    *
@@ -1811,6 +1943,18 @@ class CalendarEventWeeklyRepeatPattern extends CalendarEventBaseRepeatPattern {
       return this.isSeriesInPeriod(item, eventSpansDays, period);
     });
   }
+  /**
+   * Generate repeat display string.
+   *
+   * @returns {string} repeat display string
+   */
+  generateRepeatString() {
+    const weekDays = this.byWeekDay.map((weekDay) => VegaInternalTranslation.t(WeekdayLongNames[weekDay]));
+    const repeatString = this.interval > 1
+      ? VegaInternalTranslation.t('Repeat every {0} weeks on {1}', this.interval, weekDays.join(', '))
+      : VegaInternalTranslation.t('Repeat weekly on {0}', weekDays.join(', '));
+    return repeatString + this.generateRepeatEndsString();
+  }
   /**
    * This function generates repeated dates and caches them until a specified end date.
    *
@@ -1965,6 +2109,18 @@ class CalendarEventYearlyRepeatPattern extends CalendarEventBaseRepeatPattern {
     this.matchMonth = this.repeatStartDate.month;
     this.initCache();
   }
+  /**
+   * Generate repeat display string.
+   *
+   * @returns {string} repeat display string
+   */
+  generateRepeatString() {
+    const monthName = VegaInternalTranslation.t(this.repeatStartDate.getMonthName());
+    const repeatString = this.interval > 1
+      ? VegaInternalTranslation.t('Repeat every {0} years on {1} {2}', this.interval, monthName, this.matchDay)
+      : VegaInternalTranslation.t('Repeat yearly on {0} {1}', monthName, this.matchDay);
+    return repeatString + this.generateRepeatEndsString();
+  }
   /**
    * The function generates repeat dates and caches them until reaching the specified end date.
    *
@@ -2263,6 +2419,28 @@ class CalendarEvent {
     const currentDate = date.toDate();
     return startCalendarDate.toDate() <= currentDate && endCalendarDate.toDate() > currentDate;
   }
+  /**
+   * Generate repeat display string.
+   *
+   * @returns {string} repeat display string
+   */
+  generateRepeatString() {
+    var _a;
+    return ((_a = this.repeatPattern) === null || _a === void 0 ? void 0 : _a.generateRepeatString()) || '';
+  }
+  /**
+   * Generate date display string.
+   *
+   * @param {CalendarDate} viewDate - The `date` to display
+   * @param {TimeFormat} timeFormat - The `timeFormat` to use
+   * @returns {string} repeat display string
+   */
+  generateDateTimeString(viewDate, timeFormat) {
+    const weekDay = VegaInternalTranslation.t(Object.values(WeekdayLongNames)[viewDate.toDate().getDay()]);
+    const startTime = formatDisplayTime(timeFormat, this.startTime);
+    const endTime = formatDisplayTime(timeFormat, this.endTime);
+    return `${weekDay}, ${viewDate.date} ${viewDate.getMonthName(true)} ${viewDate.year} ${startTime} - ${endTime}`;
+  }
   /**
    * Get the number of minutes the event lasted
    *
@@ -2397,7 +2575,7 @@ class CalendarEvent {
   }
 }
 
-var __decorate$h = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -2503,23 +2681,26 @@ class VegaCalendarEventController extends VegaSlimmer {
     }
   }
 }
-__decorate$h([
+__decorate$k([
+  MapToComponentField()
+], VegaCalendarEventController.prototype, "host", void 0);
+__decorate$k([
   MapToComponentField({ writable: true })
 ], VegaCalendarEventController.prototype, "calendarEvents", void 0);
-__decorate$h([
+__decorate$k([
   MapToComponentField()
 ], VegaCalendarEventController.prototype, "currentPeriod", void 0);
-__decorate$h([
+__decorate$k([
   MapToComponentField()
 ], VegaCalendarEventController.prototype, "events", void 0);
-__decorate$h([
+__decorate$k([
   MapToComponentMethod('watchEventsChange')
 ], VegaCalendarEventController.prototype, "updateAfterEventChange", null);
-__decorate$h([
+__decorate$k([
   MapToComponentMethod('componentWillLoad')
 ], VegaCalendarEventController.prototype, "updateWhenComponentWillLoad", null);
 
-var __decorate$g = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -2532,12 +2713,17 @@ class VegaCalendarEventItemRenderer extends VegaSlimmer {
    *
    * @param {CalendarEvent} item the calendar event object
    * @param {Record<string,boolean>} classMap the class name map
+   * @param {CalendarDate} targetCalendarViewDate the target calendar view date
    * @returns {HTMLVegaCalendarEventElement} calendar event element
    */
-  render(item, classMap) {
+  render(item, classMap, targetCalendarViewDate, isGroupEvent = false) {
     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) })));
+      onClick: () => {
+        this.handleEventClick(item);
+        this.enabledEventPreview &&
+          this.setupPreviewContainer(item, targetCalendarViewDate, isGroupEvent);
+      } }, !item.isRepeatEvent && h("slot", { name: getCalendarEventSlotName(item.event.key) })));
   }
   /**
    * emit vega click event
@@ -2547,19 +2733,62 @@ class VegaCalendarEventItemRenderer extends VegaSlimmer {
   handleEventClick(eventItem) {
     this.eventClickEmitter.emit({ rawEvent: eventItem.event });
   }
+  setupPreviewContainer(event, targetCalendarViewDate, isGroupEvent) {
+    const previewContainer = this.eventPreviewPopoverController.getEventPreviewContainer(event, targetCalendarViewDate, isGroupEvent);
+    if (previewContainer) {
+      const preview = this.renderer.getEventPreviewRef();
+      if (isGroupEvent) {
+        preview.classList.remove('single-event-preview');
+        preview.classList.add('group-event-preview');
+      }
+      else {
+        preview.classList.remove('group-event-preview');
+        preview.classList.add('single-event-preview');
+      }
+      // Step 1: notify preview component to update data
+      ChangeManager.notify(domNodeSubjectFactory.getSubject(preview, VegaInternalCalendarEventPreviewUpdate), {
+        event,
+        targetCalendarViewDate,
+        timeFormat: this.timeFormat,
+      });
+      // Step 2: append preview additional fields slot to preview component.
+      const additionalFieldsSlot = this.host.querySelector('[slot=event-preview-additional-fields]');
+      additionalFieldsSlot && preview.append(additionalFieldsSlot);
+      // Step 3: append event slot to preview component.
+      const eventSlotName = getCalendarEventSlotName(event.event.key);
+      const eventSlot = this.host.querySelector(`[slot=${eventSlotName}]`);
+      const previewEventSlot = preview.querySelector(`[slot=${eventSlotName}]`);
+      // Since event slot is used by vega-calendar-event, we should clone it to avoid remove from original position.
+      eventSlot && !previewEventSlot && preview.append(eventSlot.cloneNode(true));
+      // Step 4: append preview component to popover container to display.
+      previewContainer.append(preview);
+    }
+  }
 }
 VegaCalendarEventItemRenderer.backgroundColorModeEventHeight = 18;
-__decorate$g([
+__decorate$j([
   MapToComponentField()
 ], VegaCalendarEventItemRenderer.prototype, "host", void 0);
-__decorate$g([
+__decorate$j([
   MapToComponentField()
 ], VegaCalendarEventItemRenderer.prototype, "calendarView", void 0);
-__decorate$g([
+__decorate$j([
   MapToComponentField()
 ], VegaCalendarEventItemRenderer.prototype, "eventClickEmitter", void 0);
+__decorate$j([
+  MapToComponentField()
+], VegaCalendarEventItemRenderer.prototype, "timeFormat", void 0);
+__decorate$j([
+  MapToComponentField()
+], VegaCalendarEventItemRenderer.prototype, "enabledEventPreview", void 0);
+__decorate$j([
+  MapToComponentField()
+], VegaCalendarEventItemRenderer.prototype, "renderer", void 0);
+__decorate$j([
+  MapToComponentField()
+], VegaCalendarEventItemRenderer.prototype, "eventPreviewPopoverController", void 0);
 
-var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -2611,23 +2840,23 @@ class VegaCalendarEventResponsiveController extends PageResizeObserverSlimmer {
   }
 }
 VegaCalendarEventResponsiveController.monthDateTitleHeight = 26;
-__decorate$f([
+__decorate$i([
   MapToComponentField()
 ], VegaCalendarEventResponsiveController.prototype, "host", void 0);
-__decorate$f([
+__decorate$i([
   MapToComponentField()
 ], VegaCalendarEventResponsiveController.prototype, "monthEventRenderer", void 0);
-__decorate$f([
+__decorate$i([
   MapToComponentField()
 ], VegaCalendarEventResponsiveController.prototype, "viewMode", void 0);
-__decorate$f([
+__decorate$i([
   MapToComponentMethod('componentDidLoad')
 ], VegaCalendarEventResponsiveController.prototype, "updateMaxDisplayCount", null);
-__decorate$f([
+__decorate$i([
   MapToComponentMethod('watchViewModeChange')
 ], VegaCalendarEventResponsiveController.prototype, "updateMaxDisplayCountAfterSwitchToMonthView", null);
 
-var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -2649,7 +2878,7 @@ class VegaCalendarFullDayEventRenderer extends VegaSlimmer {
     });
     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]))))));
+    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], item))))));
   }
   /**
    * render current date all day events
@@ -2659,7 +2888,7 @@ class VegaCalendarFullDayEventRenderer extends VegaSlimmer {
    * @param {Nullable<CalendarEvent>[]} allEvents all calendar events
    * @returns {HTMLVegaCalendarEventElement[]} event component array
    */
-  renderCurrentFullDayEvents(events, currentViewIndex, allEvents) {
+  renderCurrentFullDayEvents(events, currentViewIndex, allEvents, targetCalendarViewDate) {
     const height = events.length * VegaCalendarEventItemRenderer.backgroundColorModeEventHeight - 2;
     const hideEventsLength = allEvents.slice(events.length).filter(Boolean).length;
     return (h(Fragment, null,
@@ -2667,7 +2896,7 @@ class VegaCalendarFullDayEventRenderer extends VegaSlimmer {
         h("span", null,
           events.length,
           " events")),
-      this.fullDayEventLayoutRenderer.render(events, currentViewIndex),
+      this.fullDayEventLayoutRenderer.render(events, currentViewIndex, targetCalendarViewDate),
       hideEventsLength > 0 && this.dayViewFullDayEventMoreButtonRenderer.render(hideEventsLength)));
   }
   /**
@@ -2692,26 +2921,26 @@ class VegaCalendarFullDayEventRenderer extends VegaSlimmer {
   }
 }
 VegaCalendarFullDayEventRenderer.maxDisplayEventLength = 2;
-__decorate$e([
+__decorate$h([
   MapToComponentField()
 ], VegaCalendarFullDayEventRenderer.prototype, "calendarView", void 0);
-__decorate$e([
+__decorate$h([
   MapToComponentField()
 ], VegaCalendarFullDayEventRenderer.prototype, "calendarEventController", void 0);
-__decorate$e([
+__decorate$h([
   MapToComponentField()
 ], VegaCalendarFullDayEventRenderer.prototype, "eventItemRenderer", void 0);
-__decorate$e([
+__decorate$h([
   MapToComponentField()
 ], VegaCalendarFullDayEventRenderer.prototype, "fullDayEventLayoutRenderer", void 0);
-__decorate$e([
+__decorate$h([
   MapToComponentField()
 ], VegaCalendarFullDayEventRenderer.prototype, "showAllEventsInDayOrWeekView", void 0);
-__decorate$e([
+__decorate$h([
   MapToComponentField()
 ], VegaCalendarFullDayEventRenderer.prototype, "dayViewFullDayEventMoreButtonRenderer", void 0);
 
-var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -2727,7 +2956,7 @@ class VegaCalendarDayViewEventLayoutRenderer extends VegaSlimmer {
    * 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) {
+  render(layout, targetCalendarViewDate) {
     const layoutColumns = layout.eventLayoutCells;
     const eventNodes = [];
     layoutColumns.forEach((columns, index) => {
@@ -2737,7 +2966,7 @@ class VegaCalendarDayViewEventLayoutRenderer extends VegaSlimmer {
         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, {
+            eventNodes.push(h("div", { key: index, class: "time-event-block", style: this.getTimeEventStyle(start, i, index, layout.getEventColumnsSpannedCount(renderEvent)) }, this.eventPreviewPopoverRenderer.render(renderEvent, targetCalendarViewDate, {
               'day-event': true,
               'bg-shadow': index > 0,
             })));
@@ -2776,9 +3005,12 @@ class VegaCalendarDayViewEventLayoutRenderer extends VegaSlimmer {
   }
 }
 VegaCalendarDayViewEventLayoutRenderer.totalNumberOfCells = 24 * 4;
-__decorate$d([
+__decorate$g([
   MapToComponentField()
 ], VegaCalendarDayViewEventLayoutRenderer.prototype, "eventItemRenderer", void 0);
+__decorate$g([
+  MapToComponentField()
+], VegaCalendarDayViewEventLayoutRenderer.prototype, "eventPreviewPopoverRenderer", 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 {
@@ -3062,7 +3294,7 @@ class VegaCalendarEventSorter {
   }
 }
 
-var __decorate$c = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -3098,16 +3330,16 @@ class VegaCalendarTimedEventRenderer extends VegaSlimmer {
       .filter((eventItem) => !eventItem.isAllDayEvent && !eventItem.isGroupEvent());
     const sortEvents = this.calendarEventSorter.sortCalendarEventByTime(events);
     const layout = this.dayViewTimedEventLayoutGenerator.generate(sortEvents);
-    return this.dayViewEventLayoutRenderer.render(layout);
+    return this.dayViewEventLayoutRenderer.render(layout, date);
   }
 }
-__decorate$c([
+__decorate$f([
   MapToComponentField()
 ], VegaCalendarTimedEventRenderer.prototype, "calendarView", void 0);
-__decorate$c([
+__decorate$f([
   MapToComponentField()
 ], VegaCalendarTimedEventRenderer.prototype, "calendarEventController", void 0);
-__decorate$c([
+__decorate$f([
   MapToComponentField()
 ], VegaCalendarTimedEventRenderer.prototype, "dayViewEventLayoutRenderer", void 0);
 
@@ -3276,7 +3508,7 @@ class VegaCalendarFullDayEventLayoutGenerator extends VegaCalendarBaseEventLayou
   }
 }
 
-var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -3308,12 +3540,12 @@ class VegaCalendarFullDayEventLayoutRenderer extends VegaSlimmer {
    * @param {currentViewIndex} currentViewIndex the current index of the row
    * @returns {HTMLElement[]} event elements
    */
-  render(calendarEvents, currentViewIndex) {
+  render(calendarEvents, currentViewIndex, targetCalendarViewDate) {
     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, {
+            : 0) }, this.eventPreviewPopoverRenderer.render(item, targetCalendarViewDate, {
           'month-event': this.viewMode === 'month',
           'day-event': this.viewMode !== 'month',
         })));
@@ -3361,17 +3593,20 @@ class VegaCalendarFullDayEventLayoutRenderer extends VegaSlimmer {
   }
 }
 VegaCalendarFullDayEventLayoutRenderer.monthViewEventOffsetTop = 26;
-__decorate$b([
+__decorate$e([
   MapToComponentField()
 ], VegaCalendarFullDayEventLayoutRenderer.prototype, "eventItemRenderer", void 0);
-__decorate$b([
+__decorate$e([
   MapToComponentField()
 ], VegaCalendarFullDayEventLayoutRenderer.prototype, "viewMode", void 0);
-__decorate$b([
+__decorate$e([
   MapToComponentField()
 ], VegaCalendarFullDayEventLayoutRenderer.prototype, "calendarView", void 0);
+__decorate$e([
+  MapToComponentField()
+], VegaCalendarFullDayEventLayoutRenderer.prototype, "eventPreviewPopoverRenderer", void 0);
 
-var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -3408,14 +3643,14 @@ class VegaCalendarFullDayEventMoreButtonRenderer extends VegaSlimmer {
     this.showAllEventsInDayOrWeekView = false;
   }
 }
-__decorate$a([
+__decorate$d([
   MapToComponentField({ writable: true })
 ], VegaCalendarFullDayEventMoreButtonRenderer.prototype, "showAllEventsInDayOrWeekView", void 0);
-__decorate$a([
+__decorate$d([
   MapToComponentMethod('watchViewModeChange')
 ], VegaCalendarFullDayEventMoreButtonRenderer.prototype, "resetShowAllFlag", null);
 
-var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -3559,26 +3794,26 @@ class VegaCalendarTimeMarkerRenderer extends VegaSlimmer {
     return 0;
   }
 }
-__decorate$9([
+__decorate$c([
   MapToComponentField()
 ], VegaCalendarTimeMarkerRenderer.prototype, "viewMode", void 0);
-__decorate$9([
+__decorate$c([
   MapToComponentField()
 ], VegaCalendarTimeMarkerRenderer.prototype, "viewRenderer", void 0);
-__decorate$9([
+__decorate$c([
   MapToComponentMethod('watchViewModeChange')
 ], VegaCalendarTimeMarkerRenderer.prototype, "updateTimeLine", null);
-__decorate$9([
+__decorate$c([
   MapToComponentMethod('disconnectedCallback')
 ], VegaCalendarTimeMarkerRenderer.prototype, "clearTimer", null);
-__decorate$9([
+__decorate$c([
   MapToComponentMethod('connectedCallback')
 ], VegaCalendarTimeMarkerRenderer.prototype, "updateTimeLineIfComponentAddBack", null);
-__decorate$9([
+__decorate$c([
   MapToComponentMethod('componentDidLoad')
 ], VegaCalendarTimeMarkerRenderer.prototype, "displayCurrentTimeBlockByDefault", null);
 
-var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -3604,8 +3839,7 @@ class VegaCalendarPostOperationDateController extends VegaSlimmer {
    */
   setDate(newValue, oldValue) {
     if (newValue.current !== this.postOperationDate) {
-      // If the interval is changed from month to month, the time after the operation should be changed to the 1st of each month
-      if (newValue.type === 'month' && (oldValue === null || oldValue === void 0 ? void 0 : oldValue.type) === 'month') {
+      if (this.shouldSetCurrentDateToFirstDayOfMonth(newValue, oldValue)) {
         const currentDate = newValue.current.toDate();
         if (currentDate) {
           currentDate.setDate(1);
@@ -3617,17 +3851,178 @@ class VegaCalendarPostOperationDateController extends VegaSlimmer {
       }
     }
   }
+  /**
+   * Check if the first date should be set
+   * Both the new and old values are of the month type.
+   * The new date is not equal to the current date.
+   *
+   * @param {CalendarPeriod} newValue The new calendar period
+   * @param {CalendarPeriod} oldValue The old calendar period
+   * @returns {boolean} True if the first date should be set, false otherwise
+   */
+  shouldSetCurrentDateToFirstDayOfMonth(newValue, oldValue) {
+    return (newValue.type === 'month' &&
+      (oldValue === null || oldValue === void 0 ? void 0 : oldValue.type) === 'month' &&
+      !newValue.current.equal(CalendarDate.from(new Date())));
+  }
+}
+__decorate$b([
+  MapToComponentField({ writable: true })
+], VegaCalendarPostOperationDateController.prototype, "postOperationDate", void 0);
+__decorate$b([
+  MapToComponentMethod('watchCurrentPeriodChange')
+], VegaCalendarPostOperationDateController.prototype, "setDate", null);
+
+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;
+};
+class VegaCalendarEventPreviewPopoverRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.popoverHideObserver = null;
+  }
+  render(event, targetCalendarViewDate, classMap) {
+    return this.enabledEventPreview
+      ? this.renderPreviewPopover(event, classMap, targetCalendarViewDate)
+      : this.eventItemRenderer.render(event, classMap, targetCalendarViewDate);
+  }
+  renderPreviewPopover(event, classMap, targetCalendarViewDate) {
+    return (h("vega-popover", { placement: this.viewMode === 'day' ? 'top' : 'right', alignment: "center", class: {
+        'event-preview-popover': true,
+        'block': true,
+      }, padding: "0", size: VegaCalendarEventPreviewPopoverRenderer.SINGLE_EVENT_PREVIEW_WIDTH, ref: (el) => {
+        this.setPopoverHideObserver(el, event);
+      } },
+      h("div", { slot: "popover-content", class: "event-preview-popover-content" }, this.eventItemRenderer.render(event, classMap, targetCalendarViewDate)),
+      h("div", { slot: "popover" },
+        h("div", { class: "preview-container", ref: (el) => {
+            el
+              ? this.eventPreviewPopoverController.setEventPreviewContainerMap(event, targetCalendarViewDate, el)
+              : this.eventPreviewPopoverController.deleteEventPreviewContainer(event, targetCalendarViewDate);
+          } }))));
+  }
+  setPopoverHideObserver(popover, event) {
+    if (popover) {
+      this.popoverHideObserver = new Observer((payload) => event === payload, async () => await popover.hide());
+      ChangeManager.register(CALENDAR_EVENT_PREVIEW_POPOVER_HIDE, this.popoverHideObserver);
+    }
+    else if (this.popoverHideObserver) {
+      ChangeManager.unregister(CALENDAR_EVENT_PREVIEW_POPOVER_HIDE, this.popoverHideObserver);
+    }
+  }
+}
+VegaCalendarEventPreviewPopoverRenderer.SINGLE_EVENT_PREVIEW_WIDTH = 400;
+__decorate$a([
+  MapToComponentField()
+], VegaCalendarEventPreviewPopoverRenderer.prototype, "host", void 0);
+__decorate$a([
+  MapToComponentField()
+], VegaCalendarEventPreviewPopoverRenderer.prototype, "renderer", void 0);
+__decorate$a([
+  MapToComponentField()
+], VegaCalendarEventPreviewPopoverRenderer.prototype, "viewMode", void 0);
+__decorate$a([
+  MapToComponentField()
+], VegaCalendarEventPreviewPopoverRenderer.prototype, "timeFormat", void 0);
+__decorate$a([
+  MapToComponentField()
+], VegaCalendarEventPreviewPopoverRenderer.prototype, "eventItemRenderer", void 0);
+__decorate$a([
+  MapToComponentField()
+], VegaCalendarEventPreviewPopoverRenderer.prototype, "enabledEventPreview", void 0);
+__decorate$a([
+  MapToComponentField()
+], VegaCalendarEventPreviewPopoverRenderer.prototype, "eventPreviewPopoverController", void 0);
+
+/** Event preview popover controller */
+class VegaCalendarEventPreviewPopoverController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.singleEventPreviewContainerMap = new Map();
+    this.groupEventsPreviewContainerMap = new Map();
+  }
+  /**
+   * Set the event preview container for the given events
+   *
+   * @param {Nullable<CalendarEvent>[] | CalendarEvent} events - The calendar event(s)
+   * @param {CalendarDate} viewDate - The current date
+   * @param {HTMLElement} container - The HTML element to be used as the preview container
+   */
+  setEventPreviewContainerMap(events, viewDate, container) {
+    const map = Array.isArray(events)
+      ? this.groupEventsPreviewContainerMap
+      : this.singleEventPreviewContainerMap;
+    map.set(this.generateMapKey(events, viewDate), container);
+  }
+  /**
+   * Delete the event preview container for the given events
+   *
+   * @param {Nullable<CalendarEvent>[] | CalendarEvent} events - The calendar event(s)
+   * @param {CalendarDate} viewDate - The current date
+   */
+  deleteEventPreviewContainer(events, viewDate) {
+    const map = Array.isArray(events)
+      ? this.groupEventsPreviewContainerMap
+      : this.singleEventPreviewContainerMap;
+    map.delete(this.generateMapKey(events, viewDate));
+  }
+  /**
+   * Get the event preview container for the given event
+   *
+   * @param {CalendarEvent} event - The calendar event
+   * @param {CalendarDate} viewDate - The current date
+   * @param {boolean} isGroup - Whether the event is part of a group
+   * @returns {Nullable<HTMLElement>} - The HTML element used as the preview container, or null if not found
+   */
+  getEventPreviewContainer(event, viewDate, isGroup) {
+    const map = isGroup
+      ? this.groupEventsPreviewContainerMap
+      : this.singleEventPreviewContainerMap;
+    const singleKey = this.generateMapKey(event, viewDate);
+    if (map.has(singleKey)) {
+      return map.get(singleKey);
+    }
+    else {
+      const dateString = this.getDateString(viewDate);
+      const groupKey = Array.from(map.keys()).find((key) => key.includes(event.eventKey) && key.endsWith(dateString));
+      if (groupKey) {
+        return map.get(groupKey);
+      }
+    }
+  }
+  /**
+   * Generate a unique key for the given events
+   *
+   * @param {Nullable<CalendarEvent>[] | CalendarEvent} events - The calendar event(s)
+   * @param {CalendarDate} viewDate - The current date
+   * @returns {string} - A unique string key representing the event(s)
+   */
+  generateMapKey(events, viewDate) {
+    const dateString = this.getDateString(viewDate);
+    return Array.isArray(events)
+      ? events
+        .filter((event) => event)
+        .map((event) => event.eventKey)
+        .join('-') + dateString
+      : events.eventKey + dateString;
+  }
+  /**
+   * Get a date string in the format "-YYYY-M-D" for the given date
+   *
+   * @param {CalendarDate} viewDate - The date object
+   * @returns {string} - The formatted date string, or an empty string if the date is null
+   */
+  getDateString(viewDate) {
+    return `-${viewDate.year}-${viewDate.month}-${viewDate.date}`;
+  }
 }
-__decorate$8([
-  MapToComponentField({ writable: true })
-], VegaCalendarPostOperationDateController.prototype, "postOperationDate", void 0);
-__decorate$8([
-  MapToComponentMethod('watchCurrentPeriodChange')
-], VegaCalendarPostOperationDateController.prototype, "setDate", 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-top.disabled{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1))}.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-left.disabled{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1))}.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-weekday-columns:7}.calendar-view.calendar-hide-weekends{--calendar-weekday-columns:5}.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(var(--calendar-weekday-columns), 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(var(--calendar-weekday-columns), minmax(64px, 1fr))}.calendar-view-week .calendar-view-container .calendar-view-event-all{grid-template-columns:repeat(var(--calendar-weekday-columns), minmax(64px, 1fr))}.calendar-view-week .calendar-view-container .calendar-view-day-container .calendar-view-content{display:grid;grid-template-columns:repeat(var(--calendar-weekday-columns), minmax(64px, 1fr))}.calendar-view-week .time-marker-container .time-marker{display:grid;grid-template-columns:repeat(var(--calendar-weekday-columns), minmax(64px, 1fr))}.calendar-view-week .day-event-container{display:grid;grid-template-columns:repeat(var(--calendar-weekday-columns), 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}";
+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-top.disabled{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1))}.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-left.disabled{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1))}.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-weekday-columns:7}.calendar-view.calendar-hide-weekends{--calendar-weekday-columns:5}.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(var(--calendar-weekday-columns), 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(var(--calendar-weekday-columns), minmax(64px, 1fr))}.calendar-view-week .calendar-view-container .calendar-view-event-all{grid-template-columns:repeat(var(--calendar-weekday-columns), minmax(64px, 1fr))}.calendar-view-week .calendar-view-container .calendar-view-day-container .calendar-view-content{display:grid;grid-template-columns:repeat(var(--calendar-weekday-columns), minmax(64px, 1fr))}.calendar-view-week .time-marker-container .time-marker{display:grid;grid-template-columns:repeat(var(--calendar-weekday-columns), minmax(64px, 1fr))}.calendar-view-week .day-event-container{display:grid;grid-template-columns:repeat(var(--calendar-weekday-columns), 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}.event-preview-popover{height:100%}.event-preview-popover.block{display:block}.event-preview-popover .event-preview-popover-content{height:100%}";
 
-var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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);
@@ -3665,11 +4060,13 @@ const VegaCalendar = class {
     // Date after recording the operation
     this.postOperationDateController = new VegaCalendarPostOperationDateController();
     this.dayViewFullDayEventRenderer = new VegaCalendarFullDayEventRenderer();
+    this.eventPreviewPopoverController = new VegaCalendarEventPreviewPopoverController();
     this.dayViewFullDayEventMoreButtonRenderer = new VegaCalendarFullDayEventMoreButtonRenderer();
     this.dayViewTimedEventRenderer = new VegaCalendarTimedEventRenderer();
     this.eventItemRenderer = new VegaCalendarEventItemRenderer();
     this.dayViewEventLayoutRenderer = new VegaCalendarDayViewEventLayoutRenderer();
     this.fullDayEventLayoutRenderer = new VegaCalendarFullDayEventLayoutRenderer();
+    this.eventPreviewPopoverRenderer = new VegaCalendarEventPreviewPopoverRenderer();
     this.calendarEventController = new VegaCalendarEventController();
     this.eventResponsiveController = new VegaCalendarEventResponsiveController();
     this.changeEventEmitter = createEventEmitSlimmer(VegaCalendar, VegaChange);
@@ -3731,6 +4128,12 @@ const VegaCalendar = class {
      * @vegaVersion 2.28.0
      */
     this.showWeekends = true;
+    /**
+     * Controls the visibility of the event preview popover while click event.
+     *
+     * @vegaVersion 2.59.0
+     */
+    this.enabledEventPreview = true;
   }
   /**
    * Tracks changes to the current period state.
@@ -3786,91 +4189,97 @@ const VegaCalendar = class {
     "showWeekends": ["watchShowWeekendsChange"]
   }; }
 };
-__decorate$7([
+__decorate$9([
   InjectVegaGlobalSlimmer()
 ], VegaCalendar.prototype, "globalSlimmer", void 0);
-__decorate$7([
+__decorate$9([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "translationSlimmer", void 0);
-__decorate$7([
+__decorate$9([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
-__decorate$7([
+__decorate$9([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "renderer", void 0);
-__decorate$7([
+__decorate$9([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "switchPanelRenderer", void 0);
-__decorate$7([
+__decorate$9([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "viewRenderer", void 0);
-__decorate$7([
+__decorate$9([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "monthViewRenderer", void 0);
-__decorate$7([
+__decorate$9([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "viewWithTimeRenderer", void 0);
-__decorate$7([
+__decorate$9([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "timeLineRenderer", void 0);
-__decorate$7([
+__decorate$9([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "timeMarkerRenderer", void 0);
-__decorate$7([
+__decorate$9([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "monthEventRenderer", void 0);
-__decorate$7([
+__decorate$9([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "currentPeriodController", void 0);
-__decorate$7([
+__decorate$9([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "calendarViewController", void 0);
-__decorate$7([
+__decorate$9([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "postOperationDateController", void 0);
-__decorate$7([
+__decorate$9([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "dayViewFullDayEventRenderer", void 0);
-__decorate$7([
+__decorate$9([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "eventPreviewPopoverController", void 0);
+__decorate$9([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "dayViewFullDayEventMoreButtonRenderer", void 0);
-__decorate$7([
+__decorate$9([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "dayViewTimedEventRenderer", void 0);
-__decorate$7([
+__decorate$9([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "eventItemRenderer", void 0);
-__decorate$7([
+__decorate$9([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "dayViewEventLayoutRenderer", void 0);
-__decorate$7([
+__decorate$9([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "fullDayEventLayoutRenderer", void 0);
-__decorate$7([
+__decorate$9([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "eventPreviewPopoverRenderer", void 0);
+__decorate$9([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "calendarEventController", void 0);
-__decorate$7([
+__decorate$9([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "eventResponsiveController", void 0);
-__decorate$7([
+__decorate$9([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "changeEventEmitter", void 0);
-__decorate$7([
+__decorate$9([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "eventClickEmitter", void 0);
-__decorate$7([
+__decorate$9([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "dateDblClickEmitter", void 0);
-__decorate$7([
+__decorate$9([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "moreActionClickEmitter", void 0);
-__decorate$7([
+__decorate$9([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "changeEventPrevent", void 0);
-__decorate$7([
+__decorate$9([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "timeFormatNotifySlimmer", void 0);
-__decorate$7([
+__decorate$9([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "showEventColorBarNotifySlimmer", void 0);
 VegaCalendar.style = vegaCalendarCss;
@@ -3879,7 +4288,7 @@ 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 __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;
@@ -3997,7 +4406,7 @@ class VegaCalendarEventRenderer extends VegaSlimmer {
    */
   defaultNormalMonthEventContentRender() {
     const { startTime, title } = this.calendarEvent;
-    return h("div", { class: "event-title" }, `${this.formatDisplayTime(startTime)} ${title}`);
+    return h("div", { class: "event-title" }, `${formatDisplayTime(this.timeFormat, startTime)} ${title}`);
   }
   /**
    * Render the day view timed event.
@@ -4014,7 +4423,7 @@ class VegaCalendarEventRenderer extends VegaSlimmer {
         }, 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)}`))));
+        h("span", null, `${formatDisplayTime(this.timeFormat, startTime)} - ${formatDisplayTime(this.timeFormat, endTime)}`))));
   }
   /**
    * Return a slot element if the calendar is not a repeat event
@@ -4032,33 +4441,7 @@ class VegaCalendarEventRenderer extends VegaSlimmer {
    * @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}`;
-      }
-    }
+    return h("style", null, getEventStatusBgColorStyle(this.calendarEvent.color));
   }
 }
 (() => {
@@ -4066,53 +4449,23 @@ class VegaCalendarEventRenderer extends VegaSlimmer {
     'clock-three': clockThree,
   });
 })();
-__decorate$6([
+__decorate$8([
   MapToComponentField()
 ], VegaCalendarEventRenderer.prototype, "host", void 0);
-__decorate$6([
+__decorate$8([
   MapToComponentField()
 ], VegaCalendarEventRenderer.prototype, "timeFormat", void 0);
-__decorate$6([
+__decorate$8([
   MapToComponentField()
 ], VegaCalendarEventRenderer.prototype, "calendarEvent", void 0);
-__decorate$6([
+__decorate$8([
   MapToComponentField()
 ], VegaCalendarEventRenderer.prototype, "slotMode", void 0);
-__decorate$6([
+__decorate$8([
   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 __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;
@@ -4146,14 +4499,14 @@ class VegaCalendarEventSubStateController extends SubStateObserverSlimmer {
     });
   }
 }
-__decorate$4([
+__decorate$7([
   MapToComponentField({ writable: true })
 ], VegaCalendarEventSubStateController.prototype, "timeFormat", void 0);
-__decorate$4([
+__decorate$7([
   MapToComponentField({ writable: true })
 ], VegaCalendarEventSubStateController.prototype, "showColorBar", void 0);
 
-var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -4185,11 +4538,11 @@ class VegaCalendarTitleMaxHeightController extends VegaSlimmer {
     }
   }
 }
-__decorate$3([
+__decorate$6([
   MapToComponentField()
 ], VegaCalendarTitleMaxHeightController.prototype, "renderer", void 0);
 
-var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -4246,28 +4599,28 @@ class VegaCalendarEventSlotController extends VegaSlimmer {
     return this.host.classList.contains('calendar-event-in-popover');
   }
 }
-__decorate$2([
+__decorate$5([
   MapToComponentField()
 ], VegaCalendarEventSlotController.prototype, "host", void 0);
-__decorate$2([
+__decorate$5([
   MapToComponentField()
 ], VegaCalendarEventSlotController.prototype, "calendarEvent", void 0);
-__decorate$2([
+__decorate$5([
   MapToComponentField({ writable: true })
 ], VegaCalendarEventSlotController.prototype, "slotMode", void 0);
-__decorate$2([
+__decorate$5([
   MapToComponentField()
 ], VegaCalendarEventSlotController.prototype, "renderer", void 0);
-__decorate$2([
+__decorate$5([
   MapToComponentMethod('componentWillLoad')
 ], VegaCalendarEventSlotController.prototype, "findTheCalendarEventSlot", null);
-__decorate$2([
+__decorate$5([
   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 __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);
@@ -4293,7 +4646,6 @@ const VegaCalendarEvent = class {
     });
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.renderer = new VegaCalendarEventRenderer();
-    this.colorController = new VegaCalendarEventBgColorController();
     this.slotController = new VegaCalendarEventSlotController();
     this.subStateController = new VegaCalendarEventSubStateController();
     this.titleMaxHeightController = new VegaCalendarTitleMaxHeightController();
@@ -4307,31 +4659,197 @@ const VegaCalendarEvent = class {
   }
   get host() { return getElement(this); }
 };
-__decorate$1([
+__decorate$4([
   InjectVegaGlobalSlimmer()
 ], VegaCalendarEvent.prototype, "globalSlimmer", void 0);
-__decorate$1([
+__decorate$4([
   InjectVegaSlimmer()
 ], VegaCalendarEvent.prototype, "pageResizeObserverSlimmer", void 0);
-__decorate$1([
+__decorate$4([
   InjectVegaSlimmer()
 ], VegaCalendarEvent.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
-__decorate$1([
+__decorate$4([
   InjectVegaSlimmer()
 ], VegaCalendarEvent.prototype, "renderer", void 0);
+__decorate$4([
+  InjectVegaSlimmer()
+], VegaCalendarEvent.prototype, "slotController", void 0);
+__decorate$4([
+  InjectVegaSlimmer()
+], VegaCalendarEvent.prototype, "subStateController", void 0);
+__decorate$4([
+  InjectVegaSlimmer()
+], VegaCalendarEvent.prototype, "titleMaxHeightController", void 0);
+VegaCalendarEvent.style = vegaCalendarEventCss;
+
+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;
+};
+/** Control the states of preview event */
+class VegaCalendarEventPreviewStateController extends VegaSlimmer {
+  /**
+   * connectedCallback
+   */
+  registerEventPreviewUpdateObserver() {
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.host, VegaInternalCalendarEventPreviewUpdate, (payload) => {
+      this.previewPayload = payload;
+      this.currentEvent = payload.event;
+    });
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.host, VegaInternalCalendarEventPreviewClear, () => {
+      this.currentEvent = null;
+    });
+  }
+  /**
+   * disconnectedCallback
+   */
+  unregisterEventPreviewUpdateObserver() {
+    DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(this.host, VegaInternalCalendarEventPreviewUpdate);
+    DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(this.host, VegaInternalCalendarEventPreviewClear);
+  }
+}
+__decorate$3([
+  MapToComponentField()
+], VegaCalendarEventPreviewStateController.prototype, "host", void 0);
+__decorate$3([
+  MapToComponentField({ writable: true })
+], VegaCalendarEventPreviewStateController.prototype, "currentEvent", void 0);
+__decorate$3([
+  MapToComponentField({ writable: true })
+], VegaCalendarEventPreviewStateController.prototype, "previewPayload", void 0);
+__decorate$3([
+  MapToComponentMethod('connectedCallback')
+], VegaCalendarEventPreviewStateController.prototype, "registerEventPreviewUpdateObserver", null);
+__decorate$3([
+  MapToComponentMethod('disconnectedCallback')
+], VegaCalendarEventPreviewStateController.prototype, "unregisterEventPreviewUpdateObserver", null);
+
+const closeIcon = {
+  icon: `<svg width="17" height="16" viewBox="0 0 17 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_80261_51160)"><path d="M13.9604 1.29376C14.3511 0.903137 14.9854 0.903137 15.3761 1.29376C15.7667 1.68439 15.7667 2.31876 15.3761 2.70939L10.0823 8.00001L15.3729 13.2938C15.7636 13.6844 15.7636 14.3188 15.3729 14.7094C14.9823 15.1 14.3479 15.1 13.9573 14.7094L8.66668 9.41564L3.37293 14.7063C2.98231 15.0969 2.34793 15.0969 1.95731 14.7063C1.56668 14.3156 1.56668 13.6813 1.95731 13.2906L7.25106 8.00001L1.96043 2.70626C1.56981 2.31564 1.56981 1.68439 1.96043 1.29376C2.35106 0.903137 2.98543 0.903137 3.37606 1.29376L8.66668 6.58439L13.9604 1.29376Z" fill="currentColor" fill-opacity="0.95"/></g><defs><clipPath id="clip0_80261_51160"><rect width="14" height="16" fill="currentColor" transform="translate(1.66669)"/></clipPath></defs></svg>`,
+};
+
+const clockIcon = {
+  icon: `<svg width="17" height="16" viewBox="0 0 17 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_80261_52574)"><path d="M7.91669 3.75C7.91669 3.33437 8.25106 3 8.66669 3C9.08231 3 9.41669 3.33437 9.41669 3.75V7.6L12.0823 9.375C12.4261 9.60625 12.5198 10.0719 12.2636 10.4156C12.0604 10.7594 11.5948 10.8531 11.2511 10.5969L8.25106 8.59688C8.04169 8.48438 7.91669 8.25 7.91669 7.97188V3.75ZM8.66669 0C13.0854 0 16.6667 3.58125 16.6667 8C16.6667 12.4187 13.0854 16 8.66669 16C4.24794 16 0.666687 12.4187 0.666687 8C0.666687 3.58125 4.24794 0 8.66669 0ZM2.16669 8C2.16669 11.5906 5.07606 14.5 8.66669 14.5C12.2573 14.5 15.1667 11.5906 15.1667 8C15.1667 4.40938 12.2573 1.5 8.66669 1.5C5.07606 1.5 2.16669 4.40938 2.16669 8Z" fill="currentColor" fill-opacity="0.64"/></g><defs><clipPath id="clip0_80261_52574"><rect width="16" height="16" fill="currentColor" transform="translate(0.666687)"/></defs></svg>`,
+};
+
+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;
+};
+class VegaCalendarEventPreviewDetailRenderer extends VegaSlimmer {
+  render() {
+    return (this.currentEvent && (h("vega-box", { class: "event-preview" },
+      this.injectBackgroundColorStyle(),
+      this.renderActions(),
+      h("vega-box", { class: "preview-content" },
+        h("vega-flex", { gap: "size-16", direction: "col" },
+          this.renderBasicFields(),
+          this.renderDivider(),
+          h("slot", { name: "event-preview-additional-fields" }))))));
+  }
+  renderActions() {
+    return (h("vega-flex", { justifyContent: "end", class: "preview-actions" },
+      h("vega-button-circle", { icon: VegaInternalIconManager.getIconKey('close'), color: "text-primary", variant: "icon-only", 
+        /* eslint-disable-next-line react/jsx-no-bind */
+        onVegaClick: () => {
+          ChangeManager.notify(CALENDAR_EVENT_PREVIEW_POPOVER_HIDE, this.currentEvent);
+        } })));
+  }
+  renderBasicFields() {
+    const currentEvent = this.currentEvent;
+    return (h(Fragment, null,
+      h("vega-flex", { alignItems: "start", gap: "size-16" }, this.renderEventTitle()),
+      h("vega-flex", { alignItems: "start", gap: "size-12" },
+        h("vega-icon", { icon: VegaInternalIconManager.getIconKey('clock'), color: "text-secondary" }),
+        h("vega-flex", { direction: "col", gap: "size-4" },
+          h("vega-font", { variant: "font-footnote1-long", color: "text-primary" }, currentEvent.generateDateTimeString(this.previewPayload.targetCalendarViewDate, this.previewPayload.timeFormat)),
+          currentEvent.isRepeatEvent && (h("vega-font", { variant: "font-footnote1-long", color: "text-primary" }, currentEvent.generateRepeatString()))))));
+  }
+  renderEventTitle() {
+    const currentEvent = this.currentEvent;
+    const eventSlotName = getCalendarEventSlotName(currentEvent.event.key);
+    const eventSlot = this.host.querySelector(`[slot=${eventSlotName}]`);
+    return eventSlot ? (h("slot", { name: eventSlotName })) : (h(Fragment, null,
+      h("vega-box", { corners: "rounded-full", class: {
+          'event-bg-color': true,
+          'event-bg-disabled': currentEvent.disabled,
+        }, flexShrink: 0 },
+        h("span", { class: {
+            [`event-color-dot-${currentEvent.variant}`]: true,
+          } })),
+      h("vega-font", { variant: "font-h5", color: "text-primary" }, currentEvent.title)));
+  }
+  renderDivider() {
+    const previewSlot = this.host.querySelector('[slot=event-preview-additional-fields]');
+    return (previewSlot && (h("vega-box", null,
+      h("vega-divider", null))));
+  }
+  injectBackgroundColorStyle() {
+    return h("style", null, getEventStatusBgColorStyle(this.currentEvent.color));
+  }
+}
+(() => {
+  VegaInternalIconManager.register({
+    close: closeIcon,
+    clock: clockIcon,
+  });
+})();
+__decorate$2([
+  MapToComponentField()
+], VegaCalendarEventPreviewDetailRenderer.prototype, "host", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaCalendarEventPreviewDetailRenderer.prototype, "previewPayload", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaCalendarEventPreviewDetailRenderer.prototype, "currentEvent", void 0);
+
+const vegaCalendarEventPreviewCss = ":host(.single-event-preview) .event-preview{width:398px;box-sizing:border-box}:host(.single-event-preview) .preview-actions{padding-top:4px;padding-left:4px;padding-right:4px}:host(.single-event-preview) .preview-content{margin-bottom:24px;margin-left:12px;margin-right:12px;padding-left:12px;padding-right:12px}:host(.group-event-preview) .event-preview{width:320px;box-sizing:border-box;height:100%}:host(.group-event-preview) .event-preview{border:1px solid rgba(var(--v-border-divider, 171, 198, 216, 1));border-right-width:0px;border-top-width:0px;border-bottom-width:0px;border-left-width:1px;border-left-style:solid}:host(.group-event-preview) .preview-actions{padding-top:4px;padding-left:4px;padding-right:4px}:host(.group-event-preview) .preview-content{margin-bottom:16px;margin-left:12px;margin-right:12px;padding-left:4px;padding-right:4px}:host .preview-content{max-height:60vh;overflow-y:auto}:host .event-bg-color{width:12px;height:12px;margin-top:8px;position:relative}:host .event-bg-color.event-bg-disabled{background-color:rgba(var(--v-bg-disabled, 176, 180, 181, 1))}:host .event-bg-color span{display:block;position:absolute;top:0px;left:0px;opacity:0.8}:host .event-bg-color span.event-color-dot-secondary{width:100%;height:100%;background-size:4px 4px;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%)}:host .event-bg-color span.event-color-dot-tertiary{width:calc(100% - 2px);height:calc(100% - 2px);top:1px;left:1px;border-top-left-radius:9999px;border-bottom-left-radius:9999px;border-top-right-radius:9999px;border-bottom-right-radius:9999px;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));opacity:1}";
+
+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 VegaCalendarEventPreview = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.detailRenderer = new VegaCalendarEventPreviewDetailRenderer();
+    this.stateController = new VegaCalendarEventPreviewStateController();
+    this.translationSlimmer = new TranslationSlimmer();
+    this.globalSlimmer = {};
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, null, this.previewPayload && this.detailRenderer.render()), this.host);
+  }
+  get host() { return getElement(this); }
+};
 __decorate$1([
   InjectVegaSlimmer()
-], VegaCalendarEvent.prototype, "colorController", void 0);
+], VegaCalendarEventPreview.prototype, "detailRenderer", void 0);
 __decorate$1([
   InjectVegaSlimmer()
-], VegaCalendarEvent.prototype, "slotController", void 0);
+], VegaCalendarEventPreview.prototype, "stateController", void 0);
 __decorate$1([
   InjectVegaSlimmer()
-], VegaCalendarEvent.prototype, "subStateController", void 0);
+], VegaCalendarEventPreview.prototype, "translationSlimmer", void 0);
+__decorate$1([
+  InjectVegaGlobalSlimmer()
+], VegaCalendarEventPreview.prototype, "globalSlimmer", void 0);
 __decorate$1([
   InjectVegaSlimmer()
-], VegaCalendarEvent.prototype, "titleMaxHeightController", void 0);
-VegaCalendarEvent.style = vegaCalendarEventCss;
+], VegaCalendarEventPreview.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+VegaCalendarEventPreview.style = vegaCalendarEventPreviewCss;
 
 const vegaCalendarEventSlotCss = ":host{width:100%;height:100%;position:relative}";
 
@@ -4364,4 +4882,4 @@ __decorate([
 ], VegaCalendarEventSlot.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
 VegaCalendarEventSlot.style = vegaCalendarEventSlotCss;
 
-export { VegaCalendar as vega_calendar, VegaCalendarEvent as vega_calendar_event, VegaCalendarEventSlot as vega_calendar_event_slot };
+export { VegaCalendar as vega_calendar, VegaCalendarEvent as vega_calendar_event, VegaCalendarEventPreview as vega_calendar_event_preview, VegaCalendarEventSlot as vega_calendar_event_slot };