@syncfusion/ej2-calendars 24.1.47 → 24.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/ej2-calendars.min.js +2 -2
  3. package/dist/ej2-calendars.umd.min.js +2 -2
  4. package/dist/ej2-calendars.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-calendars.es2015.js +94 -25
  6. package/dist/es6/ej2-calendars.es2015.js.map +1 -1
  7. package/dist/es6/ej2-calendars.es5.js +94 -25
  8. package/dist/es6/ej2-calendars.es5.js.map +1 -1
  9. package/dist/global/ej2-calendars.min.js +2 -2
  10. package/dist/global/ej2-calendars.min.js.map +1 -1
  11. package/dist/global/index.d.ts +1 -1
  12. package/package.json +10 -10
  13. package/src/calendar/calendar.d.ts +2 -0
  14. package/src/calendar/calendar.js +86 -21
  15. package/src/datepicker/datepicker.js +8 -4
  16. package/styles/bootstrap-dark.css +26 -1
  17. package/styles/bootstrap.css +26 -1
  18. package/styles/bootstrap4.css +26 -1
  19. package/styles/bootstrap5-dark.css +26 -1
  20. package/styles/bootstrap5.css +26 -1
  21. package/styles/calendar/_bootstrap-dark-definition.scss +10 -0
  22. package/styles/calendar/_bootstrap-definition.scss +10 -0
  23. package/styles/calendar/_bootstrap4-definition.scss +10 -0
  24. package/styles/calendar/_bootstrap5-definition.scss +9 -1
  25. package/styles/calendar/_fabric-dark-definition.scss +10 -0
  26. package/styles/calendar/_fabric-definition.scss +11 -1
  27. package/styles/calendar/_fluent-definition.scss +11 -1
  28. package/styles/calendar/_fusionnew-definition.scss +10 -0
  29. package/styles/calendar/_highcontrast-definition.scss +11 -1
  30. package/styles/calendar/_highcontrast-light-definition.scss +10 -0
  31. package/styles/calendar/_layout.scss +3 -0
  32. package/styles/calendar/_material-dark-definition.scss +10 -0
  33. package/styles/calendar/_material-definition.scss +10 -0
  34. package/styles/calendar/_material3-definition.scss +10 -0
  35. package/styles/calendar/_tailwind-definition.scss +10 -1
  36. package/styles/calendar/_theme.scss +24 -3
  37. package/styles/calendar/bootstrap-dark.css +25 -1
  38. package/styles/calendar/bootstrap.css +25 -1
  39. package/styles/calendar/bootstrap4.css +25 -1
  40. package/styles/calendar/bootstrap5-dark.css +26 -1
  41. package/styles/calendar/bootstrap5.css +26 -1
  42. package/styles/calendar/fabric-dark.css +25 -1
  43. package/styles/calendar/fabric.css +27 -3
  44. package/styles/calendar/fluent-dark.css +35 -10
  45. package/styles/calendar/fluent.css +35 -10
  46. package/styles/calendar/highcontrast-light.css +25 -1
  47. package/styles/calendar/highcontrast.css +27 -3
  48. package/styles/calendar/material-dark.css +25 -1
  49. package/styles/calendar/material.css +25 -1
  50. package/styles/calendar/material3-dark.css +25 -1
  51. package/styles/calendar/material3.css +25 -1
  52. package/styles/calendar/tailwind-dark.css +25 -1
  53. package/styles/calendar/tailwind.css +25 -1
  54. package/styles/fabric-dark.css +26 -1
  55. package/styles/fabric.css +28 -3
  56. package/styles/fluent-dark.css +35 -10
  57. package/styles/fluent.css +35 -10
  58. package/styles/highcontrast-light.css +26 -1
  59. package/styles/highcontrast.css +28 -3
  60. package/styles/material-dark.css +26 -1
  61. package/styles/material.css +26 -1
  62. package/styles/material3-dark.css +26 -1
  63. package/styles/material3.css +26 -1
  64. package/styles/tailwind-dark.css +26 -1
  65. package/styles/tailwind.css +26 -1
package/styles/calendar/fabric.css CHANGED
@@ -214,6 +214,9 @@ ejs-calendar {
214
214
  font-size: 17px;
215
215
  font-weight: 300;
216
216
  text-align: left;
217
+ padding: 0 5px;
218
+ border: none;
219
+ border-radius: 0;
217
220
  }
218
221
  .e-calendar .e-header .e-title,
