@syncfusion/ej2-react-calendars 20.4.54 → 21.1.35

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 (63) hide show
  1. package/CHANGELOG.md +0 -15
  2. package/README.md +92 -79
  3. package/dist/ej2-react-calendars.min.js +2 -2
  4. package/dist/ej2-react-calendars.umd.min.js +2 -2
  5. package/dist/ej2-react-calendars.umd.min.js.map +1 -1
  6. package/dist/es6/ej2-react-calendars.es2015.js +5 -0
  7. package/dist/es6/ej2-react-calendars.es2015.js.map +1 -1
  8. package/package.json +9 -9
  9. package/src/calendar/calendar.component.d.ts +1 -0
  10. package/src/calendar/calendar.component.js +1 -0
  11. package/src/datepicker/datepicker.component.d.ts +1 -0
  12. package/src/datepicker/datepicker.component.js +1 -0
  13. package/src/daterangepicker/daterangepicker.component.d.ts +1 -0
  14. package/src/daterangepicker/daterangepicker.component.js +1 -0
  15. package/src/datetimepicker/datetimepicker.component.d.ts +1 -0
  16. package/src/datetimepicker/datetimepicker.component.js +1 -0
  17. package/src/timepicker/timepicker.component.d.ts +1 -0
  18. package/src/timepicker/timepicker.component.js +1 -0
  19. package/styles/bootstrap-dark.css +9 -8
  20. package/styles/bootstrap.css +9 -3
  21. package/styles/bootstrap4.css +6 -4
  22. package/styles/bootstrap5-dark.css +19 -17
  23. package/styles/bootstrap5.css +17 -15
  24. package/styles/calendar/bootstrap-dark.css +4 -3
  25. package/styles/calendar/bootstrap.css +3 -2
  26. package/styles/calendar/bootstrap4.css +3 -2
  27. package/styles/calendar/bootstrap5-dark.css +14 -13
  28. package/styles/calendar/bootstrap5.css +13 -12
  29. package/styles/calendar/fabric-dark.css +15 -5
  30. package/styles/calendar/fabric.css +12 -2
  31. package/styles/calendar/fluent-dark.css +51 -28
  32. package/styles/calendar/fluent.css +51 -28
  33. package/styles/calendar/highcontrast-light.css +3 -2
  34. package/styles/calendar/highcontrast.css +14 -4
  35. package/styles/calendar/material-dark.css +14 -4
  36. package/styles/calendar/material.css +12 -2
  37. package/styles/calendar/tailwind-dark.css +11 -10
  38. package/styles/calendar/tailwind.css +11 -10
  39. package/styles/daterangepicker/bootstrap-dark.css +5 -5
  40. package/styles/daterangepicker/bootstrap.css +6 -1
  41. package/styles/daterangepicker/bootstrap4.css +3 -2
  42. package/styles/daterangepicker/bootstrap5-dark.css +5 -4
  43. package/styles/daterangepicker/bootstrap5.css +4 -3
  44. package/styles/daterangepicker/fabric-dark.css +1 -1
  45. package/styles/daterangepicker/fabric.css +1 -1
  46. package/styles/daterangepicker/fluent-dark.css +33 -9
  47. package/styles/daterangepicker/fluent.css +33 -9
  48. package/styles/daterangepicker/highcontrast-light.css +1 -1
  49. package/styles/daterangepicker/highcontrast.css +1 -1
  50. package/styles/daterangepicker/material-dark.css +1 -1
  51. package/styles/daterangepicker/material.css +8 -2
  52. package/styles/daterangepicker/tailwind-dark.css +2 -2
  53. package/styles/daterangepicker/tailwind.css +2 -2
  54. package/styles/fabric-dark.css +16 -6
  55. package/styles/fabric.css +16 -4
  56. package/styles/fluent-dark.css +84 -37
  57. package/styles/fluent.css +84 -37
  58. package/styles/highcontrast-light.css +4 -3
  59. package/styles/highcontrast.css +15 -5
  60. package/styles/material-dark.css +15 -5
  61. package/styles/material.css +20 -4
  62. package/styles/tailwind-dark.css +13 -12
  63. package/styles/tailwind.css +13 -12
