@syncfusion/ej2-calendars 25.2.7 → 26.1.35

package/styles/calendar/_material3-definition.scss

@@ -1,4 +1,3 @@
-/*! calendar material3 theme variables */
 $calendar-title-hover-color: rgba($content-text-color) !default;
 $calendar-icon-hover-color: rgba($icon-color) !default;
 $calendar-default-border-color: none !default;
@@ -163,8 +162,6 @@ $calendar-week-number-font-weight: 500 !default;
 $calendar-bigger-year-decade-width: 69px !default;
 $calendar-normar-year-decade-width: 56px !default;
 $calendar-header-title-padding: 0 5px !default;
-
-// Focus related styles
 $calendar-title-focus-box-shadow: 0 0 0 1px rgba($primary) !default;
 $calendar-title-focus-background: none !default;
 $calendar-title-active-background: rgba($content-text-color, .12) !default;
@@ -172,8 +169,6 @@ $calendar-icon-focus-box-shadow: 0 0 0 1px rgba($primary) !default;
 $calendar-title-border-radius: 4px !default;
 $calendar-title-hover-bg-color: rgba($content-text-color, .08) !default;
 $calendar-focused-cell-box-shadow: 0 0 0 1px rgba($primary) !default;
-
-//today
 $calendar-footer-container-padding: 8px 12px 8px 12px !default;
 $calendar-footer-border: none !default;
 $calendar-footer-background: $calendar-bg-color !default;
@@ -183,11 +178,7 @@ $calendar-today-disabled-background-style: $transparent !default;
 $calendar-today-disabled-border-style: $transparent !default;
 $calendar-today-disabled-box-shadow: none !default;
 $calendar-today-disabled-color: $primary-text-disabled !default;
-
-//table related styles
 $calendar-rtl-text-indent: 4px !default;
-
-// small size
 $calendar-small-icon-size: 28px !default;
 $calendar-small-icon-font-size-style: 14px !default;
 $calendar-small-title-font-size: 12px !default;

package/styles/calendar/_theme.scss

@@ -1,11 +1,11 @@
 @include export-module('calendar-theme') {
   #{&}.e-calendar,
   .e-bigger.e-small #{&}.e-calendar {
-    @if $skin-name == 'Material3' {
+    @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
       background: $calendar-bg-color;
       border-radius: 8px;
     }
-    @if $skin-name != 'Material3' {
+    @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
       background-color: $calendar-bg-color;
     }
     border: $calendar-border-style;
@@ -34,10 +34,15 @@
           background: $calendar-title-hover-bg-color;
           cursor: pointer;
           text-decoration: $calendar-title-decoration-style;
+          @if $skin-name == 'fluent2' {
+            color: $calendar-title-hover-color;
+          }
         }
-        #{if(&, '&', '*')} .e-title:focus{
+        #{if(&, '&', '*')} .e-title:focus {
           box-shadow: $calendar-title-focus-box-shadow;
-          background: $calendar-title-focus-background;
+          @if $skin-name != 'fluent2' {
+            background: $calendar-title-focus-background;
+          }
           @if $skin-name == 'highcontrast' {
             text-decoration: none;
           }
@@ -45,10 +50,16 @@
             text-decoration: $calendar-title-decoration-style;
           }
         }
-        #{if(&, '&', '*')} .e-title:active{
-          box-shadow: $calendar-box-shadow;
-          background: $calendar-title-active-background;
-          text-decoration: $calendar-title-decoration-style;
+        #{if(&, '&', '*')} .e-title:active {
+          @if $skin-name == 'fluent2' {
+            background: $calendar-title-active-background;
+            color: $calendar-title-active-color;
+          }
+          @else {
+            box-shadow: $calendar-box-shadow;
+            background: $calendar-title-active-background;
+            text-decoration: $calendar-title-decoration-style;
+          }
         }
         #{if(&, '&', '*')} .e-prev:hover > span,
         #{if(&, '&', '*')} .e-next:hover > span {
@@ -60,6 +71,9 @@
         #{if(&, '&', '*')} .e-prev:hover,
         #{if(&, '&', '*')} .e-next:hover {
           background: $calendar-icon-hover-bg-color;
