@heartlandone/vega 2.59.1 → 2.61.0

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

@@ -5,9 +5,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { h } from '@stencil/core';
-import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { MapToComponentField } from 'vega-slimmer/core';
+import { createEnterKeyHandlerToTriggerClick } from '../../../../../utils/accessibility';
+import { VegaCalendarDateBlockRenderer, } from '../../common/renderers/vega-calendar-date-block-renderer.abstract';
 /** 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. */
-export class VegaCalendarMonthViewRenderer extends VegaSlimmer {
+export class VegaCalendarMonthViewRenderer extends VegaCalendarDateBlockRenderer {
   /**
    * the HTML elements that represent the month view of a calendar component.
    *
@@ -19,6 +21,26 @@ export class VegaCalendarMonthViewRenderer extends VegaSlimmer {
       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()));
   }
+  /**
+   * emit vega click event when click the date block
+   *
+   * @param {MouseEvent} e the mouse event object
+   * @param {CalendarDate} calendarDate the calendar date object
+   */
+  handleDateBlockClick(e, calendarDate) {
+    const { target, clientX, clientY } = e;
+    if (this.isMonthBlockBlankArea(target)) {
+      const { year, month, date } = calendarDate;
+      const eventInfo = {
+        year,
+        month,
+        date,
+        hour: 0,
+        mouseEventInfo: { clientX, clientY },
+      };
+      this.emit(e, eventInfo);
+    }
+  }
   /**
    * generating the HTML elements that represent the content of the month view in a calendar component
    *
@@ -33,18 +55,13 @@ export class VegaCalendarMonthViewRenderer extends VegaSlimmer {
       return (h("div", { key: index, class: "calendar-view-row border-divider-bottom" }, dateArray.map((item, itemIndex) => {
         var _a;
         const isDisabled = (_a = this.isDateDisabled) === null || _a === void 0 ? void 0 : _a.call(this, item.toDate());
-        return (h("div", { class: {
+        const renderProps = this.generateDateBlockRenderProps(isDisabled, item);
+        return (h("div", Object.assign({ class: {
             'row-cell border-divider-right': true,
             'current-month-day': item.compare(currentDate).inMonth,
             'active': item.isToday(),
             'disabled': isDisabled,
-          }, key: `${item.month}-${item.date}`, 
-          // eslint-disable-next-line react/jsx-no-bind
-          onDblClick: isDisabled
-            ? undefined
-            : (e) => {
-              this.handleDateBlockClick(e, item);
-            } },
+          }, key: `${item.month}-${item.date}` }, renderProps),
           this.renderDateBlock(item),
           this.monthEventRenderer.render(item, eventsArray[itemIndex], displayEventsArray[itemIndex], itemIndex)));
       })));
@@ -62,35 +79,38 @@ export class VegaCalendarMonthViewRenderer extends VegaSlimmer {
       isMonthFirstDay && h("div", { class: "month-block" }, item.getMonthName(true)),
       h("div", { role: "button", tabIndex: 0, class: "grid-col", 
         // eslint-disable-next-line react/jsx-no-bind
-        onDblClick: (e) => this.goToCurrentDayView(e, item) }, item.date)));
+        onDblClick: (e) => {
+          this.handleDateLabelClick(e, item);
+        }, 
+        // eslint-disable-next-line react/jsx-no-bind
+        onClick: (e) => {
+          this.handleDateLabelClick(e, item);
+        }, onKeyDown: createEnterKeyHandlerToTriggerClick() }, item.date)));
   }
   /**
    * switch to current date day view
    *
-   * @param {MouseEvent} e the double click event object
    * @param {CalendarDate} calendarDate the calendar date object
    */
-  goToCurrentDayView(e, calendarDate) {
-    e.stopPropagation();
+  goToCurrentDayView(calendarDate) {
     this.currentPeriodController.updateCalendarPeriod('day', calendarDate);
   }
   /**
-   * emit vega click event when click the date block
+   * Handler for clicking on the date label.
    *
-   * @param {MouseEvent} e the mouse event object
-   * @param {CalendarDate} calendarDate the calendar date object
+   * @param {MouseEvent} e - the mouse event object
+   * @param {CalendarDate} calendarDate - the calendar date object
    */
-  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 },
-      });
+  handleDateLabelClick(e, calendarDate) {
+    e.stopPropagation();
+    // only when showSwitchView is true, the double click event can switch to day view
+    if (!this.showSwitchView)
+      return;
+    if (this.shouldHandleClickEvent(e)) {
+      this.goToCurrentDayView(calendarDate);
+    }
+    else if (this.shouldHandleDblClickEvent(e)) {
+      this.goToCurrentDayView(calendarDate);
     }
   }
   /**
@@ -119,12 +139,12 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaCalendarMonthViewRenderer.prototype, "monthEventRenderer", void 0);
-__decorate([
-  MapToComponentField()
-], VegaCalendarMonthViewRenderer.prototype, "dateDblClickEmitter", void 0);
 __decorate([
   MapToComponentField()
 ], VegaCalendarMonthViewRenderer.prototype, "translationSlimmer", void 0);
 __decorate([
   MapToComponentField()
 ], VegaCalendarMonthViewRenderer.prototype, "isDateDisabled", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarMonthViewRenderer.prototype, "showSwitchView", void 0);

package/dist/collection/components/vega-calendar/vega-calendar.js

@@ -14,7 +14,7 @@ import { VegaCalendarMonthViewRenderer } from './slimmers/month-view/renderers/v
 import { VegaCalendarViewWithTimeRenderer } from './slimmers/day-view/renderers/vega-calendar-view-with-time-renderer';
 import { VegaCalendarTimeLineRenderer } from './slimmers/day-view/renderers/vega-calendar-time-line-renderer';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
-import { VegaChange, VegaDateDblClick, VegaEventClick, VegaMoreActionClick, } from '../../helpers/event-manager/event-id/vega-event-id';
+import { VegaChange, VegaDateClick, VegaDateDblClick, VegaEventClick, VegaMoreActionClick, } from '../../helpers/event-manager/event-id/vega-event-id';
 import { CalendarDate } from '../../helpers/calendar';
 import { VegaCalendarViewController } from './slimmers/common/controllers/vega-calendar-view-controller';
 import { VegaCalendarCurrentPeriodController } from './slimmers/common/controllers/vega-calendar-current-period-controller';
@@ -70,6 +70,7 @@ export class VegaCalendar {
     this.eventClickEmitter = createEventEmitSlimmer(VegaCalendar, VegaEventClick);
     this.dateDblClickEmitter = createEventEmitSlimmer(VegaCalendar, VegaDateDblClick);
     this.moreActionClickEmitter = createEventEmitSlimmer(VegaCalendar, VegaMoreActionClick);
+    this.dateClickEmitter = createEventEmitSlimmer(VegaCalendar, VegaDateClick);
     this.changeEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.switchPanelRenderer.getSwitchPanelRef());
     this.timeFormatNotifySlimmer = createSubStateNotifySlimmer(VegaCalendar, 'timeFormat', 'watchTimeFormat');
     this.showEventColorBarNotifySlimmer = createSubStateNotifySlimmer(VegaCalendar, 'showEventColorBar', 'watchShowEventColorBar');
@@ -119,6 +120,12 @@ export class VegaCalendar {
      * @vegaVersion 2.58.0
      */
     this.showSwitchView = true;
