@syncfusion/ej2-calendars 19.3.46 → 19.4.38

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 19.3.46
+*  version : 19.4.38
 *  Copyright Syncfusion Inc. 2001 - 2020. 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,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-calendars@*",
-  "_id": "@syncfusion/ej2-calendars@19.3.44",
+  "_id": "@syncfusion/ej2-calendars@18.25.3",
   "_inBundle": false,
-  "_integrity": "sha512-X8qpqA5zYnQcRwO9UPRFZkgs4GGuWjdmT3Hqxibhq6o4Ab+rZLh4+2d0GLqO8XihhDWyRecobfBk2KTwzy7QyQ==",
+  "_integrity": "sha512-JFfC8GiO/alltVcAY+uMqC9LW37cvLghqkxsedIESh30UPs+/HsWj7w7T3/Vz4mhI1+v4s15eDN6upZ0jwa1dw==",
   "_location": "/@syncfusion/ej2-calendars",
   "_phantomChildren": {},
   "_requested": {
@@ -32,8 +32,8 @@
     "/@syncfusion/ej2-schedule",
     "/@syncfusion/ej2-vue-calendars"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix/@syncfusion/ej2-calendars/-/ej2-calendars-19.3.44.tgz",
-  "_shasum": "20fe127a4f58ced3436ddf4d9d50a9352e44e739",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-calendars/-/ej2-calendars-18.25.3.tgz",
+  "_shasum": "f35cadd8d17c3a4c3d42e6d12f9c4017c8f1a6d3",
   "_spec": "@syncfusion/ej2-calendars@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -44,11 +44,11 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~19.3.43",
-    "@syncfusion/ej2-buttons": "~19.3.44",
-    "@syncfusion/ej2-inputs": "~19.3.44",
-    "@syncfusion/ej2-lists": "~19.3.45",
-    "@syncfusion/ej2-popups": "~19.3.43"
+    "@syncfusion/ej2-base": "~19.4.38",
+    "@syncfusion/ej2-buttons": "~19.4.38",
+    "@syncfusion/ej2-inputs": "~19.4.38",
+    "@syncfusion/ej2-lists": "~19.4.38",
+    "@syncfusion/ej2-popups": "~19.4.38"
   },
   "deprecated": false,
   "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.",
@@ -81,6 +81,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "19.3.46",
+  "version": "19.4.38",
   "sideEffects": false
 }

package/src/maskbase/masked-date-time.d.ts

