@globalpayments/vega 2.26.0 → 2.28.0

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

@@ -2,35 +2,38 @@ import { h, F as Fragment, f as forceUpdate, r as registerInstance, c as createE
 import { s as sanitizeVegaComponent } from './component-cae24190.js';
 import { c as MapToComponentField, V as VegaSlimmer, M as MapToComponentMethod, L as LogUtility, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
 import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-b3f6ac79.js';
-import { D as DomNodeSubjectObserverFactory, d as domNodeSubjectFactory } from './dom-node-subject-observer-factory-0d4b85b8.js';
+import { D as DomNodeSubjectObserverFactory, d as domNodeSubjectFactory } from './dom-node-subject-observer-factory-9461cd67.js';
 import { a as VegaClick, e as VegaChange, b as VegaDropdownClick, f as VegaEventClick, g as VegaDateDblClick, h as VegaMoreActionClick } from './vega-event-id-7465a011.js';
-import { V as VegaInternalIconManager } from './internal-icon-manager-ebe6ecf4.js';
+import { V as VegaInternalIconManager } from './internal-icon-manager-9671142a.js';
 import { p as pad } from './date-732bc749.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-0315fa00.js';
-import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-d3883004.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-eee9fd41.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-345c46c5.js';
 import { i as VegaInternalCalendarMonthEventsChange } from './vega-internal-event-id-7e05cf4a.js';
 import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
 import { f as flatNestedArray } from './array-506b88b9.js';
-import { g as generateUUID } from './misc-9fdbcfbb.js';
-import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-8caeb03b.js';
+import { g as generateUUID } from './create-public-api-runtime-metrics-slimmer-928ad7f0.js';
+import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-994c1e1b.js';
 import { d as debounce } from './timer-9321173b.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
-import { c as createSubStateNotifySlimmer, S as SubStateObserverSlimmer } from './sub-state-observer-slimmer-46abe492.js';
+import { c as createSubStateNotifySlimmer, S as SubStateObserverSlimmer } from './sub-state-observer-slimmer-8eff5559.js';
+import { T as TranslationSlimmer } from './translation-slimmer-79f9a9c9.js';
 import { s as slotPlaceholder } from './placeholder-bf562081.js';
-import { p as isBackgroundColorTokenType } from './type-guard-467c9e3e.js';
-import { s as stateBackgroundColorFormatter } from './state-background-color-formatter-de7e6522.js';
+import { p as isBackgroundColorTokenType } from './type-guard-63caf78b.js';
+import { s as stateBackgroundColorFormatter } from './state-background-color-formatter-0540d006.js';
 import { b as parsePixelStringToNumber } from './pixel-f32c07ce.js';
+import './observer-3959f9dd.js';
 import './ui-0132dbb5.js';
-import './icon-manager-754cda3f.js';
-import './create-public-api-runtime-metrics-slimmer-dc9af92b.js';
+import './icon-manager-0f030f8a.js';
 import './dynamic-slimmer-90b8af32.js';
 import './internal-vega-event-manager-722461c1.js';
 import './vega-env-manager-8f8dc473.js';
-import './feature-flag-controller-a5fe5022.js';
+import './feature-flag-controller-10780eeb.js';
 import './index-0863eec6.js';
 import './number-e2519d1c.js';
-import './breakpoints-e59edf8d.js';
-import './ui-df46cc20.js';
+import './breakpoints-36a3ed69.js';
+import './ui-8424715a.js';
+import './translation-0fa7cf77.js';
+import './static-subject-title-6987a80b.js';
 import './regex-dfe11abf.js';
 import './typography-a8fc4764.js';
 
@@ -69,1047 +72,1146 @@ const chevronLeft = {
 };
 
 /**
- * get month name from the month number
- *
- * @param {Date} date the date object
- * @param {boolean} isShortName short or long name
- * @returns {string} the month English name
- */
-function getMonthName(date, isShortName = false) {
-  return date.toLocaleDateString('en-US', { month: isShortName ? 'short' : 'long' });
-}
-/**
- * The function `getTimeIndex` calculates the index of a given time string based on a specified time unit.
- *
- * @param {string} timeString - A string representing a time in the format "HH:MM", where HH is the hour and MM is the minutes.
- * @param {number} [unit=15] - The `unit` parameter in the `getTimeIndex` function is used to specify
- * the interval in minutes for dividing the day. By default, it is set to 15 minutes, meaning that the
- * day will be divided into 15-minute intervals.
- * @returns {number} the index of the given time string based on the specified time unit.
- */
-function getTimeIndex(timeString, unit = 15) {
-  const [hour, minutes] = timeString.split(':');
-  return Math.round((Number(hour) * 60 + Number(minutes)) / unit);
-}
-/**
- * Returns a string that includes the event key for a calendar event slot.
+ * Get a week days array
  *
- * @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.
+ * @param {number} firstWeekDay - The first week day (0: Sunday, 1: Monday, ...)
+ * @returns {number[]} - The week days array
  */
-function getCalendarEventSlotName(eventKey) {
-  return 'vega-calendar-event-slot-' + eventKey;
-}
-
-const ellipsisVertical = {
-  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M48 464a48 48 0 1 1 0-96 48 48 0 1 1 0 96zm0-160a48 48 0 1 1 0-96 48 48 0 1 1 0 96zM0 96a48 48 0 1 1 96 0A48 48 0 1 1 0 96z"/></svg>`,
+const getWeekdays = (firstWeekDay = 0) => {
+  const weekdays = [0, 1, 2, 3, 4, 5, 6];
+  return weekdays.concat(weekdays).slice(firstWeekDay, firstWeekDay + 7);
 };
 
-var __decorate$n = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-/** The `VegaCalendarSwitchPanelRenderer` class in TypeScript React renders a calendar switch panel with date navigation, view selection, and action buttons. */
-class VegaCalendarSwitchPanelRenderer extends VegaSlimmer {
+/**
+ * Calendar view generator abstract class.
+ */
+class CalendarViewGenerator {
   constructor() {
-    super(...arguments);
-    /**
-     * This function is responsible for updating the `viewMode` property of the `VegaCalendarSwitchPanelRenderer` class with the value extracted from the `input` parameter.
-     *
-     * @param {NotifyObserverPayload<VegaCalendarViewModeType>} input mark which view should be selected
-     */
-    this.handleViewChange = (input) => {
-      this.currentPeriodController.updateCalendarPeriod(input.detail, this.currentPeriod.current);
-    };
-    /**
-     * reset view content to today
-     */
-    this.todayButtonClick = () => {
-      this.currentPeriodController.setCurrentPeriod(this.currentPeriod.now());
-    };
-    /**
-     * update view content after click next button
-     */
-    this.nextButtonClick = () => {
-      this.currentPeriodController.setCurrentPeriod(this.currentPeriod.next());
-    };
-    /**
-     * update view content after click previous button
-     */
-    this.prevButtonClick = () => {
-      this.currentPeriodController.setCurrentPeriod(this.currentPeriod.previous());
-    };
-    /**
-     * The more action menu ite click
-     *
-     * @param {NotifyObserverPayload<string>} payload The object contains the menu item key
-     */
-    this.moreActionMenuClick = (payload) => {
-      this.moreActionClickEmitter.emit(payload.detail);
-    };
-  }
-  /**
-   * get the switch panel container element
-   *
-   * @returns {HTMLElement} container element
-   */
-  getSwitchPanelRef() {
-    return this.switchPanelRef;
-  }
-  /**
-   * calendar switch panel with date switch, view switch, add new button, and more action components.
-   *
-   * @returns {HTMLElement} html element
-   */
-  render() {
-    return (h("vega-flex", { direction: "row", gap: "size-16", justifyContent: "space-between", alignItems: "center", class: "calendar-switch-panel", ref: (node) => (this.switchPanelRef = node) },
-      this.renderDateSwitch(),
-      h("div", { class: "calendar-view-switch-container" },
-        this.renderViewSwitch(),
-        this.renderMoreActionMenu())));
-  }
-  /**
-   * The `renderDateSwitch` function returns a container with buttons for switching dates and displaying the current date.
-   *
-   * @returns {HTMLDivElement} action button elements container.
-   */
-  renderDateSwitch() {
-    return (h("div", { class: "calendar-date-switch-container" },
-      h("vega-button", { variant: "secondary", size: "small", ref: (button) => {
-          DomNodeSubjectObserverFactory.addUniqueObserverToNode(button, VegaClick, this.todayButtonClick);
-        } }, "Today"),
-      h("vega-button-circle", { variant: "secondary", size: "small", icon: VegaInternalIconManager.getIconKey('chevron-left'), label: "previous", showTooltip: false, ref: (button) => {
-          DomNodeSubjectObserverFactory.addUniqueObserverToNode(button, VegaClick, this.prevButtonClick);
-        } }),
-      h("vega-button-circle", { variant: "secondary", size: "small", icon: VegaInternalIconManager.getIconKey('chevron-right'), label: "next", showTooltip: false, ref: (button) => {
-          DomNodeSubjectObserverFactory.addUniqueObserverToNode(button, VegaClick, this.nextButtonClick);
-        } }),
-      this.renderCurrentPeriod()));
-  }
-  /**
-   * The function `renderCurrentPeriod` returns an HTML element displaying the view date content summary info.
-   *
-   * @returns {HTMLVegaFontElement} The text content inside the element is "Current Date Test".
-   */
-  renderCurrentPeriod() {
-    return (h("vega-font", { class: "calendar-current-date", variant: "font-field-label", color: "text-primary" }, this.getViewDateSummary()));
+    this.WEEKDAYS_SHORT = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+    this.weekdays = getWeekdays();
   }
   /**
-   * The function `renderViewSwitch` returns a JSX element for rendering a segment control component in a TypeScript React application.
+   * Get weekday names.
    *
-   * @returns {HTMLElement} An HTMLElement containing a vega-segment-control element with specific attributes and event handling.
+   * @returns {string[]} - The weekday strings
    */
-  renderViewSwitch() {
-    return (h("vega-segment-control", { segments: VegaCalendarSwitchPanelRenderer.views, size: "small", variant: "text-only", selected: this.viewMode, ref: (node) => {
-        DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaChange, this.handleViewChange);
-      } }));
+  getWeekdayNames() {
+    return this.WEEKDAYS_SHORT;
   }
   /**
-   * Render an more action button if dropdown source is not empty
+   * Generate calendar dates
    *
-   * @returns {Nullable<HTMLElement>} the additional element
+   * @param {CalendarPeriod} period - The calendar period
+   * @returns {Date[]} - The date result
    */
-  renderMoreActionMenu() {
-    var _a, _b;
-    if ((_b = (_a = this.moreActionDropdownProps) === null || _a === void 0 ? void 0 : _a.source) === null || _b === void 0 ? void 0 : _b.length) {
-      return (h("vega-dropdown", Object.assign({ alignment: "end", trigger: "click" }, this.moreActionDropdownProps, { ref: (node) => {
-          DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaDropdownClick, this.moreActionMenuClick);
-        } }),
-        h("vega-button-circle", { size: "small", icon: VegaInternalIconManager.getIconKey('ellipsis-vertical'), variant: "icon-only" })));
+  generateDates(period) {
+    const cursor = period.startDate.toDate();
+    const dates = [];
+    for (let i = 0; i < period.count; i++) {
+      dates.push(new Date(cursor));
+      cursor.setDate(cursor.getDate() + 1);
     }
+    return dates;
   }
   /**
-   * Get the view content date summary info, such as `January, 2024` or `10 January, 2024` or `28 December, 2023 - 3 January, 2024`
+   * Generate calendar head
    *
-   * @returns {string} string
+   * @returns {string[]} - The data of week head
    */
-  getViewDateSummary() {
-    const currentDate = this.currentPeriod.current;
-    let result = '';
-    switch (this.viewMode) {
-      case 'day':
-        result = `${currentDate.date} ${getMonthName(currentDate.toDate())}, ${currentDate.year}`;
-        break;
-      case 'week': {
-        const start = this.currentPeriod.startDate;
-        const end = this.currentPeriod.endDate;
-        result = `${start.date} ${getMonthName(start.toDate())}${start.year === end.year ? '' : ', ' + start.year} - ${end.date} ${getMonthName(end.toDate())}, ${end.year}`;
-        break;
-      }
-      case 'month':
-        result = `${getMonthName(currentDate.toDate())}, ${currentDate.year}`;
-        break;
-    }
-    return result;
+  generateWeekHead() {
+    return this.weekdays.map((day) => this.getWeekdayNames()[day]);
   }
 }
-(() => {
-  VegaInternalIconManager.register({
-    'chevron-right': chevronRight,
-    'chevron-left': chevronLeft,
-    'ellipsis-vertical': ellipsisVertical,
-  });
-})();
-VegaCalendarSwitchPanelRenderer.views = [
-  { text: 'Day', key: 'day' },
-  { text: 'Week', key: 'week' },
-  { text: 'Month', key: 'month' },
-];
-__decorate$n([
-  MapToComponentField()
-], VegaCalendarSwitchPanelRenderer.prototype, "viewMode", void 0);
-__decorate$n([
-  MapToComponentField()
-], VegaCalendarSwitchPanelRenderer.prototype, "calendarView", void 0);
-__decorate$n([
-  MapToComponentField()
-], VegaCalendarSwitchPanelRenderer.prototype, "currentPeriod", void 0);
-__decorate$n([
-  MapToComponentField()
-], VegaCalendarSwitchPanelRenderer.prototype, "moreActionDropdownProps", void 0);
-__decorate$n([
-  MapToComponentField()
-], VegaCalendarSwitchPanelRenderer.prototype, "moreActionClickEmitter", void 0);
-__decorate$n([
-  MapToComponentField()
-], VegaCalendarSwitchPanelRenderer.prototype, "currentPeriodController", void 0);
-__decorate$n([
-  MapToComponentField()
-], VegaCalendarSwitchPanelRenderer.prototype, "calendarViewController", void 0);
 
-var __decorate$m = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-/** renders different views based on the specified view mode using month, week, and day view render. */
-class VegaCalendarViewRenderer extends VegaSlimmer {
+/**
+ * Calendar view
+ */
+class CalendarView {
+  constructor(weekdays, dateItems) {
+    this._weekdays = weekdays;
+    this._dateItems = dateItems;
+  }
   /**
-   * render the calendar month/week/day view
+   * The week head of the calendar view
    *
-   * @returns {HTMLElement} html element
+   * @type {string[]}
    */
-  render() {
-    return (h("div", { class: `calendar-view calendar-view-${this.viewMode}` }, this.viewMode === 'month'
-      ? this.monthViewRenderer.render()
-      : this.viewWithTimeRenderer.render()));
+  get weekdays() {
+    return this._weekdays;
   }
-}
-__decorate$m([
-  MapToComponentField()
-], VegaCalendarViewRenderer.prototype, "viewMode", void 0);
-__decorate$m([
-  MapToComponentField()
-], VegaCalendarViewRenderer.prototype, "monthViewRenderer", void 0);
-__decorate$m([
-  MapToComponentField()
-], VegaCalendarViewRenderer.prototype, "viewWithTimeRenderer", void 0);
-
-var __decorate$l = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-/** The code provided is defining a TypeScript class called `VegaCalendarMonthViewRenderer` that extends `VegaSlimmer`. This class is responsible for rendering a month view of a calendar component. */
-class VegaCalendarMonthViewRenderer extends VegaSlimmer {
   /**
-   * the HTML elements that represent the month view of a calendar component.
+   * The date items of the calendar view
    *
-   * @returns {HTMLElement} the month view calendar content
+   * @type {CalendarDate[][]}
    */
-  render() {
-    const weekHead = this.calendarView.weekdays;
-    return (h("div", { class: "calendar-view-month-container" },
-      h("div", { class: "calendar-view-row calendar-view-title border-divider-bottom" }, weekHead.map((title) => (h("div", { key: title }, title)))),
-      this.renderMonthViewContent()));
+  get dateItems() {
+    return this._dateItems;
   }
+}
+
+/**
+ * Day view calendar generator
+ */
+class DayViewGenerator extends CalendarViewGenerator {
   /**
-   * generating the HTML elements that represent the content of the month view in a calendar component
-   *
-   * @returns {HTMLElement[]} month view content and event content
+   * @inheritDoc
    */
-  renderMonthViewContent() {
-    const monthSource = this.calendarView.dateItems;
-    const currentDate = this.currentPeriod.current;
-    return monthSource.map((dateArray, index) => {
-      const eventsArray = this.monthEventRenderer.getCurrentRowEvents(dateArray);
-      const displayEventsArray = this.monthEventRenderer.filterRowDisplayEvents(eventsArray);
-      return (h("div", { key: index, class: "calendar-view-row border-divider-bottom" }, dateArray.map((item, itemIndex) => {
-        return (h("div", { class: {
-            'row-cell border-divider-right': true,
-            'current-month-day': item.compare(currentDate).inMonth,
-            'active': item.isToday(),
-            'disabled': false,
-          }, key: `${item.month}-${item.date}`, 
-          // eslint-disable-next-line react/jsx-no-bind
-          onDblClick: (e) => this.handleDateBlockClick(e, item) },
-          this.renderDateBlock(item),
-          this.monthEventRenderer.render(item, eventsArray[itemIndex], displayEventsArray[itemIndex], itemIndex)));
-      })));
-    });
+  generate(period) {
+    return new CalendarView([this.generateWeekHead()[period.current.toDate().getDay()]], [[period.current]]);
+  }
+}
+
+/**
+ * Calendar date class
+ */
+class CalendarDate {
+  constructor(year, month, date) {
+    this._date = date;
+    this._month = month;
+    this._year = year;
   }
   /**
-   * It takes a `CalendarDate` object as a parameter and returns an HTML element representing a date block in the calendar view.
+   * Create a calendar date from a Date object
    *
-   * @param {CalendarDate} item the day object
-   * @returns {HTMLElement} the date block element
+   * @param {Date} date - The Date object
+   * @returns {CalendarDate} - Return a CalendarDate object
    */
-  renderDateBlock(item) {
-    const isMonthFirstDay = item.date === 1;
-    return (h("div", { class: "date" },
-      isMonthFirstDay && h("div", { class: "month-block" }, getMonthName(item.toDate(), true)),
-      h("div", { role: "button", tabIndex: 0, class: "grid-col", 
-        // eslint-disable-next-line react/jsx-no-bind
-        onDblClick: (e) => this.goToCurrentDayView(e, item) }, item.date)));
+  static from(date) {
+    return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
   }
   /**
-   * switch to current date day view
+   * The year of the calendar date
    *
-   * @param {MouseEvent} e the double click event object
-   * @param {CalendarDate} calendarDate the calendar date object
+   * @type {number}
    */
-  goToCurrentDayView(e, calendarDate) {
-    e.stopPropagation();
-    this.currentPeriodController.updateCalendarPeriod('day', calendarDate);
+  get year() {
+    return this._year;
+  }
+  set year(value) {
+    this._year = value;
   }
   /**
-   * emit vega click event when click the date block
+   * The month of the calendar date
    *
-   * @param {MouseEvent} e the mouse event object
-   * @param {CalendarDate} calendarDate the calendar date object
+   * @type {number}
    */
-  handleDateBlockClick(e, calendarDate) {
-    const target = e.target;
-    if (this.isMonthBlockBlankArea(target)) {
-      const { year, month, date } = calendarDate;
-      this.dateDblClickEmitter.emit({ year, month, date, hour: 0 });
-    }
+  get month() {
+    return this._month;
+  }
+  set month(value) {
+    this._month = value;
   }
   /**
-   * determine if the clicked element is blank area
+   * The date of the calendar date
    *
-   * @param {HTMLElement} element the target element
-   * @returns {boolean} true or false
+   * @type {number}
    */
-  isMonthBlockBlankArea(element) {
-    // the more button and the calendar event component should not trigger dateDblClick event
-    return !element.classList.contains('more-button') && element.tagName !== 'VEGA-CALENDAR-EVENT';
+  get date() {
+    return this._date;
+  }
+  set date(value) {
+    this._date = value;
   }
-}
-__decorate$l([
-  MapToComponentField()
-], VegaCalendarMonthViewRenderer.prototype, "viewMode", void 0);
-__decorate$l([
-  MapToComponentField()
-], VegaCalendarMonthViewRenderer.prototype, "calendarView", void 0);
-__decorate$l([
-  MapToComponentField()
-], VegaCalendarMonthViewRenderer.prototype, "currentPeriod", void 0);
-__decorate$l([
-  MapToComponentField()
-], VegaCalendarMonthViewRenderer.prototype, "calendarViewController", void 0);
-__decorate$l([
-  MapToComponentField()
-], VegaCalendarMonthViewRenderer.prototype, "currentPeriodController", void 0);
-__decorate$l([
-  MapToComponentField()
-], VegaCalendarMonthViewRenderer.prototype, "monthEventRenderer", void 0);
-__decorate$l([
-  MapToComponentField()
-], VegaCalendarMonthViewRenderer.prototype, "dateDblClickEmitter", void 0);
-
-var __decorate$k = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-/** The `VegaCalendarViewWithTimeRenderer` class in TypeScript React renders a day view for a calendar component with title, content, and hour blocks. */
-class VegaCalendarViewWithTimeRenderer extends VegaSlimmer {
   /**
-   * The render function in TypeScript React returns an array of HTMLElements containing the week calendar view for a specific day.
+   * Verify whether the calendar date is today
    *
-   * @returns {HTMLElement} An array of HTMLElement elements containing the rendered content of a calendar view for a
-   * specific day in the week. The content includes the title and the main content of the calendar view
-   * for that day.
+   * @returns {boolean} - Return true if the calendar date is today. Otherwise, return false.
    */
-  render() {
-    return (h("div", { class: "calendar-view-container" },
-      this.renderViewTitle(),
-      this.renderViewContent()));
+  isToday() {
+    const today = new Date();
+    return (today.getFullYear() === this.year &&
+      today.getMonth() + 1 === this.month &&
+      today.getDate() === this.date);
   }
   /**
-   * The function `renderViewTitle` renders a calendar view title and events based on the provided source data.
+   * Convert the calendar date to a Date object
    *
-   * @returns {HTMLElement} The `renderViewTitle` function returns an HTML element (HTMLElement) that contains a calendar view title container with rows for each day's information.
+   * @returns {Date} - Return a Date object
    */
-  renderViewTitle() {
-    const source = this.calendarView.dateItems[0];
-    const weekHead = this.calendarView.weekdays;
-    return (h("div", { class: "calendar-view-title-container" },
-      h("div", { class: "calendar-view-row" },
-        h("div", { class: "time-line-empty" }),
-        h("div", { class: "calendar-view-title" }, source.map((item, index) => (h("div", { key: item.date, class: { active: item.isToday() } },
-          h("div", null, weekHead[index]),
-          h("div", { class: "week-day" }, item.date)))))),
-      h("div", { class: "calendar-view-row calendar-view-event-all-container border-divider-bottom" },
-        h("div", { class: "time-line-all" }, "All Day"),
-        this.dayViewFullDayEventRenderer.render())));
+  toDate() {
+    return new Date(this.year, this.month - 1, this.date);
   }
   /**
-   * The `renderViewContent` function in TypeScript React renders a calendar view with day blocks and time markers based on the provided data.
+   * Compare with another calendar date
    *
-   * @returns {HTMLElement} An HTMLElement containing a calendar view row with day containers, a timeline renderer, a content container, a day list, and hour blocks for each item in the source array.
+   * @param {CalendarDate} date - The calendar date to compare with
+   * @returns {DateCompareResult} - Return a DateCompareResult object
    */
-  renderViewContent() {
-    const source = this.calendarView.dateItems[0];
-    return (h("div", { class: "calendar-view-row calendar-view-day-container" },
-      this.timeLineRenderer.render(),
-      h("div", { class: "calendar-view-content-container" },
-        h("div", { class: "calendar-view-content" }, source.map((item) => {
-          return (h("div", { class: "grid-col border-divider-left", key: item.date },
-            h("div", { class: "hour-empty border-divider-top" }),
-            this.renderHourBlock(item)));
-        })),
-        this.dayViewTimedEventRenderer.render(),
-        this.timeLineRenderer.renderTimeMarker(source))));
+  compare(date) {
+    const { year, month } = date;
+    const result = {
+      isPreviousMonth: false,
+      inMonth: false,
+      isNextMonth: false,
+    };
+    if (this.year === year) {
+      if (this.month < month) {
+        result.isPreviousMonth = true;
+      }
+      else if (this.month > month) {
+        result.isNextMonth = true;
+      }
+      else {
+        result.inMonth = true;
+      }
+    }
+    else if (this.year > year) {
+      result.isNextMonth = true;
+    }
+    else {
+      result.isPreviousMonth = true;
+    }
+    return result;
   }
   /**
-   * The function `renderHourBlock` returns an array of HTML elements representing hour blocks with time information.
+   * The function "equal" compares the year, month, and date of two CalendarDate objects and returns  true if they are equal.
    *
-   * @param {CalendarDate} calendarDate then current calendar date object
-   * @returns {HTMLElement[]} An array of HTMLElements is being returned. Each HTMLElement represents an hour block with a time value inside a div element.
+   * @param {CalendarDate} calendarDate - The `equal` method in the code snippet is a function that compares the year, month, and date of the current `CalendarDate` object with another
+   * `CalendarDate` object passed as a parameter. The method returns `true` if all three values (year, month, date) are equal
+   * @returns {boolean} The date is same day with current
    */
-  renderHourBlock(calendarDate) {
-    const timeLineSource = Array(24).fill('');
-    return timeLineSource.map((_item, index) => {
-      return (h("div", { class: "grid-cell border-divider-top", 
-        // eslint-disable-next-line react/jsx-no-bind
-        onDblClick: () => {
-          this.handleDateBlockClick(calendarDate, index);
-        } }));
-    });
+  equal(calendarDate) {
+    const { year, month, date } = calendarDate;
+    return this._year === year && this._month === month && this._date === date;
+  }
+}
+
+/**
+ * Calendar week view generator
+ */
+class WeekViewGenerator extends CalendarViewGenerator {
+  /**
+   * @inheritDoc
+   */
+  generate(period) {
+    const dates = this.generateDates(period);
+    const showWeekends = period.showWeekends;
+    let weekDays = this.generateWeekHead();
+    let dateItems = [dates.map(CalendarDate.from)];
+    if (showWeekends === false) {
+      weekDays = weekDays.slice(1, 6);
+      dateItems = dateItems.map((items) => items.slice(1, 6));
+    }
+    return new CalendarView(weekDays, dateItems);
   }
+}
+
+/**
+ * Calendar month view generator
+ */
+class MonthViewGenerator extends CalendarViewGenerator {
   /**
-   * emit vega click event when click the date block
-   *
-   * @param {CalendarDate} calendarDate the calendar date object
+   * @inheritDoc
    */
-  handleDateBlockClick(calendarDate, hour) {
-    const { year, month, date } = calendarDate;
-    this.dateDblClickEmitter.emit({ year, month, date, hour });
+  generate(period) {
+    const showWeekends = period.showWeekends;
+    let calendarDates = [];
+    let week = [];
+    const dates = this.generateDates(period);
+    dates.forEach((date, i) => {
+      if (!(i % 7)) {
+        calendarDates[i / 7] = week = [];
+      }
+      const item = CalendarDate.from(date);
+      week.push(item);
+    });
+    let weekDays = this.generateWeekHead();
+    if (showWeekends === false) {
+      weekDays = weekDays.slice(1, 6);
+      calendarDates = calendarDates.map((items) => items.slice(1, 6));
+    }
+    return new CalendarView(weekDays, calendarDates);
   }
 }
-__decorate$k([
-  MapToComponentField()
-], VegaCalendarViewWithTimeRenderer.prototype, "viewMode", void 0);
-__decorate$k([
-  MapToComponentField()
-], VegaCalendarViewWithTimeRenderer.prototype, "timeLineRenderer", void 0);
-__decorate$k([
-  MapToComponentField()
-], VegaCalendarViewWithTimeRenderer.prototype, "dayViewTimedEventRenderer", void 0);
-__decorate$k([
-  MapToComponentField()
-], VegaCalendarViewWithTimeRenderer.prototype, "dayViewFullDayEventRenderer", void 0);
-__decorate$k([
-  MapToComponentField()
-], VegaCalendarViewWithTimeRenderer.prototype, "calendarView", void 0);
-__decorate$k([
-  MapToComponentField()
-], VegaCalendarViewWithTimeRenderer.prototype, "calendarViewController", void 0);
-__decorate$k([
-  MapToComponentField()
-], VegaCalendarViewWithTimeRenderer.prototype, "dateDblClickEmitter", void 0);
 
-var __decorate$j = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-/** The `VegaCalendarTimeLineRenderer` class in TypeScript React renders a time line with custom time format options and includes methods for rendering time markers and the time line itself. */
-class VegaCalendarTimeLineRenderer extends VegaSlimmer {
+/**
+ * CalendarPeriod is an abstract class that represents a period of date for calendar.
+ */
+class CalendarPeriod {
+  constructor(count, current) {
+    this._count = count;
+    this._current = current ? current : CalendarDate.from(new Date());
+    this.calculatePeriod(this._current);
+  }
   /**
-   * takes an array of `CalendarDate` objects as input and returns an HTML element
+   * The current date of the period.
    *
-   * @param {CalendarDate[]} source
-   * @returns {HTMLElement} the html element
+   * @type {CalendarDate}
    */
-  renderTimeMarker(source) {
-    const isVisible = source.findIndex((calendarDate) => calendarDate.isToday()) >= 0;
-    return (h("div", { class: {
-        'time-marker-container': true,
-        'hidden': !isVisible,
-      } },
-      h("div", { class: "time-marker", style: { top: this.getTimeMarkerPosition() }, ref: (div) => (this.timeMarkerRef = div) }, source.map((item) => {
-        return h("div", { key: item.date, class: { active: item.isToday() } });
-      }))));
+  get current() {
+    return this._current;
   }
   /**
-   * rendering the time line component as an HTML element
+   * The start date of the period
    *
-   * @returns {HTMLElement} the html element
+   * @type {CalendarDate}
    */
-  render() {
-    const timeLineSource = this.getTimeLineTitles();
-    return (h("div", { class: "time-line", ref: (div) => (this.timeLineRef = div) },
-      h("div", { class: "hour-empty" }),
-      timeLineSource.map((time, index) => {
-        return (h("div", { key: time },
-          h("div", { class: "time-text", "data-time": index === 0 ? 24 : index }, time)));
-      })));
+  get startDate() {
+    return this._startDate;
   }
   /**
-   * scroll to current time line block if change view mode to week or day
+   * The end date of the period
    *
-   * @param {VegaCalendarViewModeType} viewMode the view mode
+   * @type {CalendarDate}
    */
-  updateTimeLine(viewMode) {
-    this.scrollToTargetTimeBlock(viewMode);
-    this.syncTimeMarkerPosition(viewMode);
+  get endDate() {
+    return this._endDate;
   }
   /**
-   * remove setInterval when component destroy
+   * The count of the period
+   *
+   * @type {number}
    */
-  clearTimer() {
-    clearInterval(this.timeMarkerPositionTimer);
+  get count() {
+    return this._count;
   }
   /**
-   * Add the time mark position update logic if the component add back to page
+   * This function returns the type of the object.
+   *
+   * @type {string}
    */
-  updateTimeLineIfComponentAddBack() {
-    this.syncTimeMarkerPosition(this.viewMode);
+  get type() {
+    return this._type;
   }
   /**
-   * The function `getTimeMarkerPosition` calculates the position of the current time marker as a percentage of the day.
+   * This function returns the showWeekends of the object.
    *
-   * @returns {string} a string representing the current time marker position as a percentage of the day.
+   * @type {boolean}
    */
-  getTimeMarkerPosition() {
-    const now = new Date();
-    const minutesOneDay = 24 * 60;
-    return ((now.getHours() * 60 + now.getMinutes()) / minutesOneDay) * 100 + '%';
+  get showWeekends() {
+    return this._showWeekends;
   }
   /**
-   * The function `getTimeLineTitles` generates a time line array based on the specified time format (24-hour) and stores it in the `timeLineSource` property.
+   * Go to a specific date.
    *
-   * @returns {string[]} returns an array of strings representing the time line
+   * @param {CalendarDate} date - The date to go to.
+   * @returns {this} - The current period.
    */
-  getTimeLineTitles() {
-    const timeLine = [];
-    if (this.timeFormat === '12-hour') {
-      timeLine.push('12 AM');
-      for (let i = 1; i < 12; i++) {
-        timeLine.push(`${i} AM`);
-      }
-      timeLine.push('12 PM');
-      for (let i = 1; i < 12; i++) {
-        timeLine.push(`${i} PM`);
-      }
-    }
-    else {
-      for (let i = 0; i < 24; i++) {
-        timeLine.push(pad(i));
-      }
-    }
-    return timeLine;
+  goTo(date) {
+    return this.createBy(date);
   }
-  /*
-   * The below method is e2e-test covered in
-   * @see{module:vega-calendar-scroll-to-current-time}
-   */
-  /* istanbul ignore next */
   /**
-   * Update the time marker position with the time
+   * Go to now.
    *
-   * @param {VegaCalendarViewModeType} viewMode view mode value
+   * @returns {this} - The current period.
    */
-  syncTimeMarkerPosition(viewMode) {
-    clearInterval(this.timeMarkerPositionTimer);
-    if (viewMode !== 'month') {
-      this.timeMarkerPositionTimer = setInterval(() => {
-        if (this.timeMarkerRef) {
-          this.timeMarkerRef.style.top = this.getTimeMarkerPosition();
-        }
-      }, 60 * 1000);
-    }
+  now() {
+    return this.createBy(CalendarDate.from(new Date()));
   }
-  /*
-   * The below method is e2e-test covered in
-   * @see{module:vega-calendar-scroll-to-current-time}
-   */
-  /* istanbul ignore next */
   /**
-   * scroll the time line in to current view
+   * Calculate the period start date and end date.
    *
-   * @param {VegaCalendarViewModeType} viewMode view mode value
+   * @param {CalendarDate} date - The date to calculate the period from.
    */
-  scrollToTargetTimeBlock(viewMode) {
-    if (viewMode !== 'month') {
-      // add setTimeout here to make sure call the scroll into view after time line rendered.
-      setTimeout(() => {
-        var _a, _b;
-        const hour = new Date().getHours();
-        (_b = (_a = this.timeLineRef) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-time='${hour < 23 ? hour + 1 : hour}']`)) === null || _b === void 0 ? void 0 : _b.scrollIntoView({ block: 'end' });
-      }, 0);
+  calculatePeriod(date) {
+    const cursor = date.toDate();
+    if (this.count > 1) {
+      cursor.setDate(cursor.getDate() - getWeekdays().indexOf(cursor.getDay()));
     }
+    this._startDate = CalendarDate.from(cursor);
+    cursor.setDate(cursor.getDate() + this.count - 1);
+    this._endDate = CalendarDate.from(cursor);
   }
 }
-__decorate$j([
-  MapToComponentField()
-], VegaCalendarTimeLineRenderer.prototype, "timeFormat", void 0);
-__decorate$j([
-  MapToComponentField()
-], VegaCalendarTimeLineRenderer.prototype, "viewMode", void 0);
-__decorate$j([
-  MapToComponentMethod('watchViewModeChange')
-], VegaCalendarTimeLineRenderer.prototype, "updateTimeLine", null);
-__decorate$j([
-  MapToComponentMethod('disconnectedCallback')
-], VegaCalendarTimeLineRenderer.prototype, "clearTimer", null);
-__decorate$j([
-  MapToComponentMethod('connectedCallback')
-], VegaCalendarTimeLineRenderer.prototype, "updateTimeLineIfComponentAddBack", null);
 
 /**
- * Get a week days array
- *
- * @param {number} firstWeekDay - The first week day (0: Sunday, 1: Monday, ...)
- * @returns {number[]} - The week days array
+ * Period of day.
  */
-const getWeekdays = (firstWeekDay = 0) => {
-  const weekdays = [0, 1, 2, 3, 4, 5, 6];
-  return weekdays.concat(weekdays).slice(firstWeekDay, firstWeekDay + 7);
-};
+class DayPeriod extends CalendarPeriod {
+  constructor(current, showWeekends) {
+    super(DayPeriod.DISPLAY_DATE_COUNT, current);
+    this._type = 'day';
+    this._showWeekends = true;
+    this._showWeekends = showWeekends === false ? false : true;
+  }
+  /**
+   * @inheritDoc
+   */
+  next() {
+    const nextDate = this.current.toDate();
+    nextDate.setDate(nextDate.getDate() + 1);
+    let calendarDate = CalendarDate.from(nextDate);
+    if (this._showWeekends === false) {
+      calendarDate = getClosestWorkday(calendarDate);
+    }
+    return this.createBy(calendarDate);
+  }
+  /**
+   * @inheritDoc
+   */
+  previous() {
+    const previousDate = this.current.toDate();
+    previousDate.setDate(previousDate.getDate() - 1);
+    let calendarDate = CalendarDate.from(previousDate);
+    if (this._showWeekends === false) {
+      calendarDate = getClosestWorkday(calendarDate, DateDirection.PREVIOUS);
+    }
+    return this.createBy(calendarDate);
+  }
+  /**
+   * Go to now.
+   *
+   * @returns {this} - The current period.
+   */
+  now() {
+    let calendarDate = CalendarDate.from(new Date());
+    if (this._showWeekends === false) {
+      calendarDate = getClosestWorkday(calendarDate);
+    }
+    return this.createBy(calendarDate);
+  }
+  /**
+   * @inheritDoc
+   */
+  createBy(current) {
+    return new DayPeriod(current, this._showWeekends);
+  }
+}
+DayPeriod.DISPLAY_DATE_COUNT = 1;
 
 /**
- * Calendar view generator abstract class.
+ * Period of the week
  */
-class CalendarViewGenerator {
-  constructor() {
-    this.WEEKDAYS_SHORT = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-    this.weekdays = getWeekdays();
+class WeekPeriod extends CalendarPeriod {
+  constructor(current, showWeekends) {
+    super(WeekPeriod.DISPLAY_DATE_COUNT, current);
+    this._type = 'week';
+    this._showWeekends = true;
+    this._showWeekends = showWeekends === false ? false : true;
   }
   /**
-   * Get weekday names.
-   *
-   * @returns {string[]} - The weekday strings
+   * @inheritDoc
    */
-  getWeekdayNames() {
-    return this.WEEKDAYS_SHORT;
+  next() {
+    const nextWeekStartDate = this.current.toDate();
+    nextWeekStartDate.setDate(nextWeekStartDate.getDate() - getWeekdays().indexOf(nextWeekStartDate.getDay()) + 7);
+    return this.createBy(CalendarDate.from(nextWeekStartDate));
   }
   /**
-   * Generate calendar dates
-   *
-   * @param {CalendarPeriod} period - The calendar period
-   * @returns {Date[]} - The date result
+   * @inheritDoc
    */
-  generateDates(period) {
-    const cursor = period.startDate.toDate();
-    const dates = [];
-    for (let i = 0; i < period.count; i++) {
-      dates.push(new Date(cursor));
-      cursor.setDate(cursor.getDate() + 1);
-    }
-    return dates;
+  previous() {
+    const previousWeekStartDate = this.current.toDate();
+    previousWeekStartDate.setDate(previousWeekStartDate.getDate() - getWeekdays().indexOf(previousWeekStartDate.getDay()) - 7);
+    return this.createBy(CalendarDate.from(previousWeekStartDate));
   }
   /**
-   * Generate calendar head
-   *
-   * @returns {string[]} - The data of week head
+   * @inheritDoc
    */
-  generateWeekHead() {
-    return this.weekdays.map((day) => this.getWeekdayNames()[day]);
+  createBy(current) {
+    return new WeekPeriod(current, this._showWeekends);
   }
 }
+WeekPeriod.DISPLAY_DATE_COUNT = 7;
 
 /**
- * Calendar view
+ * Period of month
  */
-class CalendarView {
-  constructor(weekdays, dateItems) {
-    this._weekdays = weekdays;
-    this._dateItems = dateItems;
+class MonthPeriod extends CalendarPeriod {
+  constructor(current, showWeekends) {
+    super(MonthPeriod.DISPLAY_DATE_COUNT, MonthPeriod.getMonthFirstDay(current));
+    this._type = 'month';
+    this._showWeekends = true;
+    this._showWeekends = showWeekends === false ? false : true;
+  }
+  /**
+   * The function `getMonthFirstDay` returns the first day of a given month in a calendar.
+   *
+   * @param {CalendarDate} [calendarDate] - The `calendarDate` parameter is an optional parameter of
+   * type `CalendarDate`. It represents a specific date in the calendar. If a `calendarDate` is
+   * provided, the function will use that date to determine the first day of the month. If no
+   * `calendarDate` is provided, the function
+   * @returns {CalendarDate} A new `CalendarDate` object representing the first day of the month from the provided
+   * `calendarDate` parameter or the current date if no parameter is provided.
+   */
+  static getMonthFirstDay(calendarDate) {
+    const date = calendarDate || CalendarDate.from(new Date());
+    return new CalendarDate(date.year, date.month, 1);
   }
   /**
-   * The week head of the calendar view
-   *
-   * @type {string[]}
+   * @inheritDoc
    */
-  get weekdays() {
-    return this._weekdays;
+  next() {
+    const next = this.current.toDate();
+    next.setMonth(next.getMonth() + 1);
+    return this.createBy(CalendarDate.from(next));
   }
   /**
-   * The date items of the calendar view
-   *
-   * @type {CalendarDate[][]}
+   * @inheritDoc
    */
-  get dateItems() {
-    return this._dateItems;
+  previous() {
+    const previous = this.current.toDate();
+    previous.setMonth(previous.getMonth() - 1);
+    return this.createBy(CalendarDate.from(previous));
   }
-}
-
-/**
- * Day view calendar generator
- */
-class DayViewGenerator extends CalendarViewGenerator {
   /**
    * @inheritDoc
    */
-  generate(period) {
-    return new CalendarView([this.generateWeekHead()[period.current.toDate().getDay()]], [[period.current]]);
+  createBy(current) {
+    return new MonthPeriod(current, this._showWeekends);
   }
 }
+MonthPeriod.DISPLAY_DATE_COUNT = 6 * 7;
 
+var DateDirection;
+(function (DateDirection) {
+  DateDirection["PREVIOUS"] = "-1";
+  DateDirection["NEXT"] = "1";
+})(DateDirection || (DateDirection = {}));
 /**
- * Calendar date class
+ * get month name from the month number
+ *
+ * @param {Date} date the date object
+ * @param {boolean} isShortName short or long name
+ * @returns {string} the month English name
  */
-class CalendarDate {
-  constructor(year, month, date) {
-    this._date = date;
-    this._month = month;
-    this._year = year;
+function getMonthName(date, isShortName = false) {
+  return date.toLocaleDateString('en-US', { month: isShortName ? 'short' : 'long' });
+}
+/**
+ * The function `getTimeIndex` calculates the index of a given time string based on a specified time unit.
+ *
+ * @param {string} timeString - A string representing a time in the format "HH:MM", where HH is the hour and MM is the minutes.
+ * @param {number} [unit=15] - The `unit` parameter in the `getTimeIndex` function is used to specify
+ * the interval in minutes for dividing the day. By default, it is set to 15 minutes, meaning that the
+ * day will be divided into 15-minute intervals.
+ * @returns {number} the index of the given time string based on the specified time unit.
+ */
+function getTimeIndex(timeString, unit = 15) {
+  const [hour, minutes] = timeString.split(':');
+  return Math.round((Number(hour) * 60 + Number(minutes)) / unit);
+}
+/**
+ * Returns a string that includes the event key for a calendar event slot.
+ *
+ * @param {string} eventKey - represents the key or identifier of a calendar event.
+ * @returns {string} a string that is a concatenation of 'vega-calendar-event-slot-' and the eventKey parameter.
+ */
+function getCalendarEventSlotName(eventKey) {
+  return 'vega-calendar-event-slot-' + eventKey;
+}
+/**
+ * Returns the closest workday to a given calendar date based on a specified direction.
+ *
+ * @param {Date} date - The starting date from which you want to find the closest workday.
+ * @param {'-1' | '1'} [direction=1] - Determines whether to find the closest workday in the past or future. It can have two possible values:
+ * @returns {Date} The closest workday to the input date
+ */
+function getClosestWorkday(date, direction = DateDirection.NEXT) {
+  const day = date.toDate().getDay();
+  if (day === 0 || day === 6) {
+    let nextWorkdayGap = day === 0 ? 1 : 2;
+    if (direction === DateDirection.PREVIOUS) {
+      nextWorkdayGap = day === 0 ? -2 : -1;
+    }
+    return CalendarDate.from(new Date(date.year, date.month - 1, date.date + nextWorkdayGap));
+  }
+  return date;
+}
+
+const ellipsisVertical = {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M48 464a48 48 0 1 1 0-96 48 48 0 1 1 0 96zm0-160a48 48 0 1 1 0-96 48 48 0 1 1 0 96zM0 96a48 48 0 1 1 96 0A48 48 0 1 1 0 96z"/></svg>`,
+};
+
+var __decorate$n = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** The `VegaCalendarSwitchPanelRenderer` class in TypeScript React renders a calendar switch panel with date navigation, view selection, and action buttons. */
+class VegaCalendarSwitchPanelRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * This function is responsible for updating the `viewMode` property of the `VegaCalendarSwitchPanelRenderer` class with the value extracted from the `input` parameter.
+     *
+     * @param {NotifyObserverPayload<VegaCalendarViewModeType>} input mark which view should be selected
+     */
+    this.handleViewChange = (input) => {
+      this.currentPeriodController.updateCalendarPeriod(input.detail, this.currentPeriod.current);
+    };
+    /**
+     * reset view content to today
+     */
+    this.todayButtonClick = () => {
+      this.currentPeriodController.setCurrentPeriod(this.currentPeriod.now());
+    };
+    /**
+     * update view content after click next button
+     */
+    this.nextButtonClick = () => {
+      this.currentPeriodController.setCurrentPeriod(this.currentPeriod.next());
+    };
+    /**
+     * update view content after click previous button
+     */
+    this.prevButtonClick = () => {
+      this.currentPeriodController.setCurrentPeriod(this.currentPeriod.previous());
+    };
+    /**
+     * The more action menu item click
+     *
+     * @param {NotifyObserverPayload<string>} payload The object contains the menu item key
+     */
+    this.moreActionMenuClick = (payload) => {
+      this.moreActionClickEmitter.emit(payload.detail);
+    };
   }
   /**
-   * Create a calendar date from a Date object
+   * get the switch panel container element
    *
-   * @param {Date} date - The Date object
-   * @returns {CalendarDate} - Return a CalendarDate object
+   * @returns {HTMLElement} container element
    */
-  static from(date) {
-    return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
+  getSwitchPanelRef() {
+    return this.switchPanelRef;
   }
   /**
-   * The year of the calendar date
+   * calendar switch panel with date switch, view switch, add new button, and more action components.
    *
-   * @type {number}
+   * @returns {HTMLElement} html element
    */
-  get year() {
-    return this._year;
-  }
-  set year(value) {
-    this._year = value;
+  render() {
+    return (h("vega-flex", { direction: "row", gap: "size-16", justifyContent: "space-between", alignItems: "center", class: "calendar-switch-panel", ref: (node) => (this.switchPanelRef = node) },
+      this.renderDateSwitch(),
+      h("div", { class: "calendar-view-switch-container" },
+        this.renderViewSwitch(),
+        this.renderMoreActionMenu())));
   }
   /**
-   * The month of the calendar date
+   * The `renderDateSwitch` function returns a container with buttons for switching dates and displaying the current date.
    *
-   * @type {number}
+   * @returns {HTMLDivElement} action button elements container.
    */
-  get month() {
-    return this._month;
+  renderDateSwitch() {
+    return (h("div", { class: "calendar-date-switch-container" },
+      h("vega-button", { variant: "secondary", size: "small", ref: (button) => {
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(button, VegaClick, this.todayButtonClick);
+        }, label: this.translationSlimmer.t('Today') }),
+      h("vega-button-circle", { variant: "secondary", size: "small", icon: VegaInternalIconManager.getIconKey('chevron-left'), label: "previous", showTooltip: false, ref: (button) => {
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(button, VegaClick, this.prevButtonClick);
+        } }),
+      h("vega-button-circle", { variant: "secondary", size: "small", icon: VegaInternalIconManager.getIconKey('chevron-right'), label: "next", showTooltip: false, ref: (button) => {
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(button, VegaClick, this.nextButtonClick);
+        } }),
+      this.renderCurrentPeriod()));
   }
-  set month(value) {
-    this._month = value;
+  /**
+   * The function `renderCurrentPeriod` returns an HTML element displaying the view date content summary info.
+   *
+   * @returns {HTMLVegaFontElement} The text content inside the element is "Current Date Test".
+   */
+  renderCurrentPeriod() {
+    return (h("vega-font", { class: "calendar-current-date", variant: "font-field-label", color: "text-primary" }, this.getViewDateSummary()));
   }
   /**
-   * The date of the calendar date
+   * The function `renderViewSwitch` returns a JSX element for rendering a segment control component in a TypeScript React application.
    *
-   * @type {number}
+   * @returns {HTMLElement} An HTMLElement containing a vega-segment-control element with specific attributes and event handling.
    */
-  get date() {
-    return this._date;
+  renderViewSwitch() {
+    return (h("vega-segment-control", { segments: VegaCalendarSwitchPanelRenderer.views.map((item) => (Object.assign(Object.assign({}, item), { text: this.translationSlimmer.t(item.text) }))), size: "small", variant: "text-only", selected: this.viewMode, ref: (node) => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaChange, this.handleViewChange);
+      } }));
   }
-  set date(value) {
-    this._date = value;
+  /**
+   * Render an more action button if dropdown source is not empty
+   *
+   * @returns {Nullable<HTMLElement>} the additional element
+   */
+  renderMoreActionMenu() {
+    var _a, _b;
+    if ((_b = (_a = this.moreActionDropdownProps) === null || _a === void 0 ? void 0 : _a.source) === null || _b === void 0 ? void 0 : _b.length) {
+      return (h("vega-dropdown", Object.assign({ alignment: "end", trigger: "click" }, this.moreActionDropdownProps, { ref: (node) => {
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaDropdownClick, this.moreActionMenuClick);
+        } }),
+        h("vega-button-circle", { size: "small", icon: VegaInternalIconManager.getIconKey('ellipsis-vertical'), variant: "icon-only" })));
+    }
   }
   /**
-   * Verify whether the calendar date is today
+   * Get the view content date summary info, such as `January, 2024` or `10 January, 2024` or `28 December, 2023 - 3 January, 2024`
    *
-   * @returns {boolean} - Return true if the calendar date is today. Otherwise, return false.
+   * @returns {string} string
    */
-  isToday() {
-    const today = new Date();
-    return (today.getFullYear() === this.year &&
-      today.getMonth() + 1 === this.month &&
-      today.getDate() === this.date);
+  getViewDateSummary() {
+    const currentDate = this.currentPeriod.current;
+    let result = '';
+    switch (this.viewMode) {
+      case 'day': {
+        const monthName = this.translationSlimmer.t(getMonthName(currentDate.toDate()));
+        result = `${currentDate.date} ${monthName}, ${currentDate.year}`;
+        break;
+      }
+      case 'week': {
+        const weekItems = this.calendarView.dateItems[0];
+        const start = weekItems[0];
+        const end = weekItems[weekItems.length - 1];
+        const [startMonthName, endMonthName] = [start, end].map((item) => this.translationSlimmer.t(getMonthName(item.toDate())));
+        result = `${start.date} ${startMonthName}${start.year === end.year ? '' : ', ' + start.year} - ${end.date} ${endMonthName}, ${end.year}`;
+        break;
+      }
+      case 'month': {
+        const monthName = this.translationSlimmer.t(getMonthName(currentDate.toDate()));
+        result = `${monthName}, ${currentDate.year}`;
+        break;
+      }
+    }
+    return result;
   }
+}
+(() => {
+  VegaInternalIconManager.register({
+    'chevron-right': chevronRight,
+    'chevron-left': chevronLeft,
+    'ellipsis-vertical': ellipsisVertical,
+  });
+})();
+VegaCalendarSwitchPanelRenderer.views = [
+  { text: 'Day', key: 'day' },
+  { text: 'Week', key: 'week' },
+  { text: 'Month', key: 'month' },
+];
+__decorate$n([
+  MapToComponentField()
+], VegaCalendarSwitchPanelRenderer.prototype, "viewMode", void 0);
+__decorate$n([
+  MapToComponentField()
+], VegaCalendarSwitchPanelRenderer.prototype, "calendarView", void 0);
+__decorate$n([
+  MapToComponentField()
+], VegaCalendarSwitchPanelRenderer.prototype, "currentPeriod", void 0);
+__decorate$n([
+  MapToComponentField()
+], VegaCalendarSwitchPanelRenderer.prototype, "moreActionDropdownProps", void 0);
+__decorate$n([
+  MapToComponentField()
+], VegaCalendarSwitchPanelRenderer.prototype, "moreActionClickEmitter", void 0);
+__decorate$n([
+  MapToComponentField()
+], VegaCalendarSwitchPanelRenderer.prototype, "currentPeriodController", void 0);
+__decorate$n([
+  MapToComponentField()
+], VegaCalendarSwitchPanelRenderer.prototype, "calendarViewController", void 0);
+__decorate$n([
+  MapToComponentField()
+], VegaCalendarSwitchPanelRenderer.prototype, "translationSlimmer", void 0);
+
+var __decorate$m = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** renders different views based on the specified view mode using month, week, and day view render. */
+class VegaCalendarViewRenderer extends VegaSlimmer {
   /**
-   * Convert the calendar date to a Date object
+   * render the calendar month/week/day view
    *
-   * @returns {Date} - Return a Date object
+   * @returns {HTMLElement} html element
    */
-  toDate() {
-    return new Date(this.year, this.month - 1, this.date);
+  render() {
+    return (h("div", { class: `calendar-view calendar-view-${this.viewMode} ${this.showWeekends === false ? 'calendar-hide-weekends' : ''}` }, this.viewMode === 'month'
+      ? this.monthViewRenderer.render()
+      : this.viewWithTimeRenderer.render()));
   }
+}
+__decorate$m([
+  MapToComponentField()
+], VegaCalendarViewRenderer.prototype, "viewMode", void 0);
+__decorate$m([
+  MapToComponentField()
+], VegaCalendarViewRenderer.prototype, "showWeekends", void 0);
+__decorate$m([
+  MapToComponentField()
+], VegaCalendarViewRenderer.prototype, "monthViewRenderer", void 0);
+__decorate$m([
+  MapToComponentField()
+], VegaCalendarViewRenderer.prototype, "viewWithTimeRenderer", void 0);
+
+var __decorate$l = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** The code provided is defining a TypeScript class called `VegaCalendarMonthViewRenderer` that extends `VegaSlimmer`. This class is responsible for rendering a month view of a calendar component. */
+class VegaCalendarMonthViewRenderer extends VegaSlimmer {
   /**
-   * Compare with another calendar date
+   * the HTML elements that represent the month view of a calendar component.
    *
-   * @param {CalendarDate} date - The calendar date to compare with
-   * @returns {DateCompareResult} - Return a DateCompareResult object
+   * @returns {HTMLElement} the month view calendar content
    */
-  compare(date) {
-    const { year, month } = date;
-    const result = {
-      isPreviousMonth: false,
-      inMonth: false,
-      isNextMonth: false,
-    };
-    if (this.year === year) {
-      if (this.month < month) {
-        result.isPreviousMonth = true;
-      }
-      else if (this.month > month) {
-        result.isNextMonth = true;
-      }
-      else {
-        result.inMonth = true;
-      }
-    }
-    else if (this.year > year) {
-      result.isNextMonth = true;
-    }
-    else {
-      result.isPreviousMonth = true;
-    }
-    return result;
+  render() {
+    const weekHead = this.calendarView.weekdays;
+    return (h("div", { class: "calendar-view-month-container" },
+      h("div", { class: "calendar-view-row calendar-view-title border-divider-bottom" }, weekHead.map((title) => (h("div", { key: title }, this.translationSlimmer.t(title))))),
+      this.renderMonthViewContent()));
   }
   /**
-   * The function "equal" compares the year, month, and date of two CalendarDate objects and returns  true if they are equal.
+   * generating the HTML elements that represent the content of the month view in a calendar component
    *
-   * @param {CalendarDate} calendarDate - The `equal` method in the code snippet is a function that compares the year, month, and date of the current `CalendarDate` object with another
-   * `CalendarDate` object passed as a parameter. The method returns `true` if all three values (year, month, date) are equal
-   * @returns {boolean} The date is same day with current
-   */
-  equal(calendarDate) {
-    const { year, month, date } = calendarDate;
-    return this._year === year && this._month === month && this._date === date;
-  }
-}
-
-/**
- * Calendar week view generator
- */
-class WeekViewGenerator extends CalendarViewGenerator {
-  /**
-   * @inheritDoc
+   * @returns {HTMLElement[]} month view content and event content
    */
-  generate(period) {
-    const dates = this.generateDates(period);
-    return new CalendarView(this.generateWeekHead(), [dates.map(CalendarDate.from)]);
+  renderMonthViewContent() {
+    const monthSource = this.calendarView.dateItems;
+    const currentDate = this.currentPeriod.current;
+    return monthSource.map((dateArray, index) => {
+      const eventsArray = this.monthEventRenderer.getCurrentRowEvents(dateArray);
+      const displayEventsArray = this.monthEventRenderer.filterRowDisplayEvents(eventsArray);
+      return (h("div", { key: index, class: "calendar-view-row border-divider-bottom" }, dateArray.map((item, itemIndex) => {
+        return (h("div", { class: {
+            'row-cell border-divider-right': true,
+            'current-month-day': item.compare(currentDate).inMonth,
+            'active': item.isToday(),
+            'disabled': false,
+          }, key: `${item.month}-${item.date}`, 
+          // eslint-disable-next-line react/jsx-no-bind
+          onDblClick: (e) => this.handleDateBlockClick(e, item) },
+          this.renderDateBlock(item),
+          this.monthEventRenderer.render(item, eventsArray[itemIndex], displayEventsArray[itemIndex], itemIndex)));
+      })));
+    });
   }
-}
-
-/**
- * Calendar month view generator
- */
-class MonthViewGenerator extends CalendarViewGenerator {
   /**
-   * @inheritDoc
+   * It takes a `CalendarDate` object as a parameter and returns an HTML element representing a date block in the calendar view.
+   *
+   * @param {CalendarDate} item the day object
+   * @returns {HTMLElement} the date block element
    */
-  generate(period) {
-    const calendarDates = [];
-    let week = [];
-    const dates = this.generateDates(period);
-    dates.forEach((date, i) => {
-      if (!(i % 7)) {
-        calendarDates[i / 7] = week = [];
-      }
-      const item = CalendarDate.from(date);
-      week.push(item);
-    });
-    return new CalendarView(this.generateWeekHead(), calendarDates);
-  }
-}
-
-/**
- * CalendarPeriod is an abstract class that represents a period of date for calendar.
- */
-class CalendarPeriod {
-  constructor(count, current) {
-    this._count = count;
-    this._current = current ? current : CalendarDate.from(new Date());
-    this.calculatePeriod(this._current);
+  renderDateBlock(item) {
+    const isMonthFirstDay = item.date === 1;
+    return (h("div", { class: "date" },
+      isMonthFirstDay && h("div", { class: "month-block" }, getMonthName(item.toDate(), true)),
+      h("div", { role: "button", tabIndex: 0, class: "grid-col", 
+        // eslint-disable-next-line react/jsx-no-bind
+        onDblClick: (e) => this.goToCurrentDayView(e, item) }, item.date)));
   }
   /**
-   * The current date of the period.
+   * switch to current date day view
    *
-   * @type {CalendarDate}
+   * @param {MouseEvent} e the double click event object
+   * @param {CalendarDate} calendarDate the calendar date object
    */
-  get current() {
-    return this._current;
+  goToCurrentDayView(e, calendarDate) {
+    e.stopPropagation();
+    this.currentPeriodController.updateCalendarPeriod('day', calendarDate);
   }
   /**
-   * The start date of the period
+   * emit vega click event when click the date block
    *
-   * @type {CalendarDate}
+   * @param {MouseEvent} e the mouse event object
+   * @param {CalendarDate} calendarDate the calendar date object
    */
-  get startDate() {
-    return this._startDate;
+  handleDateBlockClick(e, calendarDate) {
+    const { target, clientX, clientY } = e;
+    if (this.isMonthBlockBlankArea(target)) {
+      const { year, month, date } = calendarDate;
+      this.dateDblClickEmitter.emit({
+        year,
+        month,
+        date,
+        hour: 0,
+        mouseEventInfo: { clientX, clientY },
+      });
+    }
   }
   /**
-   * The end date of the period
+   * determine if the clicked element is blank area
    *
-   * @type {CalendarDate}
+   * @param {HTMLElement} element the target element
+   * @returns {boolean} true or false
    */
-  get endDate() {
-    return this._endDate;
+  isMonthBlockBlankArea(element) {
+    // the more button and the calendar event component should not trigger dateDblClick event
+    return !element.classList.contains('more-button') && element.tagName !== 'VEGA-CALENDAR-EVENT';
   }
+}
+__decorate$l([
+  MapToComponentField()
+], VegaCalendarMonthViewRenderer.prototype, "viewMode", void 0);
+__decorate$l([
+  MapToComponentField()
+], VegaCalendarMonthViewRenderer.prototype, "calendarView", void 0);
+__decorate$l([
+  MapToComponentField()
+], VegaCalendarMonthViewRenderer.prototype, "currentPeriod", void 0);
+__decorate$l([
+  MapToComponentField()
+], VegaCalendarMonthViewRenderer.prototype, "currentPeriodController", void 0);
+__decorate$l([
+  MapToComponentField()
+], VegaCalendarMonthViewRenderer.prototype, "monthEventRenderer", void 0);
+__decorate$l([
+  MapToComponentField()
+], VegaCalendarMonthViewRenderer.prototype, "dateDblClickEmitter", void 0);
+__decorate$l([
+  MapToComponentField()
+], VegaCalendarMonthViewRenderer.prototype, "translationSlimmer", void 0);
+
+var __decorate$k = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** The `VegaCalendarViewWithTimeRenderer` class in TypeScript React renders a day view for a calendar component with title, content, and hour blocks. */
+class VegaCalendarViewWithTimeRenderer extends VegaSlimmer {
   /**
-   * The count of the period
+   * The render function in TypeScript React returns an array of HTMLElements containing the week calendar view for a specific day.
    *
-   * @type {number}
+   * @returns {HTMLElement} An array of HTMLElement elements containing the rendered content of a calendar view for a
+   * specific day in the week. The content includes the title and the main content of the calendar view
+   * for that day.
    */
-  get count() {
-    return this._count;
+  render() {
+    return (h("div", { class: "calendar-view-container" },
+      this.renderViewTitle(),
+      this.renderViewContent()));
   }
   /**
-   * This function returns the type of the object.
+   * The function `renderViewTitle` renders a calendar view title and events based on the provided source data.
    *
-   * @type {string}
+   * @returns {HTMLElement} The `renderViewTitle` function returns an HTML element (HTMLElement) that contains a calendar view title container with rows for each day's information.
    */
-  get type() {
-    return this._type;
+  renderViewTitle() {
+    const source = this.calendarView.dateItems[0];
+    const weekHead = this.calendarView.weekdays;
+    return (h("div", { class: "calendar-view-title-container" },
+      h("div", { class: "calendar-view-row" },
+        h("div", { class: "time-line-empty" }),
+        h("div", { class: "calendar-view-title" }, source.map((item, index) => (h("div", { key: item.date, class: { active: item.isToday() } },
+          h("div", null, this.translationSlimmer.t(weekHead[index])),
+          h("div", { class: "week-day" }, item.date)))))),
+      h("div", { class: "calendar-view-row calendar-view-event-all-container border-divider-bottom" },
+        h("div", { class: "time-line-all" }, this.translationSlimmer.t('All Day')),
+        this.dayViewFullDayEventRenderer.render())));
   }
   /**
-   * Go to a specific date.
+   * The `renderViewContent` function in TypeScript React renders a calendar view with day blocks and time markers based on the provided data.
    *
-   * @param {CalendarDate} date - The date to go to.
-   * @returns {this} - The current period.
+   * @returns {HTMLElement} An HTMLElement containing a calendar view row with day containers, a timeline renderer, a content container, a day list, and hour blocks for each item in the source array.
    */
-  goTo(date) {
-    return this.createBy(date);
+  renderViewContent() {
+    const source = this.calendarView.dateItems[0];
+    return (h("div", { class: "calendar-view-row calendar-view-day-container" },
+      this.timeLineRenderer.render(),
+      h("div", { class: "calendar-view-content-container" },
+        h("div", { class: "calendar-view-content" }, source.map((item) => {
+          return (h("div", { class: "grid-col border-divider-left", key: item.date },
+            h("div", { class: "hour-empty border-divider-top" }),
+            this.renderHourBlock(item)));
+        })),
+        this.dayViewTimedEventRenderer.render(),
+        this.timeLineRenderer.renderTimeMarker(source))));
   }
   /**
-   * Go to now.
+   * The function `renderHourBlock` returns an array of HTML elements representing hour blocks with time information.
    *
-   * @returns {this} - The current period.
+   * @param {CalendarDate} calendarDate then current calendar date object
+   * @returns {HTMLElement[]} An array of HTMLElements is being returned. Each HTMLElement represents an hour block with a time value inside a div element.
    */
-  now() {
-    return this.createBy(CalendarDate.from(new Date()));
+  renderHourBlock(calendarDate) {
+    const timeLineSource = Array(24).fill('');
+    return timeLineSource.map((_item, index) => {
+      return (h("div", { class: "grid-cell border-divider-top", 
+        // eslint-disable-next-line react/jsx-no-bind
+        onDblClick: (e) => {
+          this.handleDateBlockClick(calendarDate, index, e);
+        } }));
+    });
   }
   /**
-   * Calculate the period start date and end date.
+   * emit vega click event when click the date block
    *
-   * @param {CalendarDate} date - The date to calculate the period from.
+   * @param {CalendarDate} calendarDate the calendar date object
    */
-  calculatePeriod(date) {
-    const cursor = date.toDate();
-    if (this.count > 1) {
-      cursor.setDate(cursor.getDate() - getWeekdays().indexOf(cursor.getDay()));
-    }
-    this._startDate = CalendarDate.from(cursor);
-    cursor.setDate(cursor.getDate() + this.count - 1);
-    this._endDate = CalendarDate.from(cursor);
+  handleDateBlockClick(calendarDate, hour, e) {
+    const { year, month, date } = calendarDate;
+    const { clientX, clientY } = e;
+    this.dateDblClickEmitter.emit({ year, month, date, hour, mouseEventInfo: { clientX, clientY } });
   }
 }
+__decorate$k([
+  MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "viewMode", void 0);
+__decorate$k([
+  MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "timeLineRenderer", void 0);
+__decorate$k([
+  MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "dayViewTimedEventRenderer", void 0);
+__decorate$k([
+  MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "dayViewFullDayEventRenderer", void 0);
+__decorate$k([
+  MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "calendarView", void 0);
+__decorate$k([
+  MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "dateDblClickEmitter", void 0);
+__decorate$k([
+  MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "translationSlimmer", void 0);
 
-/**
- * Period of day.
- */
-class DayPeriod extends CalendarPeriod {
-  constructor(current) {
-    super(DayPeriod.DISPLAY_DATE_COUNT, current);
-    this._type = 'day';
-  }
+var __decorate$j = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** The `VegaCalendarTimeLineRenderer` class in TypeScript React renders a time line with custom time format options and includes methods for rendering time markers and the time line itself. */
+class VegaCalendarTimeLineRenderer extends VegaSlimmer {
   /**
-   * @inheritDoc
+   * takes an array of `CalendarDate` objects as input and returns an HTML element
+   *
+   * @param {CalendarDate[]} source
+   * @returns {HTMLElement} the html element
    */
-  next() {
-    const nextDate = this.current.toDate();
-    nextDate.setDate(nextDate.getDate() + 1);
-    return this.createBy(CalendarDate.from(nextDate));
+  renderTimeMarker(source) {
+    const isVisible = source.findIndex((calendarDate) => calendarDate.isToday()) >= 0;
+    return (h("div", { class: {
+        'time-marker-container': true,
+        'hidden': !isVisible,
+      } },
+      h("div", { class: "time-marker", style: { top: this.getTimeMarkerPosition() }, ref: (div) => (this.timeMarkerRef = div) }, source.map((item) => {
+        return h("div", { key: item.date, class: { active: item.isToday() } });
+      }))));
   }
   /**
-   * @inheritDoc
+   * rendering the time line component as an HTML element
+   *
+   * @returns {HTMLElement} the html element
    */
-  previous() {
-    const previousDate = this.current.toDate();
-    previousDate.setDate(previousDate.getDate() - 1);
-    return this.createBy(CalendarDate.from(previousDate));
+  render() {
+    const timeLineSource = this.getTimeLineTitles();
+    return (h("div", { class: "time-line", ref: (div) => (this.timeLineRef = div) },
+      h("div", { class: "hour-empty" }),
+      timeLineSource.map((time, index) => {
+        return (h("div", { key: time },
+          h("div", { class: "time-text", "data-time": index === 0 ? 24 : index }, time)));
+      })));
   }
   /**
-   * @inheritDoc
+   * scroll to current time line block if change view mode to week or day
+   *
+   * @param {VegaCalendarViewModeType} viewMode the view mode
    */
-  createBy(current) {
-    return new DayPeriod(current);
-  }
-}
-DayPeriod.DISPLAY_DATE_COUNT = 1;
-
-/**
- * Period of the week
- */
-class WeekPeriod extends CalendarPeriod {
-  constructor(current) {
-    super(WeekPeriod.DISPLAY_DATE_COUNT, current);
-    this._type = 'week';
+  updateTimeLine(viewMode) {
+    this.scrollToTargetTimeBlock(viewMode);
+    this.syncTimeMarkerPosition(viewMode);
   }
   /**
-   * @inheritDoc
+   * remove setInterval when component destroy
    */
-  next() {
-    const nextWeekStartDate = this.current.toDate();
-    nextWeekStartDate.setDate(nextWeekStartDate.getDate() - getWeekdays().indexOf(nextWeekStartDate.getDay()) + 7);
-    return this.createBy(CalendarDate.from(nextWeekStartDate));
+  clearTimer() {
+    clearInterval(this.timeMarkerPositionTimer);
   }
   /**
-   * @inheritDoc
+   * Add the time mark position update logic if the component add back to page
    */
-  previous() {
-    const previousWeekStartDate = this.current.toDate();
-    previousWeekStartDate.setDate(previousWeekStartDate.getDate() - getWeekdays().indexOf(previousWeekStartDate.getDay()) - 7);
-    return this.createBy(CalendarDate.from(previousWeekStartDate));
+  updateTimeLineIfComponentAddBack() {
+    this.syncTimeMarkerPosition(this.viewMode);
   }
   /**
-   * @inheritDoc
+   * Should display the current time block in the view if the default view mode is not month
    */
-  createBy(current) {
-    return new WeekPeriod(current);
-  }
-}
-WeekPeriod.DISPLAY_DATE_COUNT = 7;
-
-/**
- * Period of month
- */
-class MonthPeriod extends CalendarPeriod {
-  constructor(current) {
-    super(MonthPeriod.DISPLAY_DATE_COUNT, MonthPeriod.getMonthFirstDay(current));
-    this._type = 'month';
+  displayCurrentTimeBlockByDefault() {
+    this.scrollToTargetTimeBlock(this.viewMode);
   }
   /**
-   * The function `getMonthFirstDay` returns the first day of a given month in a calendar.
+   * The function `getTimeMarkerPosition` calculates the position of the current time marker as a percentage of the day.
    *
-   * @param {CalendarDate} [calendarDate] - The `calendarDate` parameter is an optional parameter of
-   * type `CalendarDate`. It represents a specific date in the calendar. If a `calendarDate` is
-   * provided, the function will use that date to determine the first day of the month. If no
-   * `calendarDate` is provided, the function
-   * @returns {CalendarDate} A new `CalendarDate` object representing the first day of the month from the provided
-   * `calendarDate` parameter or the current date if no parameter is provided.
+   * @returns {string} a string representing the current time marker position as a percentage of the day.
    */
-  static getMonthFirstDay(calendarDate) {
-    const date = calendarDate || CalendarDate.from(new Date());
-    return new CalendarDate(date.year, date.month, 1);
+  getTimeMarkerPosition() {
+    const now = new Date();
+    const minutesOneDay = 24 * 60;
+    return ((now.getHours() * 60 + now.getMinutes()) / minutesOneDay) * 100 + '%';
   }
   /**
-   * @inheritDoc
+   * The function `getTimeLineTitles` generates a time line array based on the specified time format (24-hour) and stores it in the `timeLineSource` property.
+   *
+   * @returns {string[]} returns an array of strings representing the time line
    */
-  next() {
-    const next = this.current.toDate();
-    next.setMonth(next.getMonth() + 1);
-    return this.createBy(CalendarDate.from(next));
+  getTimeLineTitles() {
+    const timeLine = [];
+    if (this.timeFormat === '12-hour') {
+      timeLine.push('12 AM');
+      for (let i = 1; i < 12; i++) {
+        timeLine.push(`${i} AM`);
+      }
+      timeLine.push('12 PM');
+      for (let i = 1; i < 12; i++) {
+        timeLine.push(`${i} PM`);
+      }
+    }
+    else {
+      for (let i = 0; i < 24; i++) {
+        timeLine.push(`${pad(i)}`);
+      }
+    }
+    return timeLine;
   }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-calendar-scroll-to-current-time}
+   */
+  /* istanbul ignore next */
   /**
-   * @inheritDoc
+   * Update the time marker position with the time
+   *
+   * @param {VegaCalendarViewModeType} viewMode view mode value
    */
-  previous() {
-    const previous = this.current.toDate();
-    previous.setMonth(previous.getMonth() - 1);
-    return this.createBy(CalendarDate.from(previous));
+  syncTimeMarkerPosition(viewMode) {
+    clearInterval(this.timeMarkerPositionTimer);
+    if (viewMode !== 'month') {
+      this.timeMarkerPositionTimer = setInterval(() => {
+        if (this.timeMarkerRef) {
+          this.timeMarkerRef.style.top = this.getTimeMarkerPosition();
+        }
+      }, 60 * 1000);
+    }
   }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-calendar-scroll-to-current-time}
+   */
+  /* istanbul ignore next */
   /**
-   * @inheritDoc
+   * scroll the time line in to current view
+   *
+   * @param {VegaCalendarViewModeType} viewMode view mode value
    */
-  createBy(current) {
-    return new MonthPeriod(current);
+  scrollToTargetTimeBlock(viewMode) {
+    if (viewMode !== 'month') {
+      // add setTimeout here to make sure call the scroll into view after time line rendered.
+      const oneFrame = 16;
+      setTimeout(() => {
+        var _a, _b;
+        const hour = new Date().getHours();
+        (_b = (_a = this.timeLineRef) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-time='${hour < 23 ? hour + 1 : hour}']`)) === null || _b === void 0 ? void 0 : _b.scrollIntoView({ block: 'end' });
+      }, oneFrame);
+    }
   }
 }
-MonthPeriod.DISPLAY_DATE_COUNT = 6 * 7;
+__decorate$j([
+  MapToComponentField()
+], VegaCalendarTimeLineRenderer.prototype, "timeFormat", void 0);
+__decorate$j([
+  MapToComponentField()
+], VegaCalendarTimeLineRenderer.prototype, "viewMode", void 0);
+__decorate$j([
+  MapToComponentMethod('watchViewModeChange')
+], VegaCalendarTimeLineRenderer.prototype, "updateTimeLine", null);
+__decorate$j([
+  MapToComponentMethod('disconnectedCallback')
+], VegaCalendarTimeLineRenderer.prototype, "clearTimer", null);
+__decorate$j([
+  MapToComponentMethod('connectedCallback')
+], VegaCalendarTimeLineRenderer.prototype, "updateTimeLineIfComponentAddBack", null);
+__decorate$j([
+  MapToComponentMethod('componentDidLoad')
+], VegaCalendarTimeLineRenderer.prototype, "displayCurrentTimeBlockByDefault", null);
 
 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;
@@ -1170,6 +1272,9 @@ __decorate$i([
 __decorate$i([
   MapToComponentField()
 ], VegaCalendarViewController.prototype, "currentPeriod", void 0);
+__decorate$i([
+  MapToComponentField()
+], VegaCalendarViewController.prototype, "showWeekends", void 0);
 __decorate$i([
   MapToComponentField()
 ], VegaCalendarViewController.prototype, "currentPeriodController", void 0);
@@ -1205,13 +1310,14 @@ class VegaCalendarCurrentPeriodController extends VegaSlimmer {
   updateCalendarPeriod(viewMode, date) {
     switch (viewMode) {
       case 'month':
-        this.setCurrentPeriod(new MonthPeriod(date));
+        this.setCurrentPeriod(new MonthPeriod(date, this.showWeekends));
         break;
       case 'week':
-        this.setCurrentPeriod(new WeekPeriod(date));
+        this.setCurrentPeriod(new WeekPeriod(date, this.showWeekends));
         break;
       case 'day':
-        this.setCurrentPeriod(new DayPeriod(date));
+        date = this.showWeekends === false ? getClosestWorkday(date) : date;
+        this.setCurrentPeriod(new DayPeriod(date, this.showWeekends));
         break;
     }
   }
@@ -1253,6 +1359,12 @@ class VegaCalendarCurrentPeriodController extends VegaSlimmer {
       this.updateCalendarPeriod(viewMode, this.currentPeriod.current);
     }
   }
+  /**
+   * The calendar period should update when the property showWeekends change
+   */
+  updateCurrentPeriodAfterHideWeekEndsChange() {
+    this.updateCalendarPeriod(this.viewMode, this.currentPeriod.current);
+  }
   /**
    * The function `getStartDateAndEndDate` returns an array of `VegaCalendarDateType` objects based on the `startDate` and `endDate` properties of the `currentPeriod` object.
    *
@@ -1286,6 +1398,9 @@ __decorate$h([
 __decorate$h([
   MapToComponentField({ writable: true })
 ], VegaCalendarCurrentPeriodController.prototype, "viewMode", void 0);
+__decorate$h([
+  MapToComponentField()
+], VegaCalendarCurrentPeriodController.prototype, "showWeekends", void 0);
 __decorate$h([
   MapToComponentMethod('componentWillLoad')
 ], VegaCalendarCurrentPeriodController.prototype, "initialCurrentPeriod", null);
@@ -1295,6 +1410,9 @@ __decorate$h([
 __decorate$h([
   MapToComponentMethod('watchViewModeChange')
 ], VegaCalendarCurrentPeriodController.prototype, "updateCurrentPeriodByViewMode", null);
+__decorate$h([
+  MapToComponentMethod('watchShowWeekendsChange')
+], VegaCalendarCurrentPeriodController.prototype, "updateCurrentPeriodAfterHideWeekEndsChange", null);
 
 var __decorate$g = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -1439,7 +1557,9 @@ class VegaCalendarMonthEventRenderer extends VegaSlimmer {
     }
     if (removeItems.length) {
       rowEvents.forEach((items) => {
-        if (items.length && removeItems.includes(items[items.length - 1])) {
+        if (items.length &&
+          items[items.length - 1] &&
+          removeItems.includes(items[items.length - 1])) {
           result.push(items.slice(0, items.length - 1));
         }
         else {
@@ -2490,7 +2610,7 @@ class VegaCalendarEventResponsiveController extends PageResizeObserverSlimmer {
     // The debounce method will case this method called after component disconnect, then the slimmer will get issue to get viewMode from component class, this issue will catch in spec.ts
     try {
       const eventContainerRef = this.monthEventRenderer.getMonthEventContainerRef();
-      if (this.viewMode === 'month' && eventContainerRef) {
+      if (this.viewMode === 'month' && eventContainerRef && eventContainerRef.parentElement) {
         const maxContainerHeight = eventContainerRef.parentElement.getBoundingClientRect().height;
         const count = Math.floor((maxContainerHeight - VegaCalendarEventResponsiveController.monthDateTitleHeight) /
           VegaCalendarEventItemRenderer.backgroundColorModeEventHeight);
@@ -2675,7 +2795,7 @@ class VegaCalendarDayViewEventLayoutRenderer extends VegaSlimmer {
       top: `${(100 / VegaCalendarDayViewEventLayoutRenderer.totalNumberOfCells) * startIndex}%`,
       width: `calc(100% - ${left * 100}%)`,
       height: `${(100 / VegaCalendarDayViewEventLayoutRenderer.totalNumberOfCells) * (endIndex - startIndex)}%`,
-      zIndex: columnIndex > 0 ? `${columnIndex}` : null,
+      zIndex: columnIndex > 0 ? `${columnIndex}` : undefined,
     };
   }
 }
@@ -3110,7 +3230,7 @@ class VegaCalendarFullDayEventLayoutGenerator extends VegaCalendarBaseEventLayou
    */
   generate(calendarEvents) {
     const allShouldOrderLongEvents = this.collectAllShouldOrderLongEvents(calendarEvents);
-    const layoutRows = [new VegaCalendarFullDayEventLayoutRow()];
+    const layoutRows = [this.createNewLayoutCell()];
     allShouldOrderLongEvents.forEach((eventView) => {
       this.addCurrentEventToLayout(layoutRows, eventView);
     });
@@ -3319,7 +3439,7 @@ __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}";
+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-weekday-columns:7}.calendar-view.calendar-hide-weekends{--calendar-weekday-columns:5}.calendar-view-month .calendar-view-month-container{width:100%;display:grid;min-height:100%;grid-template-rows:43px repeat(6, minmax(64px, 1fr))}.calendar-view-month .calendar-view-title{background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));top:0;left:0;z-index:62}.calendar-view-month .calendar-view-title div{padding-top:12px;padding-bottom:12px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;text-align:center}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-month .calendar-view-title div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-month .calendar-view-title div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-month .calendar-view-title div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}.calendar-view-month .calendar-view-row{position:relative;display:grid;grid-template-rows:1fr;grid-template-columns:repeat(var(--calendar-weekday-columns), minmax(64px, 1fr))}.calendar-view-month .calendar-view-row.calendar-view-title{position:sticky}.calendar-view-month .calendar-view-row:last-child{border-bottom-width:0px}.calendar-view-month .calendar-view-row .row-cell{overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}.calendar-view-month .calendar-view-row .row-cell:last-child{border-right-width:0px}.calendar-view-month .calendar-view-row .row-cell .date{padding-top:4px;padding-bottom:4px;padding-right:12px;padding-left:8px}.calendar-view-month .calendar-view-row .row-cell .date>div{display:inline-block;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-month .calendar-view-row .row-cell .date>div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-month .calendar-view-row .row-cell .date>div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-month .calendar-view-row .row-cell .date>div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}.calendar-view-month .calendar-view-row .row-cell .date .month-block{margin-right:2px}.calendar-view-month .calendar-view-row .row-cell .date .grid-col{text-align:center;border-top-left-radius:9999px;border-bottom-left-radius:9999px;border-top-right-radius:9999px;border-bottom-right-radius:9999px;cursor:pointer;width:18px;height:18px;line-height:18px}.calendar-view-month .calendar-view-row .row-cell .date .grid-col:hover{background-color:rgba(var(--v-bg-action-secondary-hover, 4, 112, 236, 0.1))}.calendar-view-month .calendar-view-row .row-cell .date .grid-col:active{background-color:rgba(var(--v-bg-action-secondary-active, 29, 65, 195, 0.1))}.calendar-view-month .calendar-view-row .row-cell .date .grid-col:focus-visible{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:2px}.calendar-view-month .calendar-view-row .row-cell.current-month-day .date>div{color:rgba(var(--v-text-primary, 32, 54, 69, 1))}.calendar-view-month .calendar-view-row .row-cell.disabled{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1))}.calendar-view-month .calendar-view-row .row-cell.disabled .date>div{color:rgba(var(--v-text-disabled, 176, 180, 181, 1))}.calendar-view-month .calendar-view-row .row-cell.active .date .grid-col{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1));border-top-left-radius:9999px;border-bottom-left-radius:9999px;color:rgba(var(--v-text-on-action, 252, 252, 252, 1))}.calendar-view-month .calendar-view-row .row-cell.active .date .grid-col:hover{background-color:rgba(var(--v-bg-action-hover, 4, 112, 236, 1))}.calendar-view-month .calendar-view-row .row-cell.active .date .grid-col:active{background-color:rgba(var(--v-bg-action-active, 29, 65, 195, 1))}.calendar-view-month .calendar-view-row .row-cell.active .date .grid-col:focus-visible{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:2px}.calendar-view-container{width:100%}.calendar-view-container .calendar-view-title-container{background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));position:sticky;top:0;left:0;z-index:62}.calendar-view-container .calendar-view-row{box-sizing:border-box;width:100%;display:flex;flex-direction:row}.calendar-view-container .calendar-view-row .time-line,.calendar-view-container .calendar-view-row .time-line-empty,.calendar-view-container .calendar-view-row .time-line-all{width:72px;text-align:right;padding-right:8px;box-sizing:border-box;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));flex-shrink:0}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-container .calendar-view-row .time-line,.calendar-view-container .calendar-view-row .time-line-empty,.calendar-view-container .calendar-view-row .time-line-all{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-container .calendar-view-row .time-line,.calendar-view-container .calendar-view-row .time-line-empty,.calendar-view-container .calendar-view-row .time-line-all{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-container .calendar-view-row .time-line,.calendar-view-container .calendar-view-row .time-line-empty,.calendar-view-container .calendar-view-row .time-line-all{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}.calendar-view-container .calendar-view-title{width:100%}.calendar-view-container .calendar-view-title>div{padding:12px;padding-bottom:8px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;text-align:center;display:flex;flex-direction:column;gap:8px}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-container .calendar-view-title>div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-container .calendar-view-title>div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-container .calendar-view-title>div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}.calendar-view-container .calendar-view-title .week-day{color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-container .calendar-view-title .week-day{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-container .calendar-view-title .week-day{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-container .calendar-view-title .week-day{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}}.calendar-view-container .calendar-view-title .active div{color:rgba(var(--v-text-link, 19, 98, 226, 1))}.calendar-view-container .calendar-view-event-all-container{align-items:center}.calendar-view-container .calendar-view-event-all{display:grid;grid-template-rows:1fr;flex-grow:1;min-height:18px}.calendar-view-container .calendar-view-day-container .time-line{display:grid;grid-template-rows:16px repeat(24, minmax(74px, 1fr))}.calendar-view-container .calendar-view-day-container .time-line .time-text{margin-top:-9px}.calendar-view-container .calendar-view-day-container .calendar-view-content{width:100%}.calendar-view-container .calendar-view-day-container .calendar-view-content .grid-col{display:grid;grid-template-rows:16px repeat(24, minmax(74px, 1fr));grid-template-columns:minmax(64px, 1fr)}.calendar-view-container .calendar-view-day-container .calendar-view-content .grid-col>.border-divider-top:first-child{border-top-width:0px}.calendar-view-container .calendar-view-content-container{width:100%;position:relative}.calendar-view-week .calendar-view-container{min-height:100%}.calendar-view-week .calendar-view-container .calendar-view-title{display:grid;grid-template-rows:1fr;grid-template-columns:repeat(var(--calendar-weekday-columns), minmax(64px, 1fr))}.calendar-view-week .calendar-view-container .calendar-view-event-all{grid-template-columns:repeat(var(--calendar-weekday-columns), minmax(64px, 1fr))}.calendar-view-week .calendar-view-container .calendar-view-day-container .calendar-view-content{display:grid;grid-template-columns:repeat(var(--calendar-weekday-columns), minmax(64px, 1fr))}.calendar-view-week .time-marker-container .time-marker{display:grid;grid-template-columns:repeat(var(--calendar-weekday-columns), minmax(64px, 1fr))}.calendar-view-week .day-event-container{display:grid;grid-template-columns:repeat(var(--calendar-weekday-columns), minmax(64px, 1fr))}.calendar-view-day .calendar-view-container{min-height:100%}.time-marker-container{position:absolute;min-width:100%;left:0;top:16px;height:calc(100% - 16px);pointer-events:none}.time-marker-container.hidden{display:none}.time-marker-container .time-marker{position:absolute;height:2px;display:grid;min-width:100%;left:0;top:0;z-index:61}.time-marker-container .time-marker div{width:100%;height:2px;background-color:rgba(var(--v-bg-status-error, 255, 110, 139, 1));opacity:0.3}.time-marker-container .time-marker div.active{opacity:1;position:relative}.time-marker-container .time-marker div.active::before{content:\"\";display:block;border-top-left-radius:9999px;border-bottom-left-radius:9999px;border-top-right-radius:9999px;border-bottom-right-radius:9999px;position:absolute;width:8px;height:8px;background-color:rgba(var(--v-bg-status-error, 255, 110, 139, 1));top:-3px;left:-4px}.day-event-container{position:absolute;min-width:100%;left:0;top:16px;height:calc(100% - 16px);pointer-events:none}.day-event-container .day-event-col{height:100%;overflow:hidden}.day-event-container vega-calendar-event{pointer-events:auto;height:100%}.calendar-view-month .month-event-row{position:absolute;width:100%;overflow:hidden;height:calc(100% - 26px);left:0;bottom:0}.calendar-view-month .events-container{width:100%;box-sizing:border-box;overflow:hidden;padding:2px;display:flex;flex-direction:column;gap:2px;justify-content:space-between;flex-grow:1}.calendar-view-month .events-container .event-list{display:flex;flex-direction:column;gap:2px;flex-grow:1}.calendar-view-month .events-container .event-list .month-event-block{box-sizing:border-box;padding-left:2px;padding-right:3px}.calendar-view-month .events-container .month-event-more .more-button{display:inline-block;height:16px;font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px;color:rgba(var(--v-text-link, 19, 98, 226, 1));cursor:pointer;border-radius:2px}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-month .events-container .month-event-more .more-button{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-month .events-container .month-event-more .more-button{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-month .events-container .month-event-more .more-button{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}.calendar-view-month .events-container .month-event-more .more-button:focus-visible{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:0px}.calendar-view-container .calendar-view-event-all{position:relative}.calendar-view-container .calendar-view-event-all .placeholder-block{padding-top:2px;padding-bottom:2px;box-sizing:content-box}.calendar-view-container .calendar-view-event-all .placeholder-block span{display:none}.calendar-view-container .calendar-view-event-all .day-event-block{padding-top:2px;padding-right:2px;box-sizing:border-box;padding-left:3px}.calendar-view-container .calendar-view-event-all .more-button{display:inline-block;height:16px;font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px;color:rgba(var(--v-text-link, 19, 98, 226, 1));cursor:pointer;border-radius:2px;margin-left:2px;padding:2px}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-container .calendar-view-event-all .more-button{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-container .calendar-view-event-all .more-button{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-container .calendar-view-event-all .more-button{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}.calendar-view-container .calendar-view-event-all .more-button:focus-visible{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:0px}.calendar-view-container .calendar-view-event-all .event-all-col{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start}.calendar-view-container .day-event-col{position:relative}.calendar-view-container .day-event-col .time-event-block{box-sizing:border-box;padding-right:8px;padding-bottom:2px;padding-top:3px}.calendar-view-container .day-event-col .time-event-block vega-calendar-event.bg-shadow::part(event-container):not(:focus){outline:2px solid rgba(var(--v-bg-primary, 252, 252, 252, 1))}.calendar-view-container .day-event-col .time-event-block:focus-within{z-index:60 !important}.calendar-event-slot-container{display:none}";
 
 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;
@@ -3343,6 +3463,7 @@ const VegaCalendar = class {
     this.vegaMoreActionClick = createEvent(this, "vegaMoreActionClick", 7);
     this.moreActionClick = createEvent(this, "moreActionClick", 7);
     this.globalSlimmer = {};
+    this.translationSlimmer = new TranslationSlimmer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.renderer = new VegaCalendarRenderer();
     this.switchPanelRenderer = new VegaCalendarSwitchPanelRenderer();
@@ -3374,22 +3495,28 @@ const VegaCalendar = class {
     /**
      * Specifies the current view mode of the calendar.
      *
-     * @version 2.14.0
+     * @vegaVersion 2.14.0
      */
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.viewMode = 'month';
     /**
      * Specifies the time format of the calendar.
      *
-     * @version 2.14.0
+     * @vegaVersion 2.14.0
      */
     this.timeFormat = '24-hour';
     /**
      * Controls the visibility of the calendar's event color bar.
      *
-     * @version 2.21.0
+     * @vegaVersion 2.21.0
      */
     this.showEventColorBar = true;
+    /**
+     * Controls the visibility of the weekend columns in the calendar.
+     *
+     * @vegaVersion 2.28.0
+     */
+    this.showWeekends = true;
   }
   /**
    * Tracks changes to the current period state.
@@ -3427,6 +3554,11 @@ const VegaCalendar = class {
    */
   watchShowEventColorBar(newValue) {
   }
+  /**
+   * Monitors changes in the visibility of the weekend columns in the calendar.
+   */
+  watchShowWeekendsChange() {
+  }
   render() {
     return sanitizeVegaComponent(h(Host, null, this.renderer.render()), this.host);
   }
@@ -3436,12 +3568,16 @@ const VegaCalendar = class {
     "viewMode": ["watchViewModeChange"],
     "events": ["watchEventsChange"],
     "timeFormat": ["watchTimeFormat"],
-    "showEventColorBar": ["watchShowEventColorBar"]
+    "showEventColorBar": ["watchShowEventColorBar"],
+    "showWeekends": ["watchShowWeekendsChange"]
   }; }
 };
 __decorate$7([
   InjectVegaGlobalSlimmer()
 ], VegaCalendar.prototype, "globalSlimmer", void 0);
+__decorate$7([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "translationSlimmer", void 0);
 __decorate$7([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
@@ -3592,13 +3728,14 @@ class VegaCalendarEventRenderer extends VegaSlimmer {
    * @returns {HTMLAnchorElement} event element
    */
   renderNormalEvent() {
-    const { variant = 'primary', disabled } = this.calendarEvent;
+    const { variant, disabled } = this.calendarEvent;
+    const variantText = variant || 'primary';
     const isMonthEvent = !this.host.classList.contains('day-event');
     const classMap = {
       'slot-container': this.slotMode,
       'event-container': true,
       'disabled': disabled,
-      [variant]: true,
+      [variantText]: true,
     };
     if (isMonthEvent) {
       return (h("div", { role: "button", tabIndex: 0, class: classMap, ref: (node) => (this.slotContainerRef = node) },