+    /**
+     * Controls whether clicking on a calendar date triggers the `vegaDateClick` event. When enabled, it disables the `vegaDateDblClick` event to prevent conflicts.
+     *
+     * @vegaVersion 2.61.0
+     */
+    this.enableDateClick = false;
     /**
      * Controls the visibility of the weekend columns in the calendar.
      *
@@ -361,6 +368,27 @@ export class VegaCalendar {
       "reflect": false,
       "defaultValue": "true"
     },
+    "enableDateClick": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.61.0"
+          }],
+        "text": "Controls whether clicking on a calendar date triggers the `vegaDateClick` event. When enabled, it disables the `vegaDateDblClick` event to prevent conflicts."
+      },
+      "attribute": "enable-date-click",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "showWeekends": {
       "type": "boolean",
       "mutable": false,
@@ -520,7 +548,7 @@ export class VegaCalendar {
             "name": "vegaVersion",
             "text": "2.17.0"
           }],
-        "text": "An event emitter notifying that a calendar date item has been double-clicked."
+        "text": "An event emitter notifying that a calendar date item has been double-clicked. The event will not be triggered if `enableDataClick` is set to true to prevent conflicts."
       },
       "complexType": {
         "original": "VegaCalendarDateClickInfo",
@@ -546,7 +574,56 @@ export class VegaCalendar {
             "name": "vegaVersion",
             "text": "2.17.0"
           }],
-        "text": "An event emitter notifying that a calendar date item has been double-clicked."
+        "text": "An event emitter notifying that a calendar date item has been double-clicked. The event will not be triggered if `enableDataClick` is true to prevent conflicts."
+      },
+      "complexType": {
+        "original": "VegaCalendarDateClickInfo",
+        "resolved": "VegaCalendarDateType & { hour: number; mouseEventInfo: VegaMouseEventInfo; }",
+        "references": {
+          "VegaCalendarDateClickInfo": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      }
+    }, {
+      "method": "vegaDateClick",
+      "name": "vegaDateClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.61.0"
+          }],
+        "text": "An event emitter notifying that a calendar date item has been clicked. The event will not be triggered if `enableDataClick` is false."
+      },
+      "complexType": {
+        "original": "VegaCalendarDateClickInfo",
+        "resolved": "VegaCalendarDateType & { hour: number; mouseEventInfo: VegaMouseEventInfo; }",
+        "references": {
+          "VegaCalendarDateClickInfo": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      }
+    }, {
+      "method": "dateClick",
+      "name": "dateClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.61.0"
+          }],
+        "text": "An event emitter notifying that a calendar date item has been clicked. The event will not be triggered if `enableDataClick` is false."
       },
       "complexType": {
         "original": "VegaCalendarDateClickInfo",
@@ -703,6 +780,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "moreActionClickEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "dateClickEmitter", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "changeEventPrevent", void 0);

package/dist/collection/components/vega-date-picker/slimmers/controllers/vega-date-picker-month-year-change-event-controller.js

@@ -0,0 +1,139 @@
+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 { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { Observer } from '../../../../helpers/change-manager/observer/observer';
+import ChangeManager from '../../../../helpers/change-manager/change-manager';
+import { VegaDatePickerMonthYearDropdownRenderer } from '../renderers/vega-date-picker-calendar-month-year-dropdown-renderer';
+import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInternalMonthYearChange } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
+/**
+ * VegaDatePickerMonthYearChangeEventController to handle the month year change event emitter
+ */
+export class VegaDatePickerMonthYearChangeEventController extends VegaSlimmer {
+  /**
+   * Register the observer with subject of VegaInternalMonthYearChange.
+   */
+  registerObserver() {
+    this.observer = new Observer(this.canAcceptMonthYearChangeObserver.bind(this), this.monthYearChangeObserverListener.bind(this));
+    ChangeManager.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalMonthYearChange), this.observer);
+  }
+  /**
+   * Unregister the observer with subject of VegaInternalMonthYearChange.
+   */
+  unregisterObserver() {
+    if (this.observer) {
+      ChangeManager.unregister(domNodeSubjectFactory.getSubject(this.host, VegaInternalMonthYearChange), this.observer);
+    }
+  }
+  /**
+   * Get month year summary when month year dropdown is disabled
+   *
+   * @returns {DatePickerMonthYearTypes} the month and year summary
+   */
+  getMonthYearSummaryWithMonthYearDropdownDisabled() {
+    if (this.mode === 'single') {
+      return {
+        // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
+        month: this.vegaDatePickerCalendarRenderer.getStartMonthYearHeaderRef().month.innerText,
+        // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
+        year: this.vegaDatePickerCalendarRenderer.getStartMonthYearHeaderRef().year.innerText,
+      };
+    }
+    else {
+      return [
+        {
+          // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
+          month: this.vegaDatePickerCalendarRenderer.getStartMonthYearHeaderRef().month.innerText,
+          // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
+          year: this.vegaDatePickerCalendarRenderer.getStartMonthYearHeaderRef().year.innerText,
+        },
+        {
+          // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
+          month: this.vegaDatePickerCalendarRenderer.getEndMonthYearHeaderRef().month.innerText,
+          // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
+          year: this.vegaDatePickerCalendarRenderer.getEndMonthYearHeaderRef().year.innerText,
+        },
+      ];
+    }
+  }
+  /**
+   * Get month year summary when month year dropdown is enabled
+   *
+   * @returns {DatePickerMonthYearTypes} the month and year summary
+   */
+  getMonthYearSummaryWithMonthYearDropdownEnabled() {
+    if (this.mode === 'single') {
+      return {
+        month: VegaDatePickerMonthYearDropdownRenderer.monthName[parseInt(
+        // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
+        this.monthYearDropdownRenderer.getStartDropdownRef().month
+          .selectedSourceKey)],
+        // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
+        year: this.monthYearDropdownRenderer.getStartDropdownRef().year.selectedSourceKey,
+      };
+    }
+    else {
+      return [
+        {
+          month: VegaDatePickerMonthYearDropdownRenderer.monthName[parseInt(
+          // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
+          this.monthYearDropdownRenderer.getStartDropdownRef().month
+            .selectedSourceKey)],
+          // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
+          year: this.monthYearDropdownRenderer.getStartDropdownRef().year
+            .selectedSourceKey,
+        },
+        {
+          month: VegaDatePickerMonthYearDropdownRenderer.monthName[parseInt(
+          // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
+          this.monthYearDropdownRenderer.getEndDropdownRef().month
+            .selectedSourceKey)],
+          // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
+          year: this.monthYearDropdownRenderer.getEndDropdownRef().year
+            .selectedSourceKey,
+        },
+      ];
+    }
+  }
+  /**
+   * checks if the input can be accepted as month year change observer
+   *
+   * @returns {boolean} a boolean value indicating whether the input is acceptable observer.
+   */
+  canAcceptMonthYearChangeObserver() {
+    return true;
+  }
+  /**
+   * Listener for month year change observer
+   *
+   * @param {DatePickerMonthYearTypes} payload - the payload of the event
+   */
+  monthYearChangeObserverListener(payload) {
+    this.monthYearChangeEventEmitter.emit(payload);
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaDatePickerMonthYearChangeEventController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerMonthYearChangeEventController.prototype, "monthYearChangeEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerMonthYearChangeEventController.prototype, "mode", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerMonthYearChangeEventController.prototype, "vegaDatePickerCalendarRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerMonthYearChangeEventController.prototype, "monthYearDropdownRenderer", void 0);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], VegaDatePickerMonthYearChangeEventController.prototype, "registerObserver", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], VegaDatePickerMonthYearChangeEventController.prototype, "unregisterObserver", null);

