@syncfusion/ej2-calendars 24.2.3 → 24.2.5

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 24.2.3
+*  version : 24.2.5
 *  Copyright Syncfusion Inc. 2001 - 2023. 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@24.1.47",
+  "_id": "@syncfusion/ej2-calendars@24.2.3",
   "_inBundle": false,
-  "_integrity": "sha512-FvBECaMLbb4sI890M0ApgyZLCQmpbpFXd9JyUYgrQp7Gbx7HI1FZ7IhgG44iL1lMLoS01HcXhVuJnsxhT8KMdw==",
+  "_integrity": "sha512-jRcfZtIe8Ujqp2OFZrsPtDSq4UBajjypANh3DaJ1UVCvCziB8VB78wkrPABbpgb05moR5TR1qCehBu6Q2VnaFg==",
   "_location": "/@syncfusion/ej2-calendars",
   "_phantomChildren": {},
   "_requested": {
@@ -31,8 +31,8 @@
     "/@syncfusion/ej2-schedule",
     "/@syncfusion/ej2-vue-calendars"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-calendars/-/ej2-calendars-24.1.47.tgz",
-  "_shasum": "1dadc83cca6f8b8bb1a22f38031b42f252a621b8",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-calendars/-/ej2-calendars-24.2.3.tgz",
+  "_shasum": "2d154e96239cdb5a7aa35879fb8937c9e1d9f418",
   "_spec": "@syncfusion/ej2-calendars@*",
   "_where": "/jenkins/workspace/elease-automation_release_24.1.1/packages/included",
   "author": {
@@ -43,11 +43,11 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~24.2.3",
-    "@syncfusion/ej2-buttons": "~24.2.3",
-    "@syncfusion/ej2-inputs": "~24.2.3",
-    "@syncfusion/ej2-lists": "~24.2.3",
-    "@syncfusion/ej2-popups": "~24.2.3"
+    "@syncfusion/ej2-base": "~24.2.5",
+    "@syncfusion/ej2-buttons": "~24.2.5",
+    "@syncfusion/ej2-inputs": "~24.2.5",
+    "@syncfusion/ej2-lists": "~24.2.4",
+    "@syncfusion/ej2-popups": "~24.2.5"
   },
   "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.",
@@ -80,6 +80,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "24.2.3",
+  "version": "24.2.5",
   "sideEffects": false
 }

package/src/calendar/calendar.d.ts

@@ -362,6 +362,8 @@ export declare class CalendarBase extends Component<HTMLElement> implements INot
     protected minMaxUpdate(value?: Date): void;
     protected createHeader(): void;
     protected createContent(): void;
+    private addContentFocus;
+    private removeContentFocus;
     protected getCultureValues(): string[];
     protected toCapitalize(text: string): string;
     protected createContentHeader(): void;

package/src/calendar/calendar.js

@@ -33,6 +33,7 @@ var DEVICE = 'e-device';
 var HEADER = 'e-header';
 var RTL = 'e-rtl';
 var CONTENT = 'e-content';
+var CONTENTTABLE = 'e-content-table';
 var YEAR = 'e-year';
 var MONTH = 'e-month';
 var DECADE = 'e-decade';
@@ -48,6 +49,7 @@ var WEEKEND = 'e-weekend';
 var WEEKNUMBER = 'e-week-number';
 var SELECTED = 'e-selected';
 var FOCUSEDDATE = 'e-focused-date';
+var FOCUSEDCELL = 'e-focused-cell';
 var OTHERMONTHROW = 'e-month-hide';
 var TODAY = 'e-today';
 var TITLE = 'e-title';
