@syncfusion/ej2-calendars 19.4.54 → 20.1.47

package/styles/calendar/_theme.scss

@@ -89,6 +89,12 @@
           background: $calendar-focused-date-bg-style;
           border: $calendar-focus-border-color;
           border-radius: $calendar-border-radius;
+          box-shadow: $calendar-focus-box-shadow;
+          @if ($skin-name == 'FluentUI') {
+            background: none;
+            border-radius: $calendar-focused-state-border-radius;
+            box-shadow: $calendar-focused-state-box-shadow;
+          }
         }#{if(&, '&', '*')} td.e-focused-date:hover span.e-day {
           background-color: $calendar-hover-color;
           border: $calendar-hover-border-color;
@@ -99,10 +105,15 @@
           background: $calendar-today-bg-style;
           border: $calendar-today-border-color;
           border-radius: $calendar-border-radius;
+          box-shadow: $calendar-today-box-shadow;
           color: $calendar-today-color;
+          @if ($skin-name == 'FluentUI') {
+            border-radius: $calendar-border-selected-radius;
+          }
         }#{if(&, '&', '*')} td.e-focused-date.e-today span.e-day {
           background: $calendar-focused-today-bg-style;
           border: $calendar-focused-today-border-style;
+          box-shadow: $calendar-focused-today-box-shadow;
           color: $calendar-today-focused-font-color;
 		}#{if(&, '&', '*')} td.e-today:focus span.e-day,
         #{if(&, '&', '*')} td.e-focused-date.e-today:focus span.e-day {
@@ -110,22 +121,40 @@
           border: $calendar-focus-border-color;
           border-radius: $calendar-border-radius;
           color: $calendar-today-focus-color;
+          @if ($skin-name == 'FluentUI') {
+            background-color: $calendar-focused-today-bg-style;
+            border-radius: $calendar-border-selected-radius;
+          }
         }#{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 {
           background-color: $calendar-hover-color;
           border: $calendar-today-border-color;
           color: $calendar-today-focus-color;
+          @if ($skin-name == 'FluentUI') {
+            background-color: $calendar-today-bg-style;
+            border-radius: $calendar-border-selected-radius;
+          }
         }#{if(&, '&', '*')} td.e-today.e-selected span.e-day {
           background-color: $calendar-active-bg-color;
           border: $calendar-active-bg-border-color;
-          box-shadow: $calendar-selected-box-shadow;
+          @if ($skin-name == 'material' or $skin-name == 'material-dark') {
+            box-shadow: $calendar-selected-box-shadow;
+          }
+          @else {
+            box-shadow: $calendar-active-bg-box-shadow;
+          }
           color: $calendar-active-today-font-color;
         }#{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 {
           background-color: $calendar-active-hover-bg-color;
           color: $calendar-active-today-hover-font-color;
+          @if ($skin-name == 'FluentUI') {
+            background-color: $calendar-focused-today-bg-style;
+            border-radius: $calendar-border-selected-radius;
+            color: $calendar-today-color;
+          }
         }#{if(&, '&', '*')} span {
           color: $calendar-text-color;
         }#{if(&, '&', '*')} .e-disabled span.e-day:hover {
@@ -142,6 +171,13 @@
         }#{if(&, '&', '*')} .e-other-month.e-today:hover span.e-day {
           background-color: $calendar-hover-color;
           color: $calendar-other-month-date;
+          @if ($skin-name == 'FluentUI') {
+            background: $calendar-today-bg-style;
+            border: $calendar-today-border-color;
+            border-radius: $calendar-border-selected-radius;
+            box-shadow: $calendar-today-box-shadow;
+            color: $calendar-today-color;
+          }
         }#{if(&, '&', '*')} thead {
           background: $calendar-week-header-bg-style;
           border-bottom: 0;
@@ -156,20 +192,104 @@
           border: $calendar-focus-border-color;
           border-radius: $calendar-border-radius;
           color: $calendar-text-color;