@@ -35,6 +35,9 @@ export declare class MaskedDateTime {
     private isYearZero;
     private dayTypeCount;
     private monthTypeCount;
+    private hourTypeCount;
+    private minuteTypeCount;
+    private secondTypeCount;
     constructor(parent?: IMaskedDateTime);
     getModuleName(): string;
     addEventListener(): void;

package/src/maskbase/masked-date-time.js

@@ -42,6 +42,9 @@ var MaskedDateTime = /** @class */ (function () {
         this.isYearZero = false;
         this.dayTypeCount = 0;
         this.monthTypeCount = 0;
+        this.hourTypeCount = 0;
+        this.minuteTypeCount = 0;
+        this.secondTypeCount = 0;
         this.parent = parent;
         this.dateformat = this.getCulturedFormat();
         this.maskDateValue = this.parent.value != null ? new Date(+this.parent.value) : new Date();
@@ -314,6 +317,7 @@ var MaskedDateTime = /** @class */ (function () {
                 newDateValue.setHours(Math.floor(newDateValue.getHours() / 12) * 12 + (this.hour % 12));
                 this.isNavigate = this.hour.toString().length === 2;
                 this.isHourPart = true;
+                this.hourTypeCount = this.hourTypeCount + 1;
                 break;
             case 'H':
                 this.hour = (this.isHourPart && newDateValue.getHours().toString().length < 2 ? newDateValue.getHours() * 10 : 0) + parseInt(newVal[start - 1], 10);
@@ -326,6 +330,7 @@ var MaskedDateTime = /** @class */ (function () {
                 newDateValue.setHours(this.hour);
                 this.isNavigate = this.hour.toString().length === 2;
                 this.isHourPart = true;
+                this.hourTypeCount = this.hourTypeCount + 1;
                 break;
             case 'm':
                 var minutes = (this.isMinutePart && newDateValue.getMinutes().toString().length < 2 ? newDateValue.getMinutes() * 10 : 0) + parseInt(newVal[start - 1], 10);
@@ -338,6 +343,7 @@ var MaskedDateTime = /** @class */ (function () {
                 newDateValue.setMinutes(minutes);
                 this.isNavigate = minutes.toString().length === 2;
                 this.isMinutePart = true;
+                this.minuteTypeCount = this.minuteTypeCount + 1;
                 break;
             case 's':
                 var seconds = (this.isSecondsPart && newDateValue.getSeconds().toString().length < 2 ? newDateValue.getSeconds() * 10 : 0) + parseInt(newVal[start - 1], 10);
@@ -350,6 +356,7 @@ var MaskedDateTime = /** @class */ (function () {
                 newDateValue.setSeconds(seconds);
                 this.isNavigate = seconds.toString().length === 2;
                 this.isSecondsPart = true;
+                this.secondTypeCount = this.secondTypeCount + 1;
                 break;
             case 'a':
                 this.periodCharacter += newVal[start - 1].toLowerCase();
@@ -449,24 +456,40 @@ var MaskedDateTime = /** @class */ (function () {
                     break;
                 case 'hh':
                     result = proxy.isHourPart ? proxy.roundOff(proxy.maskDateValue.getHours() % 12 || 12, 2) : proxy.defaultConstant['hour'].toString();
+                    if (proxy.hourTypeCount == 2) {
+                        proxy.isNavigate = true;
+                        proxy.hourTypeCount = 0;
+                    }
                     break;
                 case 'H':
                     result = proxy.isHourPart ? proxy.maskDateValue.getHours().toString() : proxy.defaultConstant['hour'].toString();
                     break;
                 case 'HH':
                     result = proxy.isHourPart ? proxy.roundOff(proxy.maskDateValue.getHours(), 2) : proxy.defaultConstant['hour'].toString();
+                    if (proxy.hourTypeCount == 2) {
+                        proxy.isNavigate = true;
+                        proxy.hourTypeCount = 0;
+                    }
                     break;
                 case 'm':
                     result = proxy.isMinutePart ? proxy.maskDateValue.getMinutes().toString() : proxy.defaultConstant['minute'].toString();
                     break;
                 case 'mm':
                     result = proxy.isMinutePart ? proxy.roundOff(proxy.maskDateValue.getMinutes(), 2) : proxy.defaultConstant['minute'].toString();
+                    if (proxy.minuteTypeCount == 2) {
+                        proxy.isNavigate = true;
+                        proxy.minuteTypeCount = 0;
+                    }
                     break;
                 case 's':
                     result = proxy.isSecondsPart ? proxy.maskDateValue.getSeconds().toString() : proxy.defaultConstant['second'].toString();
                     break;
                 case 'ss':
                     result = proxy.isSecondsPart ? proxy.roundOff(proxy.maskDateValue.getSeconds(), 2) : proxy.defaultConstant['second'].toString();
+                    if (proxy.secondTypeCount == 2) {
+                        proxy.isNavigate = true;
+                        proxy.secondTypeCount = 0;
+                    }
                     break;
                 case 'f':
                     result = Math.floor(proxy.maskDateValue.getMilliseconds() / 100).toString();

package/src/timepicker/timepicker.js

@@ -997,7 +997,7 @@ var TimePicker = /** @class */ (function (_super) {
                 case 'shiftTab':
                     if (!this.isPopupOpen() && this.enableMask && !this.readonly) {
                         if ((this.inputElement.selectionStart == 0 && this.inputElement.selectionEnd == this.inputElement.value.length) ||
-                            (this.inputElement.selectionEnd !== length && event.action == 'tab') ||
+                            (this.inputElement.selectionEnd !== this.inputElement.value.length && event.action == 'tab') ||
                             (this.inputElement.selectionStart !== 0 && event.action == 'shiftTab') || (event.action == 'left' || event.action == 'right')) {
                             event.preventDefault();
                         }
@@ -1483,7 +1483,12 @@ var TimePicker = /** @class */ (function (_super) {
                     if (!inputVal) {
                         this.updateInputValue(this.maskedDateValue);
                     }
-                    this.createMask();
+                    if (isNullOrUndefined(val) && value != this.maskedDateValue) {
+                        this.createMask();
+                    }
+                    if (isNullOrUndefined(val) && value == this.maskedDateValue) {
+                        this.updateInputValue(this.maskedDateValue);
+                    }
                 }
             }
         }
@@ -1556,7 +1561,12 @@ var TimePicker = /** @class */ (function (_super) {
                 if (time == '') {
                     this.updateInputValue(this.maskedDateValue);
                 }
-                this.createMask();
+                if (isNullOrUndefined(time) && value != this.maskedDateValue) {
+                    this.createMask();
+                }
+                if (isNullOrUndefined(time) && value == this.maskedDateValue) {
+                    this.updateInputValue(this.maskedDateValue);
+                }
             }
         }
         return time;

package/styles/bootstrap5-dark.css

@@ -977,7 +977,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar.e-device .e-next:active,
 .e-bigger.e-small .e-calendar.e-device .e-prev:focus,
 .e-bigger.e-small .e-calendar.e-device .e-next:focus {
-  background: none;
+  background: #5c636a;
 }
 
 .e-calendar.e-device button.e-prev:active span,

package/styles/bootstrap5.css

@@ -977,7 +977,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar.e-device .e-next:active,
 .e-bigger.e-small .e-calendar.e-device .e-prev:focus,
 .e-bigger.e-small .e-calendar.e-device .e-next:focus {
-  background: none;
+  background: #5c636a;
 }
 
 .e-calendar.e-device button.e-prev:active span,

package/styles/calendar/_bootstrap-dark-definition.scss

@@ -35,6 +35,7 @@ $calendar-active-icon-color: $calendar-icon-font-color !default;
 $calendar-title-hover-color: $grey-light-font !default;
 $calendar-icon-hover-color: $grey-light-font !default;
 $calendar-icon-hover-bg-color: $grey-88 !default;
+$calendar-device-icon-hover-bg-color: none !default;
 $calendar-default-border-color: none !default;
 $calendar-icon-hover-border-color: $calendar-default-border-color !default;
 $calendar-active-state-icon-bg-color: $grey-8c !default;

package/styles/calendar/_bootstrap-definition.scss

@@ -37,6 +37,7 @@ $calendar-active-icon-color: $calendar-icon-font-color !default;
 $calendar-title-hover-color: $grey-light-font !default;
 $calendar-icon-hover-color: $grey-light-font !default;
 $calendar-icon-hover-bg-color: $grey-e6 !default;
+$calendar-device-icon-hover-bg-color: none !default;
 $calendar-default-border-color: none !default;
 $calendar-icon-hover-border-color: $calendar-default-border-color !default;
 $calendar-active-state-icon-bg-color: $grey-d4 !default;

package/styles/calendar/_bootstrap4-definition.scss

@@ -37,6 +37,7 @@ $calendar-active-icon-color: $white !default;
 $calendar-title-hover-color: $gray-900 !default;
 $calendar-icon-hover-color: $gray-900 !default;
 $calendar-icon-hover-bg-color: darken($gray-100, 2%) !default;
+$calendar-device-icon-hover-bg-color: none !default;
 $calendar-default-border-color: none !default;
 $calendar-icon-hover-border-color: $calendar-default-border-color !default;
 $calendar-active-state-icon-bg-color: darken($gray-600, 10%) !default;

package/styles/calendar/_bootstrap5-definition.scss

@@ -138,6 +138,7 @@ $calendar-active-icon-color: $secondary-text-color !default;
 $calendar-title-hover-color: $content-text-color-alt3 !default;
 $calendar-icon-hover-color: $secondary-text-color !default;
 $calendar-icon-hover-bg-color: $secondary-bg-color-hover !default;
+$calendar-device-icon-hover-bg-color: $secondary-bg-color-hover !default;
 $calendar-default-border-color: none !default;
 $calendar-icon-hover-border-color: $content-bg-color-hover !default;
 $calendar-active-state-icon-bg-color: $secondary-border-color-pressed !default;

package/styles/calendar/_fabric-dark-definition.scss

@@ -18,6 +18,7 @@ $calendar-icon-font-color: $neutral-light-font !default;
 $calendar-active-icon-color: $neutral-light-fontalt !default;
 $calendar-active-state-icon-bg-color: none !default;
 $calendar-icon-hover-bg-color: none !default;
+$calendar-device-icon-hover-bg-color: none !default;
 $calendar-focus-date-color: $neutral-quintenaryalt !default;
 $calendar-other-month-date: $neutral-tertiary-alt !default;
 $calendar-text-color: $neutral-light-font !default;

package/styles/calendar/_fabric-definition.scss

@@ -21,6 +21,7 @@ $calendar-icon-font-color: $neutral-light-font !default;
 $calendar-active-icon-color: $calendar-icon-font-color !default;
 $calendar-active-state-icon-bg-color: $content-bg-color !default;
 $calendar-icon-hover-bg-color: none !default;
+$calendar-device-icon-hover-bg-color: none !default;
 $calendar-focus-date-color: $neutral-quintenaryalt !default;
 $calendar-other-month-date: $neutral-tertiary !default;
 $calendar-text-color: $neutral-light-font !default;

package/styles/calendar/_fluent-definition.scss

@@ -0,0 +1,214 @@
+/*! calendar bootstrap5 theme variables */
+//month view
+$calendar-normal-month-view-height: 28px !default;
+$calendar-normal-month-view-line-height: 26px !default;
+$calendar-normal-month-view-width: 28px !default;
+$calendar-normal-month-cell-padding: 0 !default;
+$calendar-bigger-table-month-padding: 0 16px 0 16px !default;
+$calendar-bigger-month-font-size: $text-sm !default;
+$calendar-bigger-month-view-padding: 0 !default;
+$calendar-bigger-month-view-height: 32px !default;
+$calendar-bigger-month-view-line-height: 30px !default;
+$calendar-bigger-month-view-width: 32px !default;
+//header dimension
+$calendar-header-font-size: 12px !default;
+$calendar-bigger-header-padding: 16px 16px 8px 16px !default;
+$calendar-bigger-day-header-height: 32px !default;
+$calendar-bigger-header-height: 32px !default;
+$calendar-normal-header-padding: 12px 12px 4px 12px !default;
+$calendar-normal-day-header-height: 28px !default;
+$calendar-normal-day-header-text: none !default;
+$calendar-normal-header-height: 28px !default;
+$calendar-bigger-header-font-size: 16px !default;
+$calendar-normal-day-header-font-weight: normal !default;
+$calendar-title-font-size: 14px !default;
+$calendar-title-margin-left-style: 6px !default;
+$calendar-title-font-weight-style: 600 !default;
+$calendar-title-decoration-style: none !default;
+// common size properties
+$calendar-wrapper-border-radius: 4px !default;
+$calendar-full-width: 100% !default;
+$calendar-lg-day-header-format-max-width: 100% !default;
+$calendar-lg-day-header-format-min-width: 540px !default;
+$calendar-icon-padding-top: 0 !default;
+$calendar-zero-value: 0 !default;
+$calendar-disable-opacity: 1 !default;
+//popup styles
+$calendar-normal-max-width: 220px !default;
+$calendar-normal-min-width: 222px !default;
+$calendar-small-max-width: 198px !default;
+$calendar-small-min-width: 198px !default;
+$calendar-bigger-max-width: 254px !default;
+$calendar-bigger-min-width: 256px !default;
+$calendar-weeknumber-min-width: 300px !default;
+$calendar-weeknumber-bigger-width: 325px !default;
+$calendar-popup-padding: 0 !default;
+$calendar-popup-bigger-padding: 0 !default;
+// today button
+$calendar-bigger-today-button-height: 48px !default;
+$calendar-normal-today-button-height: 36px !default;
+//  year decade view 
+//dimension
+$calendar-normal-year-decade-height: 40px !default;
+$calendar-normal-year-decade-width: 40px !default;
+$calendar-normal-year-decade-padding: 2px !default;
+$calendar-yeardeacde-span-padding: 0 !default;
+$calendar-yeardecade-padding: 0 8px 0 8px !default;
+$calendar-bigger-year-decade-padding: 0 !default;
+$calendar-bigger-yeardecade-font-size: $calendar-bigger-month-font-size !default;
+$calendar-bigger-table-yeardecade-padding: 0 12px 0 12px !default;
+$calendar-bigger-yeardecade-font-weight: normal !default;
+$calendar-yeardecade-font-weight: normal !default;
+$calendar-bigger-year-decade-height: 44px !default;
+$calendar-bigger-year-decade-width: 44px !default;
+$calendar-yeardecade-header-padding: 14px 12px 4px 12px !default;
+$calendar-bigger-yeardecade-header-padding: 16px 16px 8px 16px !default;
+$calendar-decade-title-left-margin-style: 9px !default;
+// table related styles
+$calendar-table-padding: 0 12px 0 12px !default;
+//font icons
+$calendar-prev-icon: '\e910' !default;
+$calendar-next-icon: '\e916' !default;
+$calendar-next-prev-icon-size: 14px !default;
+$calendar-icon-line-height: 1 !default;
+$calendar-bigger-icon-size: 32px !default;
+$calendar-normal-icon-size: 28px !default;
+$calendar-spanicon-font-weight-style: normal !default;
+//pending
+$calendar-icon-font-size-style: 14px !default;
+$calendar-bigger-icon-font-size: 16px !default;
+$calendar-footer-container-padding: 8px !default;
+$calendar-bigger-footer-container-padding: 16px !default;
+// small size
+$calendar-small-icon-size: 26px !default;
+$calendar-small-icon-font-size-style: 12px !default;
+$calendar-small-title-font-size: 12px !default;
+$calendar-small-icon-padding: 0 !default;
+$calendar-small-header-height: 28px !default;
+$calendar-small-day-header-height: 26px !default;
+$calendar-small-month-view-height: 26px !default;
+$calendar-small-month-view-line-height: 20px !default;
+$calendar-small-date-font-size: 12px !default;
+$calendar-small-month-view-width: 26px !default;
+$calendar-small-popup-padding: 0 !default;
+$calendar-bigger-small-table-padding: 0 12px 0 12px !default;
+$calendar-bigger-small-yeardecade-font-size: 14px !default;
+$calendar-small-font-size: 12px !default;
+//week number
+$calendar-week-number-font-size-style: 14px !default;
+$calendar-week-normal-max-width: 294px !default;
+$calendar-week-normal-min-width: 288px !default;
+$calendar-week-bigger-max-width: 320px !default;
+$calendar-week-bigger-min-width: 314px !default;
+$calendar-icon-padding: 5px !default;
+$calendar-icon-button-margin: 0 !default;
+$calendar-bigger-icon-padding: 0 !default;
+$calendar-bigger-icon-margin: 0 !default;
+//thead style
+$calendar-thead-padding: 0 0 6px !default;
+// common styles
+$calendar-none-style: none !default;
+$calendar-cursor-default-style: default !default;
+$calendar-cursor-pointer-style: pointer !default;
+$calendar-block-style: block !default;
+$calendar-inline-block-style: inline-block !default;
+$calendar-display-style: flex !default;
+$calendar-pointer-events: initial !default;
+$calendar-float-right-style: right !default;
+$calendar-float-left-style: left !default;
+$calendar-other-month-display-style: inline-block !default;
+$calendar-other-month-row-display-style: none !default;
+$calendar-footer-border: 0 solid $border-light !default;
+$calendar-bigger-footer-border: 0 solid $border-light !default;
+$calendar-week-number-font-style: italic !default;
+//dimension
+$calendar-date-font-size: $text-xs !default;
+$calendar-bigger-day-font-size: 15px !default;
+$calendar-link-font-weight-style: normal !default;
+$calendar-disable-font-weight-style: normal !default;
+$calendar-border-radius: 4px !default;
+//week header font size
+$calendar-bigger-week-header-font-size: $text-sm !default;
+//header color
+$calendar-header-font-color: $content-text-color-alt1 !default;
+$calendar-header-icon-color: $icon-color !default;
+$calendar-title-font-color: $content-text-color !default;
+$calendar-icon-font-color: $content-text-color-alt1 !default;
+$calendar-active-icon-color: $secondary-text-color !default;
+$calendar-title-hover-color: $content-text-color !default;
+$calendar-icon-hover-color: $secondary-text-color !default;
+$calendar-icon-hover-bg-color: $secondary-bg-color-hover !default;
+$calendar-device-icon-hover-bg-color: none !default;
+$calendar-default-border-color: none !default;
+$calendar-icon-hover-border-color: $content-bg-color-hover !default;
+$calendar-active-state-icon-bg-color: $secondary-border-color-pressed !default;
+//popup styles
+$calendar-border-style: 1px solid $border-light !default;
+$calendar-bg-color: $transparent !default;
+$calendar-box-shadow: none !default;
+//  year decade view
+//color
+$calendar-yeardecade-bg-color: none !default;
+$calendar-yeardecade-hover-bg: $content-bg-color-hover !default;
+$calendar-yeardecade-selected-hover-bg: darken($primary-bg-color, 10%) !default;
+//decade view color
+$calendar-other-decade-cell-color: $content-text-color-alt2 !default;
+// end year decade
+//other months
+$calendar-other-month-date: $content-text-color-alt3 !default;
+$calendar-other-month-date-hover-bg: $calendar-other-month-date !default;
+// td styles 
+//color
+$calendar-light-font: $content-text-color-alt1 !default;
+$calendar-active-font-color: $flyout-text-color-selected !default;
+$calendar-active-hover-font-color: $flyout-text-color-selected !default;
+$calendar-active-today-font-color: $content-text-color !default;
+$calendar-active-today-hover-font-color: $content-text-color !default;
+$calendar-active-bg-color: $flyout-bg-color-selected !default;
+$calendar-active-bg-border-color: 1px solid $border !default;
+$calendar-active-hover-bg-color:  $flyout-bg-color-selected !default;
+$calendar-hover-color:  $flyout-bg-color-hover !default;
+$calendar-text-color: $flyout-text-color !default;
+$calendar-hover-text: $calendar-text-color !default;
+$calendar-focus-bg-color: $flyout-bg-color-focus !default;
+$calendar-focused-today-bg-style: $primary !default;
+$calendar-focused-today-border-style:  1px solid $border !default;
+$calendar-focus-border-color: 1px solid $border !default;
+$calendar-hover-border-color: none !default;
+$calendar-disable-font-color: $flyout-text-color-disabled !default;
+$calendar-focused-date-bg-style: $primary-light !default;
+$calendar-small-title-font-color: $content-text-color !default;
+// end td styles 
+//today date
+$calendar-today-bg-style: none !default;
+$calendar-today-bg-hover-color: $flyout-bg-color-hover !default;
+$calendar-today-border-color: 1px solid $primary !default;
+$calendar-selected-box-shadow: none !default;
+$calendar-selected-border-color: none !default;
+//pending
+$calendar-today-color: $primary !default;
+$calendar-today-focused-font-color: $primary-text-color !default;
+$calendar-today-focus-color: $content-text-color !default;
+//week header
+$calendar-week-header-font-color: $content-text-color !default;
+$calendar-week-header-bg-style: none !default;
+//week number
+$calendar-week-number-color-style: $content-text-color-disabled !default;
+$calendar-week-number-font-color: $calendar-text-color !default;
+//today button
+$calendar-footer-background: $transparent !default;
+$calendar-today-disabled-background-style: $primary-bg-color-disabled !default;
+$calendar-today-disabled-border-style: $primary-border-color-disabled !default;
+$calendar-today-disabled-box-shadow: none !default;
+$calendar-today-disabled-color: $primary-text-disabled !default;
+//today button flat button override style
+$today-buuton-bg: $primary-bg-color !default;
+$today-buuton-bg-border-color: $primary-border-color !default;
+$today-buuton-text-color: $primary-text-color !default;
+$today-buuton-hover-bg: $primary-bg-color-hover !default;
+$today-buuton-bg-border-hover-color: $primary-border-color-hover !default;
+$today-buuton-text-hover-color: $primary-text-hover !default;
+$today-buuton-active-bg: $primary-bg-color-pressed !default;
+$today-buuton-bg-border-active-color: $primary-border-color-pressed !default;
+$today-buuton-text-active-color: $primary-text-pressed !default;
+

package/styles/calendar/_highcontrast-definition.scss

@@ -20,6 +20,7 @@ $calendar-title-decoration-style: underline !default;
 $calendar-icon-font-color: $content-font !default;
 $calendar-active-state-icon-bg-color: $selection-bg !default;
 $calendar-icon-hover-bg-color: $hover-bg !default;
+$calendar-device-icon-hover-bg-color: none !default;
 $calendar-focus-date-color: $content-font !default;
 $calendar-other-month-date: $content-font-alt !default;
 $calendar-text-color: $content-font !default;

package/styles/calendar/_highcontrast-light-definition.scss

@@ -17,6 +17,7 @@ $calendar-title-decoration-style: underline !default;
 $calendar-icon-font-color: $content-font !default;
 $calendar-active-state-icon-bg-color: $selection-bg !default;
 $calendar-icon-hover-bg-color: $hover-bg !default;
+$calendar-device-icon-hover-bg-color: none !default;
 $calendar-focus-date-color: $content-font !default;
 $calendar-other-month-date: $content-font-alt !default;
 $calendar-text-color: $content-font !default;

package/styles/calendar/_material-dark-definition.scss

@@ -18,6 +18,7 @@ $calendar-icon-font-color: rgba($calendar-header-icon-color, .75) !default;
 $calendar-active-icon-color: $calendar-icon-font-color !default;
 $calendar-active-state-icon-bg-color: rgba($grey-white, .18) !default;
 $calendar-icon-hover-bg-color: none !default;
+$calendar-device-icon-hover-bg-color: none !default;
 $calendar-focus-date-color: rgba($accent, .12) !default;
 $calendar-other-month-date: rgba($grey-dark-font, .3) !default;
 $calendar-text-color: $grey-dark-font !default;

package/styles/calendar/_material-definition.scss

@@ -21,6 +21,7 @@ $calendar-icon-font-color: rgba($calendar-header-icon-color, .75) !default;
 $calendar-active-icon-color: $calendar-icon-font-color !default;
 $calendar-active-state-icon-bg-color: $grey-white !default;
 $calendar-icon-hover-bg-color: none !default;
+$calendar-device-icon-hover-bg-color: none !default;
 $calendar-focus-date-color: rgba($accent, .12) !default;
 $calendar-other-month-date: rgba($grey-light-font, .38) !default;
 $calendar-text-color: rgba($grey-light-font, .87) !default;

package/styles/calendar/_tailwind-definition.scss

@@ -140,6 +140,7 @@ $calendar-icon-hover-color: $content-text-color-alt1 !default;
 $calendar-icon-hover-bg-color: transparent !default;
 $calendar-default-border-color: none !default;
 $calendar-icon-hover-border-color: $content-bg-color-hover !default;
+$calendar-device-icon-hover-bg-color: none !default;
 $calendar-active-state-icon-bg-color: transparent !default;
 //popup styles
 $calendar-border-style: 1px solid $border-light !default;

package/styles/calendar/_theme.scss

@@ -178,7 +178,7 @@
       #{if(&, '&', '*')} .e-next:active,
       #{if(&, '&', '*')} .e-prev:focus,
       #{if(&, '&', '*')} .e-next:focus {
-        background: $calendar-none-style;
+        background: $calendar-device-icon-hover-bg-color;
       }#{if(&, '&', '*')} button.e-prev:active span,
       #{if(&, '&', '*')} button.e-next:active span {
         color: $calendar-header-icon-color;

package/styles/calendar/bootstrap5-dark.css

@@ -977,7 +977,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar.e-device .e-next:active,
 .e-bigger.e-small .e-calendar.e-device .e-prev:focus,
 .e-bigger.e-small .e-calendar.e-device .e-next:focus {
-  background: none;
+  background: #5c636a;
 }
 
 .e-calendar.e-device button.e-prev:active span,

package/styles/calendar/bootstrap5.css

@@ -977,7 +977,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar.e-device .e-next:active,
 .e-bigger.e-small .e-calendar.e-device .e-prev:focus,
 .e-bigger.e-small .e-calendar.e-device .e-next:focus {
-  background: none;
+  background: #5c636a;
 }
 
 .e-calendar.e-device button.e-prev:active span,

package/styles/calendar/icons/_fluent.scss

@@ -0,0 +1,12 @@
+@include export-module('calendar-fluent-icons') {
+  /*! component icons */
+  .e-calendar .e-header {
+    #{if(&, '&', '*')} .e-date-icon-prev::before {
+      content: '\e788';
+      }
+
+    #{if(&, '&', '*')} .e-date-icon-next::before {
+      content: '\e789';
+    }
+  }
+}

package/styles/datepicker/_fluent-definition.scss

@@ -0,0 +1,36 @@
+//default 
+$datepicker-icon: '\e901' !default;
+$datepicker-icon-font-size: 18px !default;
+$datepicker-icon-container-min-height: 18px !default;
+$datepicker-icon-container-min-width: 30px !default;
+$datepicker-bigger-icon-container-min-height: 18px !default;
+$datepicker-bigger-icon-container-min-width: 36px !default;
+$datepicker-bigger-icon-font-size: 22px !default;
+$datepicker-icon-normal-margin: 0 !default;
+$datepicker-icon-bigger-margin: 0 !default;
+$datepicker-icon-border-radius: 50% !default;
+$datepicker-popup-border-radius: 6px !default;
+$datepicker-box-sizing: border-box !default;
+$datepicker-modal-header-display: block !default;
+$datepicker-calendar-tbody-landscape-height: 130px !default;
+$datepicker-popup-bigger-margin-top: 8px !default;
+// mouse small icon
+$datepicker-small-icon-font-size: 16px !default;
+// Touch small icon
+$datepicker-bigger-small-icon-font-size: 20px !default;
+// color variables
+$datepicker-popup-border: 0 solid $border-light !default;
+$datepicker-input-border-style: none !default;
+$datepicker-calendar-border-style: none !default;
+$datepicker-icon-color: $icon-color !default;
+$datepicker-active-icon-color: $datepicker-icon-color !default;
+$datepicker-icon-active-bg-color: $content-bg-color-alt4 !default;
+$datepicker-active-border-color: $border !default;
+$datepicker-popup-box-shadow: $shadow-md !default;
+$datepicker-overlay: $overlay-bg-color !default;
+$datepicker-icon-hover-color: $icon-color-hover !default;
+$datepicker-popup-bg-color: $flyout-bg-color !default;
+$datepicker-othermonth-row: none !default;
+$datepicker-modal-header-bg: $flyout-bg-color !default;
+$datepicker-modal-header-color: $flyout-text-color !default;
+//enddefault

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

@@ -29,4 +29,5 @@ $datepicker-calendar-tbody-landscape-height: 130px !default;
 $datepicker-small-icon-font-size: 14px !default;
 // Touch small icon
 $datepicker-bigger-small-icon-font-size: 18px !default;
+$zero-value: 0 !default;
 //enddefault

package/styles/datepicker/_material-definition.scss

@@ -28,3 +28,4 @@ $datepicker-calendar-tbody-landscape-height: 130px !default;
 $datepicker-small-icon-font-size: 14px !default;
 // Touch small icon
 $datepicker-bigger-small-icon-font-size: 18px !default;
+$zero-value: 0 !default;