@syncfusion/ej2-calendars 20.4.52 → 21.1.35

package/styles/calendar/_tailwind-definition.scss

@@ -75,8 +75,8 @@ $calendar-yeardecade-padding: 0 8px 8px 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 16px 16px !default;
-$calendar-bigger-yeardecade-font-weight: normal !default;
-$calendar-yeardecade-font-weight: normal !default;
+$calendar-bigger-yeardecade-font-weight: $font-weight-normal !default;
+$calendar-yeardecade-font-weight: $font-weight-normal !default;
 $calendar-bigger-year-decade-height: 60px !default;
 $calendar-bigger-year-decade-width: 60px !default;
 $calendar-yeardecade-header-padding: 8px 12px 6px 16px !default;
@@ -94,7 +94,7 @@ $calendar-next-prev-icon-size: 14px !default;
 $calendar-icon-line-height: 16px !default;
 $calendar-bigger-icon-size: 28px !default;
 $calendar-normal-icon-size: 24px !default;
-$calendar-spanicon-font-weight-style: normal !default;
+$calendar-spanicon-font-weight-style: $font-weight-normal !default;
 
 $calendar-normal-down-icon-margin: 0 8px !default;
 $calendar-bigger-down-icon-margin: 0 12px !default;
@@ -102,8 +102,8 @@ $calendar-bigger-small-down-icon-margin: 0 10px !default;
 $calendar-small-down-icon-margin: 0 8px !default;
 
 //pending
-$calendar-icon-font-size-style: 20px !default;
-$calendar-bigger-icon-font-size: 24px !default;
+$calendar-icon-font-size-style: $font-icon-20 !default;
+$calendar-bigger-icon-font-size: $font-icon-24 !default;
 $calendar-footer-container-padding: 8px 8px !default;
 $calendar-bigger-footer-container-padding: 12px 16px !default;
 $calendar-small-footer-container-padding: 4px !default;
@@ -111,23 +111,23 @@ $calendar-bigger-small-footer-container-padding: 10px 12px !default;
 
 // small size
 $calendar-small-icon-size: 24px !default;
-$calendar-small-icon-font-size-style: 18px !default;
+$calendar-small-icon-font-size-style: $font-icon-18 !default;
 $calendar-small-title-font-size: $text-base !default;
 $calendar-small-icon-padding: 0 !default;
 $calendar-small-header-height: 24px !default;
 $calendar-small-day-header-height: 24px !default;
 $calendar-small-month-view-height: 26px !default;
 $calendar-small-month-view-line-height: $calendar-small-month-view-height !default;
-$calendar-small-date-font-size: 12px !default;
+$calendar-small-date-font-size: $text-xs !default;
 $calendar-small-month-view-width: 26px !default;
 $calendar-small-popup-padding: 0 !default;
 $calendar-small-table-padding: 0 4px 4px 4px !default;
 $calendar-bigger-small-table-padding: 0 12px 12px 12px !default;
 $calendar-bigger-small-yeardecade-font-size: 14px !default;
-$calendar-small-font-size: 12px !default;
+$calendar-small-font-size: $text-xs !default;
 
 //week number
-$calendar-week-number-font-size-style: 14px !default;
+$calendar-week-number-font-size-style: $text-sm !default;
 $calendar-week-normal-max-width: 294px !default;
 $calendar-week-normal-min-width: 288px !default;
 $calendar-week-bigger-max-width: 320px !default;
@@ -158,9 +158,9 @@ $calendar-week-number-font-style: italic !default;
 
 //dimension
 $calendar-date-font-size: $text-sm !default;
-$calendar-bigger-day-font-size: 15px !default;
-$calendar-link-font-weight-style: normal !default;
-$calendar-disable-font-weight-style: normal !default;
+$calendar-bigger-day-font-size: $text-base !default;
+$calendar-link-font-weight-style: $font-weight-normal !default;
+$calendar-disable-font-weight-style: $font-weight-normal !default;
 $calendar-border-radius: 4px !default;
 
 //week header font size