+          @if ($skin-name == 'FluentUI') {
+            border-radius: $calendar-border-selected-radius;
+          }
         }#{if(&, '&', '*')} td.e-disabled span.e-day,
         #{if(&, '&', '*')} td.e-disabled:hover span.e-day,
         #{if(&, '&', '*')} td.e-disabled:focus span.e-day {
           background: $calendar-none-style;
           border: $calendar-none-style;
           color: $calendar-disable-font-color;
+        }#{if(&, '&', '*')} td.e-today.e-disabled.e-overlay span.e-day,
+        #{if(&, '&', '*')} td.e-today.e-disabled.e-overlay:hover span.e-day,
+        #{if(&, '&', '*')} td.e-today.e-disabled.e-overlay:focus span.e-day {
+          @if ($skin-name == 'FluentUI') {
+            background-color: $calendar-focused-today-bg-style;
+            border-radius: $calendar-border-selected-radius;
+            color: $calendar-today-color;
+          }
         }#{if(&, '&', '*')} td.e-selected span.e-day {
           background-color: $calendar-active-bg-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') {
+            box-shadow: $calendar-selected-box-shadow;
+          }
         }#{if(&, '&', '*')} .e-footer {
           color: $calendar-active-bg-color;
+        }#{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') {
+            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') {
+            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') {
+            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') {
+            background-color: $calendar-active-bg-color;
+            border: $calendar-selected-border-color;
+            border-radius: $calendar-border-radius;
+            color: $calendar-active-font-color;
+          }
+        }#{if(&, '&', '*')} td.e-selected.e-focused-date span.e-day {
+          @if ($skin-name == 'FluentUI') {
+            background-color: $calendar-active-bg-color;
+            border: $calendar-selected-border-color;
+            border-radius: $calendar-focused-state-border-radius;
+            color: $calendar-active-font-color;
+          }
+        }#{if(&, '&', '*')}.e-month td.e-today span.e-day {
+          @if ($skin-name == 'FluentUI') {
+            color: $calendar-today-focused-font-color;
+          }
+        }#{if(&, '&', '*')}.e-year td.e-selected > span.e-day,
+        #{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') {
+            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') {
+            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') {
+            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') {
+            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') {
+            background: $calendar-hover-color;
+            border-radius: 0;
+            box-shadow: $calendar-focused-state-month-box-shadow;
         }
+    }
 }
 }#{if(&, '&', '*')}.e-device {
       #{if(&, '&', '*')} .e-prev:hover,
@@ -184,6 +304,28 @@
         color: $calendar-header-icon-color;
       }
 }
+
+    #{if(&, '&', '*')} .e-footer-container {
+      #{if(&, '&', '*')} .e-btn.e-today.e-flat.e-primary:not(:hover) {
+        @if $skin-name == 'tailwind' {
+          // sass-lint:disable no-vendor-prefixes
+          -webkit-tap-highlight-color: transparent;
+          background-color: $calendar-today-btn-primary-bgcolor;
+          border-color: $calendar-today-btn-primary-border-color;
+          color: $calendar-today-btn-primary-color;
+        }
+      }
+
+      #{if(&, '&', '*')} .e-btn.e-today.e-flat.e-primary.e-disabled {
+        @if $skin-name == 'tailwind' {
+          // sass-lint:disable no-vendor-prefixes
+          -webkit-tap-highlight-color: transparent;
+          background-color: $calendar-today-btn-primary-disabled-bgcolor;
+          border-color: $calendar-today-btn-primary-disabled-border-color;
+          color: $calendar-today-btn-primary-disabled-color;
+        }
+      }
+    }
 }
 
   .e-small#{&}.e-calendar,
@@ -195,6 +337,20 @@
     }
   }
 
+  #{&}.e-calendar.e-disabled {
+    #{if(&, '&', '*')} .e-footer-container {
+      #{if(&, '&', '*')} .e-btn.e-today.e-flat.e-primary {
+        @if $skin-name == 'tailwind' {
+          // sass-lint:disable no-vendor-prefixes
+          -webkit-tap-highlight-color: transparent;
+          background-color: $calendar-today-btn-primary-disabled-bgcolor;
+          border-color: $calendar-today-btn-primary-disabled-border-color;
+          color: $calendar-today-btn-primary-disabled-color;
+        }
+      }
+    }
+  }
+
   .e-zoomin {
     animation: animatezoom .3s;
   }
