@progress/kendo-themes-html 5.10.1-dev.0 → 5.10.1-dev.2

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 (4) hide show
  1. package/dist/scheduler/tests/scheduler-react-timeline.js +410 -11
  2. package/dist/scheduler/tests/scheduler-react-timeline.js.map +2 -2
  3. package/package.json +2 -2
  4. package/src/scheduler/tests/scheduler-react-timeline.tsx +242 -11
package/src/scheduler/tests/scheduler-react-timeline.tsx CHANGED
@@ -18,7 +18,7 @@ root.render(
18
18
  <>
19
19
  <style>{style}</style>
20
20
  <div id="test-area" className="k-d-grid k-grid-cols-1">
21
- <div className="k-widget k-scheduler k-scheduler-flex" style={{ height: "900px" }} >
21
+ <div className="k-widget k-scheduler k-scheduler-flex" style={{ height: "400px" }} >
22
22
  <div className="k-scheduler-toolbar k-toolbar">
23
23
  <span className="k-button-group k-scheduler-navigation">
24
24
  <Button>Today</Button>
@@ -47,14 +47,14 @@ root.render(
47
47
  <div className="k-scheduler-group k-group-horizontal">
48
48
  <div className="k-scheduler-row">
49
49
  <div className="k-sticky-cell">
50
- <div className="k-scheduler-cell k-side-cell" style={{ minWidth: "62px" }} ></div>
50
+ <div className="k-scheduler-cell k-side-cell" style={{ minWidth: "66px" }} ></div>
51
51
  </div>
52
52
  <div className="k-scheduler-cell k-heading-cell">Meeting Room 101</div>
53
53
  <div className="k-scheduler-cell k-heading-cell">Meeting Room 201</div>
54
54
  </div>
55
55
  <div className="k-scheduler-row">
56
56
  <div className="k-sticky-cell">
57
- <div className="k-scheduler-cell k-side-cell" style={{ minWidth: "62px" }} ></div>
57
+ <div className="k-scheduler-cell k-side-cell" style={{ minWidth: "66px" }} ></div>
58
58
  </div>
59
59
  <div className="k-scheduler-cell k-heading-cell">Peter</div>
60
60
  <div className="k-scheduler-cell k-heading-cell">Alex</div>
@@ -63,7 +63,7 @@ root.render(
63
63
  </div>
64
64
  <div className="k-scheduler-row">
65
65
  <div className="k-sticky-cell">
66
- <div className="k-scheduler-cell k-side-cell" style={{ minWidth: "62px" }} ></div>
66
+ <div className="k-scheduler-cell k-side-cell" style={{ minWidth: "66px" }} ></div>
67
67
  </div>
68
68
  <div className="k-scheduler-cell k-group-cell">
69
69
  <div className="k-scheduler-row">
@@ -136,7 +136,7 @@ root.render(
136
136
  <div className="k-scheduler-group k-group-horizontal">
137
137
  <div className="k-scheduler-row">
138
138
  <div className="k-sticky-cell">
139
- <div className="k-scheduler-cell k-heading-cell k-side-cell k-scheduler-times-all-day" style={{ minWidth: "62px" }} >All events</div>
139
+ <div className="k-scheduler-cell k-heading-cell k-side-cell k-scheduler-times-all-day" style={{ minWidth: "66px" }} >All events</div>
140
140
  </div>
141
141
  <div className="k-scheduler-cell k-group-cell">
142
142
  <div className="k-scheduler-row">
@@ -150,8 +150,8 @@ root.render(
150
150
  <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
151
151
  <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
152
152
  <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "36px" }} ></div>
153
- <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "62px" }} ></div>
154
- <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "62px" }} ></div>
153
+ <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "66px" }} ></div>
154
+ <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "66px" }} ></div>
155
155
  <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "36px" }} ></div>
156
156
  <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
157
157
  <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
@@ -172,8 +172,8 @@ root.render(
172
172
  <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
173
173
  <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
174
174
  <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "36px" }} ></div>
175
- <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "62px" }} ></div>
176
- <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "62px" }} ></div>
175
+ <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "66px" }} ></div>
176
+ <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "66px" }} ></div>
177
177
  <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "36px" }} ></div>
178
178
  <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
179
179
  <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
@@ -306,7 +306,7 @@ root.render(
306
306
  </div>
307
307
  <span className="k-event-actions"><a className="k-link k-event-delete"><Icon name="x"></Icon></a></span><span className="k-resize-handle k-resize-w"></span><span className="k-resize-handle k-resize-e"></span>
308
308
  </div>
309
- <div className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: '0px', left: "4629px", width: "395px", height: "25px" }} >
309
+ <div className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: '0px', left: "4669px", width: "395px", height: "25px" }} >
310
310
  <span className="k-event-actions"></span>