@@ -251,7 +251,7 @@ $calendar-today-disabled-background-style: $content-bg-color-alt1 !default;
 $calendar-today-disabled-border-style: rgba($primary-text-disabled, .65) !default;
 $calendar-today-disabled-box-shadow: none !default;
 $calendar-today-disabled-color: rgba($content-text-color-alt1, .65) !default;
-$calendar-week-number-font-weight: 500 !default;
+$calendar-week-number-font-weight: $font-weight-medium !default;
 
 // Today primary button custom styling
 $calendar-today-btn-primary-bgcolor: $primary-bg-color !default;

package/styles/calendar/_theme.scss

@@ -1,7 +1,13 @@
 @include export-module('calendar-theme') {
   #{&}.e-calendar,
   .e-bigger.e-small #{&}.e-calendar {
-    background-color: $calendar-bg-color;
+    @if $skin-name == 'Material3' {
+      background: $calendar-bg-color;
+      border-radius: 8px;
+    }
+    @if $skin-name != 'Material3' {
+      background-color: $calendar-bg-color;
+    }
     border: $calendar-border-style;
     box-shadow: $calendar-box-shadow;
     #{if(&, '&', '*')} .e-date-icon-prev,
@@ -81,11 +87,21 @@
         }
         #{if(&, '&', '*')}.e-year td:hover span.e-day,
         #{if(&, '&', '*')}.e-decade td:hover span.e-day {
-          background-color: $calendar-hover-color;
+          @if $skin-name != 'Material3' {
+            background-color: $calendar-hover-color;
+          }
+          @if $skin-name == 'Material3' {
+            background: $calendar-hover-color;
+          }
         }
         #{if(&, '&', '*')}.e-year td.e-selected:hover span.e-day,
         #{if(&, '&', '*')}.e-decade td.e-selected:hover span.e-day {
-          background-color: $calendar-yeardecade-selected-hover-bg;
+          @if $skin-name != 'Material3' {
+            background-color: $calendar-yeardecade-selected-hover-bg;
+          }
+          @if $skin-name == 'Material3' {
+            background: $calendar-yeardecade-selected-hover-bg;
+          }
         }
 
         #{if(&, '&', '*')}.e-year td > span.e-day,
@@ -111,7 +127,12 @@
           }
         }
         #{if(&, '&', '*')} td.e-focused-date:hover span.e-day {
-          background-color: $calendar-hover-color;
+          @if $skin-name != 'Material3' {
+            background-color: $calendar-hover-color;
+          }
+          @if $skin-name == 'Material3' {
+            background: $calendar-hover-color;
+          }
           border: $calendar-hover-border-color;
           border-radius: $calendar-border-radius;
           color: $calendar-text-color;
@@ -135,7 +156,12 @@
         }
         #{if(&, '&', '*')} td.e-today:focus span.e-day,
         #{if(&, '&', '*')} td.e-focused-date.e-today:focus span.e-day {
-          background-color: $calendar-focus-bg-color;
+          @if $skin-name != 'Material3' {
+            background-color: $calendar-focus-bg-color;
+          }
+          @if $skin-name == 'Material3' {
+            background: $calendar-focus-bg-color;
+          }
           border: $calendar-focus-border-color;
           border-radius: $calendar-border-radius;
           color: $calendar-today-focus-color;
@@ -147,7 +173,12 @@
         #{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;
+          @if $skin-name != 'Material3' {
+            background-color: $calendar-hover-color;
+          }
+          @if $skin-name == 'Material3' {
+            background: $calendar-hover-color;
+          }
           border: $calendar-today-border-color;
           color: $calendar-today-focus-color;
           @if ($skin-name == 'FluentUI') {
@@ -156,9 +187,14 @@
           }
         }
         #{if(&, '&', '*')} td.e-today.e-selected span.e-day {
-          background-color: $calendar-active-bg-color;
+          @if $skin-name != 'Material3' {
+            background-color: $calendar-active-bg-color;
+          }
+          @if $skin-name == 'Material3' {
+            background: $calendar-active-bg-color;
+          }
           border: $calendar-active-bg-border-color;
