@progress/kendo-themes-html 14.4.1-dev.0 → 14.4.1-dev.1

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 (226) hide show
  1. package/dist/cjs/agent-response/agent-step.js +1 -1
  2. package/dist/cjs/agent-response/chain-of-thought.spec.js +1 -1
  3. package/dist/cjs/agent-response/reasoning.spec.js +1 -1
  4. package/dist/cjs/agent-response/templates/chain-of-thought-expanded.js +1 -1
  5. package/dist/cjs/agent-response/templates/chain-of-thought-normal.js +1 -1
  6. package/dist/cjs/agent-response/templates/reasoning-expanded.js +1 -1
  7. package/dist/cjs/agent-response/templates/reasoning-normal.js +1 -1
  8. package/dist/cjs/agent-response/templates/tool-call-expanded.js +1 -1
  9. package/dist/cjs/agent-response/templates/tool-call-normal.js +1 -1
  10. package/dist/cjs/agent-response/thought.spec.js +1 -1
  11. package/dist/cjs/agent-response/tool-call.spec.js +1 -1
  12. package/dist/cjs/chart-wizard/templates/chart-wizard-data.js +1 -1
  13. package/dist/cjs/chart-wizard/templates/chart-wizard-format.js +1 -1
  14. package/dist/cjs/chart-wizard/templates/chart-wizard-normal.js +1 -1
  15. package/dist/cjs/citation/citation-popover-view.spec.js +1 -0
  16. package/dist/cjs/citation/citation-popover.spec.js +1 -1
  17. package/dist/cjs/citation/templates/citation-opened.js +1 -1
  18. package/dist/cjs/datepicker/datepicker.spec.js +1 -1
  19. package/dist/cjs/datepicker/demos/datepicker.js +1 -1
  20. package/dist/cjs/datepicker/templates/datepicker-adaptive.js +1 -1
  21. package/dist/cjs/datepicker/templates/datepicker-disabled.js +1 -1
  22. package/dist/cjs/datepicker/templates/datepicker-invalid.js +1 -1
  23. package/dist/cjs/datepicker/templates/datepicker-normal.js +1 -1
  24. package/dist/cjs/datepicker/templates/datepicker-popup.js +1 -1
  25. package/dist/cjs/filter/demos/filter.js +1 -1
  26. package/dist/cjs/filter/templates/filter-normal.js +1 -1
  27. package/dist/cjs/filter/templates/filter-preview.js +1 -1
  28. package/dist/cjs/form/demos/form.js +1 -1
  29. package/dist/cjs/form/form-field.js +1 -1
  30. package/dist/cjs/form/form.spec.js +1 -1
  31. package/dist/cjs/form/templates/form-grid-layout.js +1 -1
  32. package/dist/cjs/form/templates/form-horizontal.js +1 -1
  33. package/dist/cjs/form/templates/form-normal.js +1 -1
  34. package/dist/cjs/form/templates/form-with-hints.js +1 -1
  35. package/dist/cjs/grid/templates/grid-hierarchy.js +1 -1
  36. package/dist/cjs/imageeditor/templates/imageeditor-crop.js +1 -1
  37. package/dist/cjs/imageeditor/templates/imageeditor-normal.js +1 -1
  38. package/dist/cjs/imageeditor/templates/imageeditor-resize.js +1 -1
  39. package/dist/cjs/index.js +8 -8
  40. package/dist/cjs/pivotgrid/demos/pivotgrid.js +1 -1
  41. package/dist/cjs/pivotgrid/templates/pivotgrid-normal.js +1 -1
  42. package/dist/cjs/pivotgrid/templates/pivotgrid-with-configurator-disabled-actions.js +1 -1
  43. package/dist/cjs/pivotgrid/templates/pivotgrid-with-configurator-opened.js +1 -1
  44. package/dist/cjs/pivotgrid/templates/pivotgrid-with-configurator.js +1 -1
  45. package/dist/cjs/scheduler/demos/scheduler.js +1 -1
  46. package/dist/cjs/scheduler/scheduler-cell.spec.js +1 -1
  47. package/dist/cjs/scheduler/scheduler-event.spec.js +1 -1
  48. package/dist/cjs/scheduler/scheduler-toolbar.spec.js +1 -1
  49. package/dist/cjs/scheduler/templates/scheduler-agenda.js +1 -1
  50. package/dist/cjs/scheduler/templates/scheduler-day.js +1 -1
  51. package/dist/cjs/scheduler/templates/scheduler-flex-agenda.js +1 -1
  52. package/dist/cjs/scheduler/templates/scheduler-flex-day.js +1 -1
  53. package/dist/cjs/scheduler/templates/scheduler-flex-horizontal-grouping.js +1 -1
  54. package/dist/cjs/scheduler/templates/scheduler-flex-month.js +1 -1
  55. package/dist/cjs/scheduler/templates/scheduler-flex-timeline.js +1 -1
  56. package/dist/cjs/scheduler/templates/scheduler-flex-vertical-grouping.js +1 -1
  57. package/dist/cjs/scheduler/templates/scheduler-flex-week.js +1 -1
  58. package/dist/cjs/scheduler/templates/scheduler-flex-year.js +1 -1
  59. package/dist/cjs/scheduler/templates/scheduler-horizontal-grouping.js +1 -1
  60. package/dist/cjs/scheduler/templates/scheduler-month.js +1 -1
  61. package/dist/cjs/scheduler/templates/scheduler-timeline.js +1 -1
  62. package/dist/cjs/scheduler/templates/scheduler-vertical-grouping.js +1 -1
  63. package/dist/cjs/scheduler/templates/scheduler-week.js +1 -1
  64. package/dist/cjs/taskboard/demos/taskboard.js +1 -1
  65. package/dist/cjs/taskboard/taskboard.spec.js +1 -1
  66. package/dist/cjs/taskboard/templates/taskboard-normal.js +1 -1
  67. package/dist/cjs/taskboard/templates/taskboard-pane.js +1 -1
  68. package/dist/cjs/timepicker/demos/timepicker.js +1 -1
  69. package/dist/cjs/timepicker/templates/timepicker-adaptive.js +1 -1
  70. package/dist/cjs/timepicker/templates/timepicker-disabled.js +1 -1
  71. package/dist/cjs/timepicker/templates/timepicker-invalid.js +1 -1
  72. package/dist/cjs/timepicker/templates/timepicker-normal.js +1 -1
  73. package/dist/cjs/timepicker/templates/timepicker-popup.js +1 -1
  74. package/dist/cjs/timepicker/timepicker.spec.js +1 -1
  75. package/dist/esm/agent-response/agent-step.mjs +1 -1
  76. package/dist/esm/agent-response/chain-of-thought.spec.mjs +1 -1
  77. package/dist/esm/agent-response/reasoning.spec.mjs +1 -1
  78. package/dist/esm/agent-response/templates/chain-of-thought-expanded.mjs +1 -1
  79. package/dist/esm/agent-response/templates/chain-of-thought-normal.mjs +1 -1
  80. package/dist/esm/agent-response/templates/reasoning-expanded.mjs +1 -1
  81. package/dist/esm/agent-response/templates/reasoning-normal.mjs +1 -1
  82. package/dist/esm/agent-response/templates/tool-call-expanded.mjs +1 -1
  83. package/dist/esm/agent-response/templates/tool-call-normal.mjs +1 -1
  84. package/dist/esm/agent-response/thought.spec.mjs +1 -1
  85. package/dist/esm/agent-response/tool-call.spec.mjs +1 -1
  86. package/dist/esm/chart-wizard/templates/chart-wizard-data.mjs +1 -1
  87. package/dist/esm/chart-wizard/templates/chart-wizard-format.mjs +1 -1
  88. package/dist/esm/chart-wizard/templates/chart-wizard-normal.mjs +1 -1
  89. package/dist/esm/citation/citation-popover-view.spec.mjs +1 -0
  90. package/dist/esm/citation/citation-popover.spec.mjs +1 -1
  91. package/dist/esm/citation/templates/citation-opened.mjs +1 -1
  92. package/dist/esm/datepicker/datepicker.spec.mjs +1 -1
  93. package/dist/esm/datepicker/demos/datepicker.mjs +1 -1
  94. package/dist/esm/datepicker/templates/datepicker-adaptive.mjs +1 -1
  95. package/dist/esm/datepicker/templates/datepicker-disabled.mjs +1 -1
  96. package/dist/esm/datepicker/templates/datepicker-invalid.mjs +1 -1
  97. package/dist/esm/datepicker/templates/datepicker-normal.mjs +1 -1
  98. package/dist/esm/datepicker/templates/datepicker-popup.mjs +1 -1
  99. package/dist/esm/filter/demos/filter.mjs +1 -1
  100. package/dist/esm/filter/templates/filter-normal.mjs +1 -1
  101. package/dist/esm/filter/templates/filter-preview.mjs +1 -1
  102. package/dist/esm/form/demos/form.mjs +1 -1
  103. package/dist/esm/form/form-field.mjs +1 -1
  104. package/dist/esm/form/form.spec.mjs +1 -1
  105. package/dist/esm/form/templates/form-grid-layout.mjs +1 -1
  106. package/dist/esm/form/templates/form-horizontal.mjs +1 -1
  107. package/dist/esm/form/templates/form-normal.mjs +1 -1
  108. package/dist/esm/form/templates/form-with-hints.mjs +1 -1
  109. package/dist/esm/grid/templates/grid-hierarchy.mjs +1 -1
  110. package/dist/esm/imageeditor/templates/imageeditor-crop.mjs +1 -1
  111. package/dist/esm/imageeditor/templates/imageeditor-normal.mjs +1 -1
  112. package/dist/esm/imageeditor/templates/imageeditor-resize.mjs +1 -1
  113. package/dist/esm/index.mjs +8 -8
  114. package/dist/esm/pivotgrid/demos/pivotgrid.mjs +1 -1
  115. package/dist/esm/pivotgrid/templates/pivotgrid-normal.mjs +1 -1
  116. package/dist/esm/pivotgrid/templates/pivotgrid-with-configurator-disabled-actions.mjs +1 -1
  117. package/dist/esm/pivotgrid/templates/pivotgrid-with-configurator-opened.mjs +1 -1
  118. package/dist/esm/pivotgrid/templates/pivotgrid-with-configurator.mjs +1 -1
  119. package/dist/esm/scheduler/demos/scheduler.mjs +1 -1
  120. package/dist/esm/scheduler/scheduler-cell.spec.mjs +1 -1
  121. package/dist/esm/scheduler/scheduler-event.spec.mjs +1 -1
  122. package/dist/esm/scheduler/scheduler-toolbar.spec.mjs +1 -1
  123. package/dist/esm/scheduler/templates/scheduler-agenda.mjs +1 -1
  124. package/dist/esm/scheduler/templates/scheduler-day.mjs +1 -1
  125. package/dist/esm/scheduler/templates/scheduler-flex-agenda.mjs +1 -1
  126. package/dist/esm/scheduler/templates/scheduler-flex-day.mjs +1 -1
  127. package/dist/esm/scheduler/templates/scheduler-flex-horizontal-grouping.mjs +1 -1
  128. package/dist/esm/scheduler/templates/scheduler-flex-month.mjs +1 -1
  129. package/dist/esm/scheduler/templates/scheduler-flex-timeline.mjs +1 -1
  130. package/dist/esm/scheduler/templates/scheduler-flex-vertical-grouping.mjs +1 -1
  131. package/dist/esm/scheduler/templates/scheduler-flex-week.mjs +1 -1
  132. package/dist/esm/scheduler/templates/scheduler-flex-year.mjs +1 -1
  133. package/dist/esm/scheduler/templates/scheduler-horizontal-grouping.mjs +1 -1
  134. package/dist/esm/scheduler/templates/scheduler-month.mjs +1 -1
  135. package/dist/esm/scheduler/templates/scheduler-timeline.mjs +1 -1
  136. package/dist/esm/scheduler/templates/scheduler-vertical-grouping.mjs +1 -1
  137. package/dist/esm/scheduler/templates/scheduler-week.mjs +1 -1
  138. package/dist/esm/taskboard/demos/taskboard.mjs +1 -1
  139. package/dist/esm/taskboard/taskboard.spec.mjs +1 -1
  140. package/dist/esm/taskboard/templates/taskboard-normal.mjs +1 -1
  141. package/dist/esm/taskboard/templates/taskboard-pane.mjs +1 -1
  142. package/dist/esm/timepicker/demos/timepicker.mjs +1 -1
  143. package/dist/esm/timepicker/templates/timepicker-adaptive.mjs +1 -1
  144. package/dist/esm/timepicker/templates/timepicker-disabled.mjs +1 -1
  145. package/dist/esm/timepicker/templates/timepicker-invalid.mjs +1 -1
  146. package/dist/esm/timepicker/templates/timepicker-normal.mjs +1 -1
  147. package/dist/esm/timepicker/templates/timepicker-popup.mjs +1 -1
  148. package/dist/esm/timepicker/timepicker.spec.mjs +1 -1
  149. package/dist/types/agent-response/agent-step.d.ts +0 -2
  150. package/dist/types/agent-response/thought.spec.d.ts +0 -2
  151. package/dist/types/citation/citation-popover-view.spec.d.ts +18 -0
  152. package/dist/types/citation/citation-popover.spec.d.ts +0 -1
  153. package/dist/types/citation/index.d.ts +1 -0
  154. package/dist/types/datepicker/datepicker.spec.d.ts +1 -0
  155. package/dist/types/form/form-field.d.ts +1 -1
  156. package/dist/types/scheduler/scheduler-cell.spec.d.ts +1 -0
  157. package/dist/types/scheduler/scheduler-event.spec.d.ts +9 -3
  158. package/dist/types/scheduler/scheduler.spec.d.ts +19 -2
  159. package/dist/types/timepicker/timepicker.spec.d.ts +1 -0
  160. package/package.json +1 -1
  161. package/src/agent-response/agent-step.tsx +1 -9
  162. package/src/agent-response/templates/chain-of-thought-expanded.tsx +1 -1
  163. package/src/agent-response/templates/chain-of-thought-normal.tsx +1 -1
  164. package/src/agent-response/templates/reasoning-expanded.tsx +1 -1
  165. package/src/agent-response/templates/reasoning-normal.tsx +1 -1
  166. package/src/agent-response/templates/tool-call-expanded.tsx +1 -1
  167. package/src/agent-response/templates/tool-call-normal.tsx +1 -1
  168. package/src/agent-response/tests/chain-of-thought.tsx +3 -3
  169. package/src/agent-response/tests/reasoning.tsx +2 -2
  170. package/src/agent-response/tests/tool-call.tsx +19 -35
  171. package/src/agent-response/thought.spec.tsx +1 -9
  172. package/src/citation/citation-popover-view.spec.tsx +54 -0
  173. package/src/citation/citation-popover.spec.tsx +5 -7
  174. package/src/citation/index.ts +1 -0
  175. package/src/citation/templates/citation-opened.tsx +3 -6
  176. package/src/citation/tests/citation.tsx +19 -19
  177. package/src/datepicker/datepicker.spec.tsx +5 -2
  178. package/src/form/form-field.tsx +1 -1
  179. package/src/form/form.spec.tsx +4 -2
  180. package/src/grid/templates/grid-hierarchy.tsx +1 -1
  181. package/src/scheduler/scheduler-cell.spec.tsx +13 -6
  182. package/src/scheduler/scheduler-event.spec.tsx +108 -88
  183. package/src/scheduler/scheduler-toolbar.spec.tsx +7 -8
  184. package/src/scheduler/scheduler.spec.tsx +19 -2
  185. package/src/scheduler/templates/scheduler-agenda.tsx +9 -7
  186. package/src/scheduler/templates/scheduler-day.tsx +3 -6
  187. package/src/scheduler/templates/scheduler-flex-agenda.tsx +8 -6
  188. package/src/scheduler/templates/scheduler-flex-day.tsx +10 -11
  189. package/src/scheduler/templates/scheduler-flex-horizontal-grouping.tsx +6 -12
  190. package/src/scheduler/templates/scheduler-flex-month.tsx +13 -35
  191. package/src/scheduler/templates/scheduler-flex-timeline.tsx +8 -6
  192. package/src/scheduler/templates/scheduler-flex-vertical-grouping.tsx +4 -10
  193. package/src/scheduler/templates/scheduler-flex-week.tsx +15 -13
  194. package/src/scheduler/templates/scheduler-flex-year.tsx +9 -5
  195. package/src/scheduler/templates/scheduler-horizontal-grouping.tsx +5 -11
  196. package/src/scheduler/templates/scheduler-month.tsx +14 -35
  197. package/src/scheduler/templates/scheduler-timeline.tsx +9 -7
  198. package/src/scheduler/templates/scheduler-vertical-grouping.tsx +2 -2
  199. package/src/scheduler/templates/scheduler-week.tsx +19 -26
  200. package/src/scheduler/tests/scheduler-adaptive-agenda.tsx +17 -12
  201. package/src/scheduler/tests/scheduler-adaptive-day-resource-group.tsx +18 -27
  202. package/src/scheduler/tests/scheduler-adaptive-day.tsx +18 -27
  203. package/src/scheduler/tests/scheduler-adaptive-edit-no-height.tsx +9 -3
  204. package/src/scheduler/tests/scheduler-adaptive-edit-time-zones.tsx +10 -4
  205. package/src/scheduler/tests/scheduler-adaptive-edit.tsx +9 -3
  206. package/src/scheduler/tests/scheduler-adaptive-month.tsx +21 -28
  207. package/src/scheduler/tests/scheduler-agenda-view.tsx +7 -0
  208. package/src/scheduler/tests/scheduler-current-time-marker.tsx +28 -34
  209. package/src/scheduler/tests/scheduler-day-view.tsx +7 -0
  210. package/src/scheduler/tests/scheduler-edit-event-dialog.tsx +144 -0
  211. package/src/scheduler/tests/scheduler-events-popover.tsx +122 -0
  212. package/src/scheduler/tests/scheduler-events-responsive.tsx +71 -0
  213. package/src/scheduler/tests/scheduler-events.tsx +503 -508
  214. package/src/scheduler/tests/scheduler-month-view.tsx +7 -0
  215. package/src/scheduler/tests/scheduler-new-event-dialog.tsx +191 -0
  216. package/src/scheduler/tests/scheduler-quick-actions-popover.tsx +114 -0
  217. package/src/scheduler/tests/scheduler-react-timeline-multi.tsx +568 -673
  218. package/src/scheduler/tests/scheduler-recurrence-dialog.tsx +437 -0
  219. package/src/scheduler/tests/scheduler-timeline-view.tsx +7 -0
  220. package/src/scheduler/tests/scheduler-toolbar-responsive.tsx +226 -0
  221. package/src/scheduler/tests/scheduler-week-view.tsx +7 -0
  222. package/src/scheduler/tests/scheduler-year-view.tsx +3 -0
  223. package/src/timepicker/timepicker.spec.tsx +5 -2
  224. package/src/scheduler/tests/scheduler-edit-dialog.tsx +0 -103
  225. package/src/scheduler/tests/scheduler-editing-weekly.tsx +0 -128
  226. package/src/scheduler/tests/scheduler-tooltip.tsx +0 -82
