From dba00501940de1ab06bf0b7c1722366a126510f8 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Fri, 8 Dec 2023 15:39:11 +0300
Subject: [PATCH] Fixed #4947 - Calendar PT: mask defect

---
 components/lib/calendar/Calendar.d.ts |  4 ++++
 components/lib/calendar/Calendar.vue  | 12 ++++++++----
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/components/lib/calendar/Calendar.d.ts b/components/lib/calendar/Calendar.d.ts
index 59d067f00..9a527c08c 100755
--- a/components/lib/calendar/Calendar.d.ts
+++ b/components/lib/calendar/Calendar.d.ts
@@ -326,6 +326,10 @@ export interface CalendarPassThroughOptions {
      * Used to pass attributes to the aria year's DOM element.
      */
     hiddenYear?: CalendarPassThroughOptionType;
+    /**
+     * Used to pass attributes to the datepicker mask's DOM element.
+     */
+    datepickerMask?: CalendarPassThroughOptionType;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
diff --git a/components/lib/calendar/Calendar.vue b/components/lib/calendar/Calendar.vue
index db87418de..e444ccd22 100755
--- a/components/lib/calendar/Calendar.vue
+++ b/components/lib/calendar/Calendar.vue
@@ -1683,10 +1683,14 @@ export default {
         },
         enableModality() {
             if (!this.mask) {
-                this.mask = document.createElement('div');
+                let styleClass = 'p-datepicker-mask p-datepicker-mask-scrollblocker p-component-overlay p-component-overlay-enter';
+
+                this.mask = DomHandler.createElement('div', {
+                    'data-pc-section': 'datepickermask',
+                    class: !this.isUnstyled && styleClass,
+                    'p-bind': this.ptm('datepickermask')
+                });
                 this.mask.style.zIndex = String(parseInt(this.overlay.style.zIndex, 10) - 1);
-                this.mask.setAttribute('data-pc-section', 'datepicker-mask');
-                !this.isUnstyled && DomHandler.addMultipleClasses(this.mask, 'p-datepicker-mask p-datepicker-mask-scrollblocker p-component-overlay p-component-overlay-enter');
 
                 this.maskClickListener = () => {
                     this.overlayVisible = false;
@@ -1722,7 +1726,7 @@ export default {
             for (let i = 0; i < bodyChildren.length; i++) {
                 let bodyChild = bodyChildren[i];
 
-                if (DomHandler.isAttributeEquals(bodyChild, 'data-pc-section', 'datepicker-mask')) {
+                if (DomHandler.isAttributeEquals(bodyChild, 'data-pc-section', 'datepickermask')) {
                     hasBlockerMasks = true;
                     break;
                 }