-          @if ($skin-name == 'material' or $skin-name == 'material-dark') {
+          @if ($skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'Material3') {
             box-shadow: $calendar-selected-box-shadow;
           }
           @else {
@@ -169,7 +205,12 @@
         #{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;
+          @if $skin-name != 'Material3' {
+            background-color: $calendar-active-hover-bg-color;
+          }
+          @if $skin-name == 'Material3' {
+            background: $calendar-active-hover-bg-color;
+          }
           color: $calendar-active-today-hover-font-color;
           @if ($skin-name == 'FluentUI') {
             background-color: $calendar-focused-today-bg-style;
@@ -195,7 +236,12 @@
           color: $calendar-other-month-date;
         }
         #{if(&, '&', '*')} .e-other-month.e-today:hover span.e-day {
-          background-color: $calendar-hover-color;
+          @if $skin-name != 'Material3' {
+            background-color: $calendar-hover-color;
+          }
+          @if $skin-name == 'Material3' {
+            background: $calendar-hover-color;
+          }
           color: $calendar-other-month-date;
           @if ($skin-name == 'FluentUI') {
             background: $calendar-today-bg-style;
@@ -211,13 +257,23 @@
         }
         #{if(&, '&', '*')} td:hover span.e-day,
         #{if(&, '&', '*')} td:focus span.e-day {
-          background-color: $calendar-hover-color;
+          @if $skin-name != 'Material3' {
+            background-color: $calendar-hover-color;
+          }
+          @if $skin-name == 'Material3' {
+            background: $calendar-hover-color;
+          }
           border: $calendar-hover-border-color;
           border-radius: $calendar-border-radius;
           color: $calendar-hover-text;
         }
         #{if(&, '&', '*')} td:focus span.e-day {
-          background-color: $calendar-focus-bg-color;
+          @if $skin-name != 'Material3' {
+            background-color: $calendar-focus-bg-color;
+          }
+          @if $skin-name == 'Material3' {
+            background: $calendar-focus-bg-color;
+          }
           border: $calendar-focus-border-color;
           border-radius: $calendar-border-radius;
           color: $calendar-text-color;
@@ -242,7 +298,12 @@
           }
         }
         #{if(&, '&', '*')} td.e-selected span.e-day {
-          background-color: $calendar-active-bg-color;
+          @if $skin-name != 'Material3' {
+            background-color: $calendar-active-bg-color;
+          }
+          @if $skin-name == 'Material3' {
+            background: $calendar-active-bg-color;
+          }
           border: $calendar-selected-border-color;
           border-radius: $calendar-border-radius;
           color: $calendar-active-font-color;

package/styles/calendar/bootstrap-dark.css

