@syncfusion/ej2-calendars 32.2.4 → 32.2.6

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 32.2.4
+*  version : 32.2.5
 *  Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-calendars",
-  "version": "32.2.4",
+  "version": "32.2.6",
   "description": "A complete package of date or time components with built-in features such as date formatting, inline editing, multiple (range) selection, range restriction, month and year selection, strict mode, and globalization.",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -8,11 +8,11 @@
   "module": "./index.js",
   "es2015": "./dist/es6/ej2-calendars.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~32.2.3",
+    "@syncfusion/ej2-base": "~32.2.6",
     "@syncfusion/ej2-buttons": "~32.2.3",
-    "@syncfusion/ej2-inputs": "~32.2.3",
-    "@syncfusion/ej2-lists": "~32.2.3",
-    "@syncfusion/ej2-popups": "~32.2.4"
+    "@syncfusion/ej2-inputs": "~32.2.5",
+    "@syncfusion/ej2-lists": "~32.2.6",
+    "@syncfusion/ej2-popups": "~32.2.6"
   },
   "devDependencies": {},
   "keywords": [

package/src/datepicker/datepicker.d.ts

@@ -536,6 +536,7 @@ export declare class DatePicker extends Calendar implements IInput {
      * @private
      */
     protected getModuleName(): string;
+    protected getAppendToElement(): HTMLElement;
     private updateFloatLabelOverflowWidth;
     private clearFloatLabelOverflowWidth;
     private disabledDates;

package/src/datepicker/datepicker.js

@@ -1051,13 +1051,14 @@ var DatePicker = /** @class */ (function (_super) {
         if (!isNullOrUndefined(this.cssClass)) {
             this.popupWrapper.className += ' ' + this.cssClass;
         }
+        var appendToElement = this.getAppendToElement();
         if (Browser.isDevice) {
             this.modelHeader();
             this.modal = this.createElement('div');
             this.modal.className = '' + ROOT + ' e-date-modal';
-            document.body.className += ' ' + OVERFLOW;
+            appendToElement.className += ' ' + OVERFLOW;
             this.modal.style.display = 'block';
-            document.body.appendChild(this.modal);
+            appendToElement.appendChild(this.modal);
         }
         //this.calendarElement represent the Calendar object from the Calendar class.
         this.calendarElement.querySelector('table tbody').className = '';
@@ -1396,9 +1397,10 @@ var DatePicker = /** @class */ (function (_super) {
                 this.previousDate = outOfRange;
                 this.createCalendar();
             }
+            var appendToElement = this.getAppendToElement();
             if (Browser.isDevice) {
                 this.mobilePopupWrapper = this.createElement('div', { className: 'e-datepick-mob-popup-wrap' });
-                document.body.appendChild(this.mobilePopupWrapper);
+                appendToElement.appendChild(this.mobilePopupWrapper);
             }
             this.preventArgs = {
                 preventDefault: function () {
@@ -1407,7 +1409,7 @@ var DatePicker = /** @class */ (function (_super) {
                 popup: this.popupObj,
                 event: e || null,
                 cancel: false,
-                appendTo: Browser.isDevice ? this.mobilePopupWrapper : document.body
+                appendTo: Browser.isDevice ? this.mobilePopupWrapper : appendToElement
             };
             var eventArgs = this.preventArgs;
             this.trigger('open', eventArgs, function (eventArgs) {
@@ -1468,7 +1470,8 @@ var DatePicker = /** @class */ (function (_super) {
                 cancel: false
             };
             removeClass(this.inputWrapper.buttons, ACTIVE);
-            removeClass([document.body], OVERFLOW);
+            var appendToElement = this.getAppendToElement();
+            removeClass([appendToElement], OVERFLOW);
             var eventArgs = this.preventArgs;
             if (this.isCalendar()) {
                 this.trigger('close', eventArgs, function (eventArgs) {
@@ -1912,6 +1915,16 @@ var DatePicker = /** @class */ (function (_super) {
     DatePicker.prototype.getModuleName = function () {
         return 'datepicker';
     };
+    DatePicker.prototype.getAppendToElement = function () {
+        if (this.isAngular) {
+            var cdkPane = this.element.closest('.cdk-overlay-pane');
+            var popoverEl = this.element.closest('[popover]');
+            if (cdkPane && popoverEl) {
+                return cdkPane;
+            }
+        }
+        return document.body;
+    };
     DatePicker.prototype.updateFloatLabelOverflowWidth = function () {
         var container = this.inputWrapper.container;
         var label = container.querySelector('.e-float-text.e-label-bottom');

package/src/daterangepicker/daterangepicker.d.ts

@@ -811,6 +811,7 @@ export declare class DateRangePicker extends CalendarBase {
      * @private
      */
     protected getModuleName(): string;
+    protected getAppendToElement(): HTMLElement;
     private updateFloatLabelOverflowWidth;
     private clearFloatLabelOverflowWidth;
     /**

package/src/daterangepicker/daterangepicker.js

@@ -3036,13 +3036,14 @@ var DateRangePicker = /** @class */ (function (_super) {
         this.popupObj.hide();
         this.popupWrapper = this.createElement('div', { id: this.element.id + '_popup', className: ROOT + ' ' + POPUP });
         this.renderControl();
+        var appendToElement = this.getAppendToElement();
         this.openEventArgs = {
             popup: this.popupObj || null,
             cancel: false,
             date: this.inputElement.value,
             model: this,
             event: event ? event : null,
-            appendTo: this.isMobile || Browser.isDevice ? this.mobileRangePopupWrap : document.body
+            appendTo: this.isMobile || Browser.isDevice ? this.mobileRangePopupWrap : appendToElement
         };
         var eventArgs = this.openEventArgs;
         this.trigger('open', eventArgs, function (eventArgs) {
@@ -3126,9 +3127,10 @@ var DateRangePicker = /** @class */ (function (_super) {
         if (!isNullOrUndefined(this.cssClass) && this.cssClass.trim() !== '') {
             this.popupWrapper.className += ' ' + this.cssClass;
         }
+        var appendToElement = this.getAppendToElement();
         if (this.isMobile && this.isCustomWindow) {
             this.modal = this.createElement('div');
-            document.body.appendChild(this.modal);
+            appendToElement.appendChild(this.modal);
         }
         this.popupObj = new Popup(this.popupWrapper, {
             relateTo: this.isMobile && this.isCustomWindow ? document.body :
@@ -3253,7 +3255,7 @@ var DateRangePicker = /** @class */ (function (_super) {
         }
         if (this.isMobile && this.isCustomWindow) {
             addClass([this.modal], [DEVICE, ROOT, 'e-range-modal']);
-            document.body.className += ' ' + OVERFLOW;
+            appendToElement.className += ' ' + OVERFLOW;
             this.modal.style.display = 'block';
         }
         EventHandler.add(document, 'mousedown touchstart', this.documentHandler, this);
@@ -4113,6 +4115,16 @@ var DateRangePicker = /** @class */ (function (_super) {
     DateRangePicker.prototype.getModuleName = function () {
         return 'daterangepicker';
     };
+    DateRangePicker.prototype.getAppendToElement = function () {
+        if (this.isAngular) {
+            var cdkPane = this.element.closest('.cdk-overlay-pane');
+            var popoverEl = this.element.closest('[popover]');
+            if (cdkPane && popoverEl) {
+                return cdkPane;
+            }
+        }
+        return document.body;
+    };
     DateRangePicker.prototype.updateFloatLabelOverflowWidth = function () {
         var container = this.inputWrapper.container;
         var label = container.querySelector('.e-float-text.e-label-bottom');
@@ -4191,9 +4203,10 @@ var DateRangePicker = /** @class */ (function (_super) {
                     this.targetElement = element;
                 }
                 this.createPopup();
+                var appendToElement = this.getAppendToElement();
                 if (this.isMobile || Browser.isDevice) {
                     this.mobileRangePopupWrap = this.createElement('div', { className: 'e-daterangepick-mob-popup-wrap' });
-                    document.body.appendChild(this.mobileRangePopupWrap);
+                    appendToElement.appendChild(this.mobileRangePopupWrap);
                 }
                 this.openEventArgs = {
                     popup: this.popupObj || null,
@@ -4201,7 +4214,7 @@ var DateRangePicker = /** @class */ (function (_super) {
                     date: this.inputElement.value,
                     model: this,
                     event: event ? event : null,
-                    appendTo: this.isMobile || Browser.isDevice ? this.mobileRangePopupWrap : document.body
+                    appendTo: this.isMobile || Browser.isDevice ? this.mobileRangePopupWrap : appendToElement
                 };
                 var eventArgs = this.openEventArgs;
                 this.trigger('open', eventArgs, function (eventArgs) {
@@ -4307,7 +4320,8 @@ var DateRangePicker = /** @class */ (function (_super) {
                             }
                         }
                         _this.targetElement = null;
-                        removeClass([document.body], OVERFLOW);
+                        var appendToElement = _this.getAppendToElement();
+                        removeClass([appendToElement], OVERFLOW);
                         EventHandler.remove(document, 'mousedown touchstart', _this.documentHandler);
                         if (_this.isMobile && _this.modal) {
                             _this.modal.style.display = 'none';

package/src/datetimepicker/datetimepicker.d.ts

@@ -624,5 +624,6 @@ export declare class DateTimePicker extends DatePicker {
      * @private
      */
     protected getModuleName(): string;
+    protected getAppendToElement(): HTMLElement;
     protected restoreValue(): void;
 }

package/src/datetimepicker/datetimepicker.js

@@ -627,7 +627,8 @@ var DateTimePicker = /** @class */ (function (_super) {
                     this.listCreation();
                     append([this.listWrapper], this.dateTimeWrapper);
                 }
-                document.body.appendChild(this.dateTimeWrapper);
+                var appendToElement = this.getAppendToElement();
+                appendToElement.appendChild(this.dateTimeWrapper);
                 this.addTimeSelection();
                 this.renderPopup();
                 this.setTimeScrollPosition();
@@ -707,12 +708,13 @@ var DateTimePicker = /** @class */ (function (_super) {
     DateTimePicker.prototype.renderPopup = function () {
         var _this = this;
         this.containerStyle = this.inputWrapper.container.getBoundingClientRect();
+        var appendToElement = this.getAppendToElement();
         if (Browser.isDevice) {
             this.timeModal = createElement('div');
             this.timeModal.className = '' + ROOT + ' e-time-modal';
-            document.body.className += ' ' + OVERFLOW;
+            appendToElement.className += ' ' + OVERFLOW;
             this.timeModal.style.display = 'block';
-            document.body.appendChild(this.timeModal);
+            appendToElement.appendChild(this.timeModal);
         }
         if (Browser.isDevice) {
             this.modelWrapper = createElement('div', { className: 'e-datetime-mob-popup-wrap' });
@@ -720,7 +722,7 @@ var DateTimePicker = /** @class */ (function (_super) {
             var dlgOverlay = createElement('div', { className: 'e-dlg-overlay' });
             dlgOverlay.style.zIndex = (this.zIndex - 1).toString();
             this.modelWrapper.appendChild(dlgOverlay);
-            document.body.appendChild(this.modelWrapper);
+            appendToElement.appendChild(this.modelWrapper);
         }
         var offset = 4;
         this.popupObject = new Popup(this.dateTimeWrapper, {
@@ -1202,7 +1204,8 @@ var DateTimePicker = /** @class */ (function (_super) {
             }
             else if (this.isTimePopupOpen()) {
                 this.closePopup(e);
-                removeClass([document.body], OVERFLOW);
+                var appendToElement = this.getAppendToElement();
+                removeClass([appendToElement], OVERFLOW);
                 if (Browser.isDevice && this.timeModal) {
                     this.timeModal.style.display = 'none';
                     this.timeModal.outerHTML = '';
@@ -1727,6 +1730,16 @@ var DateTimePicker = /** @class */ (function (_super) {
     DateTimePicker.prototype.getModuleName = function () {
         return 'datetimepicker';
     };
+    DateTimePicker.prototype.getAppendToElement = function () {
+        if (this.isAngular) {
+            var cdkPane = this.element.closest('.cdk-overlay-pane');
+            var popoverEl = this.element.closest('[popover]');
+            if (cdkPane && popoverEl) {
+                return cdkPane;
+            }
+        }
+        return document.body;
+    };
     DateTimePicker.prototype.restoreValue = function () {
         this.previousDateTime = this.previousDate;
         this.currentDate = this.value ? this.value : new Date();

package/src/timepicker/timepicker.d.ts

@@ -668,6 +668,7 @@ export declare class TimePicker extends Component<HTMLElement> implements IInput
      * @private
      */
     protected getModuleName(): string;
+    protected getAppendToElement(): HTMLElement;
     private updateFloatLabelOverflowWidth;
     private clearFloatLabelOverflowWidth;
     /**

package/src/timepicker/timepicker.js

@@ -1114,7 +1114,8 @@ var TimePicker = /** @class */ (function (_super) {
                 cancel: false,
                 name: 'open'
             };
-            removeClass([document.body], OVERFLOW);
+            var appendToElement = this.getAppendToElement();
+            removeClass([appendToElement], OVERFLOW);
             this.trigger('close', args, function (args) {
                 if (!args.cancel) {
                     var animModel = {
@@ -2217,22 +2218,23 @@ var TimePicker = /** @class */ (function (_super) {
         }
         else {
             this.popupCreation();
+            var appendToElement = this.getAppendToElement();
             if (Browser.isDevice && this.listWrapper) {
                 this.modal = this.createElement('div');
                 this.modal.className = '' + ROOT + ' e-time-modal';
-                document.body.className += ' ' + OVERFLOW;
-                document.body.appendChild(this.modal);
+                appendToElement.className += ' ' + OVERFLOW;
+                appendToElement.appendChild(this.modal);
             }
             if (Browser.isDevice) {
                 this.mobileTimePopupWrap = this.createElement('div', { className: 'e-timepicker-mob-popup-wrap' });
-                document.body.appendChild(this.mobileTimePopupWrap);
+                appendToElement.appendChild(this.mobileTimePopupWrap);
             }
             this.openPopupEventArgs = {
                 popup: this.popupObj || null,
                 cancel: false,
                 event: event || null,
                 name: 'open',
-                appendTo: Browser.isDevice ? this.mobileTimePopupWrap : document.body
+                appendTo: Browser.isDevice ? this.mobileTimePopupWrap : appendToElement
             };
             var eventArgs = this.openPopupEventArgs;
             this.trigger('open', eventArgs, function (eventArgs) {
@@ -2363,6 +2365,16 @@ var TimePicker = /** @class */ (function (_super) {
     TimePicker.prototype.getModuleName = function () {
         return 'timepicker';
     };
+    TimePicker.prototype.getAppendToElement = function () {
+        if (this.isAngular) {
+            var cdkPane = this.element.closest('.cdk-overlay-pane');
+            var popoverEl = this.element.closest('[popover]');
+            if (cdkPane && popoverEl) {
+                return cdkPane;
+            }
+        }
+        return document.body;
+    };
     TimePicker.prototype.updateFloatLabelOverflowWidth = function () {
         var container = this.inputWrapper.container;
         var label = container.querySelector('.e-float-text.e-label-bottom');

package/styles/datepicker/_material3-dark-definition.scss

@@ -1,5 +1,7 @@
 @use 'ej2-base/styles/definition/material3-dark' as *;
 @forward 'ej2-base/styles/definition/material3-dark';
+$datepicker-modal-header-bg-color: $flyout-bg-color !default;
+$datepicker-modal-header-text-color: rgba($content-text-color) !default;
 $datepicker-icon-color: rgba($icon-color) !default;
 $datepicker-active-icon-color: rgba($content-text-color-alt1) !default;
 $datepicker-popup-box-shadow: $shadow-lg !default;
@@ -29,8 +31,8 @@ $datepicker-icon-border-radius: $radius-full !default;
 $datepicker-popup-border-radius: $radius-8 !default;
 $datepicker-box-sizing: border-box !default;
 $datepicker-othermonth-row: none !default;
-$datepicker-modal-header-bg: $flyout-bg-color !default;
-$datepicker-modal-header-color: rgba($content-text-color) !default;
+$datepicker-modal-header-bg: $datepicker-modal-header-bg-color !default;
+$datepicker-modal-header-color: $datepicker-modal-header-text-color !default;
 $datepicker-modal-header-display: block !default;
 $datepicker-calendar-tbody-landscape-height: 130px !default;
 $datepicker-clearicon: '\e7e7' !default;

package/styles/datepicker/_material3-definition.scss

@@ -1,5 +1,7 @@
 @use 'ej2-base/styles/definition/material3' as *;
 @forward 'ej2-base/styles/definition/material3';
+$datepicker-modal-header-bg-color: $flyout-bg-color !default;
+$datepicker-modal-header-text-color: rgba($content-text-color) !default;
 $datepicker-icon-color: rgba($icon-color) !default;
 $datepicker-active-icon-color: rgba($content-text-color-alt1) !default;
 $datepicker-popup-box-shadow: $shadow-lg !default;
@@ -29,8 +31,8 @@ $datepicker-icon-border-radius: $radius-full !default;
 $datepicker-popup-border-radius: $radius-8 !default;
 $datepicker-box-sizing: border-box !default;
 $datepicker-othermonth-row: none !default;
-$datepicker-modal-header-bg: $flyout-bg-color !default;
-$datepicker-modal-header-color: rgba($content-text-color) !default;
+$datepicker-modal-header-bg: $datepicker-modal-header-bg-color !default;
+$datepicker-modal-header-color: $datepicker-modal-header-text-color !default;
 $datepicker-modal-header-display: block !default;
 $datepicker-calendar-tbody-landscape-height: 130px !default;
 $datepicker-clearicon: '\e7e7' !default;

package/styles/daterangepicker/_material3-dark-definition.scss

@@ -2,6 +2,9 @@
 @use 'ej2-inputs/styles/input/material3-dark-definition' as *;
 @forward 'ej2-base/styles/definition/material3-dark';
 @forward 'ej2-inputs/styles/input/material3-dark-definition';
+$range-header-bg-color: $flyout-bg-color !default;
+$range-header-text-color: rgba($content-text-color) !default;
+$range-header-icon-color: rgba($icon-color) !default;
 $range-bg-color: $content-bg-color-alt3 !default;
 $range-primary-color: rgba($primary) !default;
 $range-primary-font-color: rgba($primary-text-color) !default;
@@ -10,7 +13,6 @@ $range-preset-normal-font-color: rgba($content-text-color) !default;
 $range-font-color: rgba($content-text-color) !default;
 $range-background: $flyout-bg-color !default;
 $range-footer-background: $range-background !default;
-$range-header-bg-color: $flyout-bg-color !default;
 $range-active-icon-color: rgba($icon-color) !default;
 $range-active-state-icon-color: rgba($icon-color) !default;
 $range-hover-color: $content-bg-color-alt2 !default;
@@ -34,7 +36,7 @@ $range-max-height: 500px !default;
 $range-normal-nav-icon-width: 36px !default;
 $range-normal-nav-icon-height: 36px !default;
 $range-calendar-dark-color: rgba($content-text-color) !default;
-$range-calendar-header-text-color: rgba($content-text-color) !default;
+$range-calendar-header-text-color: $range-header-text-color !default;
 $range-calendar-header-dark-color: rgba($content-text-color) !default;
 $range-calendar-medium-color: rgba($content-text-color-alt1) !default;
 $range-calendar-light-color: rgba($content-text-color-alt1) !default;
@@ -81,7 +83,7 @@ $range-browser-select-none:  none !default;
 $range-change-icon-width: 4% !default;
 $range-font-weight-bold: 500 !default;
 $range-font-size: 15px !default;
-$range-change-icon-color: rgba($icon-color) !default;
+$range-change-icon-color: $range-header-icon-color !default;
 $range-indicator-label-width: 100% !default;
 $range-device-indicator-margin: 10px 0 !default;
 $range-separator-height: 1px !default;

package/styles/daterangepicker/_material3-definition.scss

@@ -2,6 +2,9 @@
 @use 'ej2-inputs/styles/input/material3-definition' as *;
 @forward 'ej2-base/styles/definition/material3';
 @forward 'ej2-inputs/styles/input/material3-definition';
+$range-header-bg-color: $flyout-bg-color !default;
+$range-header-text-color: rgba($content-text-color) !default;
+$range-header-icon-color: rgba($icon-color) !default;
 $range-bg-color: $content-bg-color-alt3 !default;
 $range-primary-color: rgba($primary) !default;
 $range-primary-font-color: rgba($primary-text-color) !default;
@@ -10,7 +13,6 @@ $range-preset-normal-font-color: rgba($content-text-color) !default;
 $range-font-color: rgba($content-text-color) !default;
 $range-background: $flyout-bg-color !default;
 $range-footer-background: $range-background !default;
-$range-header-bg-color: $flyout-bg-color !default;
 $range-active-icon-color: rgba($icon-color) !default;
 $range-active-state-icon-color: rgba($icon-color) !default;
 $range-hover-color: $content-bg-color-alt2 !default;
@@ -34,7 +36,7 @@ $range-max-height: 500px !default;
 $range-normal-nav-icon-width: 36px !default;
 $range-normal-nav-icon-height: 36px !default;
 $range-calendar-dark-color: rgba($content-text-color) !default;
-$range-calendar-header-text-color: rgba($content-text-color) !default;
+$range-calendar-header-text-color: $range-header-text-color !default;
 $range-calendar-header-dark-color: rgba($content-text-color) !default;
 $range-calendar-medium-color: rgba($content-text-color-alt1) !default;
 $range-calendar-light-color: rgba($content-text-color-alt1) !default;
@@ -81,7 +83,7 @@ $range-browser-select-none:  none !default;
 $range-change-icon-width: 4% !default;
 $range-font-weight-bold: 500 !default;
 $range-font-size: 15px !default;
-$range-change-icon-color: rgba($icon-color) !default;
+$range-change-icon-color: $range-header-icon-color !default;
 $range-indicator-label-width: 100% !default;
 $range-device-indicator-margin: 10px 0 !default;
 $range-separator-height: 1px !default;