package/styles/highcontrast-light.css CHANGED
@@ -510,10 +510,11 @@ ejs-calendar {
510
510
  .e-small .e-calendar .e-header {
511
511
  height: 32px;
512
512
  }
513
- .e-small.e-calendar .e-header span,
514
- .e-small .e-calendar .e-header span {
513
+ .e-small.e-calendar .e-header button span,
514
+ .e-small .e-calendar .e-header button span {
515
515
  font-size: 12px;
516
516
  padding: 6px;
517
+ line-height: 14px;
517
518
  }
518
519
  .e-small.e-calendar .e-header .e-title,
519
520
  .e-small .e-calendar .e-header .e-title {
@@ -1353,7 +1354,7 @@ ejs-calendar {
1353
1354
  .e-daterangepicker.e-popup .e-separator,
1354
1355
  .e-bigger.e-small .e-daterangepicker.e-popup .e-separator {
1355
1356
  height: 1px;
1356
- margin: 0 16px;
1357
+ margin: 0;
1357
1358
  }
1358
1359
  .e-daterangepicker.e-popup .e-calendar,
1359
1360
  .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar {
package/styles/highcontrast.css CHANGED
@@ -126,6 +126,15 @@ ejs-calendar {
126
126
  -ms-touch-action: none;
127
127
  touch-action: none;
128
128
  }
129
+ .e-calendar .e-content td.e-disabled.e-today,
130
+ .e-bigger.e-small .e-calendar .e-content td.e-disabled.e-today {
131
+ opacity: 1;
132
+ }
133
+ .e-calendar .e-content td.e-disabled.e-today span.e-day,
134
+ .e-bigger.e-small .e-calendar .e-content td.e-disabled.e-today span.e-day {
135
+ box-shadow: inset 1px 0 #ffd939, inset 0 1px #ffd939, inset -1px 0 #ffd939, inset 0 -1px #ffd939;
136
+ color: none;
137
+ }
129
138
  .e-calendar .e-content td,
130
139
  .e-bigger.e-small .e-calendar .e-content td {
131
140
  cursor: pointer;
@@ -296,7 +305,7 @@ ejs-calendar {
296
305
  }
297
306
  .e-calendar .e-content span.e-day,
298
307
  .e-bigger.e-small .e-calendar .e-content span.e-day {
299
- border: 1px solid #000;
308
+ border: 1px solid transparent;
300
309
  font-size: 12px;
301
310
  font-weight: 500;
302
311
  height: 30px;
@@ -511,10 +520,11 @@ ejs-calendar {
511
520
  .e-small .e-calendar .e-header {
512
521
  height: 32px;
513
522
  }
514
- .e-small.e-calendar .e-header span,
515
- .e-small .e-calendar .e-header span {
523
+ .e-small.e-calendar .e-header button span,
524
+ .e-small .e-calendar .e-header button span {
516
525
  font-size: 12px;
517
526
  padding: 6px;
527
+ line-height: 14px;
518
528
  }
519
529
  .e-small.e-calendar .e-header .e-title,
520
530
  .e-small .e-calendar .e-header .e-title {
@@ -578,7 +588,7 @@ ejs-calendar {
578
588
  }
579
589
  .e-calendar .e-header a span,
580
590
  .e-bigger.e-small .e-calendar .e-header a span {
581
- border: 1px solid #000;
591
+ border: 1px solid transparent;
582
592
  color: #fff;
583
593
  }
584
594
  .e-calendar .e-header .e-title,
@@ -1356,7 +1366,7 @@ ejs-calendar {
1356
1366
  .e-daterangepicker.e-popup .e-separator,
1357
1367
  .e-bigger.e-small .e-daterangepicker.e-popup .e-separator {
1358
1368
  height: 1px;
1359
- margin: 0 16px;
1369
+ margin: 0;
1360
1370
  }
1361
1371
  .e-daterangepicker.e-popup .e-calendar,
1362
1372
  .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar {
package/styles/material-dark.css CHANGED
@@ -126,6 +126,15 @@ ejs-calendar {
126
126
  -ms-touch-action: none;
127
127
  touch-action: none;
128
128
  }
129
+ .e-calendar .e-content td.e-disabled.e-today,
130
+ .e-bigger.e-small .e-calendar .e-content td.e-disabled.e-today {
131
+ opacity: 1;
132
+ }
133
+ .e-calendar .e-content td.e-disabled.e-today span.e-day,
134
+ .e-bigger.e-small .e-calendar .e-content td.e-disabled.e-today span.e-day {
135
+ box-shadow: inset 1px 0 #00b0ff, inset 0 1px #00b0ff, inset -1px 0 #00b0ff, inset 0 -1px #00b0ff;
136
+ color: #808080;
137
+ }
129
138
  .e-calendar .e-content td,
130
139
  .e-bigger.e-small .e-calendar .e-content td {
131
140
  cursor: pointer;
@@ -354,7 +363,7 @@ ejs-calendar {
354
363
  flex-direction: row;
355
364
  -ms-flex-pack: end;
356
365
  justify-content: flex-end;
357
- padding: 0 10px 10px 10px;
366
+ padding: 10px 10px 10px 10px;
358
367
  text-align: center;
359
368
  width: 100%;
360
369
  }
@@ -479,7 +488,7 @@ ejs-calendar {
479
488
  .e-bigger.e-calendar .e-footer-container,
480
489
  *.e-bigger .e-calendar .e-footer-container {
481
490
  border-top: none;
482
- padding: 0 10px 10px 10px;
491
+ padding: 10px 10px 10px 10px;
483
492
  }
484
493
  .e-small.e-calendar,
485
494
  .e-small .e-calendar {
@@ -511,10 +520,11 @@ ejs-calendar {
511
520
  .e-small .e-calendar .e-header {
512
521
  height: 32px;
513
522
  }
514
- .e-small.e-calendar .e-header span,
515
- .e-small .e-calendar .e-header span {
523
+ .e-small.e-calendar .e-header button span,
524
+ .e-small .e-calendar .e-header button span {
516
525
  font-size: 12px;
517
526
  padding: 6px;
527
+ line-height: 14px;
518
528
  }
519
529
  .e-small.e-calendar .e-header .e-title,
520
530
  .e-small .e-calendar .e-header .e-title {
@@ -1472,7 +1482,7 @@ ejs-calendar {
1472
1482
  .e-daterangepicker.e-popup .e-separator,
1473
1483
  .e-bigger.e-small .e-daterangepicker.e-popup .e-separator {
1474
1484
  height: 1px;
1475
- margin: 0 16px;
1485
+ margin: 0;
1476
1486
  }
1477
1487
  .e-daterangepicker.e-popup .e-calendar,
1478
1488
  .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar {
package/styles/material.css CHANGED
@@ -127,6 +127,15 @@ ejs-calendar {
127
127
  -ms-touch-action: none;
128
128
  touch-action: none;
129
129
  }
130
+ .e-calendar .e-content td.e-disabled.e-today,
131
+ .e-bigger.e-small .e-calendar .e-content td.e-disabled.e-today {
132
+ opacity: 1;
133
+ }
134
+ .e-calendar .e-content td.e-disabled.e-today span.e-day,
135
+ .e-bigger.e-small .e-calendar .e-content td.e-disabled.e-today span.e-day {
136
+ box-shadow: inset 1px 0 #e3165b, inset 0 1px #e3165b, inset -1px 0 #e3165b, inset 0 -1px #e3165b;
137
+ color: #ccc;
138
+ }
130
139
  .e-calendar .e-content td,
131
140
  .e-bigger.e-small .e-calendar .e-content td {
132
141
  cursor: pointer;
@@ -512,10 +521,11 @@ ejs-calendar {
512
521
  .e-small .e-calendar .e-header {
513
522
  height: 32px;
514
523
  }
515
- .e-small.e-calendar .e-header span,
516
- .e-small .e-calendar .e-header span {
524
+ .e-small.e-calendar .e-header button span,
525
+ .e-small .e-calendar .e-header button span {
517
526
  font-size: 12px;
518
527
  padding: 6px;
528
+ line-height: 14px;
519
529
  }
520
530
  .e-small.e-calendar .e-header .e-title,
521
531
  .e-small .e-calendar .e-header .e-title {
@@ -1582,7 +1592,7 @@ ejs-calendar {
1582
1592
  .e-daterangepicker.e-popup .e-separator,
1583
1593
  .e-bigger.e-small .e-daterangepicker.e-popup .e-separator {
1584
1594
  height: 1px;
1585
- margin: 0 16px;
1595
+ margin: 0;
1586
1596
  }
1587
1597
  .e-daterangepicker.e-popup .e-calendar,
1588
1598
  .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar {
@@ -1787,6 +1797,11 @@ ejs-calendar {
1787
1797
  max-width: 246px;
1788
1798
  }
1789
1799
 
1800
+ .e-bigger .e-daterangepicker.e-popup,
1801
+ *.e-bigger.e-daterangepicker.e-popup,
1802
+ *.e-device.e-daterangepicker.e-popup {
1803
+ background-color: #fff;
1804
+ }
1790
1805
  .e-bigger .e-daterangepicker.e-popup.e-preset-wrapper,
1791
1806
  *.e-bigger.e-daterangepicker.e-popup.e-preset-wrapper,
1792
1807
  *.e-device.e-daterangepicker.e-popup.e-preset-wrapper {
@@ -2161,6 +2176,7 @@ ejs-calendar {
2161
2176
  height: 80%;
2162
2177
  }
2163
2178
  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-content.e-month table {
2179
+ display: table;
2164
2180
  border-spacing: unset;
2165
2181
  }
2166
2182
  .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-header {
@@ -2364,7 +2380,7 @@ ejs-calendar {
2364
2380
  .e-bigger .e-daterangepicker,
2365
2381
  *.e-bigger.e-daterangepicker,
2366
2382
  *.e-device.e-daterangepicker {
2367
- background-color: #fff;
2383
+ background-color: initial;
2368
2384
  padding: 0;
2369
2385
  }
2370
2386
  .e-bigger .e-daterangepicker .e-calendar th,
package/styles/tailwind-dark.css CHANGED
@@ -64,7 +64,7 @@ ejs-calendar {
64
64
  .e-bigger.e-small .e-calendar .e-header {
65
65
  background: none;
66
66
  display: table;
67
- font-weight: normal;
67
+ font-weight: 400;
68
68
  position: relative;
69
69
  text-align: center;
70
70
  width: 100%;
@@ -82,7 +82,7 @@ ejs-calendar {
82
82
  cursor: pointer;
83
83
  display: inline-block;
84
84
  font-size: 20px;
85
- font-weight: normal;
85
+ font-weight: 400;
86
86
  line-height: 16px;
87
87
  padding: 0;
88
88
  vertical-align: middle;
@@ -165,12 +165,12 @@ ejs-calendar {
165
165
  .e-bigger.e-small .e-calendar .e-content td.e-other-month > span.e-day,
166
166
  .e-bigger.e-small .e-calendar .e-content td.e-other-year > span.e-day {
167
167
  display: inline-block;
168
- font-weight: normal;
168
+ font-weight: 400;
169
169
  }
170
170
  .e-calendar .e-content tr.e-month-hide,
171
171
  .e-bigger.e-small .e-calendar .e-content tr.e-month-hide {
172
172
  display: none;
173
- font-weight: normal;
173
+ font-weight: 400;
174
174
  }
175
175
  .e-calendar .e-content tr.e-month-hide, .e-calendar .e-content td.e-other-month, .e-calendar .e-content td.e-other-year,
176
176
  .e-bigger.e-small .e-calendar .e-content tr.e-month-hide,
@@ -303,7 +303,7 @@ ejs-calendar {
303
303
  .e-bigger.e-small .e-calendar .e-content span.e-day {
304
304
  border: none;
305
305
  font-size: 14px;
306
- font-weight: normal;
306
+ font-weight: 400;
307
307
  height: 30px;
308
308
  line-height: 30px;
309
309
  width: 30px;
@@ -337,7 +337,7 @@ ejs-calendar {
337
337
  .e-calendar .e-content.e-year td > span.e-day, .e-calendar .e-content.e-decade td > span.e-day,
338
338
  .e-bigger.e-small .e-calendar .e-content.e-year td > span.e-day,
339
339
  .e-bigger.e-small .e-calendar .e-content.e-decade td > span.e-day {
340
- font-weight: normal;
340
+ font-weight: 400;
341
341
  height: 50px;
342
342
  line-height: 50px;
343
343
  width: 50px;
@@ -476,7 +476,7 @@ ejs-calendar {
476
476
  .e-bigger.e-calendar .e-content.e-year span.e-day,
477
477
  *.e-bigger .e-calendar .e-content.e-year span.e-day {
478
478
  font-size: 16px;
479
- font-weight: normal;
479
+ font-weight: 400;
480
480
  }
481
481
  .e-bigger.e-calendar .e-content.e-month table,
482
482
  *.e-bigger .e-calendar .e-content.e-month table {
@@ -570,10 +570,11 @@ ejs-calendar {
570
570
  .e-small .e-calendar .e-header {
571
571
  height: 24px;
572
572
  }
573
- .e-small.e-calendar .e-header span,
574
- .e-small .e-calendar .e-header span {
573
+ .e-small.e-calendar .e-header button span,
574
+ .e-small .e-calendar .e-header button span {
575
575
  font-size: 18px;
576
576
  padding: 0;
577
+ line-height: 14px;
577
578
  }
578
579
  .e-small.e-calendar .e-header .e-title,
579
580
  .e-small .e-calendar .e-header .e-title {
@@ -707,7 +708,7 @@ ejs-calendar {
707
708
  .e-bigger.e-small .e-calendar .e-header .e-next.e-disabled span,
708
709
  .e-bigger.e-small .e-calendar .e-header .e-prev.e-disabled span {
709
710
  color: #6b7280;
710
- font-weight: normal;
711
+ font-weight: 400;
711
712
  }
712
713
  .e-calendar .e-header .e-next.e-disabled, .e-calendar .e-header .e-prev.e-disabled,
713
714
  .e-bigger.e-small .e-calendar .e-header .e-next.e-disabled,
@@ -1498,7 +1499,7 @@ ejs-calendar {
1498
1499
  line-height: 24px;
1499
1500
  width: auto;
1500
1501
  float: none;
1501
- font-weight: normal;
1502
+ font-weight: 400;
1502
1503
  margin-left: 0;
1503
1504
  }
1504
1505
  .e-daterangepicker.e-popup .e-calendar .e-header.e-month, .e-daterangepicker.e-popup .e-calendar .e-header.e-year, .e-daterangepicker.e-popup .e-calendar .e-header.e-decade,
@@ -1616,7 +1617,7 @@ ejs-calendar {
1616
1617
  }
1617
1618
  .e-daterangepicker.e-popup .e-presets .e-ul li.e-list-item,
1618
1619
  .e-bigger.e-small .e-daterangepicker.e-popup .e-presets .e-ul li.e-list-item {
1619
- font-size: 13px;
1620
+ font-size: 12px;
1620
1621
  height: 36px;
1621
1622
  line-height: 36px;
1622
1623
  }
package/styles/tailwind.css CHANGED
@@ -64,7 +64,7 @@ ejs-calendar {
64
64
  .e-bigger.e-small .e-calendar .e-header {
65
65
  background: none;
66
66
  display: table;
67
- font-weight: normal;
67
+ font-weight: 400;
68
68
  position: relative;
69
69
  text-align: center;
70
70
  width: 100%;
@@ -82,7 +82,7 @@ ejs-calendar {
82
82
  cursor: pointer;
83
83
  display: inline-block;
84
84
  font-size: 20px;
85
- font-weight: normal;
85
+ font-weight: 400;
86
86
  line-height: 16px;
87
87
  padding: 0;
88
88
  vertical-align: middle;
@@ -165,12 +165,12 @@ ejs-calendar {
165
165
  .e-bigger.e-small .e-calendar .e-content td.e-other-month > span.e-day,
166
166
  .e-bigger.e-small .e-calendar .e-content td.e-other-year > span.e-day {
167
167
  display: inline-block;
168
- font-weight: normal;
168
+ font-weight: 400;
169
169
  }
170
170
  .e-calendar .e-content tr.e-month-hide,
171
171
  .e-bigger.e-small .e-calendar .e-content tr.e-month-hide {
172
172
  display: none;
173
- font-weight: normal;
173
+ font-weight: 400;
174
174
  }
175
175
  .e-calendar .e-content tr.e-month-hide, .e-calendar .e-content td.e-other-month, .e-calendar .e-content td.e-other-year,
176
176
  .e-bigger.e-small .e-calendar .e-content tr.e-month-hide,
@@ -303,7 +303,7 @@ ejs-calendar {
303
303
  .e-bigger.e-small .e-calendar .e-content span.e-day {
304
304
  border: none;
305
305
  font-size: 14px;
306
- font-weight: normal;
306
+ font-weight: 400;
307
307
  height: 30px;
308
308
  line-height: 30px;
309
309
  width: 30px;
@@ -337,7 +337,7 @@ ejs-calendar {
337
337
  .e-calendar .e-content.e-year td > span.e-day, .e-calendar .e-content.e-decade td > span.e-day,
338
338
  .e-bigger.e-small .e-calendar .e-content.e-year td > span.e-day,
339
339
  .e-bigger.e-small .e-calendar .e-content.e-decade td > span.e-day {
340
- font-weight: normal;
340
+ font-weight: 400;
341
341
  height: 50px;
342
342
  line-height: 50px;
343
343
  width: 50px;
@@ -476,7 +476,7 @@ ejs-calendar {
476
476
  .e-bigger.e-calendar .e-content.e-year span.e-day,
477
477
  *.e-bigger .e-calendar .e-content.e-year span.e-day {
478
478
  font-size: 16px;
479
- font-weight: normal;
479
+ font-weight: 400;
480
480
  }
481
481
  .e-bigger.e-calendar .e-content.e-month table,
482
482
  *.e-bigger .e-calendar .e-content.e-month table {
@@ -570,10 +570,11 @@ ejs-calendar {
570
570
  .e-small .e-calendar .e-header {
571
571
  height: 24px;
572
572
  }
573
- .e-small.e-calendar .e-header span,
574
- .e-small .e-calendar .e-header span {
573
+ .e-small.e-calendar .e-header button span,
574
+ .e-small .e-calendar .e-header button span {
575
575
  font-size: 18px;
576
576
  padding: 0;
577
+ line-height: 14px;
577
578
  }
578
579
  .e-small.e-calendar .e-header .e-title,
579
580
  .e-small .e-calendar .e-header .e-title {
@@ -707,7 +708,7 @@ ejs-calendar {
707
708
  .e-bigger.e-small .e-calendar .e-header .e-next.e-disabled span,
708
709
  .e-bigger.e-small .e-calendar .e-header .e-prev.e-disabled span {
709
710
  color: #9ca3af;
710
- font-weight: normal;
711
+ font-weight: 400;
711
712
  }
712
713
  .e-calendar .e-header .e-next.e-disabled, .e-calendar .e-header .e-prev.e-disabled,
713
714
  .e-bigger.e-small .e-calendar .e-header .e-next.e-disabled,
@@ -1498,7 +1499,7 @@ ejs-calendar {
1498
1499
  line-height: 24px;
1499
1500
  width: auto;
1500
1501
  float: none;
1501
- font-weight: normal;
1502
+ font-weight: 400;
1502
1503
  margin-left: 0;
1503
1504
  }
1504
1505
  .e-daterangepicker.e-popup .e-calendar .e-header.e-month, .e-daterangepicker.e-popup .e-calendar .e-header.e-year, .e-daterangepicker.e-popup .e-calendar .e-header.e-decade,
@@ -1616,7 +1617,7 @@ ejs-calendar {
1616
1617
  }
1617
1618
  .e-daterangepicker.e-popup .e-presets .e-ul li.e-list-item,
1618
1619
  .e-bigger.e-small .e-daterangepicker.e-popup .e-presets .e-ul li.e-list-item {
1619
- font-size: 13px;
1620
+ font-size: 12px;
1620
1621
  height: 36px;
1621
1622
  line-height: 36px;
1622
1623
  }