@globalpayments/vega 2.13.0 → 2.14.0

package/dist/collection/components/vega-calendar/slimmers/day-view/renderers/timed-event/layout/test/dayViewEventLayoutGenerator.test.js

@@ -0,0 +1,77 @@
+import { CalendarEvent } from '../../../../../../../../helpers/calendar/calendar-event';
+import { VegaCalendarDayViewTimedEventLayoutGenerator } from '../dayViewTimedEventLayoutGenerator';
+const mockEvents = [
+  {
+    key: '0',
+    title: 'Event 0',
+    startDate: '07/08/2024',
+    endDate: '07/08/2024',
+    startTime: '10:00',
+    endTime: '11:00',
+    isAllDay: false,
+    repeat: 'none',
+    disabled: false,
+    variant: 'primary',
+  },
+  {
+    key: '1',
+    title: 'Event 1',
+    startDate: '07/08/2024',
+    endDate: '07/08/2024',
+    startTime: '10:00',
+    endTime: '10:15',
+    isAllDay: false,
+    repeat: 'none',
+    disabled: false,
+    variant: 'primary',
+    color: '#73E6DC',
+  },
+  {
+    key: '2',
+    title: 'Event 2',
+    startDate: '07/08/2024',
+    endDate: '07/08/2024',
+    startTime: '10:30',
+    endTime: '11:30',
+    isAllDay: false,
+    repeat: 'none',
+    disabled: false,
+    variant: 'secondary',
+    color: '#806BFF',
+  },
+  {
+    key: '3',
+    title: 'Event 3',
+    startDate: '07/08/2024',
+    endDate: '07/08/2024',
+    startTime: '10:45',
+    endTime: '11:00',
+    isAllDay: false,
+    repeat: 'none',
+    disabled: false,
+    variant: 'secondary',
+    color: '#806BFF',
+  },
+  {
+    key: '4',
+    title: 'Event 4',
+    startDate: '07/08/2024',
+    endDate: '07/08/2024',
+    startTime: '11:00',
+    endTime: '12:00',
+    isAllDay: false,
+    repeat: 'none',
+    disabled: false,
+    variant: 'secondary',
+    color: '#806BFF',
+  },
+];
+describe('VegaCalendarDayViewEventLayoutGenerator', () => {
+  it('VegaCalendarDayViewEventLayoutGenerator#generate', () => {
+    const generator = new VegaCalendarDayViewTimedEventLayoutGenerator();
+    const calendarEvents = mockEvents.map((item) => new CalendarEvent(item));
+    const layout = generator.generate(calendarEvents);
+    expect(layout.eventLayoutCells.length).toEqual(3);
+    expect(layout.getEventColumnsSpannedCount(calendarEvents[2])).toEqual(3);
+  });
+});

package/dist/collection/components/vega-calendar/slimmers/day-view/renderers/timed-event/vega-calendar-day-event-layout-renderer.js