+          @if $skin-name == 'fluent2' {
+            color: $calendar-active-font-color;
+          }
         }
         #{if(&, '&', '*')} .e-prev:focus,
         #{if(&, '&', '*')} .e-next:focus {
@@ -76,8 +90,10 @@
           color: $calendar-active-icon-color;
         }
         #{if(&, '&', '*')}.e-decade .e-title {
-          color: $calendar-light-font;
-          cursor: default;
+          @if $skin-name != 'fluent2' {
+            color: $calendar-light-font;
+            cursor: default;
+          }
         }
         #{if(&, '&', '*')} .e-next.e-disabled span,
         #{if(&, '&', '*')} .e-prev.e-disabled span {
@@ -89,6 +105,14 @@
           opacity: $calendar-disable-opacity;
         }
       }
+      #{if(&, '&', '*')} .e-content.e-year,
+      #{if(&, '&', '*')} .e-content.e-decade, {
+        #{if(&, '&', '*')} td.e-selected span.e-day {
+          @if $skin-name == 'fluent2' {
+            font-weight: 600;
+          }
+        }
+      }
       #{if(&, '&', '*')} .e-content {
         #{if(&, '&', '*')}.e-decade tr:first-child .e-cell:first-child span.e-day,
         #{if(&, '&', '*')}.e-decade tr:last-child .e-cell:last-child span.e-day {
@@ -104,19 +128,19 @@
         }
         #{if(&, '&', '*')}.e-year td:hover span.e-day,
         #{if(&, '&', '*')}.e-decade td:hover span.e-day {
-          @if $skin-name != 'Material3' {
+          @if ($skin-name != 'Material3' and $skin-name == 'fluent2') {
             background-color: $calendar-hover-color;
           }
-          @if $skin-name == 'Material3' {
+          @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
             background: $calendar-hover-color;
           }
         }
         #{if(&, '&', '*')}.e-year td.e-selected:hover span.e-day,
         #{if(&, '&', '*')}.e-decade td.e-selected:hover span.e-day {
-          @if $skin-name != 'Material3' {
+          @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
             background-color: $calendar-yeardecade-selected-hover-bg;
           }
-          @if $skin-name == 'Material3' {
+          @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
             background: $calendar-yeardecade-selected-hover-bg;
           }
         }
@@ -142,12 +166,15 @@
             border-radius: $calendar-focused-state-border-radius;
             box-shadow: $calendar-focused-state-box-shadow;
           }
+          @if $skin-name == 'fluent2' {
+            font-weight: 600;
+          }
         }
         #{if(&, '&', '*')} td.e-focused-date:hover span.e-day {
-          @if $skin-name != 'Material3' {
+          @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
             background-color: $calendar-hover-color;
           }
-          @if $skin-name == 'Material3' {
+          @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
             background: $calendar-hover-color;
           }
           border: $calendar-hover-border-color;
@@ -158,7 +185,12 @@
         #{if(&, '&', '*')} td.e-focused-date.e-today span.e-day {
           background: $calendar-today-bg-style;
           border: $calendar-today-border-color;
-          border-radius: $calendar-border-radius;
+          @if $skin-name != 'fluent2' {
+            border-radius: $calendar-border-radius;
+          }
+          @else {
+            border-radius: $calendar-today-border-radius;
+          }
           box-shadow: $calendar-today-box-shadow;
           color: $calendar-today-color;
           @if ($skin-name == 'FluentUI') {
@@ -173,14 +205,22 @@
         }
         #{if(&, '&', '*')} td.e-today:focus span.e-day,
         #{if(&, '&', '*')} td.e-focused-date.e-today:focus span.e-day {
-          @if $skin-name != 'Material3' {
+          @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
             background-color: $calendar-focus-bg-color;
           }
           @if $skin-name == 'Material3' {
             background: $calendar-focus-bg-color;
           }
+          @if $skin-name == 'fluent2' {
+            background: $calendar-today-focus-bg-color;
+          }
           border: $calendar-focus-border-color;
