@globalpayments/vega 2.16.0 → 2.18.0

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

@@ -3,24 +3,26 @@ import { s as sanitizeVegaComponent } from './component-40be4402.js';
 import { a as MapToComponentField, V as VegaSlimmer, M as MapToComponentMethod, L as LogUtility, I as InjectVegaSlimmer } from './global-slimmer-registry-16fd7452.js';
 import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './componentUsageRuntimeMetrics-4f08dec8.js';
 import { D as DomNodeSubjectObserverFactory, d as domNodeSubjectFactory } from './domNodeSubjectObserverFactory-a764a6df.js';
-import { a as VegaClick, d as VegaChange, e as VegaEventClick } from './vegaEventId-680887e1.js';
+import { a as VegaClick, e as VegaChange, f as VegaEventClick, g as VegaDateDblClick } from './vegaEventId-dc9cd6b8.js';
 import { V as VegaInternalIconManager } from './internal-icon-manager-a52b1c10.js';
 import { p as pad } from './date-97fc22a5.js';
-import { c as createEventEmitSlimmer } from './eventEmitSlimmer-9c33f04e.js';
-import { C as ChildNodesEventPreventSlimmer } from './childNodesEventPreventSlimmer-b9c50cc4.js';
-import { f as VegaInternalCalendarMonthEventsChange } from './vegaInternalEventId-600b3751.js';
+import { c as createEventEmitSlimmer } from './eventEmitSlimmer-2cd4efb4.js';
+import { C as ChildNodesEventPreventSlimmer } from './childNodesEventPreventSlimmer-8e071cfd.js';
+import { g as VegaInternalCalendarMonthEventsChange } from './vegaInternalEventId-bde5d617.js';
 import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
+import { f as flatNestedArray } from './array-8c82516c.js';
 import { g as generateUUID } from './misc-c21a85c9.js';
 import { P as PageResizeObserverSlimmer } from './pageResizeObserverSlimmer-d36f30e8.js';
 import { d as debounce } from './timer-9321173b.js';
 import { C as ChangeManager } from './changeManager-d60d98c8.js';
-import { c as createSubStateNotifySlimmer, S as SubStateObserverSlimmer } from './subStateObserverSlimmer-354b33f6.js';
+import { c as createSubStateNotifySlimmer, S as SubStateObserverSlimmer } from './subStateObserverSlimmer-2a8a615e.js';
 import { p as isBackgroundColorTokenType } from './typeGuard-f33ed2eb.js';
 import { s as stateBackgroundColorFormatter } from './stateBackgroundColorFormatter-e705312f.js';
 import { b as parsePixelStringToNumber } from './pixel-f32c07ce.js';
 import './iconManager-48bebc43.js';
 import './dynamic-slimmer-ef83e258.js';
-import './internalVegaEventManager-e1501923.js';
+import './internalVegaEventManager-fc0821e2.js';
+import './number-e2519d1c.js';
 import './breakpoints-e59edf8d.js';
 import './ui-df46cc20.js';
 import './ui-28499aab.js';
@@ -101,7 +103,7 @@ class VegaCalendarSwitchPanelRenderer extends VegaSlimmer {
      * @param {NotifyObserverPayload<VegaCalendarViewModeType>} input mark which view should be selected
      */
     this.handleViewChange = (input) => {
-      this.calendarViewController.setViewMode(input.detail);
+      this.currentPeriodController.updateCalendarPeriod(input.detail, this.currentPeriod.current);
     };
     /**
      * reset view content to today
@@ -293,7 +295,9 @@ class VegaCalendarMonthViewRenderer extends VegaSlimmer {
             'current-month-day': item.compare(currentDate).inMonth,
             'active': item.isToday(),
             'disabled': false,
-          }, key: `${item.month}-${item.date}` },
+          }, key: `${item.month}-${item.date}`, 
+          // eslint-disable-next-line react/jsx-no-bind
+          onDblClick: (e) => this.handleDateBlockClick(e, item) },
           this.renderDateBlock(item),
           this.monthEventRenderer.render(item, eventsArray[itemIndex], displayEventsArray[itemIndex], itemIndex)));
       })));
@@ -309,7 +313,42 @@ class VegaCalendarMonthViewRenderer extends VegaSlimmer {
     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" }, item.date)));
+      h("div", { role: "button", tabIndex: 0, class: "grid-col", 
+        // eslint-disable-next-line react/jsx-no-bind
+        onDblClick: (e) => this.goToCurrentDayView(e, item) }, item.date)));
+  }
+  /**
+   * switch to current date day view
+   *
+   * @param {MouseEvent} e the double click event object
+   * @param {CalendarDate} calendarDate the calendar date object
+   */
+  goToCurrentDayView(e, calendarDate) {
+    e.stopPropagation();
+    this.currentPeriodController.updateCalendarPeriod('day', calendarDate);
+  }
+  /**
+   * emit vega click event when click the date block
+   *
+   * @param {MouseEvent} e the mouse event object
+   * @param {CalendarDate} calendarDate the calendar date object
+   */
+  handleDateBlockClick(e, calendarDate) {
+    const target = e.target;
+    if (this.isMonthBlockBlankArea(target)) {
+      const { year, month, date } = calendarDate;
+      this.dateDblClickEmitter.emit({ year, month, date, hour: 0 });
+    }
+  }
+  /**
+   * determine if the clicked element is blank area
+   *
+   * @param {HTMLElement} element the target element
+   * @returns {boolean} true or false
+   */
+  isMonthBlockBlankArea(element) {
+    // the more button and the calendar event component should not trigger dateDblClick event
+    return !element.classList.contains('more-button') && element.tagName !== 'VEGA-CALENDAR-EVENT';
   }
 }
 __decorate$i([
@@ -324,9 +363,15 @@ __decorate$i([
 __decorate$i([
   MapToComponentField()
 ], VegaCalendarMonthViewRenderer.prototype, "calendarViewController", void 0);
+__decorate$i([
+  MapToComponentField()
+], VegaCalendarMonthViewRenderer.prototype, "currentPeriodController", void 0);
 __decorate$i([
   MapToComponentField()
 ], VegaCalendarMonthViewRenderer.prototype, "monthEventRenderer", void 0);
+__decorate$i([
+  MapToComponentField()
+], VegaCalendarMonthViewRenderer.prototype, "dateDblClickEmitter", void 0);
 
 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;
@@ -379,7 +424,7 @@ class VegaCalendarViewWithTimeRenderer extends VegaSlimmer {
         h("div", { class: "calendar-view-content" }, source.map((item) => {
           return (h("div", { class: "grid-col border-divider-left", key: item.date },
             h("div", { class: "hour-empty border-divider-top" }),
-            this.renderHourBlock()));
+            this.renderHourBlock(item)));
         })),
         this.dayViewTimedEventRenderer.render(),
         this.timeLineRenderer.renderTimeMarker(source))));