@@ -0,0 +1,70 @@
+var __decorate = (this && this.__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;
+};
+import { h } from '@stencil/core';
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+/** The `VegaCalendarDayViewEventLayoutRenderer` class in TypeScript React renders event layouts for a day view calendar. */
+export class VegaCalendarDayViewEventLayoutRenderer extends VegaSlimmer {
+  /**
+   * The `render` function in TypeScript React renders a layout of calendar events for a day view.
+   *
+   * @param {VegaCalendarDayViewTimedEventLayout} layout - The `layout` parameter in the `render` function is
+   * of type `VegaCalendarDayViewTimedEventLayout`, which contains information about the layout of events for
+   * a day view in a calendar. It has properties like `eventLayoutColumns`, which is an array of `VegaCalendarDayViewEvent
+   * @returns {HTMLElement[]} An array of HTMLElements representing the rendered event nodes based on the provided layout and event data.
+   */
+  render(layout) {
+    const layoutColumns = layout.eventLayoutCells;
+    const eventNodes = [];
+    layoutColumns.forEach((columns, index) => {
+      let renderEvent = columns.getEventBySlotIndex(0);
+      let start = 0;
+      for (let i = 0; i < VegaCalendarDayViewEventLayoutRenderer.totalNumberOfCells; i++) {
+        const currentEvent = columns.getEventBySlotIndex(i);
+        if (currentEvent !== renderEvent) {
+          if (renderEvent) {
+            eventNodes.push(h("div", { key: index, class: "time-event-block", style: this.getTimeEventStyle(start, i, index, layout.getEventColumnsSpannedCount(renderEvent)) }, this.eventItemRenderer.render(renderEvent, {
+              'day-event': true,
+              'bg-shadow': index > 0,
+            })));
+          }
+          renderEvent = currentEvent;
+          start = i;
+        }
+      }
+    });
+    return eventNodes;
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-calendar-render-timed-event-correct}
+   */
+  /* istanbul ignore next */
+  /**
+   * This function calculates and returns the style properties for positioning and sizing a calendar event within a grid layout.
+   *
+   * @param {number} startIndex - The `startIndex` parameter represents the index of the starting cell for the time event in the calendar grid.
+   * @param {number} endIndex - The `endIndex` parameter represents the index of the end position of the time event within a column. It indicates where the time event ends vertically within the column layout.
+   * @param {number} columnIndex - The `columnIndex` parameter represents the index of the column in which the event is being displayed. It is used to calculate the `left` position of the event element within the container based on the total number of columns spanned by the event.
+   * @param {number} columnsSpannedCount - The `columnsSpannedCount` parameter represents the number of columns spanned by the event in a calendar layout. It is used to calculate the left position of the event within the calendar grid.
+   * @returns {VegaCalendarEventStyle} The function `getTimeEventStyle` returns an object of type `VegaCalendarEventStyle` with properties for position, left, top, width, height, and zIndex.
+   */
+  getTimeEventStyle(startIndex, endIndex, columnIndex, columnsSpannedCount) {
+    const left = columnIndex * (1 / columnsSpannedCount);
+    return {
+      position: 'absolute',
+      left: `${left * 100}%`,
+      top: `${(100 / VegaCalendarDayViewEventLayoutRenderer.totalNumberOfCells) * startIndex}%`,
+      width: `calc(100% - ${left * 100}%)`,
+      height: `${(100 / VegaCalendarDayViewEventLayoutRenderer.totalNumberOfCells) * (endIndex - startIndex)}%`,
+      zIndex: columnIndex > 0 ? `${columnIndex}` : null,
+    };
+  }
+}
+VegaCalendarDayViewEventLayoutRenderer.totalNumberOfCells = 24 * 4;
+__decorate([
+  MapToComponentField()
+], VegaCalendarDayViewEventLayoutRenderer.prototype, "eventItemRenderer", void 0);

package/dist/collection/components/vega-calendar/slimmers/day-view/renderers/timed-event/vega-calendar-timed-event-renderer.js