-          border-radius: $calendar-border-radius;
+          @if $skin-name == 'fluent2' {
+            border-radius: $calendar-today-border-radius;
+          }
+          @else {
+            border-radius: $calendar-border-radius;
+          }
           color: $calendar-today-focus-color;
           @if ($skin-name == 'FluentUI') {
             background-color: $calendar-focused-today-bg-style;
@@ -190,12 +230,16 @@
         #{if(&, '&', '*')} td.e-today:hover span.e-day,
         #{if(&, '&', '*')} td.e-focused-date.e-today:hover span.e-day,
         #{if(&, '&', '*')} td.e-focused-date.e-today:focus span.e-day {
-          @if $skin-name != 'Material3' {
+          @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
             background-color: $calendar-hover-color;
           }
           @if $skin-name == 'Material3' {
             background: $calendar-hover-color;
           }
+          @if $skin-name == 'fluent2' {
+            background: $calendar-today-hover-color;
+            border-radius: $calendar-border-selected-radius;
+          }
           border: $calendar-today-border-color;
           color: $calendar-today-focus-color;
           @if ($skin-name == 'FluentUI') {
@@ -204,14 +248,18 @@
           }
         }
         #{if(&, '&', '*')} td.e-today.e-selected span.e-day {
-          @if $skin-name != 'Material3' {
+          @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
             background-color: $calendar-active-bg-color;
           }
           @if $skin-name == 'Material3' {
             background: $calendar-active-bg-color;
           }
+          @if $skin-name == 'fluent2' {
+            background: $calendar-focused-today-bg-style;
+            border-radius: $calendar-today-border-radius;
+          }
           border: $calendar-active-bg-border-color;
-          @if ($skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'Material3') {
+          @if ($skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
             box-shadow: $calendar-selected-box-shadow;
           }
           @else {
@@ -219,13 +267,19 @@
           }
           color: $calendar-active-today-font-color;
         }
+        #{if(&, '&', '*')} td.e-today.e-selected:hover span.e-day {
+          @if $skin-name == 'fluent2' {
+            border-radius: $calendar-today-border-radius;
+          }
+        }
+
         #{if(&, '&', '*')} td.e-today.e-selected:hover span.e-day,
         #{if(&, '&', '*')} td.e-selected:hover span.e-day,
         #{if(&, '&', '*')} td.e-selected.e-focused-date span.e-day {
-          @if $skin-name != 'Material3' {
+          @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
             background-color: $calendar-active-hover-bg-color;
           }
-          @if $skin-name == 'Material3' {
+          @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
             background: $calendar-active-hover-bg-color;
           }
           color: $calendar-active-today-hover-font-color;
@@ -253,10 +307,10 @@
           color: $calendar-other-month-date;
         }
         #{if(&, '&', '*')} .e-other-month.e-today:hover span.e-day {
-          @if $skin-name != 'Material3' {
+          @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
             background-color: $calendar-hover-color;
           }
-          @if $skin-name == 'Material3' {
+          @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
             background: $calendar-hover-color;
           }
           color: $calendar-other-month-date;
@@ -274,10 +328,10 @@
         }
         #{if(&, '&', '*')} td:hover span.e-day,
         #{if(&, '&', '*')} td:focus span.e-day {
-          @if $skin-name != 'Material3' {
+          @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
             background-color: $calendar-hover-color;
           }
-          @if $skin-name == 'Material3' {
+          @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
             background: $calendar-hover-color;
           }
           border: $calendar-hover-border-color;
@@ -285,11 +339,11 @@
           color: $calendar-hover-text;
         }
         #{if(&, '&', '*')} td:focus span.e-day {
-          @if $skin-name != 'Material3' {
+          @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
             background-color: $calendar-focus-bg-color;
             color: $calendar-text-color;
           }
-          @if $skin-name == 'Material3' {
+          @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
             background: $calendar-focus-bg-color;
             color: $calendar-text-color-focus;
           }
@@ -316,18 +370,24 @@
           }
         }
         #{if(&, '&', '*')} td.e-selected span.e-day {
-          @if $skin-name != 'Material3' {
+          @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
             background-color: $calendar-active-bg-color;
           }
           @if $skin-name == 'Material3' {
             background: $calendar-active-bg-color;
           }