@@ -211,19 +367,20 @@
 
   .e-calendar .e-btn.e-today.e-flat.e-primary,
   .e-calendar .e-css.e-btn.e-today.e-flat.e-primary {
-    @if $skin-name == 'bootstrap5' {
-      background-color: $today-buuton-bg;
-      border-color: $today-buuton-bg-border-color;
-      color: $today-buuton-text-color;
+    @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
+      background-color: $today-button-bg;
+      border: 0;
+      border-color: $today-button-bg-border-color;
+      color: $today-button-text-color;
     }
   }
 
   .e-calendar .e-btn.e-today.e-flat.e-primary:hover,
   .e-calendar .e-css.e-btn.e-today.e-flat.e-primary:hover {
-    @if $skin-name == 'bootstrap5' {
-      background-color: $today-buuton-hover-bg;
-      border-color: $today-buuton-bg-border-hover-color;
-      color: $today-buuton-text-hover-color;
+    @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
+      background-color: $today-button-hover-bg;
+      border-color: $today-button-bg-border-hover-color;
+      color: $today-button-text-hover-color;
     }
   }
 
@@ -231,10 +388,27 @@
   .e-calendar .e-btn.e-today.e-flat.e-primary.e-active,
   .e-calendar .e-css.e-btn.e-today.e-flat.e-primary:active,
   .e-calendar .e-css.e-btn.e-today.e-flat.e-primary.e-active {
-    @if $skin-name == 'bootstrap5' {
-      background-color: $today-buuton-active-bg;
-      border-color: $today-buuton-bg-border-active-color;
-      color: $today-buuton-text-active-color;
+    @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
+      background-color: $today-button-active-bg;
+      border-color: $today-button-bg-border-active-color;
+      color: $today-button-text-active-color;
+    }
+    @if $skin-name == 'FluentUI' {
+      border: $calendar-none-style;
+      outline: $calendar-none-style;
+    }
+  }
+
+  .e-calendar .e-btn.e-today.e-flat.e-primary:focus,
+  .e-calendar .e-btn.e-today.e-flat.e-primary.e-focus,
+  .e-calendar .e-css.e-btn.e-today.e-flat.e-primary:focus,
+  .e-calendar .e-css.e-btn.e-today.e-flat.e-primary.e-focus {
+    @if $skin-name == 'FluentUI' {
+      background-color: $today-button-active-bg;
+      border: $calendar-none-style;
+      border-color: $today-button-bg-border-active-color;
+      color: $today-button-text-active-color;
+      outline: $calendar-none-style;
     }
   }
 
@@ -245,6 +419,8 @@
     @if $skin-name == 'bootstrap5' {
       background-color: $calendar-today-disabled-background-style;
       border-color: $calendar-today-disabled-border-style;
+    }
+    @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
       color: $calendar-today-disabled-color;
     }
   }

package/styles/calendar/bootstrap-dark.css

