@globalpayments/vega 2.18.1 → 2.19.0

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

@@ -6,8 +6,8 @@ import { D as DomNodeSubjectObserverFactory, d as domNodeSubjectFactory } from '
 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-faec6394.js';
-import { C as ChildNodesEventPreventSlimmer } from './childNodesEventPreventSlimmer-dff60444.js';
+import { c as createEventEmitSlimmer } from './eventEmitSlimmer-3087be32.js';
+import { C as ChildNodesEventPreventSlimmer } from './childNodesEventPreventSlimmer-2d3364c6.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';
@@ -16,12 +16,13 @@ import { P as PageResizeObserverSlimmer } from './pageResizeObserverSlimmer-d36f
 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-2a8a615e.js';
+import { s as slotPlaceholder } from './placeholder-bf562081.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-6f331cf5.js';
+import './internalVegaEventManager-7c0f128e.js';
 import './vegaEnvManager-e0c1fde1.js';
 import './featureFlagController-254d5886.js';
 import './index-dc8f8d91.js';
@@ -32,7 +33,7 @@ import './ui-28499aab.js';
 import './regex-dfe11abf.js';
 import './typography-a8fc4764.js';
 
-var __decorate$l = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -51,10 +52,10 @@ class VegaCalendarRenderer extends VegaSlimmer {
       this.viewRenderer.render()));
   }
 }