@@ -228,6 +230,7 @@ var CalendarBase = /** @class */ (function (_super) {
         var ariaTitleAttrs = {
             'aria-atomic': 'true', 'aria-live': 'assertive', 'aria-label': 'title'
         };
+        var tabIndexAttr = { 'tabindex': '0' };
         this.headerElement = this.createElement('div', { className: HEADER });
         var iconContainer = this.createElement('div', { className: ICONCONTAINER });
         this.previousIcon = this.createElement('button', { className: '' + PREVICON, attrs: { type: 'button' } });
@@ -237,6 +240,7 @@ var CalendarBase = /** @class */ (function (_super) {
             isCenterRipple: true
         });
         attributes(this.previousIcon, ariaPrevAttrs);
+        attributes(this.previousIcon, tabIndexAttr);
         this.nextIcon = this.createElement('button', { className: '' + NEXTICON, attrs: { type: 'button' } });
         rippleEffect(this.nextIcon, {
             selector: '.e-next',
@@ -248,8 +252,10 @@ var CalendarBase = /** @class */ (function (_super) {
             attributes(this.nextIcon, { tabIndex: '-1' });
         }
         attributes(this.nextIcon, ariaNextAttrs);
+        attributes(this.nextIcon, tabIndexAttr);
         this.headerTitleElement = this.createElement('div', { className: '' + LINK + ' ' + TITLE });
         attributes(this.headerTitleElement, ariaTitleAttrs);
+        attributes(this.headerTitleElement, tabIndexAttr);
         this.headerElement.appendChild(this.headerTitleElement);
         this.previousIcon.appendChild(this.createElement('span', { className: '' + PREVSPAN + ' ' + ICON }));
         this.nextIcon.appendChild(this.createElement('span', { className: '' + NEXTSPAN + ' ' + ICON }));
@@ -266,7 +272,7 @@ var CalendarBase = /** @class */ (function (_super) {
     };
     CalendarBase.prototype.createContent = function () {
         this.contentElement = this.createElement('div', { className: CONTENT });
-        this.table = this.createElement('table', { attrs: { tabIndex: '0', 'role': 'grid', 'aria-activedescendant': '', 'aria-labelledby': this.element.id } });
+        this.table = this.createElement('table', { attrs: { 'class': CONTENTTABLE, 'tabIndex': '0', 'role': 'grid', 'aria-activedescendant': '', 'aria-labelledby': this.element.id } });
         if (this.getModuleName() === 'calendar') {
             this.element.appendChild(this.contentElement);
         }
@@ -279,6 +285,30 @@ var CalendarBase = /** @class */ (function (_super) {
         if (this.showTodayButton) {
             this.createContentFooter();
         }
+        if (this.getModuleName() != 'daterangepicker') {
+            EventHandler.add(this.table, 'focus', this.addContentFocus, this);
+            EventHandler.add(this.table, 'blur', this.removeContentFocus, this);
+        }
+    };
+    CalendarBase.prototype.addContentFocus = function (args) {
+        var focusedDate = this.tableBodyElement.querySelector('tr td.e-focused-date');
+        var selectedDate = this.tableBodyElement.querySelector('tr td.e-selected');
+        if (!isNullOrUndefined(selectedDate)) {
+            selectedDate.classList.add(FOCUSEDCELL);
+        }
+        else if (!isNullOrUndefined(focusedDate)) {
+            focusedDate.classList.add(FOCUSEDCELL);
+        }
+    };
+    CalendarBase.prototype.removeContentFocus = function (args) {
+        var focusedDate = this.tableBodyElement.querySelector('tr td.e-focused-date');
+        var selectedDate = this.tableBodyElement.querySelector('tr td.e-selected');
+        if (!isNullOrUndefined(selectedDate)) {
+            selectedDate.classList.remove(FOCUSEDCELL);
+        }
+        else if (!isNullOrUndefined(focusedDate)) {
+            focusedDate.classList.remove(FOCUSEDCELL);
+        }
     };
     CalendarBase.prototype.getCultureValues = function () {
         var culShortNames = [];
@@ -363,6 +393,7 @@ var CalendarBase = /** @class */ (function (_super) {
     CalendarBase.prototype.updateFooter = function () {
         this.todayElement.textContent = this.l10.getConstant('today');
         this.todayElement.setAttribute('aria-label', this.l10.getConstant('today'));
+        this.todayElement.setAttribute('tabindex', '0');
     };
     CalendarBase.prototype.createContentFooter = function () {
         if (this.showTodayButton) {
@@ -467,34 +498,54 @@ var CalendarBase = /** @class */ (function (_super) {
         this.effect = '';
         switch (e.action) {
             case 'moveLeft':
-                this.keyboardNavigate(-1, view, e, this.max, this.min);
-                e.preventDefault();
+                if (this.getModuleName() != 'daterangepicker' && !isNullOrUndefined(e.target) && e.target.classList.length > 0 && e.target.classList.contains('e-content-table')) {
+                    this.keyboardNavigate(-1, view, e, this.max, this.min);
+                    e.preventDefault();
+                }
                 break;
             case 'moveRight':
-                this.keyboardNavigate(1, view, e, this.max, this.min);
-                e.preventDefault();
+                if (this.getModuleName() != 'daterangepicker' && !isNullOrUndefined(e.target) && e.target.classList.length > 0 && e.target.classList.contains('e-content-table')) {
+                    this.keyboardNavigate(1, view, e, this.max, this.min);
+                    e.preventDefault();
+                }
                 break;
             case 'moveUp':
-                if (view === 0) {
-                    this.keyboardNavigate(-7, view, e, this.max, this.min); // move the current date to the previous seven days.
-                }
-                else {
-                    this.keyboardNavigate(-4, view, e, this.max, this.min); // move the current year to the previous four days.
+                if (this.getModuleName() != 'daterangepicker' && !isNullOrUndefined(e.target) && e.target.classList.length > 0 && e.target.classList.contains('e-content-table')) {
+                    if (view === 0) {
+                        this.keyboardNavigate(-7, view, e, this.max, this.min); // move the current date to the previous seven days.
+                    }
+                    else {
+                        this.keyboardNavigate(-4, view, e, this.max, this.min); // move the current year to the previous four days.
+                    }
+                    e.preventDefault();
                 }
-                e.preventDefault();
                 break;
             case 'moveDown':
-                if (view === 0) {
-                    this.keyboardNavigate(7, view, e, this.max, this.min);
-                }
-                else {
-                    this.keyboardNavigate(4, view, e, this.max, this.min);
+                if (this.getModuleName() != 'daterangepicker' && !isNullOrUndefined(e.target) && e.target.classList.length > 0 && e.target.classList.contains('e-content-table')) {
+                    if (view === 0) {
+                        this.keyboardNavigate(7, view, e, this.max, this.min);
+                    }
+                    else {
+                        this.keyboardNavigate(4, view, e, this.max, this.min);
+                    }
+                    e.preventDefault();
                 }
-                e.preventDefault();
                 break;
             case 'select':
-                if (e.target === this.todayElement) {
+                if (e.target === this.headerTitleElement) {
+                    this.navigateTitle(e);
+                }
+                else if (e.target === this.previousIcon) {
+                    this.navigatePrevious(e);
+                }
+                else if (e.target === this.nextIcon) {
+                    this.navigateNext(e);
+                }
+                else if (e.target === this.todayElement) {
                     this.todayButtonClick(e, value);
+                    if (this.getModuleName() === 'datepicker' || this.getModuleName() === 'datetimepicker') {
+                        this.element.focus();
+                    }
                 }
                 else {
                     var element = !isNullOrUndefined(focusedDate) ? focusedDate : selectedDate;
@@ -507,6 +558,9 @@ var CalendarBase = /** @class */ (function (_super) {
                         else {
                             this.contentClick(null, --view, (element), value);
                         }
+                        if (this.getModuleName() === 'datepicker' || this.getModuleName() === 'datetimepicker') {
+                            this.element.focus();
+                        }
                     }
                 }
                 break;
@@ -576,9 +630,20 @@ var CalendarBase = /** @class */ (function (_super) {
                 this.navigateTo('Month', new Date(this.currentDate.getFullYear(), 11, 31));
                 e.preventDefault();
                 break;
-        }
-        if (this.getModuleName() === 'calendar') {
-            this.table.focus();
+            case 'tab':
+                if ((this.getModuleName() === 'datepicker' || this.getModuleName() === 'datetimepicker') && e.target === this.todayElement) {
+                    e.preventDefault();
+                    this.element.focus();
+                    this.hide();
+                }
+                break;
+            case 'shiftTab':
+                if ((this.getModuleName() === 'datepicker' || this.getModuleName() === 'datetimepicker') && e.target === this.headerTitleElement) {
+                    e.preventDefault();
+                    this.element.focus();
+                    this.hide();
+                }
+                break;
         }
     };
     CalendarBase.prototype.keyboardNavigate = function (number, currentView, e, max, min) {

package/src/datepicker/datepicker.js

@@ -672,8 +672,6 @@ var DatePicker = /** @class */ (function (_super) {
                     this.inputElement.focus();
                 }
                 break;
-            case 'tab':
-                this.hide(e);
         }
     };
     DatePicker.prototype.inputFocusHandler = function () {
@@ -835,7 +833,13 @@ var DatePicker = /** @class */ (function (_super) {
                         this.inputElement.selectionStart = start;
                         this.inputElement.selectionEnd = end;
                     }
-                    this.hide(e);
+                    if (e.action === 'tab' && e.target === this.inputElement && this.isCalendar() && document.activeElement === this.inputElement) {
+                        e.preventDefault();
+                        this.headerTitleElement.focus();
+                    }
+                    if (e.action === 'shiftTab' && e.target === this.inputElement && this.isCalendar() && document.activeElement === this.inputElement) {
+                        this.hide(e);
+                    }
                     break;
                 }
             default:

package/styles/bootstrap-dark.css

@@ -603,7 +603,7 @@ ejs-calendar {
 .e-calendar .e-header .e-title:active,
 .e-bigger.e-small .e-calendar .e-header .e-title:active {
   box-shadow: none;
-  background: #f0f0f0;
+  background: transparent;
   text-decoration: none;
 }
 .e-calendar .e-header .e-prev:hover > span, .e-calendar .e-header .e-next:hover > span,
@@ -842,7 +842,7 @@ ejs-calendar {
     transform: scale(1);
   }
 }
-.e-calendar .e-cell.e-focused-cell {
+.e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
   box-shadow: 0 0 0 1px #fff;
   border-radius: 4px;
 }

package/styles/bootstrap.css

@@ -843,7 +843,7 @@ ejs-calendar {
     transform: scale(1);
   }
 }
-.e-calendar .e-cell.e-focused-cell {
+.e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
   box-shadow: 0 0 0 1px #000;
   border-radius: 4px;
 }

package/styles/bootstrap4.css

@@ -604,7 +604,7 @@ ejs-calendar {
 .e-calendar .e-header .e-title:active,
 .e-bigger.e-small .e-calendar .e-header .e-title:active {
   box-shadow: none;
-  background: #212529;
+  background: transparent;
   text-decoration: none;
 }
 .e-calendar .e-header .e-prev:hover > span, .e-calendar .e-header .e-next:hover > span,
@@ -843,7 +843,7 @@ ejs-calendar {
     transform: scale(1);
   }
 }
-.e-calendar .e-cell.e-focused-cell {
+.e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
   box-shadow: 0 0 0 1px #212529;
   border-radius: 4px;
 }

package/styles/bootstrap5-dark.css

@@ -913,7 +913,7 @@ ejs-calendar {
   color: rgba(255, 255, 255, 0.65);
 }
 
-.e-calendar .e-cell.e-focused-cell {
+.e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
   box-shadow: 0 0 0 1px #7b848d;
   border-radius: 4px;
 }

package/styles/bootstrap5.css

@@ -913,7 +913,7 @@ ejs-calendar {
   color: rgba(255, 255, 255, 0.65);
 }
 
-.e-calendar .e-cell.e-focused-cell {
+.e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
   box-shadow: 0 0 0 1px #6c757d;
   border-radius: 4px;
 }

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

@@ -27,10 +27,10 @@ $calendar-title-font-weight-style: 600 !default;
 $calendar-title-decoration-style: none !default;
 $calendar-header-title-padding: 0 5px !default;
 
-// Focus related styles
+//Focus related styles
 $calendar-title-focus-box-shadow: 0 0 0 1px $grey-light-font !default;
 $calendar-title-focus-background: none !default;
-$calendar-title-active-background: $grey-dark-font !default;
+$calendar-title-active-background: transparent !default;
 $calendar-icon-focus-box-shadow: 0 0 0 1px $grey-light-font !default;
 $calendar-title-border-radius: 4px !default;
 $calendar-title-hover-bg-color: none !default;

package/styles/calendar/_bootstrap4-definition.scss

@@ -29,10 +29,10 @@ $calendar-title-font-weight-style: 600 !default;
 $calendar-title-decoration-style: none !default;
 $calendar-header-title-padding: 0 5px !default;
 
-// Focus related styles
+//Focus related styles
 $calendar-title-focus-box-shadow: 0 0 0 1px $gray-900 !default;
 $calendar-title-focus-background: none !default;
-$calendar-title-active-background: $gray-900 !default;
+$calendar-title-active-background: transparent !default;
 $calendar-icon-focus-box-shadow: 0 0 0 1px $gray-900 !default;
 $calendar-title-border-radius: 4px !default;
 $calendar-title-hover-bg-color: none !default;

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

@@ -65,7 +65,7 @@ $calendar-normal-year-decade-height: 45px !default;
 $calendar-normal-header-height: 40px !default;
 $calendar-normal-icon-size: 36px !default;
 $calendar-normal-today-button-height: 36px !default;
-$calendar-border-radius: 4px !default;
+$calendar-border-radius: 50% !default;
 $calendar-pointer-events: none !default;
 $calendar-float-right-style: right !default;
 $calendar-icon-padding-top: 0 !default;

package/styles/calendar/_material-definition.scss

@@ -68,7 +68,7 @@ $calendar-normal-year-decade-height: 45px !default;
 $calendar-normal-header-height: 40px !default;
 $calendar-normal-icon-size: 36px !default;
 $calendar-normal-today-button-height: 36px !default;
-$calendar-border-radius: 4px !default;
+$calendar-border-radius: 50% !default;
 $calendar-pointer-events: none !default;
 $calendar-float-right-style: right !default;
 $calendar-icon-padding-top: 0 !default;

package/styles/calendar/_material3-definition.scss

@@ -71,7 +71,7 @@ $calendar-normal-year-decade-height: 56px !default;
 $calendar-normal-header-height: 40px !default;
 $calendar-normal-icon-size: 36px !default;
 $calendar-normal-today-button-height: 36px !default;
-$calendar-border-radius: 4px !default;
+$calendar-border-radius: 32px !default;
 $calendar-pointer-events: initial !default;
 $calendar-float-right-style: right !default;
 $calendar-icon-padding-top: 0 !default;

package/styles/calendar/_theme.scss

@@ -548,7 +548,7 @@
       color: $calendar-today-disabled-color;
     }
   }
-  .e-calendar .e-cell.e-focused-cell {
+  .e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
     box-shadow: $calendar-focused-cell-box-shadow;
     border-radius: $calendar-border-radius;
   }

package/styles/calendar/bootstrap-dark.css

@@ -603,7 +603,7 @@ ejs-calendar {
 .e-calendar .e-header .e-title:active,
 .e-bigger.e-small .e-calendar .e-header .e-title:active {
   box-shadow: none;
-  background: #f0f0f0;
+  background: transparent;
   text-decoration: none;
 }
 .e-calendar .e-header .e-prev:hover > span, .e-calendar .e-header .e-next:hover > span,
@@ -842,7 +842,7 @@ ejs-calendar {
     transform: scale(1);
   }
 }
-.e-calendar .e-cell.e-focused-cell {
+.e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
   box-shadow: 0 0 0 1px #fff;
   border-radius: 4px;
 }

package/styles/calendar/bootstrap.css

@@ -843,7 +843,7 @@ ejs-calendar {
     transform: scale(1);
   }
 }
-.e-calendar .e-cell.e-focused-cell {
+.e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
   box-shadow: 0 0 0 1px #000;
   border-radius: 4px;
 }

package/styles/calendar/bootstrap4.css

@@ -604,7 +604,7 @@ ejs-calendar {
 .e-calendar .e-header .e-title:active,
 .e-bigger.e-small .e-calendar .e-header .e-title:active {
   box-shadow: none;
-  background: #212529;
+  background: transparent;
   text-decoration: none;
 }
 .e-calendar .e-header .e-prev:hover > span, .e-calendar .e-header .e-next:hover > span,
@@ -843,7 +843,7 @@ ejs-calendar {
     transform: scale(1);
   }
 }
-.e-calendar .e-cell.e-focused-cell {
+.e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
   box-shadow: 0 0 0 1px #212529;
   border-radius: 4px;
 }

package/styles/calendar/bootstrap5-dark.css

@@ -913,7 +913,7 @@ ejs-calendar {
   color: rgba(255, 255, 255, 0.65);
 }
 
-.e-calendar .e-cell.e-focused-cell {
+.e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
   box-shadow: 0 0 0 1px #7b848d;
   border-radius: 4px;
 }

package/styles/calendar/bootstrap5.css

@@ -913,7 +913,7 @@ ejs-calendar {
   color: rgba(255, 255, 255, 0.65);
 }
 
-.e-calendar .e-cell.e-focused-cell {
+.e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
   box-shadow: 0 0 0 1px #6c757d;
   border-radius: 4px;
 }

package/styles/calendar/fabric-dark.css

@@ -848,7 +848,7 @@ ejs-calendar {
     transform: scale(1);
   }
 }
-.e-calendar .e-cell.e-focused-cell {
+.e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
   box-shadow: 0 0 0 1px #333232;
   border-radius: 0;
 }

package/styles/calendar/fabric.css

@@ -853,7 +853,7 @@ ejs-calendar {
     transform: scale(1);
   }
 }
-.e-calendar .e-cell.e-focused-cell {
+.e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
   box-shadow: 0 0 0 1px #000;
   border-radius: 0;
 }

package/styles/calendar/fluent-dark.css

@@ -1019,7 +1019,7 @@ ejs-calendar {
   color: #484644;
 }
 
-.e-calendar .e-cell.e-focused-cell {
+.e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
   box-shadow: 0 0 0 1px #a19f9d;
   border-radius: 2px;
 }

package/styles/calendar/fluent.css

@@ -1019,7 +1019,7 @@ ejs-calendar {
   color: #a19f9d;
 }
 
-.e-calendar .e-cell.e-focused-cell {
+.e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
   box-shadow: 0 0 0 1px #605e5c;
   border-radius: 2px;
 }

package/styles/calendar/highcontrast-light.css

@@ -843,7 +843,7 @@ ejs-calendar {
     transform: scale(1);
   }
 }
-.e-calendar .e-cell.e-focused-cell {
+.e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
   box-shadow: 0 0 0 1px #fff;
   border-radius: 0;
 }

package/styles/calendar/highcontrast.css

@@ -853,7 +853,7 @@ ejs-calendar {
     transform: scale(1);
   }
 }
-.e-calendar .e-cell.e-focused-cell {
+.e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
   box-shadow: 0 0 0 1px #fff;
   border-radius: 0;
 }

package/styles/calendar/material-dark.css

@@ -200,7 +200,7 @@ ejs-calendar {
 .e-calendar .e-header .e-prev, .e-calendar .e-header .e-next,
 .e-bigger.e-small .e-calendar .e-header .e-prev,
 .e-bigger.e-small .e-calendar .e-header .e-next {
-  border-radius: 4px;
+  border-radius: 50%;
   display: inline-block;
   font-size: 14px;
   vertical-align: middle;
@@ -702,14 +702,14 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content td.e-focused-date:focus span.e-day {
   background: rgba(255, 255, 255, 0.1);
   border: none;
-  border-radius: 4px;
+  border-radius: 50%;
   box-shadow: none;
 }
 .e-calendar .e-content td.e-focused-date:hover span.e-day,
 .e-bigger.e-small .e-calendar .e-content td.e-focused-date:hover span.e-day {
   background-color: rgba(255, 255, 255, 0.1);
   border: none;
-  border-radius: 4px;
+  border-radius: 50%;
   color: #fff;
 }
 .e-calendar .e-content td.e-today span.e-day, .e-calendar .e-content td.e-focused-date.e-today span.e-day,
@@ -717,7 +717,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content td.e-focused-date.e-today span.e-day {
   background: none;
   border: 1px solid #00b0ff;
-  border-radius: 4px;
+  border-radius: 50%;
   box-shadow: none;
   color: #00b0ff;
 }
@@ -733,7 +733,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content td.e-focused-date.e-today:focus span.e-day {
   background-color: rgba(255, 255, 255, 0.1);
   border: none;
-  border-radius: 4px;
+  border-radius: 50%;
   color: #00b0ff;
 }
 .e-calendar .e-content td.e-today:hover span.e-day, .e-calendar .e-content td.e-focused-date.e-today:hover span.e-day, .e-calendar .e-content td.e-focused-date.e-today:focus span.e-day,
@@ -792,7 +792,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content td:focus span.e-day {
   background-color: rgba(255, 255, 255, 0.1);
   border: none;
-  border-radius: 4px;
+  border-radius: 50%;
   color: #fff;
 }
 .e-calendar .e-content td:focus span.e-day,
@@ -800,7 +800,7 @@ ejs-calendar {
   background-color: rgba(255, 255, 255, 0.1);
   color: #fff;
   border: none;
-  border-radius: 4px;
+  border-radius: 50%;
 }
 .e-calendar .e-content td.e-disabled span.e-day, .e-calendar .e-content td.e-disabled:hover span.e-day, .e-calendar .e-content td.e-disabled:focus span.e-day,
 .e-bigger.e-small .e-calendar .e-content td.e-disabled span.e-day,
@@ -814,7 +814,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content td.e-selected span.e-day {
   background-color: #00b0ff;
   border: none;
-  border-radius: 4px;
+  border-radius: 50%;
   color: #000;
 }
 .e-calendar .e-content .e-footer,
@@ -852,7 +852,7 @@ ejs-calendar {
     transform: scale(1);
   }
 }
-.e-calendar .e-cell.e-focused-cell {
+.e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
   box-shadow: 0 0 0 1px #fff;
-  border-radius: 4px;
+  border-radius: 50%;
 }