219
222
  .e-bigger.e-small .e-calendar .e-header .e-title {
@@ -272,7 +275,7 @@ ejs-calendar {
272
275
  }
273
276
  .e-calendar .e-header .e-title,
274
277
  .e-bigger.e-small .e-calendar .e-header .e-title {
275
- line-height: 36px;
278
+ line-height: 32px;
276
279
  }
277
280
  .e-calendar.e-rtl .e-header .e-title,
278
281
  .e-bigger.e-small .e-calendar.e-rtl .e-header .e-title {
@@ -281,7 +284,7 @@ ejs-calendar {
281
284
  }
282
285
  .e-calendar .e-header,
283
286
  .e-bigger.e-small .e-calendar .e-header {
284
- height: 36px;
287
+ height: 32px;
285
288
  }
286
289
  .e-calendar .e-header.e-month,
287
290
  .e-bigger.e-small .e-calendar .e-header.e-month {
@@ -598,10 +601,22 @@ ejs-calendar {
598
601
  }
599
602
  .e-calendar .e-header .e-title:hover,
600
603
  .e-bigger.e-small .e-calendar .e-header .e-title:hover {
601
- color: #00457a;
604
+ background: none;
602
605
  cursor: pointer;
603
606
  text-decoration: none;
604
607
  }
608
+ .e-calendar .e-header .e-title:focus,
609
+ .e-bigger.e-small .e-calendar .e-header .e-title:focus {
610
+ box-shadow: 0 0 0 1px #000;
611
+ background: none;
612
+ text-decoration: none;
613
+ }
614
+ .e-calendar .e-header .e-title:active,
615
+ .e-bigger.e-small .e-calendar .e-header .e-title:active {
616
+ box-shadow: none;
617
+ background: none;
618
+ text-decoration: none;
619
+ }
605
620
  .e-calendar .e-header .e-prev:hover > span, .e-calendar .e-header .e-next:hover > span,
606
621
  .e-bigger.e-small .e-calendar .e-header .e-prev:hover > span,
607
622
  .e-bigger.e-small .e-calendar .e-header .e-next:hover > span {
@@ -614,6 +629,11 @@ ejs-calendar {
614
629
  .e-bigger.e-small .e-calendar .e-header .e-next:hover {
615
630
  background: none;
616
631
  }
632
+ .e-calendar .e-header .e-prev:focus, .e-calendar .e-header .e-next:focus,
633
+ .e-bigger.e-small .e-calendar .e-header .e-prev:focus,
634
+ .e-bigger.e-small .e-calendar .e-header .e-next:focus {
635
+ box-shadow: 0 0 0 1px #000;
636
+ }
617
637
  .e-calendar .e-header .e-prev:active, .e-calendar .e-header .e-next:active,
618
638
  .e-bigger.e-small .e-calendar .e-header .e-prev:active,
619
639
  .e-bigger.e-small .e-calendar .e-header .e-next:active {
@@ -832,4 +852,8 @@ ejs-calendar {
832
852
  to {
833
853
  transform: scale(1);
834
854
  }
855
+ }
856
+ .e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
857
+ box-shadow: 0 0 0 1px #000;
858
+ border-radius: 0;
835
859
  }
package/styles/calendar/fluent-dark.css CHANGED
@@ -195,7 +195,7 @@ ejs-calendar {
195
195
  .e-calendar .e-header .e-prev, .e-calendar .e-header .e-next,
196
196
  .e-bigger.e-small .e-calendar .e-header .e-prev,
197
197
  .e-bigger.e-small .e-calendar .e-header .e-next {
198
- border-radius: 0;
198
+ border-radius: 2px;
199
199
  display: inline-block;
200
200
  font-size: 14px;
201
201
  vertical-align: middle;
@@ -208,6 +208,9 @@ ejs-calendar {
208
208
  font-size: 14px;
209
209
  font-weight: 600;
210
210
  text-align: left;
211
+ padding: 0 5px;
212
+ border: none;
213
+ border-radius: 2px;
211
214
  }
212
215
  .e-calendar .e-header .e-title,
213
216
  .e-bigger.e-small .e-calendar .e-header .e-title {
@@ -621,10 +624,22 @@ ejs-calendar {
621
624
  }
622
625
  .e-calendar .e-header .e-title:hover,
623
626
  .e-bigger.e-small .e-calendar .e-header .e-title:hover {
624
- color: #f3f2f1;
627
+ background: #252423;
625
628
  cursor: pointer;
626
629
  text-decoration: none;
627
630
  }
631
+ .e-calendar .e-header .e-title:focus,
632
+ .e-bigger.e-small .e-calendar .e-header .e-title:focus {
633
+ box-shadow: 0 0 0 1px #a19f9d;
634
+ background: none;
635
+ text-decoration: none;
636
+ }
637
+ .e-calendar .e-header .e-title:active,
638
+ .e-bigger.e-small .e-calendar .e-header .e-title:active {
639
+ box-shadow: none;
640
+ background: #252423;
641
+ text-decoration: none;
642
+ }
628
643
  .e-calendar .e-header .e-prev:hover > span, .e-calendar .e-header .e-next:hover > span,
629
644
  .e-bigger.e-small .e-calendar .e-header .e-prev:hover > span,
630
645
  .e-bigger.e-small .e-calendar .e-header .e-next:hover > span {
@@ -637,6 +652,11 @@ ejs-calendar {
637
652
  .e-bigger.e-small .e-calendar .e-header .e-next:hover {
638
653
  background: #252423;
639
654
  }
655
+ .e-calendar .e-header .e-prev:focus, .e-calendar .e-header .e-next:focus,
656
+ .e-bigger.e-small .e-calendar .e-header .e-prev:focus,
657
+ .e-bigger.e-small .e-calendar .e-header .e-next:focus {
658
+ box-shadow: 0 0 0 1px #a19f9d;
659
+ }
640
660
  .e-calendar .e-header .e-prev:active, .e-calendar .e-header .e-next:active,
641
661
  .e-bigger.e-small .e-calendar .e-header .e-prev:active,
642
662
  .e-bigger.e-small .e-calendar .e-header .e-next:active {
@@ -706,7 +726,7 @@ ejs-calendar {
706
726
  .e-bigger.e-small .e-calendar .e-content td.e-focused-date:focus span.e-day {
707
727
  background: #252423;
708
728
  border: none;
709
- border-radius: 0;
729
+ border-radius: 2px;
710
730
  box-shadow: none;
711
731
  background: none;
712
732
  border-radius: 4px;
@@ -716,7 +736,7 @@ ejs-calendar {
716
736
  .e-bigger.e-small .e-calendar .e-content td.e-focused-date:hover span.e-day {
717
737
  background-color: #323130;
718
738
  border: none;
719
- border-radius: 0;
739
+ border-radius: 2px;
720
740
  color: #f3f2f1;
721
741
  }
722
742
  .e-calendar .e-content td.e-today span.e-day, .e-calendar .e-content td.e-focused-date.e-today span.e-day,
@@ -724,7 +744,7 @@ ejs-calendar {
724
744
  .e-bigger.e-small .e-calendar .e-content td.e-focused-date.e-today span.e-day {
725
745
  background: #0078d4;
726
746
  border: none;
727
- border-radius: 0;
747
+ border-radius: 2px;
728
748
  box-shadow: inset 1px 0 #0078d4, inset 0 1px #0078d4, inset -1px 0 #0078d4, inset 0 -1px #0078d4;
729
749
  color: #1b1a19;
730
750
  border-radius: 50%;
@@ -741,7 +761,7 @@ ejs-calendar {
741
761
  .e-bigger.e-small .e-calendar .e-content td.e-focused-date.e-today:focus span.e-day {
742
762
  background-color: #3b3a39;
743
763
  border: none;
744
- border-radius: 0;
764
+ border-radius: 2px;
745
765
  color: #1b1a19;
746
766
  background-color: #0078d4;
747
767
  border-radius: 50%;
@@ -812,7 +832,7 @@ ejs-calendar {
812
832
  .e-bigger.e-small .e-calendar .e-content td:focus span.e-day {
813
833
  background-color: #323130;
814
834
  border: none;
815
- border-radius: 0;
835
+ border-radius: 2px;
816
836
  color: #f3f2f1;
817
837
  }
818
838
  .e-calendar .e-content td:focus span.e-day,
@@ -820,7 +840,7 @@ ejs-calendar {
820
840
  background-color: #3b3a39;
821
841
  color: #f3f2f1;
822
842
  border: none;
823
- border-radius: 0;
843
+ border-radius: 2px;
824
844
  border-radius: 50%;
825
845
  }
826
846
  .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,
@@ -843,7 +863,7 @@ ejs-calendar {
843
863
  .e-bigger.e-small .e-calendar .e-content td.e-selected span.e-day {
844
864
  background-color: #3b3a39;
845
865
  border: none;
846
- border-radius: 0;
866
+ border-radius: 2px;
847
867
  color: #f3f2f1;
848
868
  }
849
869
  .e-calendar .e-content td.e-selected:not(.e-focused-date) span.e-day,
@@ -878,7 +898,7 @@ ejs-calendar {
878
898
  .e-bigger.e-small .e-calendar .e-content td.e-selected:hover span.e-day {
879
899
  background-color: #3b3a39;
880
900
  border: none;
881
- border-radius: 0;
901
+ border-radius: 2px;
882
902
  color: #f3f2f1;
883
903
  }
884
904
  .e-calendar .e-content td.e-selected.e-focused-date span.e-day,
@@ -997,4 +1017,9 @@ ejs-calendar {
997
1017
  .e-calendar .e-css.e-btn.e-today.e-flat.e-primary.e-disabled,
998
1018
  .e-calendar .e-css.e-btn.e-today.e-flat.e-primary.e-disabled {
999
1019
  color: #484644;
1020
+ }
1021
+
1022
+ .e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
1023
+ box-shadow: 0 0 0 1px #a19f9d;
1024
+ border-radius: 2px;
1000
1025
  }
package/styles/calendar/fluent.css CHANGED
@@ -195,7 +195,7 @@ ejs-calendar {
195
195
  .e-calendar .e-header .e-prev, .e-calendar .e-header .e-next,
196
196
  .e-bigger.e-small .e-calendar .e-header .e-prev,
197
197
  .e-bigger.e-small .e-calendar .e-header .e-next {
198
- border-radius: 0;
198
+ border-radius: 2px;
199
199
  display: inline-block;
200
200
  font-size: 14px;
201
201
  vertical-align: middle;
@@ -208,6 +208,9 @@ ejs-calendar {
208
208
  font-size: 14px;
209
209
  font-weight: 600;
210
210
  text-align: left;
211
+ padding: 0 5px;
212
+ border: none;
213
+ border-radius: 2px;
211
214
  }
212
215
  .e-calendar .e-header .e-title,
213
216
  .e-bigger.e-small .e-calendar .e-header .e-title {
@@ -621,10 +624,22 @@ ejs-calendar {
621
624
  }
622
625
  .e-calendar .e-header .e-title:hover,
623
626
  .e-bigger.e-small .e-calendar .e-header .e-title:hover {
624
- color: #201f1e;
627
+ background: #f3f2f1;
625
628
  cursor: pointer;
626
629
  text-decoration: none;
627
630
  }
631
+ .e-calendar .e-header .e-title:focus,
632
+ .e-bigger.e-small .e-calendar .e-header .e-title:focus {
633
+ box-shadow: 0 0 0 1px #605e5c;
634
+ background: none;
635
+ text-decoration: none;
636
+ }
637
+ .e-calendar .e-header .e-title:active,
638
+ .e-bigger.e-small .e-calendar .e-header .e-title:active {
639
+ box-shadow: none;
640
+ background: #f3f2f1;
641
+ text-decoration: none;
642
+ }
628
643
  .e-calendar .e-header .e-prev:hover > span, .e-calendar .e-header .e-next:hover > span,
629
644
  .e-bigger.e-small .e-calendar .e-header .e-prev:hover > span,
630
645
  .e-bigger.e-small .e-calendar .e-header .e-next:hover > span {
@@ -637,6 +652,11 @@ ejs-calendar {
637
652
  .e-bigger.e-small .e-calendar .e-header .e-next:hover {
638
653
  background: #f3f2f1;
639
654
  }
655
+ .e-calendar .e-header .e-prev:focus, .e-calendar .e-header .e-next:focus,
656
+ .e-bigger.e-small .e-calendar .e-header .e-prev:focus,
657
+ .e-bigger.e-small .e-calendar .e-header .e-next:focus {
658
+ box-shadow: 0 0 0 1px #605e5c;
659
+ }
640
660
  .e-calendar .e-header .e-prev:active, .e-calendar .e-header .e-next:active,
641
661
  .e-bigger.e-small .e-calendar .e-header .e-prev:active,
642
662
  .e-bigger.e-small .e-calendar .e-header .e-next:active {
@@ -706,7 +726,7 @@ ejs-calendar {
706
726
  .e-bigger.e-small .e-calendar .e-content td.e-focused-date:focus span.e-day {
707
727
  background: #f3f2f1;
708
728
  border: none;
709
- border-radius: 0;
729
+ border-radius: 2px;
710
730
  box-shadow: none;
711
731
  background: none;
712
732
  border-radius: 4px;
@@ -716,7 +736,7 @@ ejs-calendar {
716
736
  .e-bigger.e-small .e-calendar .e-content td.e-focused-date:hover span.e-day {
717
737
  background-color: #f3f2f1;
718
738
  border: none;
719
- border-radius: 0;
739
+ border-radius: 2px;
720
740
  color: #201f1e;
721
741
  }
722
742
  .e-calendar .e-content td.e-today span.e-day, .e-calendar .e-content td.e-focused-date.e-today span.e-day,
@@ -724,7 +744,7 @@ ejs-calendar {
724
744
  .e-bigger.e-small .e-calendar .e-content td.e-focused-date.e-today span.e-day {
725
745
  background: #0078d4;
726
746
  border: none;
727
- border-radius: 0;
747
+ border-radius: 2px;
728
748
  box-shadow: inset 1px 0 #0078d4, inset 0 1px #0078d4, inset -1px 0 #0078d4, inset 0 -1px #0078d4;
729
749
  color: #fff;
730
750
  border-radius: 50%;
@@ -741,7 +761,7 @@ ejs-calendar {
741
761
  .e-bigger.e-small .e-calendar .e-content td.e-focused-date.e-today:focus span.e-day {
742
762
  background-color: #edebe9;
743
763
  border: none;
744
- border-radius: 0;
764
+ border-radius: 2px;
745
765
  color: #fff;
746
766
  background-color: #0078d4;
747
767
  border-radius: 50%;
@@ -812,7 +832,7 @@ ejs-calendar {
812
832
  .e-bigger.e-small .e-calendar .e-content td:focus span.e-day {
813
833
  background-color: #f3f2f1;
814
834
  border: none;
815
- border-radius: 0;
835
+ border-radius: 2px;
816
836
  color: #201f1e;
817
837
  }
818
838
  .e-calendar .e-content td:focus span.e-day,
@@ -820,7 +840,7 @@ ejs-calendar {
820
840
  background-color: #edebe9;
821
841
  color: #201f1e;
822
842
  border: none;
823
- border-radius: 0;
843
+ border-radius: 2px;
824
844
  border-radius: 50%;
825
845
  }
826
846
  .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,
@@ -843,7 +863,7 @@ ejs-calendar {
843
863
  .e-bigger.e-small .e-calendar .e-content td.e-selected span.e-day {
844
864
  background-color: #edebe9;
845
865
  border: none;
846
- border-radius: 0;
866
+ border-radius: 2px;
847
867
  color: #201f1e;
848
868
  }
849
869
  .e-calendar .e-content td.e-selected:not(.e-focused-date) span.e-day,
@@ -878,7 +898,7 @@ ejs-calendar {
878
898
  .e-bigger.e-small .e-calendar .e-content td.e-selected:hover span.e-day {
879
899
  background-color: #edebe9;
880
900
  border: none;
881
- border-radius: 0;
901
+ border-radius: 2px;
882
902
  color: #201f1e;
883
903
  }
884
904
  .e-calendar .e-content td.e-selected.e-focused-date span.e-day,
@@ -997,4 +1017,9 @@ ejs-calendar {
997
1017
  .e-calendar .e-css.e-btn.e-today.e-flat.e-primary.e-disabled,
998
1018
  .e-calendar .e-css.e-btn.e-today.e-flat.e-primary.e-disabled {
999
1019
  color: #a19f9d;
1020
+ }
1021
+
1022
+ .e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
1023
+ box-shadow: 0 0 0 1px #605e5c;
1024
+ border-radius: 2px;
1000
1025
  }
package/styles/calendar/highcontrast-light.css CHANGED
@@ -204,6 +204,9 @@ ejs-calendar {
204
204
  font-size: 17px;
205
205
  font-weight: 300;
206
206
  text-align: left;
207
+ padding: 0 5px;
208
+ border: none;
209
+ border-radius: 4px;
207
210
  }
208
211
  .e-calendar .e-header .e-title,
209
212
  .e-bigger.e-small .e-calendar .e-header .e-title {
@@ -588,10 +591,22 @@ ejs-calendar {
588
591
  }
589
592
  .e-calendar .e-header .e-title:hover,
590
593
  .e-bigger.e-small .e-calendar .e-header .e-title:hover {
591
- color: #400074;
594
+ background: none;
592
595
  cursor: pointer;
593
596
  text-decoration: underline;
594
597
  }
598
+ .e-calendar .e-header .e-title:focus,
599
+ .e-bigger.e-small .e-calendar .e-header .e-title:focus {
600
+ box-shadow: 0 0 0 1px #fff;
601
+ background: none;
602
+ text-decoration: underline;
603
+ }
604
+ .e-calendar .e-header .e-title:active,
605
+ .e-bigger.e-small .e-calendar .e-header .e-title:active {
606
+ box-shadow: none;
607
+ background: #fff;
608
+ text-decoration: underline;
609
+ }
595
610
  .e-calendar .e-header .e-prev:hover > span, .e-calendar .e-header .e-next:hover > span,
596
611
  .e-bigger.e-small .e-calendar .e-header .e-prev:hover > span,
597
612
  .e-bigger.e-small .e-calendar .e-header .e-next:hover > span {
@@ -604,6 +619,11 @@ ejs-calendar {
604
619
  .e-bigger.e-small .e-calendar .e-header .e-next:hover {
605
620
  background: #ecf;
606
621
  }
622
+ .e-calendar .e-header .e-prev:focus, .e-calendar .e-header .e-next:focus,
623
+ .e-bigger.e-small .e-calendar .e-header .e-prev:focus,
624
+ .e-bigger.e-small .e-calendar .e-header .e-next:focus {
625
+ box-shadow: 0 0 0 1px #fff;
626
+ }
607
627
  .e-calendar .e-header .e-prev:active, .e-calendar .e-header .e-next:active,
608
628
  .e-bigger.e-small .e-calendar .e-header .e-prev:active,
609
629
  .e-bigger.e-small .e-calendar .e-header .e-next:active {
@@ -822,4 +842,8 @@ ejs-calendar {
822
842
  to {
823
843
  transform: scale(1);
824
844
  }
845
+ }
846
+ .e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
847
+ box-shadow: 0 0 0 1px #fff;
848
+ border-radius: 0;
825
849
  }
package/styles/calendar/highcontrast.css CHANGED
@@ -214,6 +214,9 @@ ejs-calendar {
214
214
  font-size: 17px;
215
215
  font-weight: 300;
216
216
  text-align: left;
217
+ padding: 0 5px;
218
+ border: none;
219
+ border-radius: 0;
217
220
  }
218
221
  .e-calendar .e-header .e-title,
219
222
  .e-bigger.e-small .e-calendar .e-header .e-title {
@@ -272,7 +275,7 @@ ejs-calendar {
272
275
  }
273
276
  .e-calendar .e-header .e-title,
274
277
  .e-bigger.e-small .e-calendar .e-header .e-title {
275
- line-height: 36px;
278
+ line-height: 32px;
276
279
  }
277
280
  .e-calendar.e-rtl .e-header .e-title,
278
281
  .e-bigger.e-small .e-calendar.e-rtl .e-header .e-title {
@@ -281,7 +284,7 @@ ejs-calendar {
281
284
  }
282
285
  .e-calendar .e-header,
283
286
  .e-bigger.e-small .e-calendar .e-header {
284
- height: 36px;
287
+ height: 32px;
285
288
  }
286
289
  .e-calendar .e-header.e-month,
287
290
  .e-bigger.e-small .e-calendar .e-header.e-month {
@@ -598,10 +601,22 @@ ejs-calendar {
598
601
  }
599
602
  .e-calendar .e-header .e-title:hover,
600
603
  .e-bigger.e-small .e-calendar .e-header .e-title:hover {
601
- color: #ffd939;
604
+ background: none;
602
605
  cursor: pointer;
603
606
  text-decoration: underline;
604
607
  }
608
+ .e-calendar .e-header .e-title:focus,
609
+ .e-bigger.e-small .e-calendar .e-header .e-title:focus {
610
+ box-shadow: 0 0 0 1px #fff;
611
+ background: none;
612
+ text-decoration: none;
613
+ }
614
+ .e-calendar .e-header .e-title:active,
615
+ .e-bigger.e-small .e-calendar .e-header .e-title:active {
616
+ box-shadow: none;
617
+ background: #000;
618
+ text-decoration: underline;
619
+ }
605
620
  .e-calendar .e-header .e-prev:hover > span, .e-calendar .e-header .e-next:hover > span,
606
621
  .e-bigger.e-small .e-calendar .e-header .e-prev:hover > span,
607
622
  .e-bigger.e-small .e-calendar .e-header .e-next:hover > span {
@@ -614,6 +629,11 @@ ejs-calendar {
614
629
  .e-bigger.e-small .e-calendar .e-header .e-next:hover {
615
630
  background: #685708;
616
631
  }
632
+ .e-calendar .e-header .e-prev:focus, .e-calendar .e-header .e-next:focus,
633
+ .e-bigger.e-small .e-calendar .e-header .e-prev:focus,
634
+ .e-bigger.e-small .e-calendar .e-header .e-next:focus {
635
+ box-shadow: 0 0 0 1px #fff;
636
+ }
617
637
  .e-calendar .e-header .e-prev:active, .e-calendar .e-header .e-next:active,
618
638
  .e-bigger.e-small .e-calendar .e-header .e-prev:active,
619
639
  .e-bigger.e-small .e-calendar .e-header .e-next:active {
@@ -832,4 +852,8 @@ ejs-calendar {
832
852
  to {
833
853
  transform: scale(1);
834
854
  }
855
+ }
856
+ .e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
857
+ box-shadow: 0 0 0 1px #fff;
858
+ border-radius: 0;
835
859
  }
package/styles/calendar/material-dark.css CHANGED
@@ -213,6 +213,9 @@ ejs-calendar {
213
213
  font-size: 14px;
214
214
  font-weight: 500;
215
215
  text-align: left;
216
+ padding: 0 5px;
217
+ border: none;
218
+ border-radius: 4px;
216
219
  }
217
220
  .e-calendar .e-header .e-title,
218
221
  .e-bigger.e-small .e-calendar .e-header .e-title {
@@ -597,10 +600,22 @@ ejs-calendar {
597
600
  }
598
601
  .e-calendar .e-header .e-title:hover,
599
602
  .e-bigger.e-small .e-calendar .e-header .e-title:hover {
600
- color: #fff;
603
+ background: none;
601
604
  cursor: pointer;
602
605
  text-decoration: none;
603
606
  }
607
+ .e-calendar .e-header .e-title:focus,
608
+ .e-bigger.e-small .e-calendar .e-header .e-title:focus {
609
+ box-shadow: 0 0 0 1px #fff;
610
+ background: none;
611
+ text-decoration: none;
612
+ }
613
+ .e-calendar .e-header .e-title:active,
614
+ .e-bigger.e-small .e-calendar .e-header .e-title:active {
615
+ box-shadow: none;
616
+ background: none;
617
+ text-decoration: none;
618
+ }
604
619
  .e-calendar .e-header .e-prev:hover > span, .e-calendar .e-header .e-next:hover > span,
605
620
  .e-bigger.e-small .e-calendar .e-header .e-prev:hover > span,
606
621
  .e-bigger.e-small .e-calendar .e-header .e-next:hover > span {
@@ -613,6 +628,11 @@ ejs-calendar {
613
628
  .e-bigger.e-small .e-calendar .e-header .e-next:hover {
614
629
  background: none;
615
630
  }
631
+ .e-calendar .e-header .e-prev:focus, .e-calendar .e-header .e-next:focus,
632
+ .e-bigger.e-small .e-calendar .e-header .e-prev:focus,
633
+ .e-bigger.e-small .e-calendar .e-header .e-next:focus {
634
+ box-shadow: 0 0 0 1px #fff;
635
+ }
616
636
  .e-calendar .e-header .e-prev:active, .e-calendar .e-header .e-next:active,
617
637
  .e-bigger.e-small .e-calendar .e-header .e-prev:active,
618
638
  .e-bigger.e-small .e-calendar .e-header .e-next:active {
@@ -831,4 +851,8 @@ ejs-calendar {
831
851
  to {
832
852
  transform: scale(1);
833
853
  }
854
+ }
855
+ .e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
856
+ box-shadow: 0 0 0 1px #fff;
857
+ border-radius: 50%;
834
858
  }
package/styles/calendar/material.css CHANGED
@@ -214,6 +214,9 @@ ejs-calendar {
214
214
  font-size: 14px;
215
215
  font-weight: 500;
216
216
  text-align: left;
217
+ padding: 0 5px;
218
+ border: none;
219
+ border-radius: 4px;
217
220
  }
218
221
  .e-calendar .e-header .e-title,
219
222
  .e-bigger.e-small .e-calendar .e-header .e-title {
@@ -598,10 +601,22 @@ ejs-calendar {
598
601
  }
599
602
  .e-calendar .e-header .e-title:hover,
600
603
  .e-bigger.e-small .e-calendar .e-header .e-title:hover {
601
- color: rgba(0, 0, 0, 0.75);
604
+ background: none;
602
605
  cursor: pointer;
603
606
  text-decoration: none;
604
607
  }
608
+ .e-calendar .e-header .e-title:focus,
609
+ .e-bigger.e-small .e-calendar .e-header .e-title:focus {
610
+ box-shadow: 0 0 0 1px #212121;
611
+ background: none;
612
+ text-decoration: none;
613
+ }
614
+ .e-calendar .e-header .e-title:active,
615
+ .e-bigger.e-small .e-calendar .e-header .e-title:active {
616
+ box-shadow: none;
617
+ background: #fff;
618
+ text-decoration: none;
619
+ }
605
620
  .e-calendar .e-header .e-prev:hover > span, .e-calendar .e-header .e-next:hover > span,
606
621
  .e-bigger.e-small .e-calendar .e-header .e-prev:hover > span,
607
622
  .e-bigger.e-small .e-calendar .e-header .e-next:hover > span {
@@ -614,6 +629,11 @@ ejs-calendar {
614
629
  .e-bigger.e-small .e-calendar .e-header .e-next:hover {
615
630
  background: none;
616
631
  }
632
+ .e-calendar .e-header .e-prev:focus, .e-calendar .e-header .e-next:focus,
633
+ .e-bigger.e-small .e-calendar .e-header .e-prev:focus,
634
+ .e-bigger.e-small .e-calendar .e-header .e-next:focus {
635
+ box-shadow: 0 0 0 1px #212121;
636
+ }
617
637
  .e-calendar .e-header .e-prev:active, .e-calendar .e-header .e-next:active,
618
638
  .e-bigger.e-small .e-calendar .e-header .e-prev:active,
619
639
  .e-bigger.e-small .e-calendar .e-header .e-next:active {
@@ -832,4 +852,8 @@ ejs-calendar {
832
852
  to {
833
853
  transform: scale(1);
834
854
  }
855
+ }
856
+ .e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
857
+ box-shadow: 0 0 0 1px #212121;
858
+ border-radius: 50%;
835
859
  }
package/styles/calendar/material3-dark.css CHANGED
@@ -269,6 +269,9 @@ ejs-calendar {
269
269
  font-size: 14px;
270
270
  font-weight: 600;
271
271
  text-align: left;
272
+ padding: 0 5px;
273
+ border: none;
274
+ border-radius: 4px;
272
275
  }
273
276
  .e-calendar .e-header .e-title,
274
277
  .e-bigger.e-small .e-calendar .e-header .e-title {
@@ -657,10 +660,22 @@ ejs-calendar {
657
660
  }
658
661
  .e-calendar .e-header .e-title:hover,
659
662
  .e-bigger.e-small .e-calendar .e-header .e-title:hover {
660
- color: rgba(var(--color-sf-on-surface));
663
+ background: rgba(var(--color-sf-on-surface), 0.08);
661
664
  cursor: pointer;
662
665
  text-decoration: none;
663
666
  }
667
+ .e-calendar .e-header .e-title:focus,
668
+ .e-bigger.e-small .e-calendar .e-header .e-title:focus {
669
+ box-shadow: 0 0 0 1px rgba(var(--color-sf-primary));
670
+ background: none;
671
+ text-decoration: none;
672
+ }
673
+ .e-calendar .e-header .e-title:active,
674
+ .e-bigger.e-small .e-calendar .e-header .e-title:active {
675
+ box-shadow: none;
676
+ background: rgba(var(--color-sf-on-surface), 0.12);
677
+ text-decoration: none;
678
+ }
664
679
  .e-calendar .e-header .e-prev:hover > span, .e-calendar .e-header .e-next:hover > span,
665
680
  .e-bigger.e-small .e-calendar .e-header .e-prev:hover > span,
666
681
  .e-bigger.e-small .e-calendar .e-header .e-next:hover > span {
@@ -673,6 +688,11 @@ ejs-calendar {
673
688
  .e-bigger.e-small .e-calendar .e-header .e-next:hover {
674
689
  background: rgba(var(--color-sf-on-surface), 0.08);
675
690
  }
691
+ .e-calendar .e-header .e-prev:focus, .e-calendar .e-header .e-next:focus,
692
+ .e-bigger.e-small .e-calendar .e-header .e-prev:focus,
693
+ .e-bigger.e-small .e-calendar .e-header .e-next:focus {
694
+ box-shadow: 0 0 0 1px rgba(var(--color-sf-primary));
695
+ }
676
696
  .e-calendar .e-header .e-prev:active, .e-calendar .e-header .e-next:active,
677
697
  .e-bigger.e-small .e-calendar .e-header .e-prev:active,
678
698
  .e-bigger.e-small .e-calendar .e-header .e-next:active {
@@ -891,4 +911,8 @@ ejs-calendar {
891
911
  to {
892
912
  transform: scale(1);
893
913
  }
914
+ }
915
+ .e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
916
+ box-shadow: 0 0 0 1px rgba(var(--color-sf-primary));
917
+ border-radius: 32px;
894
918
  }
package/styles/calendar/material3.css CHANGED
@@ -325,6 +325,9 @@ ejs-calendar {
325
325
  font-size: 14px;
326
326
  font-weight: 600;
327
327
  text-align: left;
328
+ padding: 0 5px;
329
+ border: none;
330
+ border-radius: 4px;
328
331
  }
329
332
  .e-calendar .e-header .e-title,
330
333
  .e-bigger.e-small .e-calendar .e-header .e-title {
@@ -713,10 +716,22 @@ ejs-calendar {
713
716
  }
714
717
  .e-calendar .e-header .e-title:hover,
715
718
  .e-bigger.e-small .e-calendar .e-header .e-title:hover {
716
- color: rgba(var(--color-sf-on-surface));
719
+ background: rgba(var(--color-sf-on-surface), 0.08);
717
720
  cursor: pointer;
718
721
  text-decoration: none;
719
722
  }
723
+ .e-calendar .e-header .e-title:focus,
724
+ .e-bigger.e-small .e-calendar .e-header .e-title:focus {
725
+ box-shadow: 0 0 0 1px rgba(var(--color-sf-primary));
726
+ background: none;
727
+ text-decoration: none;
728
+ }
729
+ .e-calendar .e-header .e-title:active,
730
+ .e-bigger.e-small .e-calendar .e-header .e-title:active {
731
+ box-shadow: none;
732
+ background: rgba(var(--color-sf-on-surface), 0.12);
733
+ text-decoration: none;
734
+ }
720
735
  .e-calendar .e-header .e-prev:hover > span, .e-calendar .e-header .e-next:hover > span,
721
736
  .e-bigger.e-small .e-calendar .e-header .e-prev:hover > span,
722
737
  .e-bigger.e-small .e-calendar .e-header .e-next:hover > span {
@@ -729,6 +744,11 @@ ejs-calendar {
729
744
  .e-bigger.e-small .e-calendar .e-header .e-next:hover {
730
745
  background: rgba(var(--color-sf-on-surface), 0.08);
731
746
  }
747
+ .e-calendar .e-header .e-prev:focus, .e-calendar .e-header .e-next:focus,
748
+ .e-bigger.e-small .e-calendar .e-header .e-prev:focus,
749
+ .e-bigger.e-small .e-calendar .e-header .e-next:focus {
750
+ box-shadow: 0 0 0 1px rgba(var(--color-sf-primary));
751
+ }
732
752
  .e-calendar .e-header .e-prev:active, .e-calendar .e-header .e-next:active,
733
753
  .e-bigger.e-small .e-calendar .e-header .e-prev:active,
734
754
  .e-bigger.e-small .e-calendar .e-header .e-next:active {
@@ -947,4 +967,8 @@ ejs-calendar {
947
967
  to {
948
968
  transform: scale(1);
949
969
  }
970
+ }
971
+ .e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
972
+ box-shadow: 0 0 0 1px rgba(var(--color-sf-primary));
973
+ border-radius: 32px;
950
974
  }