+          @if $skin-name == 'fluent2' {
+            background: $calendar-active-bg-color;
+            color: $calendar-active-font-colour;
+          }
+          @else {
+            color: $calendar-active-font-color;
+          }
           border: $calendar-selected-border-color;
           border-radius: $calendar-border-radius;
-          color: $calendar-active-font-color;
         }
         #{if(&, '&', '*')} td.e-selected:not(.e-focused-date) span.e-day {
-          @if ($skin-name == 'FluentUI') {
+          @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
             box-shadow: $calendar-selected-box-shadow;
           }
         }
@@ -337,28 +397,28 @@
         #{if(&, '&', '*')} td.e-today.e-selected.e-focused-date span.e-day,
         #{if(&, '&', '*')} td.e-today.e-selected:hover span.e-day,
         #{if(&, '&', '*')} td.e-today.e-selected span.e-day {
-          @if ($skin-name == 'FluentUI') {
+          @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
             background-color: $calendar-focused-today-bg-style;
             border-radius: $calendar-border-selected-radius;
             color: $calendar-today-color;
           }
         }
         #{if(&, '&', '*')} td.e-today.e-selected.e-focused-date {
-          @if ($skin-name == 'FluentUI') {
+          @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
             background-color: $calendar-active-bg-color;
             border-radius: $calendar-focused-state-border-radius;
             box-shadow: $calendar-focused-state-box-shadow;
           }
         }
         #{if(&, '&', '*')} td.e-today.e-selected {
-          @if ($skin-name == 'FluentUI') {
+          @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
             background-color: $calendar-active-bg-color;
             border-radius: $calendar-wrapper-border-radius;
             box-shadow: $calendar-selected-box-shadow;
           }
         }
         #{if(&, '&', '*')} td.e-selected:hover span.e-day {
-          @if ($skin-name == 'FluentUI') {
+          @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
             background-color: $calendar-active-bg-color;
             border: $calendar-selected-border-color;
             border-radius: $calendar-border-radius;
@@ -366,7 +426,7 @@
           }
         }
         #{if(&, '&', '*')} td.e-selected.e-focused-date span.e-day {
-          @if ($skin-name == 'FluentUI') {
+          @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
             background-color: $calendar-active-bg-color;
             border: $calendar-selected-border-color;
             border-radius: $calendar-focused-state-border-radius;
@@ -374,7 +434,7 @@
           }
         }
         #{if(&, '&', '*')}.e-month td.e-today span.e-day {
-          @if ($skin-name == 'FluentUI') {
+          @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
             color: $calendar-today-focused-font-color;
           }
         }
@@ -382,33 +442,33 @@
         #{if(&, '&', '*')}.e-decade td.e-selected > span.e-day,
         #{if(&, '&', '*')}.e-year td.e-selected:hover > span.e-day,
         #{if(&, '&', '*')}.e-decade td.e-selected:hover > span.e-day {
-          @if ($skin-name == 'FluentUI') {
+          @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
             background-color: $calendar-selected-month-bg-color;
             color: $calendar-week-header-font-color;
           }
         }
         #{if(&, '&', '*')}.e-year td.e-focused-date > span.e-day,
         #{if(&, '&', '*')}.e-decade td.e-focused-date > span.e-day {
-          @if ($skin-name == 'FluentUI') {
+          @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
             background: $calendar-none-style;
             border-radius: 0;
             box-shadow: $calendar-focused-state-month-box-shadow;
           }
         }
         #{if(&, '&', '*')} td.e-focused-date.e-today {
-          @if ($skin-name == 'FluentUI') {
+          @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
             border-radius: $calendar-focused-state-border-radius;
             box-shadow: $calendar-focused-state-box-shadow;
           }
         }
         #{if(&, '&', '*')} td.e-focused-date:hover span.e-day {
-          @if ($skin-name == 'FluentUI') {
+          @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
             border-radius: $calendar-focused-state-border-radius;
           }
         }
         #{if(&, '&', '*')}.e-year td.e-focused-date:hover > span.e-day,
         #{if(&, '&', '*')}.e-decade td.e-focused-date:hover > span.e-day {