@@ -0,0 +1,52 @@
+var __decorate = (this && this.__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;
+};
+import { h } from '@stencil/core';
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { VegaCalendarDayViewTimedEventLayoutGenerator } from './layout/dayViewTimedEventLayoutGenerator';
+import { VegaCalendarEventSorter } from '../../../common/helpers/calendarEventSorter';
+/** The `VegaCalendarTimedEventRenderer` class in TypeScript React renders timed events for a calendar view based on the current day's events. timed events render for day view and week view */
+export class VegaCalendarTimedEventRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.calendarEventSorter = new VegaCalendarEventSorter();
+    this.dayViewTimedEventLayoutGenerator = new VegaCalendarDayViewTimedEventLayoutGenerator();
+  }
+  /**
+   * render current preiod normal events
+   *
+   * @returns {HTMLElement} events element
+   */
+  render() {
+    const viewSource = this.calendarView.dateItems[0];
+    return (h("div", { class: "day-event-container" }, viewSource.map((item) => {
+      return (h("div", { key: `${item.month}-${item.date}`, class: "day-event-col" }, this.renderTimedEvents(item)));
+    })));
+  }
+  /**
+   * render current day events
+   *
+   * @param {CalendarDate} date calendar Date
+   * @returns {HTMLElement[]} event elements
+   */
+  renderTimedEvents(date) {
+    const events = this.calendarEventController
+      .getCurrentDateEvents(date)
+      .filter((eventItem) => !eventItem.isAllDayEvent && !eventItem.isGroupEvent());
+    const sortEvents = this.calendarEventSorter.sortCalendarEventByTime(events);
+    const layout = this.dayViewTimedEventLayoutGenerator.generate(sortEvents);
+    return this.dayViewEventLayoutRenderer.render(layout);
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaCalendarTimedEventRenderer.prototype, "calendarView", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarTimedEventRenderer.prototype, "calendarEventController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarTimedEventRenderer.prototype, "dayViewEventLayoutRenderer", void 0);

package/dist/collection/components/vega-calendar/slimmers/day-view/renderers/vega-calendar-time-line-renderer.js

@@ -0,0 +1,152 @@
+var __decorate = (this && this.__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;
+};
+import { h } from '@stencil/core';
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { pad } from '../../../../../utils/date';
+/** 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. */
+export class VegaCalendarTimeLineRenderer extends VegaSlimmer {
+  /**
+   * takes an array of `CalendarDate` objects as input and returns an HTML element
+   *
+   * @param {CalendarDate[]} source
+   * @returns {HTMLElement} the html element
+   */
+  renderTimeMarker(source) {
+    const isVisible = source.findIndex((calendarDate) => calendarDate.isToday()) >= 0;
+    return (h("div", { class: {
+        'time-marker-container': true,
+        'hidden': !isVisible,
+      } },
+      h("div", { class: "time-marker", style: { top: this.getTimeMarkerPosition() }, ref: (div) => (this.timeMarkerRef = div) }, source.map((item) => {
+        return h("div", { key: item.date, class: { active: item.isToday() } });
+      }))));
+  }
+  /**
+   * rendering the time line component as an HTML element
+   *
+   * @returns {HTMLElement} the html element
+   */
+  render() {
+    const timeLineSource = this.getTimeLineTitles();
+    return (h("div", { class: "time-line", ref: (div) => (this.timeLineRef = div) },
+      h("div", { class: "hour-empty" }),
+      timeLineSource.map((time, index) => {
+        return (h("div", { key: time },
+          h("div", { class: "time-text", "data-time": index === 0 ? 24 : index }, time)));
+      })));
+  }
+  /**
+   * scroll to current time line block if change view mode to week or day
+   *
+   * @param {VegaCalendarViewModeType} viewMode the view mode
+   */
+  updateTimeLine(viewMode) {
+    this.scrollToTargetTimeBlock(viewMode);
+    this.syncTimeMarkerPosition(viewMode);
+  }
+  /**
+   * remove setInterval when component destroy
+   */
+  clearTimer() {
+    clearInterval(this.timeMarkerPositionTimer);
+  }
+  /**
+   * Add the time mark position update logic if the component add back to page
+   */
+  updateTimeLineIfComponentAddBack() {
+    this.syncTimeMarkerPosition(this.viewMode);
+  }
+  /**
+   * The function `getTimeMarkerPosition` calculates the position of the current time marker as a percentage of the day.
+   *
+   * @returns {string} a string representing the current time marker position as a percentage of the day.
+   */
+  getTimeMarkerPosition() {
+    const now = new Date();
+    const minutesOneDay = 24 * 60;
+    return ((now.getHours() * 60 + now.getMinutes()) / minutesOneDay) * 100 + '%';
+  }
+  /**
+   * The function `getTimeLineTitles` generates a time line array based on the specified time format (24-hour) and stores it in the `timeLineSource` property.
+   *
+   * @returns {string[]} returns an array of strings representing the time line
+   */
+  getTimeLineTitles() {
+    const timeLine = [];
+    if (this.timeFormat === '12-hour') {
+      timeLine.push('12 AM');
+      for (let i = 1; i < 12; i++) {
+        timeLine.push(`${i} AM`);
+      }
+      timeLine.push('12 PM');
+      for (let i = 1; i < 12; i++) {
+        timeLine.push(`${i} PM`);
+      }
+    }
+    else {
+      for (let i = 0; i < 24; i++) {
+        timeLine.push(pad(i));
+      }
+    }
+    return timeLine;
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-calendar-scroll-to-current-time}
+   */
+  /* istanbul ignore next */
+  /**
+   * Update the time marker position with the time
+   *
+   * @param {VegaCalendarViewModeType} viewMode view mode value
+   */
+  syncTimeMarkerPosition(viewMode) {
+    clearInterval(this.timeMarkerPositionTimer);
+    if (viewMode !== 'month') {
+      this.timeMarkerPositionTimer = setInterval(() => {
+        if (this.timeMarkerRef) {
+          this.timeMarkerRef.style.top = this.getTimeMarkerPosition();
+        }
+      }, 60 * 1000);
+    }
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-calendar-scroll-to-current-time}
+   */
+  /* istanbul ignore next */
+  /**
+   * scroll the time line in to current view
+   *
+   * @param {VegaCalendarViewModeType} viewMode view mode value
+   */
+  scrollToTargetTimeBlock(viewMode) {
+    if (viewMode !== 'month') {
+      // add setTimeout here to make sure call the scroll into view after time line rendered.
+      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);
+    }
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaCalendarTimeLineRenderer.prototype, "timeFormat", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarTimeLineRenderer.prototype, "viewMode", void 0);
+__decorate([
+  MapToComponentMethod('watchViewModeChange')
+], VegaCalendarTimeLineRenderer.prototype, "updateTimeLine", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], VegaCalendarTimeLineRenderer.prototype, "clearTimer", null);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], VegaCalendarTimeLineRenderer.prototype, "updateTimeLineIfComponentAddBack", null);