package/dist/collection/components/vega-date-picker/slimmers/renderers/vega-date-picker-calendar-month-year-dropdown-renderer.js

@@ -10,9 +10,10 @@ import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manage
 import { VegaDropdownClick } from '../../../../helpers/event-manager/event-id/vega-event-id';
 import remoteInvocationRegistry from '../../../../helpers/remote-invocation/remote-invocation-registry';
 import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
-import { VegaInternalDropdownUpdateTarget } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { VegaInternalDropdownUpdateTarget, VegaInternalMonthYearChange, } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
 import { VegaInternalIconManager } from '../../../../helpers/icon/internal-icon-manager';
 import { Icons } from '../../assets/icons';
+import ChangeManager from '../../../../helpers/change-manager/change-manager';
 export class VegaDatePickerMonthYearDropdownRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
@@ -55,6 +56,12 @@ export class VegaDatePickerMonthYearDropdownRenderer extends VegaSlimmer {
       }
     };
   }
+  getStartDropdownRef() {
+    return this.startDropdownRef;
+  }
+  getEndDropdownRef() {
+    return this.endDropdownRef;
+  }
   /**
    * This method creates months and years dropdowns and replaces the current default select elements of litepicker
    *
@@ -215,6 +222,7 @@ export class VegaDatePickerMonthYearDropdownRenderer extends VegaSlimmer {
   monthYearDropdownClick(type, dateIndex, detail) {
     const value = parseInt(detail);
     this.updateDatePickerOnSelect(type, dateIndex, value);
+    ChangeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalMonthYearChange), this.vegaDatePickerMonthYearChangeEventController.getMonthYearSummaryWithMonthYearDropdownEnabled());
   }
   updateDropdownValueAndTarget(target, dropdownRef, dropdownSelectedKey) {
     const parentDiv = target.closest('div');
@@ -313,9 +321,21 @@ VegaDatePickerMonthYearDropdownRenderer.monthName = [
   'November',
   'December',
 ];
+__decorate([
+  MapToComponentField()
+], VegaDatePickerMonthYearDropdownRenderer.prototype, "host", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDatePickerMonthYearDropdownRenderer.prototype, "translationSlimmer", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDatePickerMonthYearDropdownRenderer.prototype, "vegaDatePickerCalendarRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerMonthYearDropdownRenderer.prototype, "monthYearChangeEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerMonthYearDropdownRenderer.prototype, "mode", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerMonthYearDropdownRenderer.prototype, "vegaDatePickerMonthYearChangeEventController", void 0);

package/dist/collection/components/vega-date-picker/slimmers/renderers/vega-date-picker-calendar-renderer.js

@@ -8,15 +8,27 @@ import { MapToComponentField, VegaSlimmer, MapToComponentMethod } from 'vega-sli
 import { Litepicker } from 'litepicker/dist/nocss/litepicker.umd.js';
 import { Icons } from '../../assets/icons';
 import { LogUtility } from '../../../../utils/log';
+import ChangeManager from '../../../../helpers/change-manager/change-manager';
+import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInternalMonthYearChange } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
 export class VegaDatePickerCalendarRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
+    this.startMonthYearHeaderRef = {
+      month: null,
+      year: null,
+    };
+    this.endMonthYearHeaderRef = {
+      month: null,
+      year: null,
+    };
     this.alterLitePickerHeader = (ui) => {
       if (this.showYearMonthDropdowns) {
         this.monthYearDropdownRenderer.renderMonthYearDropdowns(this.datePicker);
       }
       else {
         this.renderMonthName(ui);
+        this.setYearMonthHeaderRef(ui);
       }
       this.renderWeekdays(ui);
       this.renderPrevAndNextMonthButtons(ui);
@@ -58,9 +70,15 @@ export class VegaDatePickerCalendarRenderer extends VegaSlimmer {
          * TODO: Use vega-icon instead when deprecated litepicker in https://gethired.atlassian.net/browse/VD-2534
          */
         item.innerHTML = Icons['chevron-left'].icon;