-          @if ($skin-name == 'FluentUI') {
+          @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
             background: $calendar-hover-color;
             border-radius: 0;
             box-shadow: $calendar-focused-state-month-box-shadow;
@@ -434,7 +494,6 @@
     #{if(&, '&', '*')} .e-footer-container {
       #{if(&, '&', '*')} .e-btn.e-today.e-flat.e-primary:not(:hover) {
         @if $skin-name == 'tailwind' {
-          /* stylelint-disable property-no-vendor-prefix */
           -webkit-tap-highlight-color: transparent;
           background-color: $calendar-today-btn-primary-bgcolor;
           border-color: $calendar-today-btn-primary-border-color;

package/styles/calendar/bootstrap-dark.css

@@ -42,6 +42,7 @@ ejs-calendar {
   display: block;
   overflow: auto;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
@@ -116,7 +117,8 @@ ejs-calendar {
 .e-calendar .e-content th, .e-calendar .e-content td,
 .e-bigger.e-small .e-calendar .e-content th,
 .e-bigger.e-small .e-calendar .e-content td {
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
 }
 .e-calendar .e-content td.e-disabled,
 .e-bigger.e-small .e-calendar .e-content td.e-disabled {
@@ -351,10 +353,13 @@ ejs-calendar {
   border-top: none;
   cursor: default;
   display: inline-block;
-  -ms-flex-direction: row;
-      flex-direction: row;
-  -ms-flex-pack: end;
-      justify-content: flex-end;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
   padding: 10px 0 0 0;
   text-align: center;
   width: 100%;
@@ -538,7 +543,8 @@ ejs-calendar {
 .e-calendar .e-btn.e-today.e-flat.e-disabled, .e-calendar .e-btn.e-today.e-flat.e-disabled:hover, .e-calendar .e-btn.e-today.e-flat.e-disabled:active, .e-calendar .e-btn.e-today.e-flat.e-disabled:focus, .e-calendar .e-btn.e-today.e-flat.e-disabled:hover:active {
   background: #6e6e6e;
   border-color: rgba(172, 172, 172, 0.65);
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: rgba(255, 255, 255, 0.65);
   cursor: default;
   opacity: 1;
@@ -563,7 +569,8 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar {
   background-color: #1a1a1a;
   border: 1px solid #414141;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-calendar .e-date-icon-prev, .e-calendar .e-date-icon-next,
 .e-bigger.e-small .e-calendar .e-date-icon-prev,
@@ -596,13 +603,15 @@ ejs-calendar {
 }
 .e-calendar .e-header .e-title:focus,
 .e-bigger.e-small .e-calendar .e-header .e-title:focus {
-  box-shadow: 0 0 0 1px #fff;
+  -webkit-box-shadow: 0 0 0 1px #fff;
+          box-shadow: 0 0 0 1px #fff;
   background: none;
   text-decoration: none;
 }
 .e-calendar .e-header .e-title:active,
 .e-bigger.e-small .e-calendar .e-header .e-title:active {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   background: transparent;
   text-decoration: none;
 }
@@ -621,7 +630,8 @@ ejs-calendar {
 .e-calendar .e-header .e-prev:focus, .e-calendar .e-header .e-next:focus,
 .e-bigger.e-small .e-calendar .e-header .e-prev:focus,
 .e-bigger.e-small .e-calendar .e-header .e-next:focus {
-  box-shadow: 0 0 0 1px #fff;
+  -webkit-box-shadow: 0 0 0 1px #fff;
+          box-shadow: 0 0 0 1px #fff;
 }
 .e-calendar .e-header .e-prev:active, .e-calendar .e-header .e-next:active,
 .e-bigger.e-small .e-calendar .e-header .e-prev:active,
@@ -667,11 +677,6 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content.e-decade tr:last-child .e-cell.e-disabled:last-child span.e-day {
   color: #585858;
 }
-.e-calendar .e-content.e-year td:hover span.e-day, .e-calendar .e-content.e-decade td:hover span.e-day,
-.e-bigger.e-small .e-calendar .e-content.e-year td:hover span.e-day,
-.e-bigger.e-small .e-calendar .e-content.e-decade td:hover span.e-day {
-  background-color: #484848;
-}
 .e-calendar .e-content.e-year td.e-selected:hover span.e-day, .e-calendar .e-content.e-decade td.e-selected:hover span.e-day,
 .e-bigger.e-small .e-calendar .e-content.e-year td.e-selected:hover span.e-day,
 .e-bigger.e-small .e-calendar .e-content.e-decade td.e-selected:hover span.e-day {
@@ -693,7 +698,8 @@ ejs-calendar {
   background: #484848;
   border: none;
   border-radius: 4px;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          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 {
@@ -708,14 +714,16 @@ ejs-calendar {
   background: none;
   border: none;
   border-radius: 4px;
-  box-shadow: inset 1px 0 #0070f0, inset 0 1px #0070f0, inset -1px 0 #0070f0, inset 0 -1px #0070f0;
+  -webkit-box-shadow: inset 1px 0 #0070f0, inset 0 1px #0070f0, inset -1px 0 #0070f0, inset 0 -1px #0070f0;
+          box-shadow: inset 1px 0 #0070f0, inset 0 1px #0070f0, inset -1px 0 #0070f0, inset 0 -1px #0070f0;
   color: #fff;
 }
 .e-calendar .e-content td.e-focused-date.e-today span.e-day,
 .e-bigger.e-small .e-calendar .e-content td.e-focused-date.e-today span.e-day {
   background: #313131;
   border: none;
-  box-shadow: inset 1px 0 #0070f0, inset 0 1px #0070f0, inset -1px 0 #0070f0, inset 0 -1px #0070f0;
+  -webkit-box-shadow: inset 1px 0 #0070f0, inset 0 1px #0070f0, inset -1px 0 #0070f0, inset 0 -1px #0070f0;
+          box-shadow: inset 1px 0 #0070f0, inset 0 1px #0070f0, inset -1px 0 #0070f0, inset 0 -1px #0070f0;
   color: #f0f0f0;
 }
 .e-calendar .e-content td.e-today:focus span.e-day, .e-calendar .e-content td.e-focused-date.e-today:focus span.e-day,
@@ -738,7 +746,8 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content td.e-today.e-selected span.e-day {
   background-color: #0070f0;
   border: none;
-  box-shadow: inset 1px 0 #0070f0, inset 0 1px #0070f0, inset -1px 0 #0070f0, inset 0 -1px #0070f0;
+  -webkit-box-shadow: inset 1px 0 #0070f0, inset 0 1px #0070f0, inset -1px 0 #0070f0, inset 0 -1px #0070f0;
+          box-shadow: inset 1px 0 #0070f0, inset 0 1px #0070f0, inset -1px 0 #0070f0, inset 0 -1px #0070f0;
   color: #fff;
 }
 .e-calendar .e-content td.e-today.e-selected:hover span.e-day, .e-calendar .e-content td.e-selected:hover span.e-day, .e-calendar .e-content td.e-selected.e-focused-date span.e-day,
@@ -803,9 +812,9 @@ ejs-calendar {
 .e-calendar .e-content td.e-selected span.e-day,
 .e-bigger.e-small .e-calendar .e-content td.e-selected span.e-day {
   background-color: #0070f0;
+  color: #fff;
   border: none;
   border-radius: 4px;
-  color: #fff;
 }
 .e-calendar .e-content .e-footer,
 .e-bigger.e-small .e-calendar .e-content .e-footer {
@@ -831,18 +840,33 @@ ejs-calendar {
 }
 
 .e-calendar .e-zoomin {
-  animation: animatezoom 0.3s;
+  -webkit-animation: animatezoom 0.3s;
+          animation: animatezoom 0.3s;
+}
+
+@-webkit-keyframes animatezoom {
+  from {
+    -webkit-transform: scale(0);
+            transform: scale(0);
+  }
+  to {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
 }
 
 @keyframes animatezoom {
   from {
-    transform: scale(0);
+    -webkit-transform: scale(0);
+            transform: scale(0);
   }
   to {
-    transform: scale(1);
+    -webkit-transform: scale(1);
+            transform: scale(1);
   }
 }
 .e-calendar .e-calendar-content-table .e-cell.e-focused-cell span.e-day {
-  box-shadow: 0 0 0 1px #fff;
+  -webkit-box-shadow: 0 0 0 1px #fff;
+          box-shadow: 0 0 0 1px #fff;
   border-radius: 4px;
 }