-__decorate$l([
+__decorate$o([
   MapToComponentField()
 ], VegaCalendarRenderer.prototype, "switchPanelRenderer", void 0);
-__decorate$l([
+__decorate$o([
   MapToComponentField()
 ], VegaCalendarRenderer.prototype, "viewRenderer", void 0);
 
@@ -89,8 +90,17 @@ 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;
+}
 
-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;
@@ -217,23 +227,23 @@ VegaCalendarSwitchPanelRenderer.views = [
   { text: 'Week', key: 'week' },
   { text: 'Month', key: 'month' },
 ];
-__decorate$k([
+__decorate$n([
   MapToComponentField()
 ], VegaCalendarSwitchPanelRenderer.prototype, "viewMode", void 0);
-__decorate$k([
+__decorate$n([
   MapToComponentField()
 ], VegaCalendarSwitchPanelRenderer.prototype, "calendarView", void 0);
-__decorate$k([
+__decorate$n([
   MapToComponentField()
 ], VegaCalendarSwitchPanelRenderer.prototype, "currentPeriod", void 0);
-__decorate$k([
+__decorate$n([
   MapToComponentField()
 ], VegaCalendarSwitchPanelRenderer.prototype, "currentPeriodController", void 0);
-__decorate$k([
+__decorate$n([
   MapToComponentField()
 ], VegaCalendarSwitchPanelRenderer.prototype, "calendarViewController", void 0);
 
-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;
@@ -252,17 +262,17 @@ class VegaCalendarViewRenderer extends VegaSlimmer {
       : this.viewWithTimeRenderer.render()));
   }
 }
-__decorate$j([
+__decorate$m([
   MapToComponentField()
 ], VegaCalendarViewRenderer.prototype, "viewMode", void 0);
-__decorate$j([
+__decorate$m([
   MapToComponentField()
 ], VegaCalendarViewRenderer.prototype, "monthViewRenderer", void 0);
-__decorate$j([
+__decorate$m([
   MapToComponentField()
 ], VegaCalendarViewRenderer.prototype, "viewWithTimeRenderer", void 0);
 
-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;
@@ -354,29 +364,29 @@ class VegaCalendarMonthViewRenderer extends VegaSlimmer {
     return !element.classList.contains('more-button') && element.tagName !== 'VEGA-CALENDAR-EVENT';
   }
 }
-__decorate$i([
+__decorate$l([
   MapToComponentField()
 ], VegaCalendarMonthViewRenderer.prototype, "viewMode", void 0);
-__decorate$i([
+__decorate$l([
   MapToComponentField()
 ], VegaCalendarMonthViewRenderer.prototype, "calendarView", void 0);
-__decorate$i([
+__decorate$l([
   MapToComponentField()
 ], VegaCalendarMonthViewRenderer.prototype, "currentPeriod", void 0);
-__decorate$i([
+__decorate$l([
   MapToComponentField()
 ], VegaCalendarMonthViewRenderer.prototype, "calendarViewController", void 0);
-__decorate$i([
+__decorate$l([
   MapToComponentField()
 ], VegaCalendarMonthViewRenderer.prototype, "currentPeriodController", void 0);
-__decorate$i([
+__decorate$l([
   MapToComponentField()
 ], VegaCalendarMonthViewRenderer.prototype, "monthEventRenderer", void 0);
-__decorate$i([
+__decorate$l([
   MapToComponentField()
 ], VegaCalendarMonthViewRenderer.prototype, "dateDblClickEmitter", void 0);
 
-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;
@@ -458,29 +468,29 @@ class VegaCalendarViewWithTimeRenderer extends VegaSlimmer {
     this.dateDblClickEmitter.emit({ year, month, date, hour });
   }
 }
-__decorate$h([
+__decorate$k([
   MapToComponentField()
 ], VegaCalendarViewWithTimeRenderer.prototype, "viewMode", void 0);
-__decorate$h([
+__decorate$k([
   MapToComponentField()
 ], VegaCalendarViewWithTimeRenderer.prototype, "timeLineRenderer", void 0);
-__decorate$h([
+__decorate$k([
   MapToComponentField()
 ], VegaCalendarViewWithTimeRenderer.prototype, "dayViewTimedEventRenderer", void 0);
-__decorate$h([
+__decorate$k([
   MapToComponentField()
 ], VegaCalendarViewWithTimeRenderer.prototype, "dayViewFullDayEventRenderer", void 0);
-__decorate$h([
+__decorate$k([
   MapToComponentField()
 ], VegaCalendarViewWithTimeRenderer.prototype, "calendarView", void 0);
-__decorate$h([
+__decorate$k([
   MapToComponentField()
 ], VegaCalendarViewWithTimeRenderer.prototype, "calendarViewController", void 0);
-__decorate$h([
+__decorate$k([
   MapToComponentField()
 ], VegaCalendarViewWithTimeRenderer.prototype, "dateDblClickEmitter", void 0);
 
-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;
@@ -614,19 +624,19 @@ class VegaCalendarTimeLineRenderer extends VegaSlimmer {
     }
   }
 }
-__decorate$g([
+__decorate$j([
   MapToComponentField()
 ], VegaCalendarTimeLineRenderer.prototype, "timeFormat", void 0);
-__decorate$g([
+__decorate$j([
   MapToComponentField()
 ], VegaCalendarTimeLineRenderer.prototype, "viewMode", void 0);
-__decorate$g([
+__decorate$j([
   MapToComponentMethod('watchViewModeChange')
 ], VegaCalendarTimeLineRenderer.prototype, "updateTimeLine", null);
-__decorate$g([
+__decorate$j([
   MapToComponentMethod('disconnectedCallback')
 ], VegaCalendarTimeLineRenderer.prototype, "clearTimer", null);
-__decorate$g([
+__decorate$j([
   MapToComponentMethod('connectedCallback')
 ], VegaCalendarTimeLineRenderer.prototype, "updateTimeLineIfComponentAddBack", null);
 
@@ -1065,7 +1075,7 @@ class MonthPeriod extends CalendarPeriod {
 }
 MonthPeriod.DISPLAY_DATE_COUNT = 6 * 7;
 
-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;
@@ -1118,23 +1128,23 @@ class VegaCalendarViewController extends VegaSlimmer {
     this.calendarView = newView;
   }
 }
-__decorate$f([
+__decorate$i([
   MapToComponentField({ writable: true })
 ], VegaCalendarViewController.prototype, "calendarView", void 0);
-__decorate$f([
+__decorate$i([
   MapToComponentField()
 ], VegaCalendarViewController.prototype, "currentPeriod", void 0);
-__decorate$f([
+__decorate$i([
   MapToComponentField()
 ], VegaCalendarViewController.prototype, "currentPeriodController", void 0);
-__decorate$f([
+__decorate$i([
   MapToComponentMethod('componentWillLoad')
 ], VegaCalendarViewController.prototype, "initialCalendarView", null);
-__decorate$f([
+__decorate$i([
   MapToComponentMethod('watchCurrentPeriodChange')
 ], VegaCalendarViewController.prototype, "generateCalendarView", 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;
@@ -1231,26 +1241,26 @@ class VegaCalendarCurrentPeriodController extends VegaSlimmer {
     };
   }
 }
-__decorate$e([
+__decorate$h([
   MapToComponentField({ writable: true })
 ], VegaCalendarCurrentPeriodController.prototype, "currentPeriod", void 0);
-__decorate$e([
+__decorate$h([
   MapToComponentField()
 ], VegaCalendarCurrentPeriodController.prototype, "changeEventEmitter", void 0);
-__decorate$e([
+__decorate$h([
   MapToComponentField({ writable: true })
 ], VegaCalendarCurrentPeriodController.prototype, "viewMode", void 0);
-__decorate$e([
+__decorate$h([
   MapToComponentMethod('componentWillLoad')
 ], VegaCalendarCurrentPeriodController.prototype, "initialCurrentPeriod", null);
-__decorate$e([
+__decorate$h([
   MapToComponentMethod('watchCurrentPeriodChange')
 ], VegaCalendarCurrentPeriodController.prototype, "emitChangeEvent", null);
-__decorate$e([
+__decorate$h([
   MapToComponentMethod('watchViewModeChange')
 ], VegaCalendarCurrentPeriodController.prototype, "updateCurrentPeriodByViewMode", null);
 
-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;
@@ -1353,12 +1363,14 @@ class VegaCalendarMonthEventRenderer extends VegaSlimmer {
               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,
               });
             })))));
     }
@@ -1403,22 +1415,22 @@ class VegaCalendarMonthEventRenderer extends VegaSlimmer {
     return rowEvents;
   }
 }
-__decorate$d([
+__decorate$g([
   MapToComponentField()
 ], VegaCalendarMonthEventRenderer.prototype, "viewMode", void 0);
-__decorate$d([
+__decorate$g([
   MapToComponentField()
 ], VegaCalendarMonthEventRenderer.prototype, "host", void 0);
-__decorate$d([
+__decorate$g([
   MapToComponentField()
 ], VegaCalendarMonthEventRenderer.prototype, "calendarEventController", void 0);
-__decorate$d([
+__decorate$g([
   MapToComponentField()
 ], VegaCalendarMonthEventRenderer.prototype, "eventItemRenderer", void 0);
-__decorate$d([
+__decorate$g([
   MapToComponentField()
 ], VegaCalendarMonthEventRenderer.prototype, "fullDayEventLayoutRenderer", void 0);
-__decorate$d([
+__decorate$g([
   MapToComponentMethod('componentWillLoad')
 ], VegaCalendarMonthEventRenderer.prototype, "addMaxDisplayCountChange", null);
 
@@ -2253,7 +2265,7 @@ class CalendarEvent {
   }
 }
 
-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;
@@ -2359,23 +2371,23 @@ class VegaCalendarEventController extends VegaSlimmer {
     }
   }
 }
-__decorate$c([
+__decorate$f([
   MapToComponentField({ writable: true })
 ], VegaCalendarEventController.prototype, "calendarEvents", void 0);
-__decorate$c([
+__decorate$f([
   MapToComponentField()
 ], VegaCalendarEventController.prototype, "currentPeriod", void 0);
-__decorate$c([
+__decorate$f([
   MapToComponentField()
 ], VegaCalendarEventController.prototype, "events", void 0);
-__decorate$c([
+__decorate$f([
   MapToComponentMethod('watchEventsChange')
 ], VegaCalendarEventController.prototype, "updateAfterEventChange", null);
-__decorate$c([
+__decorate$f([
   MapToComponentMethod('componentWillLoad')
 ], VegaCalendarEventController.prototype, "updateWhenComponentWillLoad", null);
 
-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;
@@ -2391,9 +2403,9 @@ class VegaCalendarEventItemRenderer extends VegaSlimmer {
    * @returns {HTMLVegaCalendarEventElement} calendar event element
    */
   render(item, classMap) {
-    return (h("vega-calendar-event", { key: item.eventKey, calendarEvent: item, class: classMap, onKeyDown: createEnterKeyHandlerToTriggerClick(), 
+    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) }));
+      onClick: () => this.handleEventClick(item) }, !item.isRepeatEvent && h("slot", { name: getCalendarEventSlotName(item.event.key) })));
   }
   /**
    * emit vega click event
@@ -2405,14 +2417,17 @@ class VegaCalendarEventItemRenderer extends VegaSlimmer {
   }
 }
 VegaCalendarEventItemRenderer.backgroundColorModeEventHeight = 18;
-__decorate$b([
+__decorate$e([
+  MapToComponentField()
+], VegaCalendarEventItemRenderer.prototype, "host", void 0);
+__decorate$e([
   MapToComponentField()
 ], VegaCalendarEventItemRenderer.prototype, "calendarView", void 0);
-__decorate$b([
+__decorate$e([
   MapToComponentField()
 ], VegaCalendarEventItemRenderer.prototype, "eventClickEmitter", 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;
@@ -2464,28 +2479,29 @@ class VegaCalendarEventResponsiveController extends PageResizeObserverSlimmer {
   }
 }
 VegaCalendarEventResponsiveController.monthDateTitleHeight = 26;
-__decorate$a([
+__decorate$d([
   MapToComponentField()
 ], VegaCalendarEventResponsiveController.prototype, "host", void 0);
-__decorate$a([
+__decorate$d([
   MapToComponentField()
 ], VegaCalendarEventResponsiveController.prototype, "monthEventRenderer", void 0);
-__decorate$a([
+__decorate$d([
   MapToComponentField()
 ], VegaCalendarEventResponsiveController.prototype, "viewMode", void 0);
-__decorate$a([
+__decorate$d([
   MapToComponentMethod('componentDidLoad')
 ], VegaCalendarEventResponsiveController.prototype, "updateMaxDisplayCount", null);
-__decorate$a([
+__decorate$d([
   MapToComponentMethod('watchViewModeChange')
 ], VegaCalendarEventResponsiveController.prototype, "updateMaxDisplayCountAfterSwitchToMonthView", 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;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+/** renders all-day events in a calendar view, with options to display a limited number of events and show a "more" button for additional events. */
 class VegaCalendarFullDayEventRenderer extends VegaSlimmer {
   /**
    * render current preiod all day events
@@ -2500,39 +2516,70 @@ class VegaCalendarFullDayEventRenderer extends VegaSlimmer {
         .filter((eventItem) => eventItem.isAllDayEvent || eventItem.isGroupEvent());
     });
     const orderEvents = this.fullDayEventLayoutRenderer.sortLongEvents(events);
-    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(orderEvents[index], index))))));
+    const displayEvents = this.filterDisplayEvents(orderEvents);
+    return (h("div", { class: "calendar-view-event-all" }, viewSource.map((item, index) => (h("div", { class: "event-all-col border-divider-left", key: item.date }, this.renderCurrentFullDayEvents(displayEvents[index], index, orderEvents[index]))))));
   }
   /**
    * render current date all day events
    *
-   * @param {Nullable<CalendarEvent>[]} events calendar events
+   * @param {Nullable<CalendarEvent>[]} events displayed calendar events
    * @param {number} currentViewIndex the current date index of the array
+   * @param {Nullable<CalendarEvent>[]} allEvents all calendar events
    * @returns {HTMLVegaCalendarEventElement[]} event component array
    */
-  renderCurrentFullDayEvents(events, currentViewIndex) {
+  renderCurrentFullDayEvents(events, currentViewIndex, allEvents) {
     const height = events.length * VegaCalendarEventItemRenderer.backgroundColorModeEventHeight - 2;
+    const hideEventsLength = allEvents.slice(events.length).filter(Boolean).length;
     return (h(Fragment, null,
       h("div", { class: "placeholder-block", style: { height: height + 'px' } },
         h("span", null,
           events.length,
           " events")),
-      this.fullDayEventLayoutRenderer.render(events, currentViewIndex)));
+      this.fullDayEventLayoutRenderer.render(events, currentViewIndex),
+      hideEventsLength > 0 && this.dayViewFullDayEventMoreButtonRenderer.render(hideEventsLength)));
+  }
+  /**
+   * Get the display events base on the show all events flag
+   *
+   * @param {Nullable<CalendarEvent>[][]} rowEvents row events array
+   * @returns {Nullable<CalendarEvent>[][]} the part of the events or the whole events
+   */
+  filterDisplayEvents(rowEvents) {
+    if (!this.showAllEventsInDayOrWeekView) {
+      const result = [];
+      const maxLength = VegaCalendarFullDayEventRenderer.maxDisplayEventLength;
+      rowEvents.forEach((events) => {
+        const displayEvents = events.length > maxLength ? events.slice(0, maxLength) : events;
+        result.push(displayEvents);
+      });
+      return result;
+    }
+    else {
+      return rowEvents;
+    }
   }
 }
-__decorate$9([
+VegaCalendarFullDayEventRenderer.maxDisplayEventLength = 2;
+__decorate$c([
   MapToComponentField()
 ], VegaCalendarFullDayEventRenderer.prototype, "calendarView", void 0);
-__decorate$9([
+__decorate$c([
   MapToComponentField()
 ], VegaCalendarFullDayEventRenderer.prototype, "calendarEventController", void 0);
-__decorate$9([
+__decorate$c([
   MapToComponentField()
 ], VegaCalendarFullDayEventRenderer.prototype, "eventItemRenderer", void 0);
-__decorate$9([
+__decorate$c([
   MapToComponentField()
 ], VegaCalendarFullDayEventRenderer.prototype, "fullDayEventLayoutRenderer", void 0);
+__decorate$c([
+  MapToComponentField()
+], VegaCalendarFullDayEventRenderer.prototype, "showAllEventsInDayOrWeekView", void 0);
+__decorate$c([
+  MapToComponentField()
+], VegaCalendarFullDayEventRenderer.prototype, "dayViewFullDayEventMoreButtonRenderer", void 0);
 
-var __decorate$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;
@@ -2597,7 +2644,7 @@ class VegaCalendarDayViewEventLayoutRenderer extends VegaSlimmer {
   }
 }
 VegaCalendarDayViewEventLayoutRenderer.totalNumberOfCells = 24 * 4;
-__decorate$8([
+__decorate$b([
   MapToComponentField()
 ], VegaCalendarDayViewEventLayoutRenderer.prototype, "eventItemRenderer", void 0);
 
@@ -2883,7 +2930,7 @@ class VegaCalendarEventSorter {
   }
 }
 
-var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -2922,13 +2969,13 @@ class VegaCalendarTimedEventRenderer extends VegaSlimmer {
     return this.dayViewEventLayoutRenderer.render(layout);
   }
 }
-__decorate$7([
+__decorate$a([
   MapToComponentField()
 ], VegaCalendarTimedEventRenderer.prototype, "calendarView", void 0);
-__decorate$7([
+__decorate$a([
   MapToComponentField()
 ], VegaCalendarTimedEventRenderer.prototype, "calendarEventController", void 0);
-__decorate$7([
+__decorate$a([
   MapToComponentField()
 ], VegaCalendarTimedEventRenderer.prototype, "dayViewEventLayoutRenderer", void 0);
 
@@ -3097,7 +3144,7 @@ class VegaCalendarFullDayEventLayoutGenerator extends VegaCalendarBaseEventLayou
   }
 }
 
-var __decorate$6 = (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);
   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;
@@ -3182,19 +3229,63 @@ class VegaCalendarFullDayEventLayoutRenderer extends VegaSlimmer {
   }
 }
 VegaCalendarFullDayEventLayoutRenderer.monthViewEventOffsetTop = 26;
-__decorate$6([
+__decorate$9([
   MapToComponentField()
 ], VegaCalendarFullDayEventLayoutRenderer.prototype, "eventItemRenderer", void 0);
-__decorate$6([
+__decorate$9([
   MapToComponentField()
 ], VegaCalendarFullDayEventLayoutRenderer.prototype, "viewMode", void 0);
-__decorate$6([
+__decorate$9([
   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{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$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class VegaCalendarFullDayEventMoreButtonRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * Update the show all flag to true when click the more button
+     *
+     * @param {MouseEvent} e event object
+     */
+    this.updateShowAllFlag = (e) => {
+      e.stopPropagation();
+      this.showAllEventsInDayOrWeekView = true;
+    };
+  }
+  /**
+   * Render the more button element
+   *
+   * @param {number} count the hidden elements count
+   * @returns {HTMLElement} more button
+   */
+  render(count) {
+    if (!this.showAllEventsInDayOrWeekView) {
+      return (h("div", { tabIndex: 0, role: "button", class: "more-button", onKeyDown: createEnterKeyHandlerToTriggerClick(), onClick: this.updateShowAllFlag }, `${count} More`));
+    }
+  }
+  /**
+   * Reset the show all event flag when view mode change
+   */
+  resetShowAllFlag() {
+    this.showAllEventsInDayOrWeekView = false;
+  }
+}
+__decorate$8([
+  MapToComponentField({ writable: true })
+], VegaCalendarFullDayEventMoreButtonRenderer.prototype, "showAllEventsInDayOrWeekView", void 0);
+__decorate$8([
+  MapToComponentMethod('watchViewModeChange')
+], VegaCalendarFullDayEventMoreButtonRenderer.prototype, "resetShowAllFlag", null);
+
+const vegaCalendarCss = ".border-divider-top{border:1px solid rgba(var(--v-border-divider-secondary, 199, 217, 229, 1));border-left-width:0px;border-right-width:0px;border-bottom-width:0px}.border-divider-left{border:1px solid rgba(var(--v-border-divider-secondary, 199, 217, 229, 1));border-top-width:0px;border-right-width:0px;border-bottom-width:0px}.border-divider-right{border:1px solid rgba(var(--v-border-divider-secondary, 199, 217, 229, 1));border-top-width:0px;border-left-width:0px;border-bottom-width:0px}.border-divider-bottom{border:1px solid rgba(var(--v-border-divider-secondary, 199, 217, 229, 1));border-top-width:0px;border-left-width:0px;border-right-width:0px}:host{display:flex;flex-direction:column;border-radius:12px;border:1px solid rgba(var(--v-border-divider, 171, 198, 216, 1));background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));overflow:hidden;width:100%;height:100%;box-sizing:border-box;max-height:1966px}.calendar-switch-panel{padding:24px;border-bottom-width:1px;border-top-width:0px;border-left-width:0px;border-right-width:0px;border-style:solid;border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));flex-shrink:0;width:100%;box-sizing:border-box}.calendar-switch-panel .calendar-date-switch-container{display:flex;gap:8px;align-items:center;flex-direction:row}.calendar-switch-panel .calendar-view-switch-container{display:flex;gap:16px;align-items:center;flex-direction:row}.calendar-switch-panel .calendar-current-date{padding-left:8px}.calendar-view{width:100%;position:relative;flex-grow:1;overflow-y:auto;overflow-x:hidden}.calendar-view-month .calendar-view-month-container{width:100%;display:grid;min-height:100%;grid-template-rows:43px repeat(6, minmax(64px, 1fr))}.calendar-view-month .calendar-view-title{background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));top:0;left:0;z-index:62}.calendar-view-month .calendar-view-title div{padding-top:12px;padding-bottom:12px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;text-align:center}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-month .calendar-view-title div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-month .calendar-view-title div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-month .calendar-view-title div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}.calendar-view-month .calendar-view-row{position:relative;display:grid;grid-template-rows:1fr;grid-template-columns:repeat(7, minmax(64px, 1fr))}.calendar-view-month .calendar-view-row.calendar-view-title{position:sticky}.calendar-view-month .calendar-view-row:last-child{border-bottom-width:0px}.calendar-view-month .calendar-view-row .row-cell{overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}.calendar-view-month .calendar-view-row .row-cell:last-child{border-right-width:0px}.calendar-view-month .calendar-view-row .row-cell .date{padding-top:4px;padding-bottom:4px;padding-right:12px;padding-left:8px}.calendar-view-month .calendar-view-row .row-cell .date>div{display:inline-block;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-month .calendar-view-row .row-cell .date>div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-month .calendar-view-row .row-cell .date>div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-month .calendar-view-row .row-cell .date>div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}.calendar-view-month .calendar-view-row .row-cell .date .month-block{margin-right:2px}.calendar-view-month .calendar-view-row .row-cell .date .grid-col{text-align:center;border-top-left-radius:9999px;border-bottom-left-radius:9999px;border-top-right-radius:9999px;border-bottom-right-radius:9999px;cursor:pointer;width:18px;height:18px;line-height:18px}.calendar-view-month .calendar-view-row .row-cell .date .grid-col:hover{background-color:rgba(var(--v-bg-action-secondary-hover, 4, 112, 236, 0.1))}.calendar-view-month .calendar-view-row .row-cell .date .grid-col:active{background-color:rgba(var(--v-bg-action-secondary-active, 29, 65, 195, 0.1))}.calendar-view-month .calendar-view-row .row-cell .date .grid-col:focus-visible{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:2px}.calendar-view-month .calendar-view-row .row-cell.current-month-day .date>div{color:rgba(var(--v-text-primary, 32, 54, 69, 1))}.calendar-view-month .calendar-view-row .row-cell.disabled{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1))}.calendar-view-month .calendar-view-row .row-cell.disabled .date>div{color:rgba(var(--v-text-disabled, 176, 180, 181, 1))}.calendar-view-month .calendar-view-row .row-cell.active .date .grid-col{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1));border-top-left-radius:9999px;border-bottom-left-radius:9999px;color:rgba(var(--v-text-on-action, 252, 252, 252, 1))}.calendar-view-month .calendar-view-row .row-cell.active .date .grid-col:hover{background-color:rgba(var(--v-bg-action-hover, 4, 112, 236, 1))}.calendar-view-month .calendar-view-row .row-cell.active .date .grid-col:active{background-color:rgba(var(--v-bg-action-active, 29, 65, 195, 1))}.calendar-view-month .calendar-view-row .row-cell.active .date .grid-col:focus-visible{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:2px}.calendar-view-container{width:100%}.calendar-view-container .calendar-view-title-container{background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));position:sticky;top:0;left:0;z-index:62}.calendar-view-container .calendar-view-row{box-sizing:border-box;width:100%;display:flex;flex-direction:row}.calendar-view-container .calendar-view-row .time-line,.calendar-view-container .calendar-view-row .time-line-empty,.calendar-view-container .calendar-view-row .time-line-all{width:72px;text-align:right;padding-right:8px;box-sizing:border-box;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));flex-shrink:0}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-container .calendar-view-row .time-line,.calendar-view-container .calendar-view-row .time-line-empty,.calendar-view-container .calendar-view-row .time-line-all{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-container .calendar-view-row .time-line,.calendar-view-container .calendar-view-row .time-line-empty,.calendar-view-container .calendar-view-row .time-line-all{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-container .calendar-view-row .time-line,.calendar-view-container .calendar-view-row .time-line-empty,.calendar-view-container .calendar-view-row .time-line-all{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}.calendar-view-container .calendar-view-title{width:100%}.calendar-view-container .calendar-view-title>div{padding:12px;padding-bottom:8px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;text-align:center;display:flex;flex-direction:column;gap:8px}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-container .calendar-view-title>div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-container .calendar-view-title>div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-container .calendar-view-title>div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}.calendar-view-container .calendar-view-title .week-day{color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-container .calendar-view-title .week-day{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-container .calendar-view-title .week-day{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-container .calendar-view-title .week-day{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}}.calendar-view-container .calendar-view-title .active div{color:rgba(var(--v-text-link, 19, 98, 226, 1))}.calendar-view-container .calendar-view-event-all-container{align-items:center}.calendar-view-container .calendar-view-event-all{display:grid;grid-template-rows:1fr;flex-grow:1;min-height:18px}.calendar-view-container .calendar-view-day-container .time-line{display:grid;grid-template-rows:16px repeat(24, minmax(74px, 1fr))}.calendar-view-container .calendar-view-day-container .time-line .time-text{margin-top:-9px}.calendar-view-container .calendar-view-day-container .calendar-view-content{width:100%}.calendar-view-container .calendar-view-day-container .calendar-view-content .grid-col{display:grid;grid-template-rows:16px repeat(24, minmax(74px, 1fr));grid-template-columns:minmax(64px, 1fr)}.calendar-view-container .calendar-view-day-container .calendar-view-content .grid-col>.border-divider-top:first-child{border-top-width:0px}.calendar-view-container .calendar-view-content-container{width:100%;position:relative}.calendar-view-week .calendar-view-container{min-height:100%}.calendar-view-week .calendar-view-container .calendar-view-title{display:grid;grid-template-rows:1fr;grid-template-columns:repeat(7, minmax(64px, 1fr))}.calendar-view-week .calendar-view-container .calendar-view-event-all{grid-template-columns:repeat(7, minmax(64px, 1fr))}.calendar-view-week .calendar-view-container .calendar-view-day-container .calendar-view-content{display:grid;grid-template-columns:repeat(7, minmax(64px, 1fr))}.calendar-view-week .time-marker-container .time-marker{display:grid;grid-template-columns:repeat(7, minmax(64px, 1fr))}.calendar-view-week .day-event-container{display:grid;grid-template-columns:repeat(7, minmax(64px, 1fr))}.calendar-view-day .calendar-view-container{min-height:100%}.time-marker-container{position:absolute;min-width:100%;left:0;top:16px;height:calc(100% - 16px);pointer-events:none}.time-marker-container.hidden{display:none}.time-marker-container .time-marker{position:absolute;height:2px;display:grid;min-width:100%;left:0;top:0;z-index:61}.time-marker-container .time-marker div{width:100%;height:2px;background-color:rgba(var(--v-bg-status-error, 255, 110, 139, 1));opacity:0.3}.time-marker-container .time-marker div.active{opacity:1;position:relative}.time-marker-container .time-marker div.active::before{content:\"\";display:block;border-top-left-radius:9999px;border-bottom-left-radius:9999px;border-top-right-radius:9999px;border-bottom-right-radius:9999px;position:absolute;width:8px;height:8px;background-color:rgba(var(--v-bg-status-error, 255, 110, 139, 1));top:-3px;left:-4px}.day-event-container{position:absolute;min-width:100%;left:0;top:16px;height:calc(100% - 16px);pointer-events:none}.day-event-container .day-event-col{height:100%;overflow:hidden}.day-event-container vega-calendar-event{pointer-events:auto;height:100%}.calendar-view-month .month-event-row{position:absolute;width:100%;overflow:hidden;height:calc(100% - 26px);left:0;bottom:0}.calendar-view-month .events-container{width:100%;box-sizing:border-box;overflow:hidden;padding:2px;display:flex;flex-direction:column;gap:2px;justify-content:space-between;flex-grow:1}.calendar-view-month .events-container .event-list{display:flex;flex-direction:column;gap:2px;flex-grow:1}.calendar-view-month .events-container .event-list .month-event-block{box-sizing:border-box;padding-left:2px;padding-right:3px}.calendar-view-month .events-container .month-event-more .more-button{display:inline-block;height:16px;font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px;color:rgba(var(--v-text-link, 19, 98, 226, 1));cursor:pointer;border-radius:2px}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-month .events-container .month-event-more .more-button{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-month .events-container .month-event-more .more-button{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-month .events-container .month-event-more .more-button{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}.calendar-view-month .events-container .month-event-more .more-button:focus-visible{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:0px}.calendar-view-container .calendar-view-event-all{position:relative}.calendar-view-container .calendar-view-event-all .placeholder-block{padding-top:2px;padding-bottom:2px;box-sizing:content-box}.calendar-view-container .calendar-view-event-all .placeholder-block span{display:none}.calendar-view-container .calendar-view-event-all .day-event-block{padding-top:2px;padding-right:2px;box-sizing:border-box;padding-left:3px}.calendar-view-container .calendar-view-event-all .more-button{display:inline-block;height:16px;font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px;color:rgba(var(--v-text-link, 19, 98, 226, 1));cursor:pointer;border-radius:2px;margin-left:2px;padding:2px}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-container .calendar-view-event-all .more-button{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-container .calendar-view-event-all .more-button{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-container .calendar-view-event-all .more-button{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}.calendar-view-container .calendar-view-event-all .more-button:focus-visible{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:0px}.calendar-view-container .calendar-view-event-all .event-all-col{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start}.calendar-view-container .day-event-col{position:relative}.calendar-view-container .day-event-col .time-event-block{box-sizing:border-box;padding-right:8px;padding-bottom:2px;padding-top:3px}.calendar-view-container .day-event-col .time-event-block vega-calendar-event.bg-shadow::part(event-container):not(:focus){outline:2px solid rgba(var(--v-bg-primary, 252, 252, 252, 1))}.calendar-view-container .day-event-col .time-event-block:focus-within{z-index:60 !important}.calendar-event-slot-container{display:none}";
 
-var __decorate$5 = (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);
@@ -3226,6 +3317,7 @@ const VegaCalendar = class {
     this.currentPeriodController = new VegaCalendarCurrentPeriodController();
     this.calendarViewController = new VegaCalendarViewController();
     this.dayViewFullDayEventRenderer = new VegaCalendarFullDayEventRenderer();
+    this.dayViewFullDayEventMoreButtonRenderer = new VegaCalendarFullDayEventMoreButtonRenderer();
     this.dayViewTimedEventRenderer = new VegaCalendarTimedEventRenderer();
     this.eventItemRenderer = new VegaCalendarEventItemRenderer();
     this.dayViewEventLayoutRenderer = new VegaCalendarDayViewEventLayoutRenderer();
@@ -3237,6 +3329,7 @@ const VegaCalendar = class {
     this.dateDblClickEmitter = createEventEmitSlimmer(VegaCalendar, VegaDateDblClick);
     this.changeEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.switchPanelRenderer.getSwitchPanelRef());
     this.timeFormatNotifySlimmer = createSubStateNotifySlimmer(VegaCalendar, 'timeFormat', 'watchTimeFormat');
+    this.showAllEventsInDayOrWeekView = false;
     this.calendarEvents = [];
     /**
      * Specifies the current view mode of the calendar.
@@ -3288,73 +3381,76 @@ const VegaCalendar = class {
     "timeFormat": ["watchTimeFormat"]
   }; }
 };
-__decorate$5([
+__decorate$7([
   InjectVegaGlobalSlimmer()
 ], VegaCalendar.prototype, "globalSlimmer", void 0);
-__decorate$5([
+__decorate$7([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
-__decorate$5([
+__decorate$7([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "renderer", void 0);
-__decorate$5([
+__decorate$7([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "switchPanelRenderer", void 0);
-__decorate$5([
+__decorate$7([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "viewRenderer", void 0);
-__decorate$5([
+__decorate$7([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "monthViewRenderer", void 0);
-__decorate$5([
+__decorate$7([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "viewWithTimeRenderer", void 0);
-__decorate$5([
+__decorate$7([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "timeLineRenderer", void 0);
-__decorate$5([
+__decorate$7([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "monthEventRenderer", void 0);
-__decorate$5([
+__decorate$7([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "currentPeriodController", void 0);
-__decorate$5([
+__decorate$7([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "calendarViewController", void 0);
-__decorate$5([
+__decorate$7([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "dayViewFullDayEventRenderer", void 0);
-__decorate$5([
+__decorate$7([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "dayViewFullDayEventMoreButtonRenderer", void 0);
+__decorate$7([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "dayViewTimedEventRenderer", void 0);
-__decorate$5([
+__decorate$7([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "eventItemRenderer", void 0);
-__decorate$5([
+__decorate$7([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "dayViewEventLayoutRenderer", void 0);
-__decorate$5([
+__decorate$7([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "fullDayEventLayoutRenderer", void 0);
-__decorate$5([
+__decorate$7([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "calendarEventController", void 0);
-__decorate$5([
+__decorate$7([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "eventResponsiveController", void 0);
-__decorate$5([
+__decorate$7([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "changeEventEmitter", void 0);
-__decorate$5([
+__decorate$7([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "eventClickEmitter", void 0);
-__decorate$5([
+__decorate$7([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "dateDblClickEmitter", void 0);
-__decorate$5([
+__decorate$7([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "changeEventPrevent", void 0);
-__decorate$5([
+__decorate$7([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "timeFormatNotifySlimmer", void 0);
 VegaCalendar.style = vegaCalendarCss;
@@ -3363,7 +3459,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$4 = (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;
@@ -3384,6 +3480,14 @@ class VegaCalendarEventRenderer extends VegaSlimmer {
   getEventTitleContainerRef() {
     return this.eventTitleContainerRef;
   }
+  /**
+   * Get the calendar event slot container element
+   *
+   * @returns {Nullable<HTMLDivElement>} a div element
+   */
+  getSlotContainerRef() {
+    return this.slotContainerRef;
+  }
   /**
    * The function conditionally renders either a group event or a normal event based on a boolean flag.
    *
@@ -3392,9 +3496,17 @@ class VegaCalendarEventRenderer extends VegaSlimmer {
   render() {
     return (h(Fragment, null,
       this.injectBackgroundColorStyle(),
-      this.calendarEvent.isAllDayEvent || this.calendarEvent.isGroupEvent()
-        ? this.renderBackgroundModeEvent()
-        : this.renderNormalEvent()));
+      this.calendarEventRender()));
+  }
+  /**
+   * The vega calendar event default render
+   *
+   * @returns {HTMLElement} calendar event element
+   */
+  calendarEventRender() {
+    return this.calendarEvent.isAllDayEvent || this.calendarEvent.isGroupEvent()
+      ? this.renderBackgroundModeEvent()
+      : this.renderNormalEvent();
   }
   /**
    * render background mode event element
@@ -3404,10 +3516,11 @@ class VegaCalendarEventRenderer extends VegaSlimmer {
   renderBackgroundModeEvent() {
     const disabled = this.calendarEvent.disabled;
     return (h("div", { role: "button", tabIndex: 0, class: {
+        'slot-container': this.slotMode,
         'background-color-mode': true,
         'event-bg-color': !disabled,
         'bg-disabled': disabled,
-      } }, this.calendarEvent.title));
+      }, ref: (node) => (this.slotContainerRef = node) }, this.slotMode ? this.getSlotElement() : this.calendarEvent.title));
   }
   /**
    * render event element
@@ -3415,31 +3528,27 @@ class VegaCalendarEventRenderer extends VegaSlimmer {
    * @returns {HTMLAnchorElement} event element
    */
   renderNormalEvent() {
-    const { variant = 'primary', disabled, startTime, endTime, title, } = this.calendarEvent;
+    const { variant = 'primary', disabled } = this.calendarEvent;
     const isMonthEvent = !this.host.classList.contains('day-event');
     const classMap = {
+      'slot-container': this.slotMode,
       'event-container': true,
       'disabled': disabled,
       [variant]: true,
     };
     if (isMonthEvent) {
-      return (h("div", { role: "button", tabIndex: 0, class: classMap },
-        this.renderEventStatus(),
-        h("div", { class: "event-title" }, `${this.formatDisplayTime(startTime)} ${title}`)));
+      return (h("div", { role: "button", tabIndex: 0, class: classMap, ref: (node) => (this.slotContainerRef = node) },
+        !this.slotMode && this.renderEventStatus(),
+        this.slotMode ? this.getSlotElement() : this.defaultNormalMonthEventContentRender()));
     }
     else {
       const eventDuration = this.calendarEvent.getEventDuration();
-      return (h("div", { part: "event-container", class: Object.assign(Object.assign({}, classMap), { 'vertical': eventDuration > 30, 'duration-half-an-hour': eventDuration === 30, 'event-bg-color': !disabled, 'bg-disabled': disabled }), role: "button", tabIndex: 0 },
-        this.renderEventStatus(),
+      return (h("div", { part: "event-container", class: Object.assign(Object.assign({}, classMap), { 'vertical': eventDuration > 30, 'duration-half-an-hour': eventDuration === 30, 'event-bg-color': !disabled, 'bg-disabled': disabled }), role: "button", tabIndex: 0, ref: (node) => (this.slotContainerRef = node) },
+        !this.slotMode && this.renderEventStatus(),
         h("div", { class: "cover-block" }),
-        h("div", { class: "event-content" },
-          h("div", { class: {
-              'event-title': true,
-              'title-word-wrap': eventDuration > 30,
-            }, ref: (node) => (this.eventTitleContainerRef = node) }, title),
-          h("div", { class: "event-time" },
-            h("vega-icon", { size: "size-12", icon: VegaInternalIconManager.getIconKey('clock-three') }),
-            h("span", null, `${this.formatDisplayTime(startTime)} - ${this.formatDisplayTime(endTime)}`)))));
+        this.slotMode
+          ? this.getSlotElement()
+          : this.defaultNormalTimedEventContentRender(eventDuration)));
     }
   }
   /**
@@ -3458,6 +3567,42 @@ class VegaCalendarEventRenderer extends VegaSlimmer {
           stripe: this.calendarEvent.variant === 'secondary',
         } })));
   }
+  /**
+   * Render the month view timed event.
+   *
+   * @returns {HTMLElement} a div element
+   */
+  defaultNormalMonthEventContentRender() {
+    const { startTime, title } = this.calendarEvent;
+    return h("div", { class: "event-title" }, `${this.formatDisplayTime(startTime)} ${title}`);
+  }
+  /**
+   * Render the day view timed event.
+   *
+   * @param {number} eventDuration the event duration
+   * @returns {HTMLElement} a div element
+   */
+  defaultNormalTimedEventContentRender(eventDuration) {
+    const { startTime, endTime, title } = this.calendarEvent;
+    return (h("div", { class: "event-content" },
+      h("div", { class: {
+          'event-title': true,
+          'title-word-wrap': eventDuration > 30,
+        }, ref: (node) => (this.eventTitleContainerRef = node) }, title),
+      h("div", { class: "event-time" },
+        h("vega-icon", { size: "size-12", icon: VegaInternalIconManager.getIconKey('clock-three') }),
+        h("span", null, `${this.formatDisplayTime(startTime)} - ${this.formatDisplayTime(endTime)}`))));
+  }
+  /**
+   * Return a slot element if the calendar is not a repeat event
+   *
+   * @returns {Nullable<HTMLElement>} slot element or null
+   */
+  getSlotElement() {
+    if (!this.calendarEvent.isRepeatEvent) {
+      return h("slot", null);
+    }
+  }
   /**
    * render the custom color style tag element
    *
@@ -3498,20 +3643,23 @@ class VegaCalendarEventRenderer extends VegaSlimmer {
     'clock-three': clockThree,
   });
 })();
-__decorate$4([
+__decorate$6([
   MapToComponentField()
 ], VegaCalendarEventRenderer.prototype, "host", void 0);
-__decorate$4([
+__decorate$6([
   MapToComponentField()
 ], VegaCalendarEventRenderer.prototype, "timeFormat", void 0);
-__decorate$4([
+__decorate$6([
   MapToComponentField()
 ], VegaCalendarEventRenderer.prototype, "calendarEvent", void 0);
-__decorate$4([
+__decorate$6([
+  MapToComponentField()
+], VegaCalendarEventRenderer.prototype, "slotMode", void 0);
+__decorate$6([
   MapToComponentField()
 ], VegaCalendarEventRenderer.prototype, "colorController", void 0);
 
-var __decorate$3 = (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;
@@ -3534,11 +3682,11 @@ class VegaCalendarEventBgColorController extends VegaSlimmer {
     }
   }
 }
-__decorate$3([
+__decorate$5([
   MapToComponentField()
 ], VegaCalendarEventBgColorController.prototype, "calendarEvent", void 0);
 
-var __decorate$2 = (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);
   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;
@@ -3561,11 +3709,11 @@ class VegaCalendarEventSubStateController extends SubStateObserverSlimmer {
     });
   }
 }
-__decorate$2([
+__decorate$4([
   MapToComponentField({ writable: true })
 ], VegaCalendarEventSubStateController.prototype, "timeFormat", void 0);
 
-var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -3597,13 +3745,89 @@ class VegaCalendarTitleMaxHeightController extends VegaSlimmer {
     }
   }
 }
-__decorate$1([
+__decorate$3([
   MapToComponentField()
 ], VegaCalendarTitleMaxHeightController.prototype, "renderer", void 0);
 
-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;padding-left:8px;padding-right:8px;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 .event-container{display:block;width:100%;border-radius:4px;cursor:pointer;box-sizing:border-box;overflow:hidden}:host(.month-event) .event-container{padding-left:2px;padding-right:2px;display:flex;flex-direction:row;gap:4px;align-items:center;min-height:16px}: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{padding-left:8px;padding-right:8px;position:relative}: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(.month-event.calendar-event-large-size) .background-color-mode{border-radius:4px;padding-top:4px;padding-bottom:4px}:host(.month-event.calendar-event-large-size) .event-container{padding-top:4px;padding-bottom:4px}.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$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** The controller will check the calendar render mode when component will mode and copy the slot element to calendar event if the calendar event is a repeat event or the event displayed in popover */
+class VegaCalendarEventSlotController extends VegaSlimmer {
+  /**
+   * Find the current calendar event slot element, if the slot element is exists, set the calendar even slotMode to true, and store the current slot element.
+   */
+  findTheCalendarEventSlot() {
+    if (this.calendarEvent) {
+      const { event: rawEvent } = this.calendarEvent;
+      const calendar = this.getParentCalendarElement();
+      if (calendar) {
+        const matchSlot = calendar.querySelector(`vega-calendar-event-slot[event-key='${rawEvent.key}']`);
+        if (matchSlot) {
+          this.slotMode = true;
+          this.matchSlotElement = matchSlot;
+        }
+      }
+    }
+  }
+  /**
+   * Append the current slot content to slot container if the calendar event is a repeat event or the calendar event render in a popover.
+   */
+  appendTheRepeatEventSlotToContainer() {
+    const slotContainerRef = this.renderer.getSlotContainerRef();
+    if (this.slotMode && slotContainerRef && this.matchSlotElement) {
+      if (this.calendarEvent.isRepeatEvent || this.isPopoverContent()) {
+        const contentElement = this.matchSlotElement.cloneNode(true);
+        contentElement.removeAttribute('slot');
+        const existSlot = slotContainerRef.querySelector('vega-calendar-event-slot');
+        if (!existSlot) {
+          slotContainerRef.appendChild(contentElement);
+        }
+      }
+    }
+  }
+  /**
+   * This method is responsible for finding and returning the parent `vega-calendar` element of the current component instance
+   *
+   * @returns {HTMLElement} The vega calendar element
+   */
+  getParentCalendarElement() {
+    return this.host['data-calendar-ref'];
+  }
+  /**
+   * Check the calendar is in popover
+   *
+   * @returns {boolean} true or false
+   */
+  isPopoverContent() {
+    return this.host.classList.contains('calendar-event-in-popover');
+  }
+}
+__decorate$2([
+  MapToComponentField()
+], VegaCalendarEventSlotController.prototype, "host", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaCalendarEventSlotController.prototype, "calendarEvent", void 0);
+__decorate$2([
+  MapToComponentField({ writable: true })
+], VegaCalendarEventSlotController.prototype, "slotMode", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaCalendarEventSlotController.prototype, "renderer", void 0);
+__decorate$2([
+  MapToComponentMethod('componentWillLoad')
+], VegaCalendarEventSlotController.prototype, "findTheCalendarEventSlot", null);
+__decorate$2([
+  MapToComponentMethod('componentDidLoad')
+], VegaCalendarEventSlotController.prototype, "appendTheRepeatEventSlotToContainer", null);
 
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+const vegaCalendarEventCss = ".bg-disabled{background-color:rgba(var(--v-bg-disabled, 176, 180, 181, 1))}:host{display:block;box-sizing:border-box;width:100%}:host .background-color-mode{border-radius:2px;color:rgba(var(--v-text-black, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px;cursor:pointer;overflow:hidden;white-space:nowrap}@media screen and (min-width: 768px) and (max-width: 1023px){:host .background-color-mode{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .background-color-mode{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .background-color-mode{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}:host .background-color-mode:not(.slot-container){padding-left:8px;padding-right:8px}:host .background-color-mode:focus{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:0px}:host .event-container{display:block;width:100%;border-radius:4px;cursor:pointer;box-sizing:border-box;overflow:hidden}:host .background-color-mode.slot-container{height:16px;line-height:16px}:host ::slotted(vega-calendar-event-slot){position:relative;pointer-events:none}:host(.month-event) .event-container{display:flex;flex-direction:row;gap:4px;align-items:center;min-height:16px}:host(.month-event) .event-container:not(.slot-container){padding-left:2px;padding-right:2px}:host(.month-event) .event-container .event-status{width:8px;height:8px;box-sizing:border-box;border-top-left-radius:9999px;border-bottom-left-radius:9999px;border-top-right-radius:9999px;border-bottom-right-radius:9999px;margin-left:2px;flex-shrink:0}:host(.month-event) .event-container .event-status span{display:none;width:100%;height:100%;border-top-left-radius:9999px;border-bottom-left-radius:9999px;border-top-right-radius:9999px;border-bottom-right-radius:9999px}:host(.month-event) .event-container .event-title{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.month-event) .event-container .event-title{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.month-event) .event-container .event-title{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.month-event) .event-container .event-title{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}:host(.month-event) .event-container.secondary .event-status span{display:block;background-size:4px 4px;opacity:0.8}:host(.month-event) .event-container.tertiary .event-status{padding:1px}:host(.month-event) .event-container.tertiary .event-status span{display:block;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1))}:host(.month-event) .event-container.disabled .event-status{background-color:rgba(var(--v-bg-disabled, 176, 180, 181, 1))}:host(.month-event) .event-container:hover{background-color:rgba(var(--v-bg-action-secondary-hover, 4, 112, 236, 0.1))}:host(.month-event) .event-container:active{background-color:rgba(var(--v-bg-action-secondary-active, 29, 65, 195, 0.1))}:host(.month-event) .event-container:focus{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:0px}:host(.day-event) .event-container{position:relative}:host(.day-event) .event-container:not(.slot-container){padding-left:8px;padding-right:8px}:host(.day-event) .event-container .event-status{position:absolute;width:4px;height:100%;left:0;top:0;z-index:1}:host(.day-event) .event-container .event-status span{display:none}:host(.day-event) .event-container .cover-block{position:absolute;height:100%;width:100%;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));border-radius:4px;left:0;top:0;opacity:0.7}:host(.day-event) .event-container .event-content,:host(.day-event) .event-container .event-time{display:flex;flex-direction:row;align-items:center}:host(.day-event) .event-container .event-content{gap:8px;position:relative;height:100%;box-sizing:border-box}:host(.day-event) .event-container .event-time{gap:4px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.day-event) .event-container .event-time{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.day-event) .event-container .event-time{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.day-event) .event-container .event-time{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}:host(.day-event) .event-container .event-time vega-icon{flex-shrink:0}:host(.day-event) .event-container .event-time span{white-space:nowrap}:host(.day-event) .event-container .event-title{color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.day-event) .event-container .event-title{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.day-event) .event-container .event-title{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.day-event) .event-container .event-title{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}:host(.day-event) .event-container .event-title.title-word-wrap{overflow:hidden}:host(.day-event) .event-container .event-title:not(.title-word-wrap){white-space:nowrap}:host(.day-event) .event-container.duration-half-an-hour{padding-top:8px;padding-bottom:8px}:host(.day-event) .event-container.vertical{height:100%}:host(.day-event) .event-container.vertical .event-content{flex-direction:column;align-items:flex-start;gap:4px;padding-top:8px;padding-bottom:8px}:host(.day-event) .event-container.secondary .event-status span,:host(.day-event) .event-container.tertiary .event-status span{display:block;position:absolute;border-top-left-radius:4px;border-bottom-left-radius:4px}:host(.day-event) .event-container.secondary .cover-block,:host(.day-event) .event-container.tertiary .cover-block{width:calc(100% - 2px);height:calc(100% - 2px);top:1px;left:1px}:host(.day-event) .event-container.secondary .event-status span{width:100%;height:100%;top:0px;left:0px;background-size:4px 4px;opacity:0.8}:host(.day-event) .event-container.secondary .cover-block{opacity:0.9}:host(.day-event) .event-container.tertiary .event-status span{background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));width:2px;height:calc(100% - 2px);top:1px;left:1px}:host(.day-event) .event-container.tertiary .cover-block{opacity:1}:host(.day-event) .event-container.disabled{background-color:rgba(var(--v-bg-disabled, 176, 180, 181, 1))}:host(.day-event) .event-container.disabled .event-status{background-color:rgba(var(--v-bg-disabled, 176, 180, 181, 1))}:host(.day-event) .event-container:focus{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:0px}:host(.day-event) .slot-container{min-height:16px}:host(.month-event.calendar-event-large-size) .background-color-mode{border-radius:4px}:host(.month-event.calendar-event-large-size) .background-color-mode:not(.slot-container){padding-top:4px;padding-bottom:4px}:host(.month-event.calendar-event-large-size) .event-container:not(.slot-container){padding-top:4px;padding-bottom:4px}:host(.month-event.calendar-event-large-size) .slot-container{height:24px;display:flex;align-items:center;line-height:24px}.stripe{background-image:linear-gradient(-45deg, transparent 25%, rgba(var(--v-bg-primary, 252, 252, 252, 1)) 25% 50%, transparent 50% 75%, rgba(var(--v-bg-primary, 252, 252, 252, 1)) 75% 100%)}";
+
+var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
     r = Reflect.decorate(decorators, target, key, desc);
@@ -3630,36 +3854,73 @@ 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();
     this.timeFormat = '24-hour';
+    this.slotMode = false;
   }
   render() {
+    slotPlaceholder(h("slot", null));
     return sanitizeVegaComponent(h(Host, null, this.calendarEvent ? this.renderer.render() : null), this.host);
   }
   get host() { return getElement(this); }
 };
-__decorate([
+__decorate$1([
   InjectVegaGlobalSlimmer()
 ], VegaCalendarEvent.prototype, "globalSlimmer", void 0);
-__decorate([
+__decorate$1([
   InjectVegaSlimmer()
 ], VegaCalendarEvent.prototype, "pageResizeObserverSlimmer", void 0);
-__decorate([
+__decorate$1([
   InjectVegaSlimmer()
 ], VegaCalendarEvent.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
-__decorate([
+__decorate$1([
   InjectVegaSlimmer()
 ], VegaCalendarEvent.prototype, "renderer", void 0);
-__decorate([
+__decorate$1([
   InjectVegaSlimmer()
 ], VegaCalendarEvent.prototype, "colorController", void 0);
-__decorate([
+__decorate$1([
+  InjectVegaSlimmer()
+], VegaCalendarEvent.prototype, "slotController", void 0);
+__decorate$1([
   InjectVegaSlimmer()
 ], VegaCalendarEvent.prototype, "subStateController", void 0);
-__decorate([
+__decorate$1([
   InjectVegaSlimmer()
 ], VegaCalendarEvent.prototype, "titleMaxHeightController", void 0);
 VegaCalendarEvent.style = vegaCalendarEventCss;
 
-export { VegaCalendar as vega_calendar, VegaCalendarEvent as vega_calendar_event };
+const vegaCalendarEventSlotCss = ":host{width:100%;height:100%;position:relative}";
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const VegaCalendarEventSlot = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.globalSlimmer = {};
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, { slot: getCalendarEventSlotName(this.eventKey) }, h("slot", null)), this.host);
+  }
+  get host() { return getElement(this); }
+};
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaCalendarEventSlot.prototype, "globalSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCalendarEventSlot.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+VegaCalendarEventSlot.style = vegaCalendarEventSlotCss;
+
+export { VegaCalendar as vega_calendar, VegaCalendarEvent as vega_calendar_event, VegaCalendarEventSlot as vega_calendar_event_slot };