+        item.addEventListener('click', () => {
+          this.emitMonthYearChangeEvent();
+        });
       });
       ui.querySelectorAll('.button-next-month').forEach((item) => {
         item.innerHTML = Icons['chevron-right'].icon;
+        item.addEventListener('click', () => {
+          this.emitMonthYearChangeEvent();
+        });
       });
     };
     this.renderClearButton = (ui) => {
@@ -210,6 +228,12 @@ export class VegaDatePickerCalendarRenderer extends VegaSlimmer {
   watchShowYearMonthDropdowns() {
     this.requireRefreshLitePicker = true;
   }
+  getStartMonthYearHeaderRef() {
+    return this.startMonthYearHeaderRef;
+  }
+  getEndMonthYearHeaderRef() {
+    return this.endMonthYearHeaderRef;
+  }
   /**
    * get the reference of datePicker
    *
@@ -248,6 +272,18 @@ export class VegaDatePickerCalendarRenderer extends VegaSlimmer {
       item.innerText = this.translationSlimmer.t(currentMonthName);
     });
   }
+  setYearMonthHeaderRef(ui) {
+    this.startMonthYearHeaderRef.month = ui.querySelectorAll('.month-item-name')[0];
+    this.endMonthYearHeaderRef.month = ui.querySelectorAll('.month-item-name')[1];
+    this.startMonthYearHeaderRef.year = ui.querySelectorAll('.month-item-year')[0];
+    this.endMonthYearHeaderRef.year = ui.querySelectorAll('.month-item-year')[1];
+  }
+  emitMonthYearChangeEvent() {
+    const monthYearSummary = this.showYearMonthDropdowns
+      ? this.vegaDatePickerMonthYearChangeEventController.getMonthYearSummaryWithMonthYearDropdownEnabled()
+      : this.vegaDatePickerMonthYearChangeEventController.getMonthYearSummaryWithMonthYearDropdownDisabled();
+    ChangeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalMonthYearChange), monthYearSummary);
+  }
   resetTodayByTimezone() {
     if (this.timezone && this.timezone !== this.getSystemTimeZone()) {
       try {
@@ -307,6 +343,14 @@ export class VegaDatePickerCalendarRenderer extends VegaSlimmer {
     })
       .on('show', () => {
       this.vegaDatePickerElementAppenderController.show();
+    })
+      .on('render:day', (node, date) => {
+      const isDisabled = this.isDateDisabled(date.toJSDate());
+      if (isDisabled) {
+        node.classList.add('is-locked');
+        node.classList.add('is-disabled');
+        node.tabIndex = -1;
+      }
     })
       .on('mobilefriendly.show', 
     /* istanbul ignore next */ () => {
@@ -330,6 +374,9 @@ export class VegaDatePickerCalendarRenderer extends VegaSlimmer {
     });
   }
 }
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "host", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDatePickerCalendarRenderer.prototype, "clearButton", void 0);
@@ -375,6 +422,18 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDatePickerCalendarRenderer.prototype, "timezone", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "isDateDisabled", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "mode", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "monthYearChangeEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "vegaDatePickerMonthYearChangeEventController", void 0);
 __decorate([
   MapToComponentMethod('connectedCallback')
 ], VegaDatePickerCalendarRenderer.prototype, "connectedCallback", null);

package/dist/collection/components/vega-date-picker/vega-date-picker-calendar/vega-date-picker-calendar.css

@@ -574,6 +574,10 @@ html.dark .litepicker .container__days .day-item.is-start-date.is-end-date:after
   cursor: not-allowed;
 }
 
+.litepicker .container__days .day-item.is-disabled {
+  text-decoration: line-through;
+}
+
 .litepicker.mobilefriendly[data-plugins*=mobilefriendly] .container__days > div {
   height: var(--vega-litepicker-day-height);
 }