package/src/scheduler/tests/scheduler-events.tsx CHANGED
@@ -1,512 +1,507 @@
1
- import { Button } from '../../button';
2
- import { ButtonGroup } from '../../button-group';
3
- import { SegmentedControl, SegmentedControlButton } from '../../segmented-control';
4
- import { SchedulerBody, SchedulerCell, SchedulerContent, SchedulerEvent, SchedulerHead, SchedulerHeader, SchedulerTable, SchedulerTimes, SchedulerToolbar, SchedulerWeek } from '..';
5
- import { Icon } from '../../icon';
1
+ import { Button } from "../../button";
2
+ import { ButtonGroup } from "../../button-group";
3
+ import { SegmentedControl, SegmentedControlButton } from "../../segmented-control";
4
+ import { SchedulerBody, SchedulerCell, SchedulerContent, SchedulerEvent, SchedulerHead, SchedulerHeader, SchedulerTable, SchedulerTimes, SchedulerToolbar, SchedulerWeek } from "..";
6
5
 
7
- export default () =>(
8
- <>
9
- <div id="test-area" className="k-d-grid k-grid-cols-1">
10
- <SchedulerWeek
11
- toolbar={
12
- <SchedulerToolbar>
13
- <ButtonGroup className="k-scheduler-navigation">
14
- <Button className="k-group-start">Today</Button>
15
- <Button icon="chevron-left"></Button>
16
- <Button className="k-group-end" icon="chevron-right"></Button>
17
- </ButtonGroup>
18
- <Button icon="calendar" className="k-nav-current" fillMode="flat" >
19
- Monday, June 10, 2013 - Friday, June 14, 2013
20
- </Button>
21
- <span className="k-spacer"></span>
22
- <SegmentedControl thumbStyles={{ width: "18%", left: "16%" }} className="k-scheduler-views">
23
- <SegmentedControlButton>Day</SegmentedControlButton>
24
- <SegmentedControlButton selected>Week</SegmentedControlButton>
25
- <SegmentedControlButton>Month</SegmentedControlButton>
26
- <SegmentedControlButton>Timeline</SegmentedControlButton>
27
- <SegmentedControlButton>Agenda</SegmentedControlButton>
28
- </SegmentedControl>
29
- </SchedulerToolbar>
30
- }
31
- footer={
32
- <>
33
- <SchedulerToolbar footer>
34
- <Button icon="clock" className="k-scheduler-fullday">Show business hours</Button>
35
- </SchedulerToolbar>
36
- </>
37
- }
38
- children={
39
- <>
6
+ const style = `
7
+ #test-area {
8
+ max-width: 1080px;
9
+ }
10
+ `;
11
+
12
+ export default () => (
13
+ <>
14
+ <style>{style}</style>
15
+ <div id="test-area" className="k-d-grid k-grid-cols-1">
16
+ <SchedulerWeek
17
+ toolbar={
18
+ <SchedulerToolbar>
19
+ <Button themeColor="primary" icon="plus" aria-label="Add new event">
20
+ New Event
21
+ </Button>
22
+ <ButtonGroup fillMode="flat">
23
+ <Button icon="chevron-left" fillMode="flat" aria-label="Navigate to previous period"></Button>
24
+ <Button icon="chevron-right" fillMode="flat" aria-label="Navigate to next period"></Button>
25
+ </ButtonGroup>
26
+ <Button icon="calendar" className="k-nav-current" fillMode="flat" aria-live="polite">
27
+ 10 June – 14 June
28
+ </Button>
29
+ <Button fillMode="flat">Today</Button>
30
+ <span className="k-spacer"></span>
31
+ <SegmentedControl thumbStyles={{ width: "18%", left: "16%" }} className="k-scheduler-views">
32
+ <SegmentedControlButton>Day</SegmentedControlButton>
33
+ <SegmentedControlButton selected>Week</SegmentedControlButton>
34
+ <SegmentedControlButton>Month</SegmentedControlButton>
35
+ <SegmentedControlButton>Timeline</SegmentedControlButton>
36
+ <SegmentedControlButton>Agenda</SegmentedControlButton>
37
+ </SegmentedControl>
38
+ </SchedulerToolbar>
39
+ }
40
+ footer={
41
+ <>
42
+ <SchedulerToolbar footer>
43
+ <Button icon="clock" className="k-scheduler-fullday">
44
+ Show business hours
45
+ </Button>
46
+ </SchedulerToolbar>
47
+ </>
48
+ }
49
+ children={
50
+ <>
51
+ <tbody>
52
+ <SchedulerHead as="tr">
53
+ <td>
54
+ <SchedulerTimes>
55
+ <SchedulerTable>
56
+ <tbody>
57
+ <tr style={{ height: "55px" }}>
58
+ <SchedulerCell as="th" />
59
+ </tr>
60
+ <tr style={{ height: "72px" }}>
61
+ <SchedulerCell as="th" allDay>
62
+ all day
63
+ </SchedulerCell>
64
+ </tr>
65
+ </tbody>
66
+ </SchedulerTable>
67
+ </SchedulerTimes>
68
+ </td>
69
+ <td>
70
+ <SchedulerHeader>
71
+ <SchedulerTable>
72
+ <tbody>
73
+ <tr>
74
+ <SchedulerCell as="th" dayText="Mon" text="10" colspan={1} />
75
+ <SchedulerCell as="th" dayText="Tue" text="11" colspan={1} />
76
+ <SchedulerCell as="th" className="k-today" dayText="Wed" text="12" colspan={1} />
77
+ <SchedulerCell as="th" dayText="Thu" text="13" colspan={1} />
78
+ <SchedulerCell as="th" dayText="Fri" text="14" colspan={1} />
79
+ </tr>
80
+ </tbody>
81
+ </SchedulerTable>
82
+ <div style={{ position: "relative" }}>
83
+ <SchedulerTable className="k-scheduler-header-all-day">
40
84
  <tbody>
41
- <SchedulerHead as="tr">
42
- <td>
43
- <SchedulerTimes>
44
- <SchedulerTable>
45
- <tbody>
46
- <tr style={{ height: "37px" }}>
47
- <SchedulerCell as="th" />
48
- </tr>
49
- <tr style={{ height: "72px" }}>
50
- <SchedulerCell as="th" allDay>all day</SchedulerCell>
51
- </tr>
52
- </tbody>
53
- </SchedulerTable>
54
- </SchedulerTimes>
55
- </td>
56
- <td>
57
- <SchedulerHeader>
58
- <SchedulerTable>
59
- <tbody>
60
- <tr>
61
- <SchedulerCell as="th" text="Mon 6/10" colspan={1} />
62
- <SchedulerCell as="th" text="Tue 6/11" colspan={1} />
63
- <SchedulerCell as="th" text="Wed 6/12" colspan={1} />
64
- <SchedulerCell as="th" text="Thu 6/13" colspan={1} />
65
- <SchedulerCell as="th" text="Fri 6/14" colspan={1} />
66
- </tr>
67
- </tbody>
68
- </SchedulerTable>
69
- <div style={{ position: "relative" }}>
70
- <SchedulerTable className="k-scheduler-header-all-day">
71
- <tbody>
72
- <tr style={{ height: "72px" }}>
73
- <SchedulerCell as="td" />
74
- <SchedulerCell as="td" />
75
- <SchedulerCell as="td" />
76
- <SchedulerCell as="td" />
77
- <SchedulerCell as="td" />
78
- </tr>
79
- </tbody>
80
- </SchedulerTable>
81
- <SchedulerEvent
82
- resizable="horizontal"
83
- eventPrefix={
84
- <Icon icon="chevron-left"></Icon>
85
- }
86
- eventSuffix={
87
- <>
88
- <a className="k-link k-event-delete"><Icon icon="x"></Icon></a>
89
- <Icon icon="chevron-right"></Icon>
90
- </>
91
- }>
92
- <div>
93
- <div className="k-event-template">Two Weeks in NZ</div>
94
- </div>
95
- </SchedulerEvent>
96
- </div>
97
- </SchedulerHeader>
98
- </td>
99
- </SchedulerHead>
100
- <SchedulerBody as="tr">
101
- <td>
102
- <SchedulerTimes style={{ height: "195px" }}>
103
- <SchedulerTable style={{ height: "1258px" }} >
104
- <tbody>
105
- <tr>
106
- <SchedulerCell as="th" rowspan={1}>7:00 AM</SchedulerCell>
107
- </tr>
108
- <tr>
109
- <SchedulerCell as="th"rowspan={1} cellType={[ "slot" ]} />
110
- </tr>
111
- <tr>
112
- <SchedulerCell as="th" rowspan={1}>8:00 AM</SchedulerCell>
113
- </tr>
114
- <tr>
115
- <SchedulerCell as="th"rowspan={1} cellType={[ "slot" ]} />
116
- </tr>
117
- <tr>
118
- <SchedulerCell as="th" rowspan={1}>9:00 AM</SchedulerCell>
119
- </tr>
120
- <tr>
121
- <SchedulerCell as="th"rowspan={1} cellType={[ "slot" ]} />
122
- </tr>
123
- <tr>
124
- <SchedulerCell as="th" rowspan={1}>10:00 AM</SchedulerCell>
125
- </tr>
126
- <tr>
127
- <SchedulerCell as="th"rowspan={1} cellType={[ "slot" ]} />
128
- </tr>
129
- <tr>
130
- <SchedulerCell as="th" rowspan={1}>11:00 AM</SchedulerCell>
131
- </tr>
132
- <tr>
133
- <SchedulerCell as="th"rowspan={1} cellType={[ "slot" ]} />
134
- </tr>
135
- <tr>
136
- <SchedulerCell as="th" rowspan={1}>12:00 PM</SchedulerCell>
137
- </tr>
138
- <tr>
139
- <SchedulerCell as="th"rowspan={1} cellType={[ "slot" ]} />
140
- </tr>
141
- <tr>
142
- <SchedulerCell as="th" rowspan={1}>1:00 PM</SchedulerCell>
143
- </tr>
144
- <tr>
145
- <SchedulerCell as="th"rowspan={1} cellType={[ "slot" ]} />
146
- </tr>
147
- <tr>
148
- <SchedulerCell as="th" rowspan={1}>2:00 PM</SchedulerCell>
149
- </tr>
150
- <tr>
151
- <SchedulerCell as="th"rowspan={1} cellType={[ "slot" ]} />
152
- </tr>
153
- <tr>
154
- <SchedulerCell as="th" rowspan={1}>3:00 PM</SchedulerCell>
155
- </tr>
156
- <tr>
157
- <SchedulerCell as="th"rowspan={1} cellType={[ "slot" ]} />
158
- </tr>
159
- <tr>
160
- <SchedulerCell as="th" rowspan={1}>4:00 PM</SchedulerCell>
161
- </tr>
162
- <tr>
163
- <SchedulerCell as="th"rowspan={1} cellType={[ "slot" ]} />
164
- </tr>
165
- <tr>
166
- <SchedulerCell as="th" rowspan={1}>5:00 PM</SchedulerCell>
167
- </tr>
168
- <tr>
169
- <SchedulerCell as="th"rowspan={1} cellType={[ "slot" ]} />
170
- </tr>
171
- <tr>
172
- <SchedulerCell as="th" rowspan={1}>6:00 PM</SchedulerCell>
173
- </tr>
174
- <tr>
175
- <SchedulerCell as="th"rowspan={1} cellType={[ "slot" ]} />
176
- </tr>
177
- <tr>
178
- <SchedulerCell as="th" rowspan={1}>7:00 PM</SchedulerCell>
179
- </tr>
180
- <tr>
181
- <SchedulerCell as="th"rowspan={1} cellType={[ "slot" ]} />
182
- </tr>
183
- <tr>
184
- <SchedulerCell as="th" rowspan={1}>8:00 PM</SchedulerCell>
185
- </tr>
186
- <tr>
187
- <SchedulerCell as="th"rowspan={1} cellType={[ "slot" ]} />
188
- </tr>
189
- <tr>
190
- <SchedulerCell as="th" rowspan={1}>9:00 PM</SchedulerCell>
191
- </tr>
192
- <tr>
193
- <SchedulerCell as="th"rowspan={1} cellType={[ "slot" ]} />
194
- </tr>
195
- <tr>
196
- <SchedulerCell as="th" rowspan={1}>10:00 PM</SchedulerCell>
197
- </tr>
198
- <tr>
199
- <SchedulerCell as="th"rowspan={1} cellType={[ "slot" ]} />
200
- </tr>
201
- <tr>
202
- <SchedulerCell as="th" rowspan={1}>11:00 PM</SchedulerCell>
203
- </tr>
204
- <tr>
205
- <SchedulerCell as="th"rowspan={1} cellType={[ "slot" ]} />
206
- </tr>
207
- </tbody>
208
- </SchedulerTable>
209
- </SchedulerTimes>
210
- </td>
211
- <td>
212
- <SchedulerContent style={{ height: "195px" }} >
213
- <SchedulerTable>
214
- <tbody>
215
- <tr className="k-middle-row">
216
- <SchedulerCell as="td" className="k-nonwork-hour" />
217
- <SchedulerCell as="td" className="k-nonwork-hour" />
218
- <SchedulerCell as="td" className="k-nonwork-hour" />
219
- <SchedulerCell as="td" className="k-nonwork-hour" />
220
- <SchedulerCell as="td" className="k-nonwork-hour" />
221
- </tr>
222
- <tr className="k-middle-row">
223
- <SchedulerCell as="td" className="k-nonwork-hour" />
224
- <SchedulerCell as="td" className="k-nonwork-hour" />
225
- <SchedulerCell as="td" className="k-nonwork-hour" />
226
- <SchedulerCell as="td" className="k-nonwork-hour" />
227
- <SchedulerCell as="td" className="k-nonwork-hour k-selected" />
228
- </tr>
229
- <tr className="k-middle-row">
230
- <SchedulerCell as="td"/>
231
- <SchedulerCell as="td"/>
232
- <SchedulerCell as="td"/>
233
- <SchedulerCell as="td"/>
234
- <SchedulerCell as="td" className="k-selected" />
235
- </tr>
236
- <tr>
237
- <SchedulerCell as="td"/>
238
- <SchedulerCell as="td"/>
239
- <SchedulerCell as="td"/>
240
- <SchedulerCell as="td"/>
241
- <SchedulerCell as="td"/>
242
- </tr>
243
- <tr className="k-middle-row">
244
- <SchedulerCell as="td"/>
245
- <SchedulerCell as="td"/>
246
- <SchedulerCell as="td"/>
247
- <SchedulerCell as="td"/>
248
- <SchedulerCell as="td"/>
249
- </tr>
250
- <tr>
251
- <SchedulerCell as="td"/>
252
- <SchedulerCell as="td"/>
253
- <SchedulerCell as="td"/>
254
- <SchedulerCell as="td"/>
255
- <SchedulerCell as="td"/>
256
- </tr>
257
- <tr className="k-middle-row">
258
- <SchedulerCell as="td"/>
259
- <SchedulerCell as="td"/>
260
- <SchedulerCell as="td"/>
261
- <SchedulerCell as="td"/>
262
- <SchedulerCell as="td"/>
263
- </tr>
264
- <tr>
265
- <SchedulerCell as="td"/>
266
- <SchedulerCell as="td"/>
267
- <SchedulerCell as="td"/>
268
- <SchedulerCell as="td"/>
269
- <SchedulerCell as="td"/>
270
- </tr>
271
- <tr className="k-middle-row">
272
- <SchedulerCell as="td"/>
273
- <SchedulerCell as="td"/>
274
- <SchedulerCell as="td"/>
275
- <SchedulerCell as="td"/>
276
- <SchedulerCell as="td"/>
277
- </tr>
278
- <tr>
279
- <SchedulerCell as="td"/>
280
- <SchedulerCell as="td"/>
281
- <SchedulerCell as="td"/>
282
- <SchedulerCell as="td"/>
283
- <SchedulerCell as="td"/>
284
- </tr>
285
- <tr className="k-middle-row">
286
- <SchedulerCell as="td"/>
287
- <SchedulerCell as="td"/>
288
- <SchedulerCell as="td"/>
289
- <SchedulerCell as="td"/>
290
- <SchedulerCell as="td"/>
291
- </tr>
292
- <tr>
293
- <SchedulerCell as="td"/>
294
- <SchedulerCell as="td"/>
295
- <SchedulerCell as="td"/>
296
- <SchedulerCell as="td"/>
297
- <SchedulerCell as="td"/>
298
- </tr>
299
- <tr className="k-middle-row">
300
- <SchedulerCell as="td"/>
301
- <SchedulerCell as="td"/>
302
- <SchedulerCell as="td"/>
303
- <SchedulerCell as="td"/>
304
- <SchedulerCell as="td"/>
305
- </tr>
306
- <tr>
307
- <SchedulerCell as="td"/>
308
- <SchedulerCell as="td"/>
309
- <SchedulerCell as="td"/>
310
- <SchedulerCell as="td"/>
311
- <SchedulerCell as="td"/>
312
- </tr>
313
- <tr className="k-middle-row">
314
- <SchedulerCell as="td"/>
315
- <SchedulerCell as="td"/>
316
- <SchedulerCell as="td"/>
317
- <SchedulerCell as="td"/>
318
- <SchedulerCell as="td"/>
319
- </tr>
320
- <tr>
321
- <SchedulerCell as="td"/>
322
- <SchedulerCell as="td"/>
323
- <SchedulerCell as="td"/>
324
- <SchedulerCell as="td"/>
325
- <SchedulerCell as="td"/>
326
- </tr>
327
- <tr className="k-middle-row">
328
- <SchedulerCell as="td"/>
329
- <SchedulerCell as="td"/>
330
- <SchedulerCell as="td"/>
331
- <SchedulerCell as="td"/>
332
- <SchedulerCell as="td"/>
333
- </tr>
334
- <tr>
335
- <SchedulerCell as="td"/>
336
- <SchedulerCell as="td"/>
337
- <SchedulerCell as="td"/>
338
- <SchedulerCell as="td"/>
339
- <SchedulerCell as="td"/>
340
- </tr>
341
- <tr className="k-middle-row">
342
- <SchedulerCell as="td"/>
343
- <SchedulerCell as="td"/>
344
- <SchedulerCell as="td"/>
345
- <SchedulerCell as="td"/>
346
- <SchedulerCell as="td"/>
347
- </tr>
348
- <tr>
349
- <SchedulerCell as="td"/>
350
- <SchedulerCell as="td"/>
351
- <SchedulerCell as="td"/>
352
- <SchedulerCell as="td"/>
353
- <SchedulerCell as="td"/>
354
- </tr>
355
- <tr className="k-middle-row">
356
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
357
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
358
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
359
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
360
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
361
- </tr>
362
- <tr>
363
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
364
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
365
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
366
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
367
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
368
- </tr>
369
- <tr className="k-middle-row">
370
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
371
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
372
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
373
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
374
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
375
- </tr>
376
- <tr>
377
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
378
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
379
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
380
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
381
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
382
- </tr>
383
- <tr className="k-middle-row">
384
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
385
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
386
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
387
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
388
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
389
- </tr>
390
- <tr>
391
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
392
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
393
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
394
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
395
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
396
- </tr>
397
- <tr className="k-middle-row">
398
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
399
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
400
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
401
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
402
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
403
- </tr>
404
- <tr>
405
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
406
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
407
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
408
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
409
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
410
- </tr>
411
- <tr className="k-middle-row">
412
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
413
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
414
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
415
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
416
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
417
- </tr>
418
- <tr>
419
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
420
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
421
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
422
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
423
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
424
- </tr>
425
- <tr className="k-middle-row">
426
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
427
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
428
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
429
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
430
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
431
- </tr>
432
- <tr>
433
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
434
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
435
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
436
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
437
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
438
- </tr>
439
- <tr className="k-middle-row">
440
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
441
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
442
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
443
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
444
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
445
- </tr>
446
- <tr>
447
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
448
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
449
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
450
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
451
- <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
452
- </tr>
453
- </tbody>
454
- </SchedulerTable>
455
- <SchedulerEvent eventPrefix={null} style={{ top: '0px', height: "71px", width: "166px", left: "2px" }} >
456
- <div>
457
- <div className="k-event-template k-event-time">7:00 AM - 8:00 AM</div>
458
- <div className="k-event-template">Event title</div>
459
- </div>
460
- </SchedulerEvent>
461
- <SchedulerEvent eventPrefix={null} style={{ top: "111px", height: "34px", width: "166px", left: "2px" }} ongoing>
462
- <div>
463
- <div className="k-event-template k-event-time">8:30 AM - 9:00 AM</div>
464
- <div className="k-event-template">Event title that is long and overflows, testing multiline and overflow styles</div>
465
- </div>
466
- </SchedulerEvent>
467
- <SchedulerEvent style={{ top: "36px", height: "108px", width: "166px", left: "348px" }} hover ongoing>
468
- <div>
469
- <div className="k-event-template k-event-time">7:30 AM - 9:00 AM</div>
470
- <div className="k-event-template">Hovered Recurring event</div>
471
- </div>
472
- </SchedulerEvent>
473
- <SchedulerEvent eventPrefix={null} style={{ top: "110px", height: "71px", width: "166px", left: "520px" }} selected ongoing>
474
- <div>
475
- <div className="k-event-template k-event-time">8:30 AM - 9:30 AM</div>
476
- <div className="k-event-template">Selected event</div>
477
- </div>
478
- </SchedulerEvent>
479
- <SchedulerEvent eventPrefix={null} style={{ top: '0px', height: "71px", width: "166px", left: "520px", color: "#333", backgroundColor: "#ddf", borderColor: "#fff" }} >
480
- <div>
481
- <div className="k-event-template k-event-time">7:00 AM - 8:00 AM</div>
482
- <div className="k-event-template">Custom color event</div>
483
- </div>
484
- </SchedulerEvent>
485
- <SchedulerEvent eventPrefix={null} className="k-event-drag-hint" style={{ left: "175px", top: '0px', height: "71px", width: "166px" }} >
486
- <div>
487
- <div className="k-event-template k-event-time">8:00 AM - 9:00 AM</div>
488
- <div className="k-event-template">Drag hint</div>
489
- </div>
490
- </SchedulerEvent>
491
- <SchedulerEvent eventPrefix={null} style={{ backgroundColor: "rgb(248, 163, 152)", borderColor: "rgb(248, 163, 152)", left: "175px", top: "100px", height: "71px", width: "166px" }} inverse ongoing>
492
- <div>
493
- <div className="k-event-template k-event-time">10:00 AM - 11:00 AM</div>
494
- <div className="k-event-template">Inverse Background</div>
495
- </div>
496
- </SchedulerEvent>
497
- <SchedulerEvent eventPrefix={null} style={{ top: "110px", height: "71px", width: "166px", left: "708px" }} ongoing multiDay>
498
- <div>
499
- <div className="k-event-template k-event-time">8:30 AM - 9:30 AM</div>
500
- <div className="k-event-template">Multi-Day event</div>
501
- </div>
502
- </SchedulerEvent>
503
- </SchedulerContent>
504
- </td>
505
- </SchedulerBody>
85
+ <tr style={{ height: "72px" }}>
86
+ <SchedulerCell as="td" />
87
+ <SchedulerCell as="td" />
88
+ <SchedulerCell as="td" />
89
+ <SchedulerCell as="td" />
90
+ <SchedulerCell as="td" />
91
+ </tr>
506
92
  </tbody>
507
- </>
508
- }
509
- />
510
- </div>
511
- </>
93
+ </SchedulerTable>
94
+ <SchedulerEvent resizable="horizontal" title="Two Weeks in NZ" />
95
+ </div>
96
+ </SchedulerHeader>
97
+ </td>
98
+ </SchedulerHead>
99
+ <SchedulerBody as="tr">
100
+ <td>
101
+ <SchedulerTimes style={{ height: "195px" }}>
102
+ <SchedulerTable style={{ height: "1258px" }}>
103
+ <tbody>
104
+ <tr>
105
+ <SchedulerCell as="th" rowspan={1}>
106
+ 7:00 AM
107
+ </SchedulerCell>
108
+ </tr>
109
+ <tr>
110
+ <SchedulerCell as="th" rowspan={1} cellType={["slot"]} />
111
+ </tr>
112
+ <tr>
113
+ <SchedulerCell as="th" rowspan={1}>
114
+ 8:00 AM
115
+ </SchedulerCell>
116
+ </tr>
117
+ <tr>
118
+ <SchedulerCell as="th" rowspan={1} cellType={["slot"]} />
119
+ </tr>
120
+ <tr>
121
+ <SchedulerCell as="th" rowspan={1}>
122
+ 9:00 AM
123
+ </SchedulerCell>
124
+ </tr>
125
+ <tr>
126
+ <SchedulerCell as="th" rowspan={1} cellType={["slot"]} />
127
+ </tr>
128
+ <tr>
129
+ <SchedulerCell as="th" rowspan={1}>
130
+ 10:00 AM
131
+ </SchedulerCell>
132
+ </tr>
133
+ <tr>
134
+ <SchedulerCell as="th" rowspan={1} cellType={["slot"]} />
135
+ </tr>
136
+ <tr>
137
+ <SchedulerCell as="th" rowspan={1}>
138
+ 11:00 AM
139
+ </SchedulerCell>
140
+ </tr>
141
+ <tr>
142
+ <SchedulerCell as="th" rowspan={1} cellType={["slot"]} />
143
+ </tr>
144
+ <tr>
145
+ <SchedulerCell as="th" rowspan={1}>
146
+ 12:00 PM
147
+ </SchedulerCell>
148
+ </tr>
149
+ <tr>
150
+ <SchedulerCell as="th" rowspan={1} cellType={["slot"]} />
151
+ </tr>
152
+ <tr>
153
+ <SchedulerCell as="th" rowspan={1}>
154
+ 1:00 PM
155
+ </SchedulerCell>
156
+ </tr>
157
+ <tr>
158
+ <SchedulerCell as="th" rowspan={1} cellType={["slot"]} />
159
+ </tr>
160
+ <tr>
161
+ <SchedulerCell as="th" rowspan={1}>
162
+ 2:00 PM
163
+ </SchedulerCell>
164
+ </tr>
165
+ <tr>
166
+ <SchedulerCell as="th" rowspan={1} cellType={["slot"]} />
167
+ </tr>
168
+ <tr>
169
+ <SchedulerCell as="th" rowspan={1}>
170
+ 3:00 PM
171
+ </SchedulerCell>
172
+ </tr>
173
+ <tr>
174
+ <SchedulerCell as="th" rowspan={1} cellType={["slot"]} />
175
+ </tr>
176
+ <tr>
177
+ <SchedulerCell as="th" rowspan={1}>
178
+ 4:00 PM
179
+ </SchedulerCell>
180
+ </tr>
181
+ <tr>
182
+ <SchedulerCell as="th" rowspan={1} cellType={["slot"]} />
183
+ </tr>
184
+ <tr>
185
+ <SchedulerCell as="th" rowspan={1}>
186
+ 5:00 PM
187
+ </SchedulerCell>
188
+ </tr>
189
+ <tr>
190
+ <SchedulerCell as="th" rowspan={1} cellType={["slot"]} />
191
+ </tr>
192
+ <tr>
193
+ <SchedulerCell as="th" rowspan={1}>
194
+ 6:00 PM
195
+ </SchedulerCell>
196
+ </tr>
197
+ <tr>
198
+ <SchedulerCell as="th" rowspan={1} cellType={["slot"]} />
199
+ </tr>
200
+ <tr>
201
+ <SchedulerCell as="th" rowspan={1}>
202
+ 7:00 PM
203
+ </SchedulerCell>
204
+ </tr>
205
+ <tr>
206
+ <SchedulerCell as="th" rowspan={1} cellType={["slot"]} />
207
+ </tr>
208
+ <tr>
209
+ <SchedulerCell as="th" rowspan={1}>
210
+ 8:00 PM
211
+ </SchedulerCell>
212
+ </tr>
213
+ <tr>
214
+ <SchedulerCell as="th" rowspan={1} cellType={["slot"]} />
215
+ </tr>
216
+ <tr>
217
+ <SchedulerCell as="th" rowspan={1}>
218
+ 9:00 PM
219
+ </SchedulerCell>
220
+ </tr>
221
+ <tr>
222
+ <SchedulerCell as="th" rowspan={1} cellType={["slot"]} />
223
+ </tr>
224
+ <tr>
225
+ <SchedulerCell as="th" rowspan={1}>
226
+ 10:00 PM
227
+ </SchedulerCell>
228
+ </tr>
229
+ <tr>
230
+ <SchedulerCell as="th" rowspan={1} cellType={["slot"]} />
231
+ </tr>
232
+ <tr>
233
+ <SchedulerCell as="th" rowspan={1}>
234
+ 11:00 PM
235
+ </SchedulerCell>
236
+ </tr>
237
+ <tr>
238
+ <SchedulerCell as="th" rowspan={1} cellType={["slot"]} />
239
+ </tr>
240
+ </tbody>
241
+ </SchedulerTable>
242
+ </SchedulerTimes>
243
+ </td>
244
+ <td>
245
+ <SchedulerContent style={{ height: "195px" }}>
246
+ <SchedulerTable>
247
+ <tbody>
248
+ <tr className="k-middle-row">
249
+ <SchedulerCell as="td" className="k-nonwork-hour" />
250
+ <SchedulerCell as="td" className="k-nonwork-hour" />
251
+ <SchedulerCell as="td" className="k-nonwork-hour" />
252
+ <SchedulerCell as="td" className="k-nonwork-hour" />
253
+ <SchedulerCell as="td" className="k-nonwork-hour" />
254
+ </tr>
255
+ <tr className="k-middle-row">
256
+ <SchedulerCell as="td" className="k-nonwork-hour" />
257
+ <SchedulerCell as="td" className="k-nonwork-hour" />
258
+ <SchedulerCell as="td" className="k-nonwork-hour" />
259
+ <SchedulerCell as="td" className="k-nonwork-hour" />
260
+ <SchedulerCell as="td" className="k-nonwork-hour k-selected" />
261
+ </tr>
262
+ <tr className="k-middle-row">
263
+ <SchedulerCell as="td" />
264
+ <SchedulerCell as="td" />
265
+ <SchedulerCell as="td" />
266
+ <SchedulerCell as="td" />
267
+ <SchedulerCell as="td" className="k-selected" />
268
+ </tr>
269
+ <tr>
270
+ <SchedulerCell as="td" />
271
+ <SchedulerCell as="td" />
272
+ <SchedulerCell as="td" />
273
+ <SchedulerCell as="td" />
274
+ <SchedulerCell as="td" />
275
+ </tr>
276
+ <tr className="k-middle-row">
277
+ <SchedulerCell as="td" />
278
+ <SchedulerCell as="td" />
279
+ <SchedulerCell as="td" />
280
+ <SchedulerCell as="td" />
281
+ <SchedulerCell as="td" />
282
+ </tr>
283
+ <tr>
284
+ <SchedulerCell as="td" />
285
+ <SchedulerCell as="td" />
286
+ <SchedulerCell as="td" />
287
+ <SchedulerCell as="td" />
288
+ <SchedulerCell as="td" />
289
+ </tr>
290
+ <tr className="k-middle-row">
291
+ <SchedulerCell as="td" />
292
+ <SchedulerCell as="td" />
293
+ <SchedulerCell as="td" />
294
+ <SchedulerCell as="td" />
295
+ <SchedulerCell as="td" />
296
+ </tr>
297
+ <tr>
298
+ <SchedulerCell as="td" />
299
+ <SchedulerCell as="td" />
300
+ <SchedulerCell as="td" />
301
+ <SchedulerCell as="td" />
302
+ <SchedulerCell as="td" />
303
+ </tr>
304
+ <tr className="k-middle-row">
305
+ <SchedulerCell as="td" />
306
+ <SchedulerCell as="td" />
307
+ <SchedulerCell as="td" />
308
+ <SchedulerCell as="td" />
309
+ <SchedulerCell as="td" />
310
+ </tr>
311
+ <tr>
312
+ <SchedulerCell as="td" />
313
+ <SchedulerCell as="td" />
314
+ <SchedulerCell as="td" />
315
+ <SchedulerCell as="td" />
316
+ <SchedulerCell as="td" />
317
+ </tr>
318
+ <tr className="k-middle-row">
319
+ <SchedulerCell as="td" />
320
+ <SchedulerCell as="td" />
321
+ <SchedulerCell as="td" />
322
+ <SchedulerCell as="td" />
323
+ <SchedulerCell as="td" />
324
+ </tr>
325
+ <tr>
326
+ <SchedulerCell as="td" />
327
+ <SchedulerCell as="td" />
328
+ <SchedulerCell as="td" />
329
+ <SchedulerCell as="td" />
330
+ <SchedulerCell as="td" />
331
+ </tr>
332
+ <tr className="k-middle-row">
333
+ <SchedulerCell as="td" />
334
+ <SchedulerCell as="td" />
335
+ <SchedulerCell as="td" />
336
+ <SchedulerCell as="td" />
337
+ <SchedulerCell as="td" />
338
+ </tr>
339
+ <tr>
340
+ <SchedulerCell as="td" />
341
+ <SchedulerCell as="td" />
342
+ <SchedulerCell as="td" />
343
+ <SchedulerCell as="td" />
344
+ <SchedulerCell as="td" />
345
+ </tr>
346
+ <tr className="k-middle-row">
347
+ <SchedulerCell as="td" />
348
+ <SchedulerCell as="td" />
349
+ <SchedulerCell as="td" />
350
+ <SchedulerCell as="td" />
351
+ <SchedulerCell as="td" />
352
+ </tr>
353
+ <tr>
354
+ <SchedulerCell as="td" />
355
+ <SchedulerCell as="td" />
356
+ <SchedulerCell as="td" />
357
+ <SchedulerCell as="td" />
358
+ <SchedulerCell as="td" />
359
+ </tr>
360
+ <tr className="k-middle-row">
361
+ <SchedulerCell as="td" />
362
+ <SchedulerCell as="td" />
363
+ <SchedulerCell as="td" />
364
+ <SchedulerCell as="td" />
365
+ <SchedulerCell as="td" />
366
+ </tr>
367
+ <tr>
368
+ <SchedulerCell as="td" />
369
+ <SchedulerCell as="td" />
370
+ <SchedulerCell as="td" />
371
+ <SchedulerCell as="td" />
372
+ <SchedulerCell as="td" />
373
+ </tr>
374
+ <tr className="k-middle-row">
375
+ <SchedulerCell as="td" />
376
+ <SchedulerCell as="td" />
377
+ <SchedulerCell as="td" />
378
+ <SchedulerCell as="td" />
379
+ <SchedulerCell as="td" />
380
+ </tr>
381
+ <tr>
382
+ <SchedulerCell as="td" />
383
+ <SchedulerCell as="td" />
384
+ <SchedulerCell as="td" />
385
+ <SchedulerCell as="td" />
386
+ <SchedulerCell as="td" />
387
+ </tr>
388
+ <tr className="k-middle-row">
389
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
390
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
391
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
392
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
393
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
394
+ </tr>
395
+ <tr>
396
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
397
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
398
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
399
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
400
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
401
+ </tr>
402
+ <tr className="k-middle-row">
403
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
404
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
405
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
406
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
407
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
408
+ </tr>
409
+ <tr>
410
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
411
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
412
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
413
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
414
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
415
+ </tr>
416
+ <tr className="k-middle-row">
417
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
418
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
419
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
420
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
421
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
422
+ </tr>
423
+ <tr>
424
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
425
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
426
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
427
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
428
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
429
+ </tr>
430
+ <tr className="k-middle-row">
431
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
432
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
433
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
434
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
435
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
436
+ </tr>
437
+ <tr>
438
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
439
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
440
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
441
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
442
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
443
+ </tr>
444
+ <tr className="k-middle-row">
445
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
446
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
447
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
448
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
449
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
450
+ </tr>
451
+ <tr>
452
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
453
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
454
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
455
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
456
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
457
+ </tr>
458
+ <tr className="k-middle-row">
459
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
460
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
461
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
462
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
463
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
464
+ </tr>
465
+ <tr>
466
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
467
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
468
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
469
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
470
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
471
+ </tr>
472
+ <tr className="k-middle-row">
473
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
474
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
475
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
476
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
477
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
478
+ </tr>
479
+ <tr>
480
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
481
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
482
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
483
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
484
+ <SchedulerCell as="td" className="k-nonwork-hour"></SchedulerCell>
485
+ </tr>
486
+ </tbody>
487
+ </SchedulerTable>
488
+ <SchedulerEvent style={{ top: "0px", height: "71px", width: "166px", left: "2px" }} title="Event title" time="7:00 AM - 8:00 AM" />
489
+ <SchedulerEvent style={{ top: "111px", height: "34px", width: "166px", left: "2px" }} ongoing title="Event title that is long and overflows, testing multiline and overflow styles" time="8:30 AM - 9:00 AM" />
490
+ <SchedulerEvent style={{ top: "0px", height: "71px", width: "166px", left: "348px" }} hover ongoing recurring="recurring" title="Hovered Recurring event" time="7:30 AM - 9:00 AM" />
491
+ <SchedulerEvent style={{ top: "80px", height: "71px", width: "166px", left: "348px" }} recurring="non-recurring" title="Non-Recurring event" time="7:30 AM - 9:00 AM" />
492
+ <SchedulerEvent style={{ top: "110px", height: "71px", width: "166px", left: "520px" }} selected ongoing title="Selected event" time="8:30 AM - 9:30 AM" />
493
+ <SchedulerEvent style={{ top: "0px", height: "71px", width: "166px", left: "520px", color: "#333", backgroundColor: "#ddf", borderColor: "#fff" }} title="Custom color event" time="7:00 AM - 8:00 AM" />
494
+ <SchedulerEvent className="k-event-drag-hint" style={{ left: "175px", top: "0px", height: "71px", width: "166px" }} title="Drag hint" time="8:00 AM - 9:00 AM" />
495
+ <SchedulerEvent style={{ backgroundColor: "rgb(248, 163, 152)", borderColor: "rgb(248, 163, 152)", left: "175px", top: "100px", height: "71px", width: "166px" }} inverse ongoing title="Inverse Background" time="10:00 AM - 11:00 AM" />
496
+ <SchedulerEvent style={{ top: "0px", height: "70px", width: "166px", left: "760px" }} readonly title="Read-only event" time="7:30 AM - 9:00 AM" />
497
+ <SchedulerEvent style={{ top: "110px", height: "71px", width: "166px", left: "708px" }} ongoing continuationBottom title="Multi-Day event" time="8:30 AM - 9:30 AM" />
498
+ </SchedulerContent>
499
+ </td>
500
+ </SchedulerBody>
501
+ </tbody>
502
+ </>
503
+ }
504
+ />
505
+ </div>
506
+ </>
512
507
  );