311
311
  <div>
312
312
  <div className="k-event-template">Team planning meeting</div>
@@ -334,7 +334,7 @@ root.render(
334
334
  </div>
335
335
  <span className="k-event-actions"><a className="k-link k-event-delete"><Icon name="x"></Icon></a></span><span className="k-resize-handle k-resize-w"></span><span className="k-resize-handle k-resize-e"></span>
336
336
  </div>
337
- <div className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: "52px", left: "4629px", width: "197px", height: "25px" }} >
337
+ <div className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: "52px", left: "4669px", width: "197px", height: "25px" }} >
338
338
  <span className="k-event-actions"></span>
339
339
  <div>
340
340
  <div className="k-event-template">Replace the printer on the 1st floor</div>
@@ -446,6 +446,237 @@ root.render(
446
446
  <Button icon="clock" className="k-scheduler-fullday">Show full day</Button>
447
447
  </div>
448
448
  </div>
449
+ <span></span>
450
+
451
+ <span>Scheduler with Slot Templates</span>
452
+ <div className="k-widget k-scheduler k-scheduler-flex" style={{ height: "400px" }} >
453
+ <div className="k-scheduler-toolbar k-toolbar">
454
+ <span className="k-button-group k-scheduler-navigation">
455
+ <Button>Today</Button>
456
+ <Button icon="caret-alt-left"></Button>
457
+ <Button icon="caret-alt-right"></Button>
458
+ </span>
459
+ <Button icon="calendar" className="k-nav-current" fillMode="flat" >
460
+ Wednesday, June 24, 2020
461
+ </Button>
462
+ <span className="k-spacer"></span>
463
+ <span className="k-scheduler-views-wrapper">
464
+ <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">
465
+ <option>Timeline</option>
466
+ </select>
467
+ <span className="k-button-group k-scheduler-views">
468
+ <Button>Day</Button>
469
+ <Button>Week</Button>
470
+ <Button>Month</Button>
471
+ <Button selected>Timeline</Button>
472
+ <Button>Agenda</Button>
473
+ </span>
474
+ </span>
475
+ </div>
476
+ <div className="k-scheduler-layout k-scheduler-layout-flex k-scheduler-timeline-view">
477
+ <div className="k-scheduler-head" style={{ width: "7201px" }} >
478
+ <div className="k-scheduler-group k-group-horizontal">
479
+ <div className="k-scheduler-row">
480
+ <div className="k-sticky-cell">
481
+ <div className="k-scheduler-cell k-side-cell" style={{ minWidth: "66px" }} ></div>
482
+ </div>
483
+ <div className="k-scheduler-cell k-heading-cell">Meeting Room 101</div>
484
+ <div className="k-scheduler-cell k-heading-cell">Meeting Room 201</div>
485
+ </div>
486
+ <div className="k-scheduler-row">
487
+ <div className="k-sticky-cell">
488
+ <div className="k-scheduler-cell k-side-cell" style={{ minWidth: "66px" }} ></div>
489
+ </div>
490
+ <div className="k-scheduler-cell k-heading-cell">Peter</div>
491
+ <div className="k-scheduler-cell k-heading-cell">Alex</div>
492
+ <div className="k-scheduler-cell k-heading-cell">Peter</div>
493
+ <div className="k-scheduler-cell k-heading-cell">Alex</div>
494
+ </div>
495
+ <div className="k-scheduler-row">
496
+ <div className="k-sticky-cell">
497
+ <div className="k-scheduler-cell k-side-cell" style={{ minWidth: "66px" }} ></div>
498
+ </div>
499
+ <div className="k-scheduler-cell k-group-cell">
500
+ <div className="k-scheduler-row">
501
+ <div className="k-scheduler-cell k-heading-cell">Jun 24</div>
502
+ </div>
503
+ <div className="k-scheduler-row">
504
+ <div className="k-scheduler-cell k-heading-cell">8:00 AM</div>
505
+ <div className="k-scheduler-cell k-heading-cell">9:00 AM</div>
506
+ <div className="k-scheduler-cell k-heading-cell">10:00 AM</div>
507
+ <div className="k-scheduler-cell k-heading-cell">11:00 AM</div>
508
+ <div className="k-scheduler-cell k-heading-cell">12:00 PM</div>
509
+ <div className="k-scheduler-cell k-heading-cell">1:00 PM</div>
510
+ <div className="k-scheduler-cell k-heading-cell">2:00 PM</div>
511
+ <div className="k-scheduler-cell k-heading-cell">3:00 PM</div>
512
+ <div className="k-scheduler-cell k-heading-cell">4:00 PM</div>
513
+ </div>
514
+ </div>
515
+ <div className="k-scheduler-cell k-group-cell">
516
+ <div className="k-scheduler-row">
517
+ <div className="k-scheduler-cell k-heading-cell">Jun 24</div>
518
+ </div>
519
+ <div className="k-scheduler-row">
520
+ <div className="k-scheduler-cell k-heading-cell">8:00 AM</div>
521
+ <div className="k-scheduler-cell k-heading-cell">9:00 AM</div>
522
+ <div className="k-scheduler-cell k-heading-cell">10:00 AM</div>
523
+ <div className="k-scheduler-cell k-heading-cell">11:00 AM</div>
524
+ <div className="k-scheduler-cell k-heading-cell">12:00 PM</div>
525
+ <div className="k-scheduler-cell k-heading-cell">1:00 PM</div>
526
+ <div className="k-scheduler-cell k-heading-cell">2:00 PM</div>
527
+ <div className="k-scheduler-cell k-heading-cell">3:00 PM</div>
528
+ <div className="k-scheduler-cell k-heading-cell">4:00 PM</div>
529
+ </div>
530
+ </div>
531
+ <div className="k-scheduler-cell k-group-cell">
532
+ <div className="k-scheduler-row">
533
+ <div className="k-scheduler-cell k-heading-cell">Jun 24</div>
534
+ </div>
535
+ <div className="k-scheduler-row">
536
+ <div className="k-scheduler-cell k-heading-cell">8:00 AM</div>
537
+ <div className="k-scheduler-cell k-heading-cell">9:00 AM</div>
538
+ <div className="k-scheduler-cell k-heading-cell">10:00 AM</div>
539
+ <div className="k-scheduler-cell k-heading-cell">11:00 AM</div>
540
+ <div className="k-scheduler-cell k-heading-cell">12:00 PM</div>
541
+ <div className="k-scheduler-cell k-heading-cell">1:00 PM</div>
542
+ <div className="k-scheduler-cell k-heading-cell">2:00 PM</div>
543
+ <div className="k-scheduler-cell k-heading-cell">3:00 PM</div>
544
+ <div className="k-scheduler-cell k-heading-cell">4:00 PM</div>
545
+ </div>
546
+ </div>
547
+ <div className="k-scheduler-cell k-group-cell">
548
+ <div className="k-scheduler-row">
549
+ <div className="k-scheduler-cell k-heading-cell">Jun 24</div>
550
+ </div>
551
+ <div className="k-scheduler-row">
552
+ <div className="k-scheduler-cell k-heading-cell">8:00 AM</div>
553
+ <div className="k-scheduler-cell k-heading-cell">9:00 AM</div>
554
+ <div className="k-scheduler-cell k-heading-cell">10:00 AM</div>
555
+ <div className="k-scheduler-cell k-heading-cell">11:00 AM</div>
556
+ <div className="k-scheduler-cell k-heading-cell">12:00 PM</div>
557
+ <div className="k-scheduler-cell k-heading-cell">1:00 PM</div>
558
+ <div className="k-scheduler-cell k-heading-cell">2:00 PM</div>
559
+ <div className="k-scheduler-cell k-heading-cell">3:00 PM</div>
560
+ <div className="k-scheduler-cell k-heading-cell">4:00 PM</div>
561
+ </div>
562
+ </div>
563
+ </div>
564
+ </div>
565
+ </div>
566
+ <div className="k-scheduler-body" style={{ width: "7201px" }} >
567
+ <div className="k-scheduler-group k-group-horizontal">
568
+ <div className="k-scheduler-row">
569
+ <div className="k-sticky-cell">
570
+ <div className="k-scheduler-cell k-heading-cell k-side-cell k-scheduler-times-all-day" style={{ minWidth: "66px" }} >All events</div>
571
+ </div>
572
+ <div className="k-scheduler-cell k-group-cell">
573
+ <div className="k-scheduler-row">
574
+ <div className="k-scheduler-cell k-slot-cell" style={{ backgroundColor: "#f5f5f5" }} >
575
+ <div className="!k-pos-absolute">Start</div>
576
+ </div>
577
+ <div className="k-scheduler-cell k-slot-cell" ></div>
578
+ <div className="k-scheduler-cell k-slot-cell" style={{ backgroundColor: "#f5f5f5" }} >
579
+ <div className="!k-pos-absolute">Start</div>
580
+ </div>
581
+ <div className="k-scheduler-cell k-slot-cell" style={{ backgroundColor: "#f5f5f5" }} >
582
+ <div className="!k-pos-absolute">End</div>
583
+ </div>
584
+ <div className="k-scheduler-cell k-slot-cell" style={{ backgroundColor: "#f5f5f5" }} >
585
+ <div className="!k-pos-absolute">Start</div>
586
+ </div>
587
+ <div className="k-scheduler-cell k-slot-cell" style={{ backgroundColor: "#f5f5f5" }} >
588
+ <div className="!k-pos-absolute">End</div>
589
+ </div>
590
+ <div className="k-scheduler-cell k-slot-cell" ></div>
591
+ <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
592
+ <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
593
+ <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "36px" }} ></div>
594
+ <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "62px" }} ></div>
595
+ <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "62px" }} ></div>
596
+ <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "36px", backgroundColor: "#f5f5f5" }} >
597
+ <div className="!k-pos-absolute">Start</div>
598
+ </div>
599
+ <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
600
+ <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
601
+ <div className="k-scheduler-cell k-slot-cell"></div>
602
+ <div className="k-scheduler-cell k-slot-cell"></div>
603
+ <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "36px" }} ></div>
604
+ </div>
605
+ </div>
606
+ <div className="k-scheduler-cell k-group-cell">
607
+ <div className="k-scheduler-row">
608
+ <div className="k-scheduler-cell k-slot-cell"></div>
609
+ <div className="k-scheduler-cell k-slot-cell"></div>
610
+ <div className="k-scheduler-cell k-slot-cell"></div>
611
+ <div className="k-scheduler-cell k-slot-cell"></div>
612
+ <div className="k-scheduler-cell k-slot-cell"></div>
613
+ <div className="k-scheduler-cell k-slot-cell"></div>
614
+ <div className="k-scheduler-cell k-slot-cell"></div>
615
+ <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
616
+ <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
617
+ <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "36px" }} ></div>
618
+ <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "62px" }} ></div>
619
+ <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "62px" }} ></div>
620
+ <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "36px" }} ></div>
621
+ <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
622
+ <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
623
+ <div className="k-scheduler-cell k-slot-cell"></div>
624
+ <div className="k-scheduler-cell k-slot-cell"></div>
625
+ <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "36px" }} ></div>
626
+ </div>
627
+ </div>
628
+ <div className="k-scheduler-cell k-group-cell">
629
+ <div className="k-scheduler-row">
630
+ <div className="k-scheduler-cell k-slot-cell"></div>
631
+ <div className="k-scheduler-cell k-slot-cell"></div>
632
+ <div className="k-scheduler-cell k-slot-cell"></div>
633
+ <div className="k-scheduler-cell k-slot-cell"></div>
634
+ <div className="k-scheduler-cell k-slot-cell"></div>
635
+ <div className="k-scheduler-cell k-slot-cell"></div>
636
+ <div className="k-scheduler-cell k-slot-cell"></div>
637
+ <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
638
+ <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
639
+ <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "36px" }} ></div>
640
+ <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "62px" }} ></div>
641
+ <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "62px" }} ></div>
642
+ <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "36px" }} ></div>
643
+ <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
644
+ <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
645
+ <div className="k-scheduler-cell k-slot-cell"></div>
646
+ <div className="k-scheduler-cell k-slot-cell"></div>
647
+ <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "36px" }} ></div>
648
+ </div>
649
+ </div>
650
+ <div className="k-scheduler-cell k-group-cell">
651
+ <div className="k-scheduler-row">
652
+ <div className="k-scheduler-cell k-slot-cell"></div>
653
+ <div className="k-scheduler-cell k-slot-cell"></div>
654
+ <div className="k-scheduler-cell k-slot-cell"></div>
655
+ <div className="k-scheduler-cell k-slot-cell"></div>
656
+ <div className="k-scheduler-cell k-slot-cell"></div>
657
+ <div className="k-scheduler-cell k-slot-cell"></div>
658
+ <div className="k-scheduler-cell k-slot-cell"></div>
659
+ <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
660
+ <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
661
+ <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "36px" }} ></div>
662
+ <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "62px" }} ></div>
663
+ <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "62px" }} ></div>
664
+ <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "36px" }} ></div>
665
+ <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
666
+ <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
667
+ <div className="k-scheduler-cell k-slot-cell"></div>
668
+ <div className="k-scheduler-cell k-slot-cell"></div>
669
+ <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "36px" }} ></div>
670
+ </div>
671
+ </div>
672
+ </div>
673
+ </div>
674
+ </div>
675
+ </div>
676
+ <div className="k-scheduler-footer k-toolbar">
677
+ <Button icon="clock" className="k-scheduler-fullday">Show full day</Button>
678
+ </div>
679
+ </div>
449
680
  </div>
450
681
  </>
451
682
  );