@@ -287,6 +287,7 @@ ejs-calendar {
 
 .e-calendar,
 .e-bigger.e-small .e-calendar {
+  border-spacing: 0;
   max-width: 262px;
   min-width: 256px;
   padding: 12px;
@@ -820,6 +821,7 @@ ejs-calendar {
   background: #484848;
   border: none;
   border-radius: 4px;
+  box-shadow: none;
 }
 
 .e-calendar .e-content td.e-focused-date:hover span.e-day,
@@ -835,15 +837,17 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content td.e-today span.e-day,
 .e-bigger.e-small .e-calendar .e-content td.e-focused-date.e-today span.e-day {
   background: none;
-  border: 1px solid #0070f0;
+  border: none;
   border-radius: 4px;
+  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: 1px solid #0070f0;
+  border: none;
+  box-shadow: inset 1px 0 #0070f0, inset 0 1px #0070f0, inset -1px 0 #0070f0, inset 0 -1px #0070f0;
   color: #f0f0f0;
 }
 
@@ -864,15 +868,15 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content td.e-focused-date.e-today:hover span.e-day,
 .e-bigger.e-small .e-calendar .e-content td.e-focused-date.e-today:focus span.e-day {
   background-color: #484848;
-  border: 1px solid #0070f0;
+  border: none;
   color: #fff;
 }
 
 .e-calendar .e-content td.e-today.e-selected span.e-day,
 .e-bigger.e-small .e-calendar .e-content td.e-today.e-selected span.e-day {
   background-color: #0070f0;
-  border: 1px solid #0070f0;
-  box-shadow: none;
+  border: none;
+  box-shadow: inset 1px 0 #0070f0, inset 0 1px #0070f0, inset -1px 0 #0070f0, inset 0 -1px #0070f0;
   color: #fff;
 }
 

package/styles/calendar/bootstrap.css

@@ -288,6 +288,7 @@ ejs-calendar {
 
 .e-calendar,
 .e-bigger.e-small .e-calendar {
+  border-spacing: 0;
   max-width: 262px;
   min-width: 256px;
   padding: 12px;
@@ -821,6 +822,7 @@ ejs-calendar {
   background: #e6e6e6;
   border: none;
   border-radius: 4px;
+  box-shadow: none;
 }
 
 .e-calendar .e-content td.e-focused-date:hover span.e-day,
@@ -836,15 +838,17 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content td.e-today span.e-day,
 .e-bigger.e-small .e-calendar .e-content td.e-focused-date.e-today span.e-day {
   background: none;
-  border: 1px solid #317ab9;
+  border: none;
   border-radius: 4px;
+  box-shadow: inset 1px 0 #317ab9, inset 0 1px #317ab9, inset -1px 0 #317ab9, inset 0 -1px #317ab9;
   color: #333;
 }
 
 .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: #e6e6e6;
-  border: 1px solid #317ab9;
+  border: none;
+  box-shadow: inset 1px 0 #317ab9, inset 0 1px #317ab9, inset -1px 0 #317ab9, inset 0 -1px #317ab9;
   color: #333;
 }
 
@@ -865,15 +869,15 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content td.e-focused-date.e-today:hover span.e-day,
 .e-bigger.e-small .e-calendar .e-content td.e-focused-date.e-today:focus span.e-day {
   background-color: #e6e6e6;
-  border: 1px solid #317ab9;
+  border: none;
   color: #333;
 }
 
 .e-calendar .e-content td.e-today.e-selected span.e-day,
 .e-bigger.e-small .e-calendar .e-content td.e-today.e-selected span.e-day {
   background-color: #317ab9;
-  border: 1px solid #317ab9;
-  box-shadow: none;
+  border: none;
+  box-shadow: inset 1px 0 #317ab9, inset 0 1px #317ab9, inset -1px 0 #317ab9, inset 0 -1px #317ab9;
   color: #fff;
 }
 

package/styles/calendar/bootstrap4.css

@@ -288,6 +288,7 @@ ejs-calendar {
 
 .e-calendar,
 .e-bigger.e-small .e-calendar {
+  border-spacing: 0;
   max-width: 262px;
   min-width: 256px;
   padding: 0;
@@ -821,6 +822,7 @@ ejs-calendar {
   background: #f2f4f6;
   border: none;
   border-radius: 4px;
+  box-shadow: none;
 }
 
 .e-calendar .e-content td.e-focused-date:hover span.e-day,
@@ -836,15 +838,17 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content td.e-today span.e-day,
 .e-bigger.e-small .e-calendar .e-content td.e-focused-date.e-today span.e-day {
   background: #fff;
-  border: 1px solid #007bff;
+  border: none;
   border-radius: 4px;
+  box-shadow: inset 1px 0 #007bff, inset 0 1px #007bff, inset -1px 0 #007bff, inset 0 -1px #007bff;
   color: #212529;
 }
 
 .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: #f2f4f6;
-  border: 1px solid #007bff;
+  border: none;
+  box-shadow: inset 1px 0 #007bff, inset 0 1px #007bff, inset -1px 0 #007bff, inset 0 -1px #007bff;
   color: #212529;
 }
 
@@ -865,15 +869,15 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content td.e-focused-date.e-today:hover span.e-day,
 .e-bigger.e-small .e-calendar .e-content td.e-focused-date.e-today:focus span.e-day {
   background-color: #f2f4f6;
-  border: 1px solid #007bff;
+  border: none;
   color: #212529;
 }
 
 .e-calendar .e-content td.e-today.e-selected span.e-day,
 .e-bigger.e-small .e-calendar .e-content td.e-today.e-selected span.e-day {
   background-color: #007bff;
-  border: 1px solid #007bff;
-  box-shadow: none;
+  border: none;
+  box-shadow: inset 1px 0 #007bff, inset 0 1px #007bff, inset -1px 0 #007bff, inset 0 -1px #007bff;
   color: #fff;
 }
 

package/styles/calendar/bootstrap5-dark.css

@@ -245,7 +245,7 @@ ejs-calendar {
 
 .e-calendar .e-header .e-title,
 .e-bigger.e-small .e-calendar .e-header .e-title {
-  margin-left: 8px;
+  margin-left: 2px;
 }
 
 .e-calendar .e-header .e-prev:hover,
@@ -288,6 +288,7 @@ ejs-calendar {
 
 .e-calendar,
 .e-bigger.e-small .e-calendar {
+  border-spacing: 0;
   max-width: 242px;
   min-width: 240px;
   padding: 0;
@@ -318,7 +319,7 @@ ejs-calendar {
 .e-calendar.e-rtl .e-header .e-title,
 .e-bigger.e-small .e-calendar.e-rtl .e-header .e-title {
   text-align: right;
-  text-indent: 4px;
+  text-indent: 12px;
 }
 
 .e-calendar .e-header,
@@ -363,7 +364,7 @@ ejs-calendar {
 
 .e-calendar .e-content.e-month td.e-today span.e-day,
 .e-bigger.e-small .e-calendar .e-content.e-month td.e-today span.e-day {
-  line-height: 26px;
+  line-height: 32px;
 }
 
 .e-calendar .e-content.e-year table,
@@ -427,6 +428,11 @@ ejs-calendar {
   width: 100%;
 }
 
+.e-calendar.e-rtl .e-header .e-title,
+.e-bigger.e-small .e-calendar.e-rtl .e-header .e-title {
+  text-indent: 12px;
+}
+
 .e-small.e-bigger.e-calendar .e-content.e-year span.e-day,
 .e-small.e-bigger .e-calendar .e-content.e-year span.e-day {
   font-size: 14px;
@@ -437,6 +443,17 @@ ejs-calendar {
   padding: 0 12px 12px 12px;
 }
 
+.e-small.e-bigger.e-calendar .e-content span.e-day,
+.e-small.e-bigger .e-calendar .e-content span.e-day {
+  height: 34px;
+  width: 34px;
+}
+
+.e-small.e-bigger.e-calendar .e-header .e-title,
+.e-small.e-bigger .e-calendar .e-header .e-title {
+  margin-left: 5px;
+}
+
 .e-bigger.e-calendar,
 *.e-bigger .e-calendar {
   max-width: 292px;
@@ -539,7 +556,7 @@ ejs-calendar {
 
 .e-bigger.e-calendar .e-content.e-month td.e-today span.e-day,
 *.e-bigger .e-calendar .e-content.e-month td.e-today span.e-day {
-  line-height: 32px;
+  line-height: 38px;
 }
 
 .e-bigger.e-calendar .e-content.e-month td,
@@ -579,6 +596,16 @@ ejs-calendar {
   padding: 16px;
 }
 
+.e-bigger.e-calendar .e-header .e-title,
+*.e-bigger .e-calendar .e-header .e-title {
+  margin-left: 5px;
+}
+
+.e-bigger.e-calendar.e-rtl .e-header .e-title,
+*.e-bigger .e-calendar.e-rtl .e-header .e-title {
+  text-indent: 15px;
+}
+
 .e-small.e-calendar,
 .e-small .e-calendar {
   max-width: 200px;
@@ -602,7 +629,7 @@ ejs-calendar {
 
 .e-small.e-calendar .e-content.e-month td.e-today span.e-day,
 .e-small .e-calendar .e-content.e-month td.e-today span.e-day {
-  line-height: 20px;
+  line-height: 26px;
 }
 
 .e-small.e-calendar .e-content.e-month td,
@@ -627,6 +654,11 @@ ejs-calendar {
   line-height: 22px;
 }
 
+.e-small.e-calendar.e-rtl .e-header .e-title,
+.e-small .e-calendar.e-rtl .e-header .e-title {
+  text-indent: 12px;
+}
+
 .e-small.e-calendar .e-header .e-icon-container .e-prev,
 .e-small.e-calendar .e-header .e-icon-container .e-next,
 .e-small .e-calendar .e-header .e-icon-container .e-prev,
@@ -641,6 +673,18 @@ ejs-calendar {
   height: 24px;
 }
 
+.e-small.e-calendar .e-header .e-title,
+.e-small .e-calendar .e-header .e-title {
+  margin-left: 0;
+}
+
+.e-small.e-calendar .e-content.e-year td > span.e-day,
+.e-small.e-calendar .e-content.e-decade td > span.e-day,
+.e-small .e-calendar .e-content.e-year td > span.e-day,
+.e-small .e-calendar .e-content.e-decade td > span.e-day {
+  width: 46px;
+}
+
 .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,
@@ -821,11 +865,12 @@ ejs-calendar {
   background: #31373d;
   border: none;
   border-radius: 4px;
+  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: #31373d;
+  background-color: #444c54;
   border: none;
   border-radius: 4px;
   color: #fff;
@@ -836,15 +881,17 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content td.e-today span.e-day,
 .e-bigger.e-small .e-calendar .e-content td.e-focused-date.e-today span.e-day {
   background: none;
-  border: 2px solid #0d6efd;
+  border: none;
   border-radius: 4px;
+  box-shadow: inset 2px 0 #0d6efd, inset 0 2px #0d6efd, inset -2px 0 #0d6efd, inset 0 -2px #0d6efd;
   color: #0d6efd;
 }
 
 .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: #31373d;
-  border: 1px solid #0d6efd;
+  border: none;
+  box-shadow: inset 1px 0 #0d6efd, inset 0 1px #0d6efd, inset -1px 0 #0d6efd, inset 0 -1px #0d6efd;
   color: #e9ecef;
 }
 
@@ -864,16 +911,16 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content td.e-today:hover span.e-day,
 .e-bigger.e-small .e-calendar .e-content td.e-focused-date.e-today:hover span.e-day,
 .e-bigger.e-small .e-calendar .e-content td.e-focused-date.e-today:focus span.e-day {
-  background-color: #31373d;
-  border: 2px solid #0d6efd;
+  background-color: #444c54;
+  border: none;
   color: #e9ecef;
 }
 
 .e-calendar .e-content td.e-today.e-selected span.e-day,
 .e-bigger.e-small .e-calendar .e-content td.e-today.e-selected span.e-day {
   background-color: #0d6efd;
-  border: 1px solid #0d6efd;
-  box-shadow: none;
+  border: none;
+  box-shadow: inset 1px 0 #0d6efd, inset 0 1px #0d6efd, inset -1px 0 #0d6efd, inset 0 -1px #0d6efd;
   color: #fff;
 }
 
@@ -913,7 +960,7 @@ ejs-calendar {
 
 .e-calendar .e-content .e-other-month.e-today:hover span.e-day,
 .e-bigger.e-small .e-calendar .e-content .e-other-month.e-today:hover span.e-day {
-  background-color: #31373d;
+  background-color: #444c54;
   color: #7b848d;
 }
 
@@ -927,7 +974,7 @@ ejs-calendar {
 .e-calendar .e-content td:focus span.e-day,
 .e-bigger.e-small .e-calendar .e-content td:hover span.e-day,
 .e-bigger.e-small .e-calendar .e-content td:focus span.e-day {
-  background-color: #31373d;
+  background-color: #444c54;
   border: none;
   border-radius: 4px;
   color: #fff;
@@ -1008,6 +1055,7 @@ ejs-calendar {
 .e-calendar .e-btn.e-today.e-flat.e-primary,
 .e-calendar .e-css.e-btn.e-today.e-flat.e-primary {
   background-color: #0d6efd;
+  border: 0;
   border-color: #0d6efd;
   color: #fff;
 }