@@ -387,14 +432,28 @@ class VegaCalendarViewWithTimeRenderer extends VegaSlimmer {
   /**
    * The function `renderHourBlock` returns an array of HTML elements representing hour blocks with time information.
    *
+   * @param {CalendarDate} calendarDate then current calendar date object
    * @returns {HTMLElement[]} An array of HTMLElements is being returned. Each HTMLElement represents an hour block with a time value inside a div element.
    */
-  renderHourBlock() {
+  renderHourBlock(calendarDate) {
     const timeLineSource = Array(24).fill('');
-    return timeLineSource.map(() => {
-      return h("div", { class: "grid-cell border-divider-top" });
+    return timeLineSource.map((_item, index) => {
+      return (h("div", { class: "grid-cell border-divider-top", 
+        // eslint-disable-next-line react/jsx-no-bind
+        onDblClick: () => {
+          this.handleDateBlockClick(calendarDate, index);
+        } }));
     });
   }
+  /**
+   * emit vega click event when click the date block
+   *
+   * @param {CalendarDate} calendarDate the calendar date object
+   */
+  handleDateBlockClick(calendarDate, hour) {
+    const { year, month, date } = calendarDate;
+    this.dateDblClickEmitter.emit({ year, month, date, hour });
+  }
 }
 __decorate$h([
   MapToComponentField()
@@ -414,6 +473,9 @@ __decorate$h([
 __decorate$h([
   MapToComponentField()
 ], VegaCalendarViewWithTimeRenderer.prototype, "calendarViewController", void 0);
+__decorate$h([
+  MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "dateDblClickEmitter", void 0);
 
 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;
@@ -757,6 +819,17 @@ class CalendarDate {
     }
     return result;
   }
+  /**
+   * The function "equal" compares the year, month, and date of two CalendarDate objects and returns  true if they are equal.
+   *
+   * @param {CalendarDate} calendarDate - The `equal` method in the code snippet is a function that compares the year, month, and date of the current `CalendarDate` object with another
+   * `CalendarDate` object passed as a parameter. The method returns `true` if all three values (year, month, date) are equal
+   * @returns {boolean} The date is same day with current
+   */
+  equal(calendarDate) {
+    const { year, month, date } = calendarDate;
+    return this._year === year && this._month === month && this._date === date;
+  }
 }
 
 /**
@@ -835,6 +908,14 @@ class CalendarPeriod {
   get count() {
     return this._count;
   }
+  /**
+   * This function returns the type of the object.
+   *
+   * @type {string}
+   */
+  get type() {
+    return this._type;
+  }
   /**
    * Go to a specific date.
    *
@@ -874,6 +955,7 @@ class CalendarPeriod {
 class DayPeriod extends CalendarPeriod {
   constructor(current) {
     super(DayPeriod.DISPLAY_DATE_COUNT, current);
+    this._type = 'day';
   }
   /**
    * @inheritDoc
@@ -906,6 +988,7 @@ DayPeriod.DISPLAY_DATE_COUNT = 1;
 class WeekPeriod extends CalendarPeriod {
   constructor(current) {
     super(WeekPeriod.DISPLAY_DATE_COUNT, current);
+    this._type = 'week';
   }
   /**
    * @inheritDoc
@@ -937,9 +1020,22 @@ WeekPeriod.DISPLAY_DATE_COUNT = 7;
  */
 class MonthPeriod extends CalendarPeriod {
   constructor(current) {
-    const date = current || CalendarDate.from(new Date());
-    const firstDayOfMonth = new CalendarDate(date.year, date.month, 1);
-    super(MonthPeriod.DISPLAY_DATE_COUNT, firstDayOfMonth);
+    super(MonthPeriod.DISPLAY_DATE_COUNT, MonthPeriod.getMonthFirstDay(current));
+    this._type = 'month';
+  }
+  /**
+   * The function `getMonthFirstDay` returns the first day of a given month in a calendar.
+   *
+   * @param {CalendarDate} [calendarDate] - The `calendarDate` parameter is an optional parameter of
+   * type `CalendarDate`. It represents a specific date in the calendar. If a `calendarDate` is
+   * provided, the function will use that date to determine the first day of the month. If no
+   * `calendarDate` is provided, the function
+   * @returns {CalendarDate} A new `CalendarDate` object representing the first day of the month from the provided
+   * `calendarDate` parameter or the current date if no parameter is provided.
+   */
+  static getMonthFirstDay(calendarDate) {
+    const date = calendarDate || CalendarDate.from(new Date());
+    return new CalendarDate(date.year, date.month, 1);
   }
   /**
    * @inheritDoc
@@ -980,39 +1076,34 @@ class VegaCalendarViewController extends VegaSlimmer {
     this.weekViewGenerator = new WeekViewGenerator();
     this.dayViewGenerator = new DayViewGenerator();
   }
-  /**
-   * Update the view mode by param
-   *
-   * @param {VegaCalendarViewModeType} viewMode view mode string
-   */
-  setViewMode(viewMode) {
-    this.viewMode = viewMode;
-  }
   /**
    * set default calendar view
    */
   initialCalendarView() {
-    this.setCalendarView(this.getCalendarViewByViewMode());
+    this.setCalendarView(this.getCalendarViewByPeriod(this.currentPeriod));
   }
   /**
    * generator new calendar view if the calendar current period changes
+   *
+   * @param {CalendarPeriod} newValue the new calendar period
    */
-  generateCalendarView() {
-    this.setCalendarView(this.getCalendarViewByViewMode());
+  generateCalendarView(newValue) {
+    this.setCalendarView(this.getCalendarViewByPeriod(newValue));
   }
   /**
-   * The function `getCalendarViewByViewMode` returns a specific calendar view based on the current view mode.
+   * The function `getCalendarViewByPeriod` returns a specific calendar view based on the current period.
    *
-   * @returns {CalendarView} get the match calendar view by the view mode
+   * @param {CalendarPeriod} newPeriod the new period
+   * @returns {CalendarView} get the match calendar view by the period
    */
-  getCalendarViewByViewMode() {
-    switch (this.viewMode) {
+  getCalendarViewByPeriod(newPeriod) {
+    switch (newPeriod.type) {
       case 'week':
-        return this.weekViewGenerator.generate(this.currentPeriod);
+        return this.weekViewGenerator.generate(newPeriod);
       case 'day':
-        return this.dayViewGenerator.generate(this.currentPeriod);
+        return this.dayViewGenerator.generate(newPeriod);
       default:
-        return this.monthViewGenerator.generate(this.currentPeriod);
+        return this.monthViewGenerator.generate(newPeriod);
     }
   }
   /**
@@ -1027,9 +1118,6 @@ class VegaCalendarViewController extends VegaSlimmer {
 __decorate$f([
   MapToComponentField({ writable: true })
 ], VegaCalendarViewController.prototype, "calendarView", void 0);
-__decorate$f([
-  MapToComponentField({ writable: true })
-], VegaCalendarViewController.prototype, "viewMode", void 0);
 __decorate$f([
   MapToComponentField()
 ], VegaCalendarViewController.prototype, "currentPeriod", void 0);
@@ -1059,19 +1147,50 @@ class VegaCalendarCurrentPeriodController extends VegaSlimmer {
   setCurrentPeriod(newPeriod) {
     this.currentPeriod = newPeriod;
   }
+  /**
+   * set new current period by the view mode and the current date
+   *
+   * @param {VegaCalendarViewModeType} viewMode view mode value
+   * @param {CalendarDate} date current date
+   */
+  updateCalendarPeriod(viewMode, date) {
+    switch (viewMode) {
+      case 'month':
+        this.setCurrentPeriod(new MonthPeriod(date));
+        break;
+      case 'week':
+        this.setCurrentPeriod(new WeekPeriod(date));
+        break;
+      case 'day':
+        this.setCurrentPeriod(new DayPeriod(date));
+        break;
+    }
+  }
   /**
    * default current period is month period, re-create period if the default view mode is not month
    * set default calendar view
    */
   initialCurrentPeriod() {
-    this.initCalendarPeriod(this.viewMode, CalendarDate.from(new Date()));
+    this.updateCalendarPeriod(this.viewMode, CalendarDate.from(new Date()));
   }
   /**
    * emit period change event
+   *
+   * @param {CalendarPeriod} newValue the new calendar period
+   * @param {CalendarPeriod} oldValue the prev calendar period
    */
-  emitChangeEvent() {
+  emitChangeEvent(newValue, oldValue) {
+    if (newValue &&
+      oldValue &&
+      newValue.startDate.equal(oldValue.startDate) &&
+      newValue.endDate.equal(oldValue.endDate)) {
+      return;
+    }
+    if (newValue && newValue.type !== this.viewMode) {
+      this.viewMode = newValue.type;
+    }
     this.changeEventEmitter.emit({
-      viewMode: this.viewMode,
+      viewMode: newValue.type,
       currentPeriod: this.getCurrentPeriodSummary(),
     });
   }
@@ -1081,7 +1200,9 @@ class VegaCalendarCurrentPeriodController extends VegaSlimmer {
    * @param {VegaCalendarViewModeType} viewMode new view mode value
    */
   updateCurrentPeriodByViewMode(viewMode) {
-    this.initCalendarPeriod(viewMode, this.currentPeriod.current);
+    if (this.currentPeriod && viewMode !== this.currentPeriod.type) {
+      this.updateCalendarPeriod(viewMode, this.currentPeriod.current);
+    }
   }
   /**
    * The function `getStartDateAndEndDate` returns an array of `VegaCalendarDateType` objects based on the `startDate` and `endDate` properties of the `currentPeriod` object.
@@ -1106,25 +1227,6 @@ class VegaCalendarCurrentPeriodController extends VegaSlimmer {
       },
     };
   }
-  /**
-   * set new current period by the view mode and the current date
-   *
-   * @param {VegaCalendarViewModeType} viewMode view mode value
-   * @param {CalendarDate} date current date
-   */
-  initCalendarPeriod(viewMode, date) {
-    switch (viewMode) {
-      case 'month':
-        this.setCurrentPeriod(new MonthPeriod(date));
-        break;
-      case 'week':
-        this.setCurrentPeriod(new WeekPeriod(date));
-        break;
-      case 'day':
-        this.setCurrentPeriod(new DayPeriod(date));
-        break;
-    }
-  }
 }
 __decorate$e([
   MapToComponentField({ writable: true })
@@ -1133,7 +1235,7 @@ __decorate$e([
   MapToComponentField()
 ], VegaCalendarCurrentPeriodController.prototype, "changeEventEmitter", void 0);
 __decorate$e([
-  MapToComponentField()
+  MapToComponentField({ writable: true })
 ], VegaCalendarCurrentPeriodController.prototype, "viewMode", void 0);
 __decorate$e([
   MapToComponentMethod('componentWillLoad')
@@ -1317,6 +1419,534 @@ __decorate$d([
   MapToComponentMethod('componentWillLoad')
 ], VegaCalendarMonthEventRenderer.prototype, "addMaxDisplayCountChange", null);
 
+/** The above code defines an abstract class `CalendarEventBaseRepeatPattern` in TypeScript that represents a repeat pattern for calendar events. Here is a summary of what the code is doing: */
+class CalendarEventBaseRepeatPattern {
+  /**
+   * The constructor initializes the current date for a given date range and interval.
+   *
+   * @param {CalendarDate} repeatStartDate - The `repeatStartDate` parameter represents the starting date of a
+   * calendar event or interval. It is of type `CalendarDate`, which likely contains information such as
+   * the year, month, and day of the event.
+   * @param {number} interval - The `interval` parameter represents the frequency at which the event
+   * occurs. For example, if the interval is set to 2, it means the event occurs every 2 units of time
+   * (e.g., every 2 days, weeks, months, etc.).
+   * @param {Nullable<number>} count - The `count` parameter specifies the number of occurrences of the event. If `count`
+   * is provided, the event will repeat `count` times within the specified interval. If `count` is
+   * `null`, the event will repeat indefinitely until the `until` date is reached.
+   * @param {Nullable<CalendarDate>} until - The `until` parameter in the constructor represents a date until which the recurring
+   * event will occur. If this date is reached, the recurring event will stop.
+   */
+  constructor(repeatStartDate, interval, count, until) {
+    this.repeatStartDate = repeatStartDate;
+    this.interval = interval;
+    this.count = count;
+    this.until = until;
+  }
+  /**
+   * The function `getRepeatSeries` retrieves a series of repeated events within a specified calendar period.
+   *
+   * @param {CalendarPeriod} period - The `period` parameter in the `getRepeatSeries` method represents
+   * a specific time period in the form of a `CalendarPeriod` object. This object typically contains a
+   * `startDate` and an `endDate`, which define the range of dates for which you want to generate repeat series.
+   * @param {number} eventSpansDays - the current repeat series cross days, default value is one
+   * @returns {CalendarDate[]}  repeat start date array
+   */
+  getRepeatSeries(period, eventSpansDays = 1) {
+    this.generateRepeatDateCacheUntilEndDate(period.endDate);
+    return this.cache.filter((item) => {
+      return this.isSeriesInPeriod(item, eventSpansDays, period);
+    });
+  }
+  /**
+   * The function `isSeriesInPeriod` checks if a series of dates falls within a specified date range.
+   *
+   * @param {CalendarDate} series - The `series` parameter represents a specific date in the form of a
+   * `CalendarDate` object.
+   * @param {number} seriesSpansDays - The `seriesSpansDays` parameter represents the number of days
+   * that the series spans. It is used to calculate the end date of the series based on the start date.
+   * @param {CalendarPeriod} period - Date period
+   * @returns {boolean} a boolean value indicating whether the given series falls within the specified date
+   * range.
+   */
+  isSeriesInPeriod(series, seriesSpansDays, period) {
+    const seriesStart = series.toDate();
+    const seriesEnd = new Date(series.year, series.month - 1, series.date + seriesSpansDays - 1);
+    const { startDate, endDate } = period;
+    const rangeStart = startDate.toDate();
+    const rangeEnd = endDate.toDate();
+    return ((seriesStart >= rangeStart && seriesStart <= rangeEnd) ||
+      (seriesEnd >= rangeStart && seriesEnd <= rangeEnd) ||
+      (seriesStart <= rangeStart && seriesEnd >= rangeEnd));
+  }
+}
+CalendarEventBaseRepeatPattern.daySeconds = 24 * 60 * 60 * 1000;
+
+/** The `CalendarEventDailyRepeatPattern` class in TypeScript represents a daily repeating pattern for calendar events. */
+class CalendarEventDailyRepeatPattern extends CalendarEventBaseRepeatPattern {
+  /**
+   * The constructor initializes the current date for a given date range and interval.
+   *
+   * @param {CalendarDate} startDate - The `startDate` parameter is of type `CalendarDate` and represents the starting date for a specific interval or range.
+   * @param {number} interval - The `interval` parameter represents the frequency at which the event
+   * occurs. For example, if the interval is set to 1, it means the event occurs every day. If the
+   * interval is set to 2, it means the event occurs every other day.
+   * @param {Nullable<number>} count - The `count` parameter specifies the number of occurrences of the event. If `count`
+   * is provided, the event will repeat `count` times within the specified interval. If `count` is
+   * `null`, the event will repeat indefinitely until the `until` date is reached.
+   * @param {Nullable<CalendarDate>} until - The `until` parameter in the constructor is of type `Nullable<CalendarDate>`, which
+   * means it can either accept a `CalendarDate` object or be `null`. This parameter is used to specify
+   * a date until which the recurring event should repeat. If `until` is provided, the event
+   */
+  constructor(startDate, interval, count, until) {
+    super(startDate, interval, count, until);
+    this.initCache();
+  }
+  /**
+   * The function generates and caches repeated dates before a specified end date.
+   *
+   * @param {CalendarDate} endDate - The `endDate` parameter represents the date until which you want to
+   * generate repeat dates in the cache. The function `generateRepeatDateCacheBeforeEndDate` is
+   * responsible for populating the cache with repeat dates until the specified `endDate`. It checks the
+   * last date in the cache and generates subsequent repeat dates until
+   */
+  generateRepeatDateCacheUntilEndDate(endDate) {
+    const lastMatchDate = this.cache[this.cache.length - 1];
+    if (lastMatchDate.toDate() < endDate.toDate() &&
+      (!this.count || (typeof this.count === 'number' && this.cache.length < this.count))) {
+      let nextMatchDate = this.getNextRepeatStartDate(lastMatchDate);
+      while (nextMatchDate && nextMatchDate.toDate() < endDate.toDate()) {
+        nextMatchDate = this.getNextRepeatStartDate(nextMatchDate);
+        if (typeof this.count === 'number' && this.cache.length >= this.count) {
+          break;
+        }
+      }
+    }
+  }
+  /**
+   * The function `initCache` initializes a cache array with the `startDate` value.
+   */
+  initCache() {
+    this.cache = [this.repeatStartDate];
+  }
+  /**
+   * The function getNextRepeatStartDate calculates the next repeat start date based on a given date and certain conditions.
+   *
+   * @param {CalendarDate} date - The `date` parameter represents the current date for which you want to
+   * calculate the next repeat start date. It is an instance of the `CalendarDate` class.
+   * @returns {Nullable<CalendarDate>} The function `getNextRepeatStartDate` returns either a `CalendarDate` object if certain
+   * conditions are met, or `null` if the conditions are not met.
+   */
+  getNextRepeatStartDate(date) {
+    const nextDate = new Date(date.year, date.month - 1, date.date + this.interval);
+    const nextCalendarDate = CalendarDate.from(nextDate);
+    if ((this.until && nextDate > this.until.toDate()) ||
+      (typeof this.count === 'number' && this.cache.length >= this.count)) {
+      return null;
+    }
+    else {
+      this.cache.push(nextCalendarDate);
+      return nextCalendarDate;
+    }
+  }
+}
+
+/** The `CalendarEventMonthlyRepeatPattern` class in TypeScript represents a monthly repeat pattern for calendar events. */
+class CalendarEventMonthlyRepeatPattern extends CalendarEventBaseRepeatPattern {
+  /**
+   * The constructor initializes the event with specified start and end dates, interval, count, and until date, and sets the byMonthDay property to the start date's day.
+   *
+   * @param {CalendarDate} startDate - The `startDate` parameter represents the starting date of the
+   * event or interval. It is of type `CalendarDate`, which likely includes the year, month, and day
+   * components of the date.
+   * @param {number} interval - The `interval` parameter specifies the frequency of the recurring
+   * events. For example, if the interval is set to 2, the event will occur every 2 units of time (days,
+   * weeks, months, etc.).
+   * @param {Nullable<number>} count - The `count` parameter specifies the number of occurrences of the event. If `count`
+   * is provided, the event will repeat `count` times within the specified interval. If `count` is not
+   * provided (or is `null`), the event will repeat indefinitely based on the other parameters like `
+   * @param {Nullable<CalendarDate>} until - The `until` parameter is a nullable `CalendarDate` that specifies the end date for
+   * the recurring event. If provided, the event will repeat until this date. If not provided, the event
+   * will repeat indefinitely based on the other parameters like `count` or `endDate`.
+   */
+  constructor(startDate, interval, count, until) {
+    super(startDate, interval, count, until);
+    this.byMonthDay = this.repeatStartDate.date;
+    this.initCache();
+  }
+  /**
+   * This function generates and caches repeated dates before a specified end date.
+   *
+   * @param {CalendarDate} endDate - The `endDate` parameter in the
+   * `generateRepeatDateCacheUntilEndDate` function is a CalendarDate object that represents the end
+   * date until which the repeat dates need to be generated and cached. The function checks if the last
+   * cached date is before the `endDate` and generates additional repeat dates until it reaches
+   */
+  generateRepeatDateCacheUntilEndDate(endDate) {
+    const lastMatchDate = this.cache[this.cache.length - 1];
+    if (lastMatchDate.toDate() < endDate.toDate() &&
+      (!this.count || (typeof this.count === 'number' && this.cache.length < this.count))) {
+      let nextMatchDate = this.getNextRepeatStartDate(lastMatchDate);
+      while (nextMatchDate && nextMatchDate.toDate() < endDate.toDate()) {
+        nextMatchDate = this.getNextRepeatStartDate(nextMatchDate);
+        if (typeof this.count === 'number' && this.cache.length >= this.count) {
+          break;
+        }
+      }
+    }
+  }
+  /**
+   * The function `initCache` initializes a cache array with the startDate value.
+   */
+  initCache() {
+    this.cache = [this.repeatStartDate];
+  }
+  /**
+   * The getNextRepeatStartDate function calculates the next start date based on a given date and interval, considering constraints such as end date and count limit.
+   *
+   * @param {CalendarDate} date - The `date` parameter represents the current date for which you want to
+   * calculate the next repeat start date. It is of type `CalendarDate`.
+   * @returns {Nullable<CalendarDate>} The function `getNextRepeatStartDate` returns a nullable `CalendarDate`. It either returns
+   * the next calculated `CalendarDate` based on the input date and interval, or it returns `null` if
+   * certain conditions are met (such as reaching the specified end date or count limit).
+   */
+  getNextRepeatStartDate(date) {
+    const nextDate = this.getNextStartDate(date.year, date.month - 1 + this.interval);
+    const nextCalendarDate = CalendarDate.from(nextDate);
+    if ((this.until && nextDate > this.until.toDate()) ||
+      (typeof this.count === 'number' && this.cache.length >= this.count)) {
+      return null;
+    }
+    else {
+      this.cache.push(nextCalendarDate);
+      return nextCalendarDate;
+    }
+  }
+  /**
+   * get the new date with fixed date, if the date.getDate() not equal the fixed date, find the next month
+   *
+   * @param {number} year year
+   * @param {number} month month
+   * @returns {Date} the new date
+   */
+  getNextStartDate(year, month) {
+    const nextDate = new Date(year, month, this.byMonthDay);
+    if (nextDate.getDate() === this.byMonthDay) {
+      return nextDate;
+    }
+    else {
+      return this.getNextStartDate(year, month + 1);
+    }
+  }
+}
+
+/** The `CalendarEventWeeklyRepeatPattern` class in TypeScript represents a weekly repeat pattern for calendar events, allowing for matching dates based on specific weekdays and generating future dates with optional constraints. */
+class CalendarEventWeeklyRepeatPattern extends CalendarEventBaseRepeatPattern {
+  /**
+   * This TypeScript constructor initializes a calendar date range with specified parameters including start date, end date, interval, count, until date, and an array of week days.
+   *
+   * @param {CalendarDate} startDate - The `startDate` parameter represents the starting date of the
+   * calendar event or schedule. It is of type `CalendarDate`, which likely includes the year, month, and day components of a date.
+   * @param {number} interval - The `interval` parameter represents the frequency of the recurrence. For
+   * example, if `interval` is set to 1, the event will occur every week. If it's set to 2, the event
+   * will occur every two weeks.
+   * @param {Nullable<number>} count - The `count` parameter specifies the number of occurrences of the rule. If `count` is
+   * provided, the recurrence will generate at most that many occurrences. If `count` is not provided,
+   * the recurrence will continue indefinitely based on other parameters like `endDate` or `until`.
+   * @param {Nullable<CalendarDate>} until - The `until` parameter specifies the end date for the recurrence rule. If provided,
+   * the recurrence will continue until this date. If not provided, the recurrence will continue
+   * indefinitely based on other parameters like `count` or `interval`.
+   * @param {Nullable<VegaCalendarWeekDayType[]>} byWeekDay - The `byWeekDay` parameter is an array of
+   * `VegaCalendarWeekDayType` values, which represent the days of the week for which the event should occur.
+   */
+  constructor(startDate, interval, count, until, byWeekDay) {
+    super(startDate, interval, count, until);
+    this.byWeekDay = this.sortWeekDay(byWeekDay);
+    this.initCache();
+  }
+  /**
+   * The function `getRepeatSeries` retrieves a series of repeated events within a specified calendar period.
+   *
+   * @param {CalendarPeriod} period - The `period` parameter in the `getRepeatSeries` method represents
+   * a specific time period in the form of a `CalendarPeriod` object. This object typically contains a
+   * `startDate` and an `endDate`, which define the range of dates for which you want to generate repeat series.
+   * @param {number} eventSpansDays - the current repeat series cross days, default value is one
+   * @returns {CalendarDate[]} repeat start date array
+   */
+  getRepeatSeries(period, eventSpansDays = 1) {
+    this.generateRepeatDateCacheUntilEndDate(period.endDate);
+    return this.getValidCache().filter((item) => {
+      return this.isSeriesInPeriod(item, eventSpansDays, period);
+    });
+  }
+  /**
+   * This function generates repeated dates and caches them until a specified end date.
+   *
+   * @param {CalendarDate} endDate - The `endDate` parameter is a `CalendarDate` object that represents
+   * the date until which the repeat date cache needs to be generated. The function
+   * `generateRepeatDateCacheUntilEndDate` generates repeat dates until this specified end date.
+   */
+  generateRepeatDateCacheUntilEndDate(endDate) {
+    const lastMatchDate = this.cache[this.cache.length - 1];
+    if (lastMatchDate[0].toDate() < endDate.toDate() &&
+      (!this.count || (typeof this.count === 'number' && this.cache.length < this.count))) {
+      let nextMatchDate = this.getNextRepeatStartDate(lastMatchDate);
+      while (nextMatchDate && nextMatchDate[0].toDate() < endDate.toDate()) {
+        nextMatchDate = this.getNextRepeatStartDate(nextMatchDate);
+        if (typeof this.count === 'number' && this.getValidCache().length >= this.count) {
+          break;
+        }
+      }
+    }
+  }
+  /**
+   * The function getNextRepeatStartDate calculates the next start dates based on a given array of CalendarDate objects and returns them if certain conditions are met.
+   *
+   * @param {CalendarDate[]} dates - The `dates` parameter is an array of `CalendarDate` objects.
+   * @returns {Nullable<CalendarDate[]>} The `getNextRepeatStartDate` function returns a nullable array of `CalendarDate` objects.
+   * If there are no next dates available or if the cache count exceeds a specified limit, it returns
+   * `null`. Otherwise, it returns an array of `CalendarDate` objects representing the next start dates.
+   */
+  getNextRepeatStartDate(dates) {
+    const nextDate = this.getNextStartDates(dates);
+    if (nextDate.length === 0 ||
+      (typeof this.count === 'number' && this.getValidCache().length >= this.count)) {
+      return null;
+    }
+    else {
+      const nextCalendarDates = nextDate.map((item) => CalendarDate.from(item));
+      this.cache.push(nextCalendarDates);
+      return nextCalendarDates;
+    }
+  }
+  /**
+   * The function `getNextStartDates` takes an array of `CalendarDate` objects, calculates the next dates based on a specified interval, and filters out dates that are after a specified end date.
+   *
+   * @param {CalendarDate[]} dates - The `dates` parameter is an array of `CalendarDate` objects
+   * representing specific dates in a calendar. Each `CalendarDate` object has properties for the year,
+   * month, and date.
+   * @returns {Date[]} The `getNextStartDates` function returns an array of `Date` objects representing the next
+   * start dates based on the input `CalendarDate` array. The function calculates the next start dates
+   * by adding a specific interval (multiplied by 7 to represent weeks) to each date in the input array.
+   * Finally, it filters out any dates that are after a specified `until` date, if provided.
+   */
+  getNextStartDates(dates) {
+    const nextDates = dates.map((dateItem) => new Date(dateItem.year, dateItem.month - 1, dateItem.date + this.interval * 7));
+    return nextDates.filter((item) => !this.until || item <= this.until.toDate());
+  }
+  /**
+   * The `initCache` function initializes a cache of calendar dates based on the start date and weekly repeat pattern.
+   */
+  initCache() {
+    const result = [];
+    const currentWeekDayIndex = this.getCurrentDayIndex(this.repeatStartDate);
+    this.byWeekDay.forEach((day) => {
+      const index = CalendarEventWeeklyRepeatPattern.weekDay.indexOf(day);
+      const days = index - currentWeekDayIndex;
+      const { year, month, date } = this.repeatStartDate;
+      const dateItem = CalendarDate.from(new Date(year, month - 1, date + days));
+      result.push(dateItem);
+    });
+    this.cache = [result];
+  }
+  /**
+   * The function `sortWeekDay` sorts an array of week days based on their position in a predefined list.
+   *
+   * @param {boolean} weekDay - The `weekDay` parameter is an array of week day values that need to be sorted in a
+   * specific order. The function `sortWeekDay` takes this array and sorts it based on a predefined
+   * order specified in `CalendarEventWeeklyRepeatPattern.weekDay`.
+   * @returns {VegaCalendarWeekDayType[]} The `sortWeekDay` function is returning the `weekDay` array sorted based on the index of
+   * each `VegaCalendarWeekDayType` item in the `CalendarEventWeeklyRepeatPattern.weekDay` array.
+   */
+  sortWeekDay(weekDay) {
+    if (weekDay && weekDay.length) {
+      return weekDay
+        .map((item) => item.toLocaleLowerCase())
+        .sort((itemA, itemB) => {
+        return (CalendarEventWeeklyRepeatPattern.weekDay.indexOf(itemA) -
+          CalendarEventWeeklyRepeatPattern.weekDay.indexOf(itemB));
+      });
+    }
+    else {
+      return [CalendarEventWeeklyRepeatPattern.weekDay[this.getCurrentDayIndex(this.repeatStartDate)]];
+    }
+  }
+  /**
+   * This function returns the index of the current day in a week, with Sunday represented as 0.
+   *
+   * @param {CalendarDate} date - The `date` parameter in the `getCurrentDayIndex` function is of type
+   * `CalendarDate`, which is a custom data type representing a date in a calendar.
+   * @returns {number} The function `getCurrentDayIndex` returns the index of the current day in the week, with
+   * Sunday being represented as 0 and Saturday being represented as 6.
+   */
+  getCurrentDayIndex(date) {
+    return date.toDate().getDay();
+  }
+  /**
+   * The function `getValidCache` returns a filtered and concatenated array of CalendarDate objects from the cache based on a start date.
+   *
+   * @returns {CalendarDate[]} The `getValidCache` method returns an array of `CalendarDate` objects that meet the
+   * condition of having a date greater than or equal to the `startDate` property. The method first
+   * flattens a nested array of `CalendarDate` objects stored in the `cache` property, then filters out
+   * the `CalendarDate` objects that do not meet the condition, and finally concatenates the filtered
+   * array
+   */
+  getValidCache() {
+    const flatArr = flatNestedArray(this.cache.slice(1));
+    return this.cache[0]
+      .filter((item) => item.toDate() >= this.repeatStartDate.toDate())
+      .concat(flatArr)
+      .slice(0, typeof this.count === 'number' ? this.count : undefined);
+  }
+}
+CalendarEventWeeklyRepeatPattern.weekDay = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map((item) => item.toLowerCase());
+
+/** The `CalendarEventYearlyRepeatPattern` class defines a yearly repeat pattern for calendar events, checking for matches and generating future dates based on specified criteria. */
+class CalendarEventYearlyRepeatPattern extends CalendarEventBaseRepeatPattern {
+  /**
+   * The constructor initializes a new instance with specified start and end dates, interval, count, and until date.
+   *
+   * @param {CalendarDate} startDate - The `startDate` parameter is of type `CalendarDate` and
+   * represents the starting date of a calendar event or interval.
+   * @param {number} interval - The `interval` parameter represents the frequency at which the event
+   * occurs. For example, if the interval is set to 2, the event will occur every 2 units of time (days,
+   * weeks, months, etc.).
+   * @param {Nullable<number>} count - The `count` parameter specifies the number of occurrences of the event. If `count`
+   * is provided, the event will repeat `count` times within the specified interval. If `count` is not
+   * provided, the event will repeat indefinitely based on the other parameters like `endDate` or
+   * `until`.
+   * @param {Nullable<CalendarDate>} until - The `until` parameter in the constructor is of type `Nullable<CalendarDate>`. This
+   * means that it can either accept a `CalendarDate` object or be `null`. It is used to specify a date
+   * until which the recurring event should repeat. If `until` is provided, the event
+   */
+  constructor(startDate, interval, count, until) {
+    super(startDate, interval, count, until);
+    this.matchDay = this.repeatStartDate.date;
+    this.matchMonth = this.repeatStartDate.month;
+    this.initCache();
+  }
+  /**
+   * The function generates repeat dates and caches them until reaching the specified end date.
+   *
+   * @param {CalendarDate} endDate - The `endDate` parameter in the
+   * `generateRepeatDateCacheUntilEndDate` function is a CalendarDate object that represents the date
+   * until which the repeat date cache should be generated. The function checks if the last date in the
+   * cache is before the `endDate`, and if so, it generates additional repeat dates
+   */
+  generateRepeatDateCacheUntilEndDate(endDate) {
+    const lastMatchDate = this.cache[this.cache.length - 1];
+    if (lastMatchDate.toDate() < endDate.toDate() &&
+      (!this.count || (typeof this.count === 'number' && this.cache.length < this.count))) {
+      let nextMatchDate = this.getNextRepeatStartDate(lastMatchDate);
+      while (nextMatchDate && nextMatchDate.toDate() < endDate.toDate()) {
+        nextMatchDate = this.getNextRepeatStartDate(nextMatchDate);
+        if (typeof this.count === 'number' && this.cache.length >= this.count) {
+          break;
+        }
+      }
+    }
+  }
+  /**
+   * The function getNextRepeatStartDate calculates the next repeat start date based on a given date and certain conditions.
+   *
+   * @param {CalendarDate} date - The `date` parameter represents the current date for which you want to
+   * calculate the next repeat start date. It is of type `CalendarDate`, which seems to be a custom
+   * class or structure that holds year, month, and day information.
+   * @returns {Nullable<CalendarDate>} The function `getNextRepeatStartDate` returns either a `CalendarDate` object or `null`
+   * based on certain conditions. If the next date exceeds the `until` date or the count limit has been
+   * reached, it returns `null`. Otherwise, it adds the next date to the cache and returns it as a
+   * `CalendarDate`.
+   */
+  getNextRepeatStartDate(date) {
+    const nextDate = this.getNextStartDate(date.year + this.interval);
+    const nextCalendarDate = CalendarDate.from(nextDate);
+    if ((this.until && nextDate > this.until.toDate()) ||
+      (typeof this.count === 'number' && this.cache.length >= this.count)) {
+      return null;
+    }
+    else {
+      this.cache.push(nextCalendarDate);
+      return nextCalendarDate;
+    }
+  }
+  /**
+   * get the new date with fixed month and fixed date, if the date.getDate() not equal the fixed date or fixed month, find the next year
+   *
+   * @param {number} year year
+   * @returns {Date} the new date
+   */
+  getNextStartDate(year) {
+    const nextDate = new Date(year, this.matchMonth - 1, this.matchDay);
+    if (nextDate.getDate() === this.matchDay && nextDate.getMonth() + 1 === this.matchMonth) {
+      return nextDate;
+    }
+    else {
+      return this.getNextStartDate(year + 1);
+    }
+  }
+  /**
+   * The function `initCache` initializes a cache array with the `startDate` value.
+   */
+  initCache() {
+    this.cache = [this.repeatStartDate];
+  }
+}
+
+/** This code snippet defines a TypeScript class `CalendarEventRepeatPatternFactory` that serves as a factory for creating different types of repeat patterns for calendar events. Here's a breakdown of what the class and its methods are doing: */
+class CalendarEventRepeatPatternFactory {
+  /**
+   * This `getPattern` method within the `CalendarEventRepeatPatternFactory` class is a public method that is responsible for creating and returning a specific type of repeat pattern for a calendar event based on the input parameters provided. Here's a breakdown of what this method is doing:
+   *
+   * @param {Date} startDate repeat start date
+   * @param {VegaCalendarEventRepeatOptions|undefined} repeatOptions repeat options
+   * @returns {CalendarEventBaseRepeatPattern} the match repeat pattern
+   */
+  getPattern(startDate, repeatOptions) {
+    const repeatStartDate = CalendarDate.from(startDate);
+    const { frequency, interval = 1, byWeekDay, until, count, } = repeatOptions;
+    const repeatEndDate = this.initDate(until);
+    return this.initRepeatPattern(frequency, repeatStartDate, interval < 1 ? 1 : interval, count, repeatEndDate, byWeekDay);
+  }
+  /**
+   * The `initDate` function initializes a `CalendarDate` object based on the input date string or Date object provided.
+   *
+   * @param {Nullable<string | Date>} date - The `date` parameter can be either a string or a Date object.
+   * @returns {Nullable<CalendarDate>} The function `initDate` returns a `Nullable<CalendarDate>`, which means it can return either a `CalendarDate` object or `null`.
+   */
+  initDate(date) {
+    if (date && typeof date === 'object') {
+      return CalendarDate.from(date);
+    }
+    else if (date && typeof date === 'string') {
+      const [month, day, year] = date.split('/');
+      return new CalendarDate(Number(year), Number(month), Number(day));
+    }
+  }
+  /**
+   * The function `initRepeatPattern` initializes a repeat pattern based on the frequency specified for a calendar event.
+   *
+   * @param {VegaCalendarEventRepeatType} frequency event frequency
+   * @param {CalendarDate} repeatStartDate event start date
+   * @param {number} interval event repeat interval
+   * @param {Nullable<number>} count the event repeat count
+   * @param {Nullable<CalendarDate>} repeatEndDate repeat end date
+   * @param {Nullable<VegaCalendarWeekDayType[]>} byWeekDay weekly week days
+   * @returns {CalendarEventBaseRepeatPattern} calendar event repeat pattern instance
+   */
+  initRepeatPattern(frequency, repeatStartDate, interval, count, repeatEndDate, byWeekDay) {
+    switch (frequency) {
+      case 'daily':
+        return new CalendarEventDailyRepeatPattern(repeatStartDate, interval, count, repeatEndDate);
+      case 'weekly':
+        return new CalendarEventWeeklyRepeatPattern(repeatStartDate, interval, count, repeatEndDate, byWeekDay);
+      case 'monthly':
+        return new CalendarEventMonthlyRepeatPattern(repeatStartDate, interval, count, repeatEndDate);
+      default:
+        return new CalendarEventYearlyRepeatPattern(repeatStartDate, interval, count, repeatEndDate);
+    }
+  }
+}
+const calendarEventRepeatPatternFactory = new CalendarEventRepeatPatternFactory();
+
 const CalendarDateFormatReg = /^\d{1,2}\/\d{1,2}\/\d{4}/;
 const CalendarTimeFormatReg = /^\d{1,2}:\d{1,2}/;
 /** The `CalendarEvent` class in TypeScript represents a calendar event with methods to validate required fields, initialize dates and times, and determine if it is a group event. */
@@ -1327,12 +1957,20 @@ class CalendarEvent {
    * @param {VegaCalendarRawEvent} eventOptions - The `eventOptions` parameter in the constructor
    * represents the raw event data for a Vega calendar event. It contains information such as the event
    * title, start and end dates, location, description, and any other relevant details about the event.
-   */
-  constructor(eventOptions) {
+   * @param {string} eventKey If a value is not provided for `eventKey`, a UUID (Universally
+   * Unique Identifier) will be generated as a default value. This identifier is used to distinguish
+   * different events and can be helpful for tracking
+   */
+  constructor(eventOptions, eventKey) {
+    // the default value is 1 when the event end date is same as start date
+    this._eventSpansDays = 1;
+    this.repeatPattern = null;
     this._event = eventOptions;
-    this._eventKey = generateUUID();
+    this._eventKey = eventKey || generateUUID();
     this.checkEventRequireField(eventOptions);
     this.initDate(eventOptions);
+    this.initEventSpansDays();
+    this.initRepeatPattern();
   }
   /**
    * The function returns the raw event data for a VegaCalendar event.
@@ -1391,12 +2029,12 @@ class CalendarEvent {
     return !!this._event.isAllDay;
   }
   /**
-   * The function isRepeatEvent returns a boolean value based on whether the event's repeat property is not equal to 'none'.
+   * The function isRepeatEvent returns a boolean value based on whether the event's repeatOptions property is not equal to 'none'.
    *
    * @returns {boolean} The method `isRepeatEvent` returns a boolean value indicating whether the `_event` has a repeat value other than 'none'.
    */
   get isRepeatEvent() {
-    return this._event.repeat !== 'none';
+    return this.repeatPattern !== null;
   }
   /**
    * The function returns the start date property of an object.
@@ -1430,16 +2068,39 @@ class CalendarEvent {
   get endTime() {
     return this._endTime;
   }
+  /**
+   * This function returns the number of days that an event spans.
+   *
+   * @returns {number} The method `get eventSpansDays()` is returning the value of the property
+   * `_eventSpansDays`, which is of type `number`.
+   */
+  get eventSpansDays() {
+    return this._eventSpansDays;
+  }
+  /**
+   * The function `copyTo` copies a calendar event with updated start and end dates.
+   *
+   * @param {string} eventKey - The `eventKey` parameter in the `copyTo` function is a string that represents the key or identifier of the new calendar event that will be created.
+   * @param {CalendarDate} startDate - The `startDate` parameter in the `copyTo` function represents
+   * the starting date of a calendar event. It is of type `CalendarDate`, which may contain information such as the day, month, and year of the event.
+   * @returns {CalendarEvent} A new `CalendarEvent` object is being returned with the properties from the original
+   * `_event` object (excluding `repeatOptions`) and the `startDate` and `endDate` properties set to
+   * the `toDate()` values of the `startDate` and `endDate` parameters.
+   */
+  copyTo(eventKey, startDate) {
+    const endDate = this._eventSpansDays > 1
+      ? new Date(startDate.year, startDate.month - 1, startDate.date + (this._eventSpansDays - 1))
+      : startDate.toDate();
+    const result = new CalendarEvent(Object.assign(Object.assign({}, this._event), { startDate: startDate.toDate(), endDate: endDate, startTime: this.startTime, endTime: this.endTime }), eventKey);
+    return result;
+  }
   /**
    * Check the event is a group event or not
    *
    * @returns {boolean} true or false
    */
   isGroupEvent() {
-    const { year: startYear, month: startMonth, date: startDay, } = CalendarDate.from(this.startDate);
-    const { year: endYear, month: endMonth, date: endDay, } = CalendarDate.from(this.endDate);
-    return (!(startYear === endYear && startMonth === endMonth && startDay === endDay) &&
-      this._event.repeat !== 'daily');
+    return this._eventSpansDays > 1;
   }
   /**
    * This TypeScript function checks if a given date falls within the range of a calendar event based on its start and end dates, considering different repeat types like daily, weekly, monthly, and yearly.
@@ -1452,23 +2113,8 @@ class CalendarEvent {
     const { startDate, endDate } = this;
     const startCalendarDate = CalendarDate.from(startDate);
     const endCalendarDate = CalendarDate.from(new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate() + 1));
-    const repeat = this._event.repeat;
     const currentDate = date.toDate();
-    if (startCalendarDate.toDate() <= currentDate) {
-      switch (repeat) {
-        case 'daily':
-          return true;
-        case 'weekly':
-          return currentDate.getDay() === startDate.getDay();
-        case 'monthly':
-          return date.date === startCalendarDate.date;
-        case 'yearly':
-          return date.month === startCalendarDate.month && date.date === startCalendarDate.date;
-        default:
-          return endCalendarDate.toDate() > currentDate;
-      }
-    }
-    return false;
+    return startCalendarDate.toDate() <= currentDate && endCalendarDate.toDate() > currentDate;
   }
   /**
    * Get the number of minutes the event lasted
@@ -1483,6 +2129,21 @@ class CalendarEvent {
     const endDate = new Date(now.year, now.month, now.date, Number(endHour) === 0 && Number(startHour) !== 0 ? 24 : Number(endHour), Number(endMinutes));
     return (endDate.valueOf() - startDate.valueOf()) / (60 * 1000);
   }
+  /**
+   * This function returns an array of repeat series based on a given calendar period.
+   *
+   * @param {CalendarPeriod} period - The `period` parameter in the `getRepeatSeries` method is of type
+   * `CalendarPeriod`. It represents a specific time period within a calendar, typically defined by a
+   * start date and an end date. The method uses this period to generate a series of repeated events
+   * based on a daily repeat pattern specified
+   * @returns {CalendarDate[]} repeat start date array
+   */
+  getRepeatSeries(period) {
+    if (this.repeatPattern) {
+      return this.repeatPattern.getRepeatSeries(period, this._eventSpansDays);
+    }
+    return [];
+  }
   /**
    * The function `convertTimeTo24Hour` converts a time string from 12-hour format to 24-hour format in TypeScript.
    *
@@ -1570,6 +2231,23 @@ class CalendarEvent {
       this._endTime = this.convertTimeTo24Hour(endTime);
     }
   }
+  /**
+   * The function initializes a repeat pattern controller for a calendar event with specified start and end dates and repeat options.
+   */
+  initRepeatPattern() {
+    if (this._event.repeatOptions && this._event.repeatOptions.frequency) {
+      this.repeatPattern = calendarEventRepeatPatternFactory.getPattern(this._startDate, this._event.repeatOptions);
+    }
+  }
+  /**
+   * Initializes the event cross days by the event start date and end date.
+   */
+  initEventSpansDays() {
+    const start = CalendarDate.from(this.startDate);
+    const end = CalendarDate.from(this.endDate);
+    this._eventSpansDays =
+      (end.toDate().valueOf() - start.toDate().valueOf()) / (24 * 60 * 60 * 1000) + 1;
+  }
 }
 
 var __decorate$c = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -1580,6 +2258,11 @@ var __decorate$c = (undefined && undefined.__decorate) || function (decorators,
 };
 /** The `VegaCalendarEventController` class in TypeScript manages calendar events, initializes event layouts, retrieves events for the current date, and checks if a date falls within the range of a calendar event. */
 class VegaCalendarEventController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    // This map is cache for newly generated calendar events
+    this.repeatEventMap = new Map();
+  }
   /**
    * The function `getCurrentDateEvent` returns an array of calendar events for the current date, including both normal events and group events.
    *
@@ -1590,7 +2273,7 @@ class VegaCalendarEventController extends VegaSlimmer {
    * the group events and returns the combined array.
    */
   getCurrentDateEvents(date) {
-    const allEvents = this.calendarEvents;
+    const allEvents = this.createRepeatEvents();
     return allEvents.filter((item) => item.isCurrentDayEvent(date));
   }
   /**
@@ -1600,6 +2283,7 @@ class VegaCalendarEventController extends VegaSlimmer {
    */
   updateAfterEventChange(newEvents) {
     this.initCalendarEvents(newEvents);
+    this.repeatEventMap.clear();
   }
   /**
    * initial calendar events in first time
@@ -1627,10 +2311,57 @@ class VegaCalendarEventController extends VegaSlimmer {
     }
     this.calendarEvents = result;
   }
+  /**
+   * We need generate new calendar event from the full-day repeat calendar event, so we can render those event as normal full-day event
+   *
+   * @returns {CalendarEvent[]} The `handleRepeatEvents` method returns an array of `CalendarEvent` objects.
+   */
+  createRepeatEvents() {
+    const allEvents = this.calendarEvents;
+    const otherEvents = [];
+    const newRepeatEvents = [];
+    allEvents.forEach((item) => {
+      if (item.isRepeatEvent) {
+        const repeatSeries = item.getRepeatSeries(this.currentPeriod);
+        repeatSeries.forEach((series) => {
+          newRepeatEvents.push(this.generateCalendarEventByRepeatSeries(item, series));
+        });
+      }
+      else {
+        otherEvents.push(item);
+      }
+    });
+    return newRepeatEvents.concat(otherEvents);
+  }
+  /**
+   * This function generates a calendar event based on a repeat series and stores it in a map to avoid duplicate creation.
+   *
+   * @param {CalendarEvent} calendarEvent - The `calendarEvent` parameter represents a single event on
+   * a calendar. It contains information such as the event's start date, end date, and other details.
+   * @param {CalendarDate} series - The repeat start date
+   * @returns {CalendarEvent} The function `generateCalendarEventByRepeatSeries` returns a `CalendarEvent` object. If
+   * the event key already exists in the `repeatEventMap`, it returns the corresponding `CalendarEvent`
+   * object from the map. Otherwise, it creates a new `CalendarEvent` object based on the input
+   * `calendarEvent` and `series` parameters, adds it to the `repeatEventMap`, and then
+   */
+  generateCalendarEventByRepeatSeries(calendarEvent, series) {
+    const eventKey = `${calendarEvent.eventKey}-${series.year}${series.month}${series.date}`;
+    if (this.repeatEventMap.has(eventKey)) {
+      return this.repeatEventMap.get(eventKey);
+    }
+    else {
+      const result = calendarEvent.copyTo(eventKey, series);
+      this.repeatEventMap.set(eventKey, result);
+      return result;
+    }
+  }
 }
 __decorate$c([
   MapToComponentField({ writable: true })
 ], VegaCalendarEventController.prototype, "calendarEvents", void 0);
+__decorate$c([
+  MapToComponentField()
+], VegaCalendarEventController.prototype, "currentPeriod", void 0);
 __decorate$c([
   MapToComponentField()
 ], VegaCalendarEventController.prototype, "events", void 0);
@@ -2458,7 +3189,7 @@ __decorate$6([
   MapToComponentField()
 ], VegaCalendarFullDayEventLayoutRenderer.prototype, "calendarView", void 0);
 
-const vegaCalendarCss = ".border-divider-top{border:1px solid rgba(var(--v-border-divider-secondary, 199, 217, 229, 1));border-left-width:0px;border-right-width:0px;border-bottom-width:0px}.border-divider-left{border:1px solid rgba(var(--v-border-divider-secondary, 199, 217, 229, 1));border-top-width:0px;border-right-width:0px;border-bottom-width:0px}.border-divider-right{border:1px solid rgba(var(--v-border-divider-secondary, 199, 217, 229, 1));border-top-width:0px;border-left-width:0px;border-bottom-width:0px}.border-divider-bottom{border:1px solid rgba(var(--v-border-divider-secondary, 199, 217, 229, 1));border-top-width:0px;border-left-width:0px;border-right-width:0px}:host{display:flex;flex-direction:column;border-radius:12px;border:1px solid rgba(var(--v-border-divider, 171, 198, 216, 1));background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));overflow:hidden;width:100%;height:100%;box-sizing:border-box;max-height:1966px}.calendar-switch-panel{padding:24px;border-bottom-width:1px;border-top-width:0px;border-left-width:0px;border-right-width:0px;border-style:solid;border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));flex-shrink:0;width:100%;box-sizing:border-box}.calendar-switch-panel .calendar-date-switch-container{display:flex;gap:8px;align-items:center;flex-direction:row}.calendar-switch-panel .calendar-view-switch-container{display:flex;gap:16px;align-items:center;flex-direction:row}.calendar-switch-panel .calendar-current-date{padding-left:8px}.calendar-view{width:100%;position:relative;flex-grow:1;overflow-y:auto;overflow-x:hidden}.calendar-view-month .calendar-view-month-container{width:100%;display:grid;min-height:100%;grid-template-rows:43px repeat(6, minmax(64px, 1fr))}.calendar-view-month .calendar-view-title{background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));top:0;left:0;z-index:62}.calendar-view-month .calendar-view-title div{padding-top:12px;padding-bottom:12px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;text-align:center}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-month .calendar-view-title div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-month .calendar-view-title div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-month .calendar-view-title div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}.calendar-view-month .calendar-view-row{position:relative;display:grid;grid-template-rows:1fr;grid-template-columns:repeat(7, minmax(64px, 1fr))}.calendar-view-month .calendar-view-row.calendar-view-title{position:sticky}.calendar-view-month .calendar-view-row:last-child{border-bottom-width:0px}.calendar-view-month .calendar-view-row .row-cell{overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}.calendar-view-month .calendar-view-row .row-cell:last-child{border-right-width:0px}.calendar-view-month .calendar-view-row .row-cell .date{padding-top:4px;padding-bottom:4px;padding-right:12px;padding-left:8px}.calendar-view-month .calendar-view-row .row-cell .date>div{display:inline-block;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-month .calendar-view-row .row-cell .date>div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-month .calendar-view-row .row-cell .date>div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-month .calendar-view-row .row-cell .date>div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}.calendar-view-month .calendar-view-row .row-cell .date .month-block{margin-right:2px}.calendar-view-month .calendar-view-row .row-cell .date .grid-col{text-align:center;border-top-left-radius:9999px;border-bottom-left-radius:9999px;border-top-right-radius:9999px;border-bottom-right-radius:9999px;cursor:pointer;width:18px;height:18px;line-height:18px}.calendar-view-month .calendar-view-row .row-cell .date .grid-col:hover{background-color:rgba(var(--v-bg-action-secondary-hover, 4, 112, 236, 0.1))}.calendar-view-month .calendar-view-row .row-cell .date .grid-col:active{background-color:rgba(var(--v-bg-action-secondary-active, 29, 65, 195, 0.1))}.calendar-view-month .calendar-view-row .row-cell .date .grid-col:focus-visible{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:2px}.calendar-view-month .calendar-view-row .row-cell.current-month-day .date>div{color:rgba(var(--v-text-primary, 32, 54, 69, 1))}.calendar-view-month .calendar-view-row .row-cell.disabled{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1))}.calendar-view-month .calendar-view-row .row-cell.disabled .date>div{color:rgba(var(--v-text-disabled, 176, 180, 181, 1))}.calendar-view-month .calendar-view-row .row-cell.active .date .grid-col{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1));border-top-left-radius:9999px;border-bottom-left-radius:9999px;color:rgba(var(--v-text-on-action, 252, 252, 252, 1))}.calendar-view-month .calendar-view-row .row-cell.active .date .grid-col:hover{background-color:rgba(var(--v-bg-action-hover, 4, 112, 236, 1))}.calendar-view-month .calendar-view-row .row-cell.active .date .grid-col:active{background-color:rgba(var(--v-bg-action-active, 29, 65, 195, 1))}.calendar-view-month .calendar-view-row .row-cell.active .date .grid-col:focus-visible{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:2px}.calendar-view-container{width:100%}.calendar-view-container .calendar-view-title-container{background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));position:sticky;top:0;left:0;z-index:62}.calendar-view-container .calendar-view-row{box-sizing:border-box;width:100%;display:flex;flex-direction:row}.calendar-view-container .calendar-view-row .time-line,.calendar-view-container .calendar-view-row .time-line-empty,.calendar-view-container .calendar-view-row .time-line-all{width:72px;text-align:right;padding-right:8px;box-sizing:border-box;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));flex-shrink:0}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-container .calendar-view-row .time-line,.calendar-view-container .calendar-view-row .time-line-empty,.calendar-view-container .calendar-view-row .time-line-all{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-container .calendar-view-row .time-line,.calendar-view-container .calendar-view-row .time-line-empty,.calendar-view-container .calendar-view-row .time-line-all{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-container .calendar-view-row .time-line,.calendar-view-container .calendar-view-row .time-line-empty,.calendar-view-container .calendar-view-row .time-line-all{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}.calendar-view-container .calendar-view-title{width:100%}.calendar-view-container .calendar-view-title>div{padding:12px;padding-bottom:8px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;text-align:center;display:flex;flex-direction:column;gap:8px}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-container .calendar-view-title>div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-container .calendar-view-title>div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-container .calendar-view-title>div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}.calendar-view-container .calendar-view-title .week-day{cursor:pointer;color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-container .calendar-view-title .week-day{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-container .calendar-view-title .week-day{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-container .calendar-view-title .week-day{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}}.calendar-view-container .calendar-view-title .active div{color:rgba(var(--v-text-link, 19, 98, 226, 1))}.calendar-view-container .calendar-view-event-all-container{align-items:center}.calendar-view-container .calendar-view-event-all{display:grid;grid-template-rows:1fr;flex-grow:1;min-height:18px}.calendar-view-container .calendar-view-day-container .time-line{display:grid;grid-template-rows:16px repeat(24, minmax(74px, 1fr))}.calendar-view-container .calendar-view-day-container .time-line .time-text{margin-top:-9px}.calendar-view-container .calendar-view-day-container .calendar-view-content{width:100%}.calendar-view-container .calendar-view-day-container .calendar-view-content .grid-col{display:grid;grid-template-rows:16px repeat(24, minmax(74px, 1fr));grid-template-columns:minmax(64px, 1fr)}.calendar-view-container .calendar-view-day-container .calendar-view-content .grid-col>.border-divider-top:first-child{border-top-width:0px}.calendar-view-container .calendar-view-content-container{width:100%;position:relative}.calendar-view-week .calendar-view-container{min-height:100%}.calendar-view-week .calendar-view-container .calendar-view-title{display:grid;grid-template-rows:1fr;grid-template-columns:repeat(7, minmax(64px, 1fr))}.calendar-view-week .calendar-view-container .calendar-view-event-all{grid-template-columns:repeat(7, minmax(64px, 1fr))}.calendar-view-week .calendar-view-container .calendar-view-day-container .calendar-view-content{display:grid;grid-template-columns:repeat(7, minmax(64px, 1fr))}.calendar-view-week .time-marker-container .time-marker{display:grid;grid-template-columns:repeat(7, minmax(64px, 1fr))}.calendar-view-week .day-event-container{display:grid;grid-template-columns:repeat(7, minmax(64px, 1fr))}.calendar-view-day .calendar-view-container{min-height:100%}.time-marker-container{position:absolute;min-width:100%;left:0;top:16px;height:calc(100% - 16px);pointer-events:none}.time-marker-container.hidden{display:none}.time-marker-container .time-marker{position:absolute;height:2px;display:grid;min-width:100%;left:0;top:0;z-index:61}.time-marker-container .time-marker div{width:100%;height:2px;background-color:rgba(var(--v-bg-status-error, 255, 110, 139, 1));opacity:0.3}.time-marker-container .time-marker div.active{opacity:1;position:relative}.time-marker-container .time-marker div.active::before{content:\"\";display:block;border-top-left-radius:9999px;border-bottom-left-radius:9999px;border-top-right-radius:9999px;border-bottom-right-radius:9999px;position:absolute;width:8px;height:8px;background-color:rgba(var(--v-bg-status-error, 255, 110, 139, 1));top:-3px;left:-4px}.day-event-container{position:absolute;min-width:100%;left:0;top:16px;height:calc(100% - 16px);pointer-events:none}.day-event-container .day-event-col{height:100%;overflow:hidden}.day-event-container vega-calendar-event{pointer-events:auto;height:100%}.calendar-view-month .month-event-row{position:absolute;width:100%;overflow:hidden;height:calc(100% - 26px);left:0;bottom:0}.calendar-view-month .events-container{width:100%;box-sizing:border-box;overflow:hidden;padding:2px;display:flex;flex-direction:column;gap:2px;justify-content:space-between;flex-grow:1}.calendar-view-month .events-container .event-list{display:flex;flex-direction:column;gap:2px;flex-grow:1}.calendar-view-month .events-container .event-list .month-event-block{box-sizing:border-box;padding-left:2px;padding-right:3px}.calendar-view-month .events-container .month-event-more .more-button{display:inline-block;height:16px;font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px;color:rgba(var(--v-text-link, 19, 98, 226, 1));cursor:pointer;border-radius:2px}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-month .events-container .month-event-more .more-button{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-month .events-container .month-event-more .more-button{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-month .events-container .month-event-more .more-button{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}.calendar-view-month .events-container .month-event-more .more-button:focus-visible{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:0px}.calendar-view-container .calendar-view-event-all{position:relative}.calendar-view-container .calendar-view-event-all .placeholder-block{padding-top:2px;padding-bottom:2px;box-sizing:content-box}.calendar-view-container .calendar-view-event-all .placeholder-block span{display:none}.calendar-view-container .calendar-view-event-all .day-event-block{padding-top:2px;padding-right:2px;box-sizing:border-box;padding-left:3px}.calendar-view-container .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}";
+const vegaCalendarCss = ".border-divider-top{border:1px solid rgba(var(--v-border-divider-secondary, 199, 217, 229, 1));border-left-width:0px;border-right-width:0px;border-bottom-width:0px}.border-divider-left{border:1px solid rgba(var(--v-border-divider-secondary, 199, 217, 229, 1));border-top-width:0px;border-right-width:0px;border-bottom-width:0px}.border-divider-right{border:1px solid rgba(var(--v-border-divider-secondary, 199, 217, 229, 1));border-top-width:0px;border-left-width:0px;border-bottom-width:0px}.border-divider-bottom{border:1px solid rgba(var(--v-border-divider-secondary, 199, 217, 229, 1));border-top-width:0px;border-left-width:0px;border-right-width:0px}:host{display:flex;flex-direction:column;border-radius:12px;border:1px solid rgba(var(--v-border-divider, 171, 198, 216, 1));background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));overflow:hidden;width:100%;height:100%;box-sizing:border-box;max-height:1966px}.calendar-switch-panel{padding:24px;border-bottom-width:1px;border-top-width:0px;border-left-width:0px;border-right-width:0px;border-style:solid;border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));flex-shrink:0;width:100%;box-sizing:border-box}.calendar-switch-panel .calendar-date-switch-container{display:flex;gap:8px;align-items:center;flex-direction:row}.calendar-switch-panel .calendar-view-switch-container{display:flex;gap:16px;align-items:center;flex-direction:row}.calendar-switch-panel .calendar-current-date{padding-left:8px}.calendar-view{width:100%;position:relative;flex-grow:1;overflow-y:auto;overflow-x:hidden}.calendar-view-month .calendar-view-month-container{width:100%;display:grid;min-height:100%;grid-template-rows:43px repeat(6, minmax(64px, 1fr))}.calendar-view-month .calendar-view-title{background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));top:0;left:0;z-index:62}.calendar-view-month .calendar-view-title div{padding-top:12px;padding-bottom:12px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;text-align:center}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-month .calendar-view-title div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-month .calendar-view-title div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-month .calendar-view-title div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}.calendar-view-month .calendar-view-row{position:relative;display:grid;grid-template-rows:1fr;grid-template-columns:repeat(7, minmax(64px, 1fr))}.calendar-view-month .calendar-view-row.calendar-view-title{position:sticky}.calendar-view-month .calendar-view-row:last-child{border-bottom-width:0px}.calendar-view-month .calendar-view-row .row-cell{overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}.calendar-view-month .calendar-view-row .row-cell:last-child{border-right-width:0px}.calendar-view-month .calendar-view-row .row-cell .date{padding-top:4px;padding-bottom:4px;padding-right:12px;padding-left:8px}.calendar-view-month .calendar-view-row .row-cell .date>div{display:inline-block;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-month .calendar-view-row .row-cell .date>div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-month .calendar-view-row .row-cell .date>div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-month .calendar-view-row .row-cell .date>div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}.calendar-view-month .calendar-view-row .row-cell .date .month-block{margin-right:2px}.calendar-view-month .calendar-view-row .row-cell .date .grid-col{text-align:center;border-top-left-radius:9999px;border-bottom-left-radius:9999px;border-top-right-radius:9999px;border-bottom-right-radius:9999px;cursor:pointer;width:18px;height:18px;line-height:18px}.calendar-view-month .calendar-view-row .row-cell .date .grid-col:hover{background-color:rgba(var(--v-bg-action-secondary-hover, 4, 112, 236, 0.1))}.calendar-view-month .calendar-view-row .row-cell .date .grid-col:active{background-color:rgba(var(--v-bg-action-secondary-active, 29, 65, 195, 0.1))}.calendar-view-month .calendar-view-row .row-cell .date .grid-col:focus-visible{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:2px}.calendar-view-month .calendar-view-row .row-cell.current-month-day .date>div{color:rgba(var(--v-text-primary, 32, 54, 69, 1))}.calendar-view-month .calendar-view-row .row-cell.disabled{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1))}.calendar-view-month .calendar-view-row .row-cell.disabled .date>div{color:rgba(var(--v-text-disabled, 176, 180, 181, 1))}.calendar-view-month .calendar-view-row .row-cell.active .date .grid-col{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1));border-top-left-radius:9999px;border-bottom-left-radius:9999px;color:rgba(var(--v-text-on-action, 252, 252, 252, 1))}.calendar-view-month .calendar-view-row .row-cell.active .date .grid-col:hover{background-color:rgba(var(--v-bg-action-hover, 4, 112, 236, 1))}.calendar-view-month .calendar-view-row .row-cell.active .date .grid-col:active{background-color:rgba(var(--v-bg-action-active, 29, 65, 195, 1))}.calendar-view-month .calendar-view-row .row-cell.active .date .grid-col:focus-visible{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:2px}.calendar-view-container{width:100%}.calendar-view-container .calendar-view-title-container{background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));position:sticky;top:0;left:0;z-index:62}.calendar-view-container .calendar-view-row{box-sizing:border-box;width:100%;display:flex;flex-direction:row}.calendar-view-container .calendar-view-row .time-line,.calendar-view-container .calendar-view-row .time-line-empty,.calendar-view-container .calendar-view-row .time-line-all{width:72px;text-align:right;padding-right:8px;box-sizing:border-box;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));flex-shrink:0}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-container .calendar-view-row .time-line,.calendar-view-container .calendar-view-row .time-line-empty,.calendar-view-container .calendar-view-row .time-line-all{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-container .calendar-view-row .time-line,.calendar-view-container .calendar-view-row .time-line-empty,.calendar-view-container .calendar-view-row .time-line-all{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-container .calendar-view-row .time-line,.calendar-view-container .calendar-view-row .time-line-empty,.calendar-view-container .calendar-view-row .time-line-all{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}.calendar-view-container .calendar-view-title{width:100%}.calendar-view-container .calendar-view-title>div{padding:12px;padding-bottom:8px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;text-align:center;display:flex;flex-direction:column;gap:8px}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-container .calendar-view-title>div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-container .calendar-view-title>div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-container .calendar-view-title>div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}.calendar-view-container .calendar-view-title .week-day{color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-container .calendar-view-title .week-day{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-container .calendar-view-title .week-day{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-container .calendar-view-title .week-day{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}}.calendar-view-container .calendar-view-title .active div{color:rgba(var(--v-text-link, 19, 98, 226, 1))}.calendar-view-container .calendar-view-event-all-container{align-items:center}.calendar-view-container .calendar-view-event-all{display:grid;grid-template-rows:1fr;flex-grow:1;min-height:18px}.calendar-view-container .calendar-view-day-container .time-line{display:grid;grid-template-rows:16px repeat(24, minmax(74px, 1fr))}.calendar-view-container .calendar-view-day-container .time-line .time-text{margin-top:-9px}.calendar-view-container .calendar-view-day-container .calendar-view-content{width:100%}.calendar-view-container .calendar-view-day-container .calendar-view-content .grid-col{display:grid;grid-template-rows:16px repeat(24, minmax(74px, 1fr));grid-template-columns:minmax(64px, 1fr)}.calendar-view-container .calendar-view-day-container .calendar-view-content .grid-col>.border-divider-top:first-child{border-top-width:0px}.calendar-view-container .calendar-view-content-container{width:100%;position:relative}.calendar-view-week .calendar-view-container{min-height:100%}.calendar-view-week .calendar-view-container .calendar-view-title{display:grid;grid-template-rows:1fr;grid-template-columns:repeat(7, minmax(64px, 1fr))}.calendar-view-week .calendar-view-container .calendar-view-event-all{grid-template-columns:repeat(7, minmax(64px, 1fr))}.calendar-view-week .calendar-view-container .calendar-view-day-container .calendar-view-content{display:grid;grid-template-columns:repeat(7, minmax(64px, 1fr))}.calendar-view-week .time-marker-container .time-marker{display:grid;grid-template-columns:repeat(7, minmax(64px, 1fr))}.calendar-view-week .day-event-container{display:grid;grid-template-columns:repeat(7, minmax(64px, 1fr))}.calendar-view-day .calendar-view-container{min-height:100%}.time-marker-container{position:absolute;min-width:100%;left:0;top:16px;height:calc(100% - 16px);pointer-events:none}.time-marker-container.hidden{display:none}.time-marker-container .time-marker{position:absolute;height:2px;display:grid;min-width:100%;left:0;top:0;z-index:61}.time-marker-container .time-marker div{width:100%;height:2px;background-color:rgba(var(--v-bg-status-error, 255, 110, 139, 1));opacity:0.3}.time-marker-container .time-marker div.active{opacity:1;position:relative}.time-marker-container .time-marker div.active::before{content:\"\";display:block;border-top-left-radius:9999px;border-bottom-left-radius:9999px;border-top-right-radius:9999px;border-bottom-right-radius:9999px;position:absolute;width:8px;height:8px;background-color:rgba(var(--v-bg-status-error, 255, 110, 139, 1));top:-3px;left:-4px}.day-event-container{position:absolute;min-width:100%;left:0;top:16px;height:calc(100% - 16px);pointer-events:none}.day-event-container .day-event-col{height:100%;overflow:hidden}.day-event-container vega-calendar-event{pointer-events:auto;height:100%}.calendar-view-month .month-event-row{position:absolute;width:100%;overflow:hidden;height:calc(100% - 26px);left:0;bottom:0}.calendar-view-month .events-container{width:100%;box-sizing:border-box;overflow:hidden;padding:2px;display:flex;flex-direction:column;gap:2px;justify-content:space-between;flex-grow:1}.calendar-view-month .events-container .event-list{display:flex;flex-direction:column;gap:2px;flex-grow:1}.calendar-view-month .events-container .event-list .month-event-block{box-sizing:border-box;padding-left:2px;padding-right:3px}.calendar-view-month .events-container .month-event-more .more-button{display:inline-block;height:16px;font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px;color:rgba(var(--v-text-link, 19, 98, 226, 1));cursor:pointer;border-radius:2px}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-month .events-container .month-event-more .more-button{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-month .events-container .month-event-more .more-button{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-month .events-container .month-event-more .more-button{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}.calendar-view-month .events-container .month-event-more .more-button:focus-visible{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:0px}.calendar-view-container .calendar-view-event-all{position:relative}.calendar-view-container .calendar-view-event-all .placeholder-block{padding-top:2px;padding-bottom:2px;box-sizing:content-box}.calendar-view-container .calendar-view-event-all .placeholder-block span{display:none}.calendar-view-container .calendar-view-event-all .day-event-block{padding-top:2px;padding-right:2px;box-sizing:border-box;padding-left:3px}.calendar-view-container .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}";
 
 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;
@@ -2477,6 +3208,8 @@ const VegaCalendar = class {
     this.change = createEvent(this, "change", 7);
     this.vegaEventClick = createEvent(this, "vegaEventClick", 7);
     this.eventClick = createEvent(this, "eventClick", 7);
+    this.vegaDateDblClick = createEvent(this, "vegaDateDblClick", 7);
+    this.dateDblClick = createEvent(this, "dateDblClick", 7);
     this.globalSlimmer = {};
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.renderer = new VegaCalendarRenderer();
@@ -2498,6 +3231,7 @@ const VegaCalendar = class {
     this.eventResponsiveController = new VegaCalendarEventResponsiveController();
     this.changeEventEmitter = createEventEmitSlimmer(VegaCalendar, VegaChange);
     this.eventClickEmitter = createEventEmitSlimmer(VegaCalendar, VegaEventClick);
+    this.dateDblClickEmitter = createEventEmitSlimmer(VegaCalendar, VegaDateDblClick);
     this.changeEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.switchPanelRenderer.getSwitchPanelRef());
     this.timeFormatNotifySlimmer = createSubStateNotifySlimmer(VegaCalendar, 'timeFormat', 'watchTimeFormat');
     this.calendarEvents = [];
@@ -2512,9 +3246,12 @@ const VegaCalendar = class {
     this.timeFormat = '24-hour';
   }
   /**
-   * watch the state calendar current period change
+   * Tracks changes to the current period state.
+   *
+   * @param {CalendarPeriod} newValue Specifies the new calendar period.
+   * @param {CalendarPeriod} oldValue Specifies the old calendar period.
    */
-  watchCurrentPeriodChange() {
+  watchCurrentPeriodChange(newValue, oldValue) {
   }
   /**
    * Watch the view mode change
@@ -2608,6 +3345,9 @@ __decorate$5([
 __decorate$5([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "eventClickEmitter", void 0);
+__decorate$5([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "dateDblClickEmitter", void 0);
 __decorate$5([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "changeEventPrevent", void 0);