@@ -344,7 +344,7 @@ ejs-calendar {
 }
 .e-calendar .e-footer-container,
 .e-bigger.e-small .e-calendar .e-footer-container {
-  background-color: #1a1a1a;
+  background-color: transparent;
   border-top: none;
   cursor: default;
   display: inline-block;
@@ -509,10 +509,11 @@ ejs-calendar {
 .e-small .e-calendar .e-header {
   height: 32px;
 }
-.e-small.e-calendar .e-header span,
-.e-small .e-calendar .e-header span {
+.e-small.e-calendar .e-header button span,
+.e-small .e-calendar .e-header button span {
   font-size: 12px;
   padding: 6px;
+  line-height: 14px;
 }
 .e-small.e-calendar .e-header .e-title,
 .e-small .e-calendar .e-header .e-title {

package/styles/calendar/bootstrap.css

@@ -510,10 +510,11 @@ ejs-calendar {
 .e-small .e-calendar .e-header {
   height: 32px;
 }
-.e-small.e-calendar .e-header span,
-.e-small .e-calendar .e-header span {
+.e-small.e-calendar .e-header button span,
+.e-small .e-calendar .e-header button span {
   font-size: 12px;
   padding: 6px;
+  line-height: 14px;
 }
 .e-small.e-calendar .e-header .e-title,
 .e-small .e-calendar .e-header .e-title {

package/styles/calendar/bootstrap4.css

@@ -510,10 +510,11 @@ ejs-calendar {
 .e-small .e-calendar .e-header {
   height: 32px;
 }
-.e-small.e-calendar .e-header span,
-.e-small .e-calendar .e-header span {
+.e-small.e-calendar .e-header button span,
+.e-small .e-calendar .e-header button span {
   font-size: 12px;
   padding: 6px;
+  line-height: 14px;
 }
 .e-small.e-calendar .e-header .e-title,
 .e-small .e-calendar .e-header .e-title {

package/styles/calendar/bootstrap5-dark.css

@@ -59,7 +59,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-header {
   background: none;
   display: table;
-  font-weight: normal;
+  font-weight: 400;
   position: relative;
   text-align: center;
   width: 100%;
@@ -77,7 +77,7 @@ ejs-calendar {
   cursor: pointer;
   display: inline-block;
   font-size: 14px;
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1;
   padding: 5px;
   vertical-align: middle;
@@ -160,12 +160,12 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content td.e-other-month > span.e-day,
 .e-bigger.e-small .e-calendar .e-content td.e-other-year > span.e-day {
   display: inline-block;
-  font-weight: normal;
+  font-weight: 400;
 }
 .e-calendar .e-content tr.e-month-hide,
 .e-bigger.e-small .e-calendar .e-content tr.e-month-hide {
   display: none;
-  font-weight: normal;
+  font-weight: 400;
 }
 .e-calendar .e-content tr.e-month-hide, .e-calendar .e-content td.e-other-month, .e-calendar .e-content td.e-other-year,
 .e-bigger.e-small .e-calendar .e-content tr.e-month-hide,
@@ -203,7 +203,7 @@ ejs-calendar {
   display: inline-block;
   float: left;
   font-size: 16px;
-  font-weight: 600;
+  font-weight: 700;
   text-align: left;
 }
 .e-calendar .e-header .e-title,
@@ -298,7 +298,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content span.e-day {
   border: none;
   font-size: 14px;
-  font-weight: normal;
+  font-weight: 400;
   height: 32px;
   line-height: 32px;
   width: 32px;
@@ -332,7 +332,7 @@ ejs-calendar {
 .e-calendar .e-content.e-year td > span.e-day, .e-calendar .e-content.e-decade td > span.e-day,
 .e-bigger.e-small .e-calendar .e-content.e-year td > span.e-day,
 .e-bigger.e-small .e-calendar .e-content.e-decade td > span.e-day {
-  font-weight: normal;
+  font-weight: 400;
   height: 56px;
   line-height: 56px;
   width: 56px;
@@ -439,7 +439,7 @@ ejs-calendar {
 .e-bigger.e-calendar .e-content.e-year span.e-day,
 *.e-bigger .e-calendar .e-content.e-year span.e-day {
   font-size: 16px;
-  font-weight: normal;
+  font-weight: 400;
 }
 .e-bigger.e-calendar .e-content.e-month table,
 *.e-bigger .e-calendar .e-content.e-month table {
@@ -534,14 +534,15 @@ ejs-calendar {
 .e-small .e-calendar .e-header {
   height: 22px;
 }
-.e-small.e-calendar .e-header span,
-.e-small .e-calendar .e-header span {
+.e-small.e-calendar .e-header button span,
+.e-small .e-calendar .e-header button span {
   font-size: 12px;
   padding: 0;
+  line-height: 14px;
 }
 .e-small.e-calendar .e-header .e-title,
 .e-small .e-calendar .e-header .e-title {
-  font-size: 13px;
+  font-size: 12px;
   line-height: 22px;
 }
 .e-small.e-calendar.e-rtl .e-header .e-title,
@@ -660,7 +661,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-header .e-next.e-disabled span,
 .e-bigger.e-small .e-calendar .e-header .e-prev.e-disabled span {
   color: #6c757d;
-  font-weight: normal;
+  font-weight: 400;
 }
 .e-calendar .e-header .e-next.e-disabled, .e-calendar .e-header .e-prev.e-disabled,
 .e-bigger.e-small .e-calendar .e-header .e-next.e-disabled,
@@ -706,7 +707,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content td.e-focused-date span.e-day,
 .e-bigger.e-small .e-calendar .e-content td.e-focused-date:hover span.e-day,
 .e-bigger.e-small .e-calendar .e-content td.e-focused-date:focus span.e-day {
-  background: #31373d;
+  background: #444c54;
   border: none;
   border-radius: 4px;
   box-shadow: none;

package/styles/calendar/bootstrap5.css

@@ -59,7 +59,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-header {
   background: none;
   display: table;
-  font-weight: normal;
+  font-weight: 400;
   position: relative;
   text-align: center;
   width: 100%;
@@ -77,7 +77,7 @@ ejs-calendar {
   cursor: pointer;
   display: inline-block;
   font-size: 14px;
-  font-weight: normal;
+  font-weight: 400;
   line-height: 1;
   padding: 5px;
   vertical-align: middle;
@@ -160,12 +160,12 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content td.e-other-month > span.e-day,
 .e-bigger.e-small .e-calendar .e-content td.e-other-year > span.e-day {
   display: inline-block;
-  font-weight: normal;
+  font-weight: 400;
 }
 .e-calendar .e-content tr.e-month-hide,
 .e-bigger.e-small .e-calendar .e-content tr.e-month-hide {
   display: none;
-  font-weight: normal;
+  font-weight: 400;
 }
 .e-calendar .e-content tr.e-month-hide, .e-calendar .e-content td.e-other-month, .e-calendar .e-content td.e-other-year,
 .e-bigger.e-small .e-calendar .e-content tr.e-month-hide,
@@ -203,7 +203,7 @@ ejs-calendar {
   display: inline-block;
   float: left;
   font-size: 16px;
-  font-weight: 600;
+  font-weight: 700;
   text-align: left;
 }
 .e-calendar .e-header .e-title,
@@ -298,7 +298,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content span.e-day {
   border: none;
   font-size: 14px;
-  font-weight: normal;
+  font-weight: 400;
   height: 32px;
   line-height: 32px;
   width: 32px;
@@ -332,7 +332,7 @@ ejs-calendar {
 .e-calendar .e-content.e-year td > span.e-day, .e-calendar .e-content.e-decade td > span.e-day,
 .e-bigger.e-small .e-calendar .e-content.e-year td > span.e-day,
 .e-bigger.e-small .e-calendar .e-content.e-decade td > span.e-day {
-  font-weight: normal;
+  font-weight: 400;
   height: 56px;
   line-height: 56px;
   width: 56px;
@@ -439,7 +439,7 @@ ejs-calendar {
 .e-bigger.e-calendar .e-content.e-year span.e-day,
 *.e-bigger .e-calendar .e-content.e-year span.e-day {
   font-size: 16px;
-  font-weight: normal;
+  font-weight: 400;
 }
 .e-bigger.e-calendar .e-content.e-month table,
 *.e-bigger .e-calendar .e-content.e-month table {
@@ -534,14 +534,15 @@ ejs-calendar {
 .e-small .e-calendar .e-header {
   height: 22px;
 }
-.e-small.e-calendar .e-header span,
-.e-small .e-calendar .e-header span {
+.e-small.e-calendar .e-header button span,
+.e-small .e-calendar .e-header button span {
   font-size: 12px;
   padding: 0;
+  line-height: 14px;
 }
 .e-small.e-calendar .e-header .e-title,
 .e-small .e-calendar .e-header .e-title {
-  font-size: 13px;
+  font-size: 12px;
   line-height: 22px;
 }
 .e-small.e-calendar.e-rtl .e-header .e-title,
@@ -660,7 +661,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-header .e-next.e-disabled span,
 .e-bigger.e-small .e-calendar .e-header .e-prev.e-disabled span {
   color: #adb5bd;
-  font-weight: normal;
+  font-weight: 400;
 }
 .e-calendar .e-header .e-next.e-disabled, .e-calendar .e-header .e-prev.e-disabled,
 .e-bigger.e-small .e-calendar .e-header .e-next.e-disabled,

package/styles/calendar/fabric-dark.css

@@ -125,6 +125,15 @@ ejs-calendar {
   -ms-touch-action: none;
       touch-action: none;
 }
+.e-calendar .e-content td.e-disabled.e-today,
+.e-bigger.e-small .e-calendar .e-content td.e-disabled.e-today {
+  opacity: 1;
+}
+.e-calendar .e-content td.e-disabled.e-today span.e-day,
+.e-bigger.e-small .e-calendar .e-content td.e-disabled.e-today span.e-day {
+  box-shadow: inset 1px 0 #0074cc, inset 0 1px #0074cc, inset -1px 0 #0074cc, inset 0 -1px #0074cc;
+  color: none;
+}
 .e-calendar .e-content td,
 .e-bigger.e-small .e-calendar .e-content td {
   cursor: pointer;
@@ -344,7 +353,7 @@ ejs-calendar {
 }
 .e-calendar .e-footer-container,
 .e-bigger.e-small .e-calendar .e-footer-container {
-  background-color: #201f1f;
+  background-color: transparent;
   border-top: none;
   cursor: default;
   display: -ms-flexbox;
@@ -353,7 +362,7 @@ ejs-calendar {
       flex-direction: row;
   -ms-flex-pack: end;
       justify-content: flex-end;
-  padding: 0 10px 10px 10px;
+  padding: 10px 10px 10px 10px;
   text-align: center;
   width: 100%;
 }
@@ -478,7 +487,7 @@ ejs-calendar {
 .e-bigger.e-calendar .e-footer-container,
 *.e-bigger .e-calendar .e-footer-container {
   border-top: none;
-  padding: 0 10px 10px 10px;
+  padding: 10px 10px 10px 10px;
 }
 .e-small.e-calendar,
 .e-small .e-calendar {
@@ -510,10 +519,11 @@ ejs-calendar {
 .e-small .e-calendar .e-header {
   height: 32px;
 }
-.e-small.e-calendar .e-header span,
-.e-small .e-calendar .e-header span {
+.e-small.e-calendar .e-header button span,
+.e-small .e-calendar .e-header button span {
   font-size: 12px;
   padding: 6px;
+  line-height: 14px;
 }
 .e-small.e-calendar .e-header .e-title,
 .e-small .e-calendar .e-header .e-title {

package/styles/calendar/fabric.css

@@ -126,6 +126,15 @@ ejs-calendar {
   -ms-touch-action: none;
       touch-action: none;
 }
+.e-calendar .e-content td.e-disabled.e-today,
+.e-bigger.e-small .e-calendar .e-content td.e-disabled.e-today {
+  opacity: 1;
+}
+.e-calendar .e-content td.e-disabled.e-today span.e-day,
+.e-bigger.e-small .e-calendar .e-content td.e-disabled.e-today span.e-day {
+  box-shadow: inset 1px 0 #0078d6, inset 0 1px #0078d6, inset -1px 0 #0078d6, inset 0 -1px #0078d6;
+  color: #ccc;
+}
 .e-calendar .e-content td,
 .e-bigger.e-small .e-calendar .e-content td {
   cursor: pointer;
@@ -511,10 +520,11 @@ ejs-calendar {
 .e-small .e-calendar .e-header {
   height: 32px;
 }
-.e-small.e-calendar .e-header span,
-.e-small .e-calendar .e-header span {
+.e-small.e-calendar .e-header button span,
+.e-small .e-calendar .e-header button span {
   font-size: 12px;
   padding: 6px;
+  line-height: 14px;
 }
 .e-small.e-calendar .e-header .e-title,
 .e-small .e-calendar .e-header .e-title {