package/dist/collection/components/vega-calendar/slimmers/day-view/renderers/vega-calendar-view-with-time-renderer.js

@@ -0,0 +1,88 @@
+var __decorate = (this && this.__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;
+};
+import { h } from '@stencil/core';
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+/** The `VegaCalendarViewWithTimeRenderer` class in TypeScript React renders a day view for a calendar component with title, content, and hour blocks. */
+export class VegaCalendarViewWithTimeRenderer extends VegaSlimmer {
+  /**
+   * The render function in TypeScript React returns an array of HTMLElements containing the week calendar view for a specific day.
+   *
+   * @returns {HTMLElement} An array of HTMLElement elements containing the rendered content of a calendar view for a
+   * specific day in the week. The content includes the title and the main content of the calendar view
+   * for that day.
+   */
+  render() {
+    return (h("div", { class: "calendar-view-container" },
+      this.renderViewTitle(),
+      this.renderViewContent()));
+  }
+  /**
+   * The function `renderViewTitle` renders a calendar view title and events based on the provided source data.
+   *
+   * @returns {HTMLElement} The `renderViewTitle` function returns an HTML element (HTMLElement) that contains a calendar view title container with rows for each day's information.
+   */
+  renderViewTitle() {
+    const source = this.calendarView.dateItems[0];
+    const weekHead = this.calendarView.weekdays;
+    return (h("div", { class: "calendar-view-title-container" },
+      h("div", { class: "calendar-view-row" },
+        h("div", { class: "time-line-empty" }),
+        h("div", { class: "calendar-view-title" }, source.map((item, index) => (h("div", { key: item.date, class: { active: item.isToday() } },
+          h("div", null, 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())));
+  }
+  /**
+   * The `renderViewContent` function in TypeScript React renders a calendar view with day blocks and time markers based on the provided data.
+   *
+   * @returns {HTMLElement} An HTMLElement containing a calendar view row with day containers, a timeline renderer, a content container, a day list, and hour blocks for each item in the source array.
+   */
+  renderViewContent() {
+    const source = this.calendarView.dateItems[0];
+    return (h("div", { class: "calendar-view-row calendar-view-day-container" },
+      this.timeLineRenderer.render(),
+      h("div", { class: "calendar-view-content-container" },
+        h("div", { class: "calendar-view-content" }, source.map((item) => {
+          return (h("div", { class: "grid-col border-divider-left", key: item.date },
+            h("div", { class: "hour-empty border-divider-top" }),
+            this.renderHourBlock()));
+        })),
+        this.dayViewTimedEventRenderer.render(),
+        this.timeLineRenderer.renderTimeMarker(source))));
+  }
+  /**
+   * The function `renderHourBlock` returns an array of HTML elements representing hour blocks with time information.
+   *
+   * @returns {HTMLElement[]} An array of HTMLElements is being returned. Each HTMLElement represents an hour block with a time value inside a div element.
+   */
+  renderHourBlock() {
+    const timeLineSource = Array(24).fill('');
+    return timeLineSource.map(() => {
+      return h("div", { class: "grid-cell border-divider-top" });
+    });
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "viewMode", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "timeLineRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "dayViewTimedEventRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "dayViewFullDayEventRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "calendarView", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "calendarViewController", void 0);

package/dist/collection/components/vega-calendar/slimmers/month-view/renderers/vega-calendar-month-event-renderer.js

@@ -0,0 +1,177 @@
+var __decorate = (this && this.__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;
+};
+import { forceUpdate, h } from '@stencil/core';
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { getMonthName } from '../../../utils';
+import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/domNodeSubjectObserverFactory';
+import { VegaInternalCalendarMonthEventsChange } from '../../../../../helpers/event-manager/eventID/vegaInternalEventId';
+import { createEnterKeyHandlerToTriggerClick } from '../../../../../utils/accessibility';
+/** This code snippet defines a TypeScript class `VegaCalendarMonthEventRenderer` that extends `VegaSlimmer`. Here's a breakdown of what the class and its methods are doing: */
+export class VegaCalendarMonthEventRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.maxMonthDisplayEventsCount = 2;
+  }
+  /**
+   * current row dates all events.
+   *
+   * @param {CalendarDate[]} rowDate the current view date object
+   * @returns {(CalendarEvent|null)[][]} the current view events
+   */
+  getCurrentRowEvents(rowDate) {
+    const result = [];
+    rowDate.forEach((item) => {
+      const currentDateEvents = this.calendarEventController.getCurrentDateEvents(item);
+      result.push(currentDateEvents);
+    });
+    return this.fullDayEventLayoutRenderer.sortLongEvents(result);
+  }
+  /**
+   * The function filterRowDisplayEvents processes a 2D array of CalendarEvent objects to limit the number of events displayed per row.
+   *
+   * @param {(CalendarEvent|null)[][]} rowEvents - `rowEvents` is an array of arrays of `CalendarEvent` objects. Each inner array represents events for a specific row in a calendar display.
+   * @returns {(CalendarEvent|null)[][]} the current row should display events array
+   */
+  filterRowDisplayEvents(rowEvents) {
+    const result = [];
+    rowEvents.forEach((events) => {
+      const displayEvents = events.length > this.maxMonthDisplayEventsCount
+        ? events.slice(0, this.maxMonthDisplayEventsCount - 1)
+        : events;
+      result.push(displayEvents);
+    });
+    return this.hideTheCutOffEvents(rowEvents, result);
+  }
+  /**
+   * Get the month event container element ref
+   *
+   * @returns {HTMLDivElement} the container element
+   */
+  getMonthEventContainerRef() {
+    return this.eventContainerRef;
+  }
+  /**
+   * render the current date events
+   *
+   * @param {CalendarDate} calendarDate current day
+   * @param {Nullable<CalendarEvent>[]} allEvents current row events
+   * @param {Nullable<CalendarEvent>[]} displayEvents current row should display events
+   * @param {number} currentViewIndex current day index of week
+   * @returns {HTMLDivElement} the events container
+   */
+  render(calendarDate, allEvents, displayEvents, currentViewIndex) {
+    const hiddenEventsLength = allEvents
+      .slice(displayEvents.length)
+      .filter((item) => item).length;
+    return (h("div", { class: "events-container", ref: (node) => (this.eventContainerRef = node) },
+      h("div", { class: "event-list" }, this.fullDayEventLayoutRenderer.render(displayEvents, currentViewIndex)),
+      this.renderMoreButton(allEvents, hiddenEventsLength, `${calendarDate.date} ${getMonthName(calendarDate.toDate())} ${calendarDate.year}`)));
+  }
+  /**
+   * Add a month event display count change observer, than update the component
+   */
+  addMaxDisplayCountChange() {
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.host, VegaInternalCalendarMonthEventsChange, (payload) => {
+      this.maxMonthDisplayEventsCount = payload.detail;
+      if (this.viewMode === 'month') {
+        forceUpdate(this.host);
+      }
+    });
+  }
+  /**
+   * Render the event more button if there is no enough space to display all event
+   *
+   * @param {Nullable<CalendarEvent>[]} events all event list array
+   * @param {number} moreItemsLength popover events length
+   * @param {string} title the popover title
+   * @returns {HTMLDivElement | null} the more button or null
+   */
+  renderMoreButton(events, moreItemsLength, title) {
+    if (moreItemsLength) {
+      const backgroundColorEvents = events.filter((eventItem) => {
+        return eventItem && (eventItem.isAllDayEvent || eventItem.isGroupEvent());
+      });
+      const otherEvents = events.filter((eventItem) => {
+        return eventItem && !eventItem.isAllDayEvent && !eventItem.isGroupEvent();
+      });
+      return (h("div", { class: "month-event-more" },
+        h("vega-popover", { trigger: "click", placement: "right" },
+          h("div", { tabIndex: 0, slot: "popover-content", role: "button", class: "more-button", onKeyDown: createEnterKeyHandlerToTriggerClick() }, `${moreItemsLength} More`),
+          h("vega-flex", { slot: "popover", direction: "col", gap: "0" },
+            h("vega-font", { textAlign: "center", variant: "font-field-label", color: "text-primary", style: { padding: '4px 0', marginBottom: '8px' } }, title),
+            h("vega-flex", { direction: "col", gap: "size-4", style: { paddingBottom: otherEvents.length ? '4px' : '0px' } }, backgroundColorEvents.map((item) => {
+              return this.eventItemRenderer.render(item, {
+                'month-event': true,
+                'calendar-event-large-size': true,
+              });
+            })),
+            otherEvents.map((item) => {
+              return this.eventItemRenderer.render(item, {
+                'month-event': true,
+                'calendar-event-large-size': true,
+              });
+            })))));
+    }
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-calendar-render-full-day-event-correct}
+   */
+  /* istanbul ignore next */
+  /**
+   * The `hideTheCutOffEvents` method in the `VegaCalendarMonthEventRenderer` class is responsible for removing any cut-off events from the displayed events in each row
+   *
+   * @param {Nullable<CalendarEvent>[][]} allEvents the all events
+   * @param {Nullable<CalendarEvent>[][]} rowEvents the display events
+   * @returns {Nullable<CalendarEvent>[][]} new event array
+   */
+  hideTheCutOffEvents(allEvents, rowEvents) {
+    const result = [];
+    const removeItems = [];
+    const shouldCheckEvents = rowEvents
+      .map((items) => items[items.length - 1])
+      .filter((item) => item && item.isGroupEvent());
+    if (shouldCheckEvents.length) {
+      shouldCheckEvents.forEach((checkItem) => {
+        if (allEvents.filter((items) => items.includes(checkItem)).length >
+          rowEvents.filter((items) => items.includes(checkItem)).length) {
+          removeItems.push(checkItem);
+        }
+      });
+    }
+    if (removeItems.length) {
+      rowEvents.forEach((items) => {
+        if (items.length && removeItems.includes(items[items.length - 1])) {
+          result.push(items.slice(0, items.length - 1));
+        }
+        else {
+          result.push(items);
+        }
+      });
+      return result;
+    }
+    return rowEvents;
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaCalendarMonthEventRenderer.prototype, "viewMode", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarMonthEventRenderer.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarMonthEventRenderer.prototype, "calendarEventController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarMonthEventRenderer.prototype, "eventItemRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarMonthEventRenderer.prototype, "fullDayEventLayoutRenderer", void 0);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], VegaCalendarMonthEventRenderer.prototype, "addMaxDisplayCountChange", null);