@progress/kendo-themes-html 14.5.0 → 14.5.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 (43) hide show
  1. package/dist/cjs/index.js +8 -8
  2. package/dist/cjs/scheduler/demos/scheduler.js +1 -1
  3. package/dist/cjs/scheduler/templates/scheduler-agenda.js +1 -1
  4. package/dist/cjs/scheduler/templates/scheduler-day.js +1 -1
  5. package/dist/cjs/scheduler/templates/scheduler-flex-agenda.js +1 -1
  6. package/dist/cjs/scheduler/templates/scheduler-flex-day.js +1 -1
  7. package/dist/cjs/scheduler/templates/scheduler-flex-horizontal-grouping.js +1 -1
  8. package/dist/cjs/scheduler/templates/scheduler-flex-month-horizontal-grouping.js +1 -0
  9. package/dist/cjs/scheduler/templates/scheduler-flex-month.js +1 -1
  10. package/dist/cjs/scheduler/templates/scheduler-flex-timeline.js +1 -1
  11. package/dist/cjs/scheduler/templates/scheduler-flex-vertical-grouping.js +1 -1
  12. package/dist/cjs/scheduler/templates/scheduler-flex-week.js +1 -1
  13. package/dist/cjs/scheduler/templates/scheduler-flex-year.js +1 -1
  14. package/dist/cjs/scheduler/templates/scheduler-horizontal-grouping.js +1 -1
  15. package/dist/cjs/scheduler/templates/scheduler-month.js +1 -1
  16. package/dist/cjs/scheduler/templates/scheduler-timeline.js +1 -1
  17. package/dist/cjs/scheduler/templates/scheduler-vertical-grouping.js +1 -1
  18. package/dist/cjs/scheduler/templates/scheduler-week.js +1 -1
  19. package/dist/esm/index.mjs +8 -8
  20. package/dist/esm/scheduler/demos/scheduler.mjs +1 -1
  21. package/dist/esm/scheduler/templates/scheduler-agenda.mjs +1 -1
  22. package/dist/esm/scheduler/templates/scheduler-day.mjs +1 -1
  23. package/dist/esm/scheduler/templates/scheduler-flex-agenda.mjs +1 -1
  24. package/dist/esm/scheduler/templates/scheduler-flex-day.mjs +1 -1
  25. package/dist/esm/scheduler/templates/scheduler-flex-horizontal-grouping.mjs +1 -1
  26. package/dist/esm/scheduler/templates/scheduler-flex-month-horizontal-grouping.mjs +1 -0
  27. package/dist/esm/scheduler/templates/scheduler-flex-month.mjs +1 -1
  28. package/dist/esm/scheduler/templates/scheduler-flex-timeline.mjs +1 -1
  29. package/dist/esm/scheduler/templates/scheduler-flex-vertical-grouping.mjs +1 -1
  30. package/dist/esm/scheduler/templates/scheduler-flex-week.mjs +1 -1
  31. package/dist/esm/scheduler/templates/scheduler-flex-year.mjs +1 -1
  32. package/dist/esm/scheduler/templates/scheduler-horizontal-grouping.mjs +1 -1
  33. package/dist/esm/scheduler/templates/scheduler-month.mjs +1 -1
  34. package/dist/esm/scheduler/templates/scheduler-timeline.mjs +1 -1
  35. package/dist/esm/scheduler/templates/scheduler-vertical-grouping.mjs +1 -1
  36. package/dist/esm/scheduler/templates/scheduler-week.mjs +1 -1
  37. package/dist/types/scheduler/index.d.ts +1 -0
  38. package/dist/types/scheduler/templates/scheduler-flex-month-horizontal-grouping.d.ts +1 -0
  39. package/package.json +1 -1
  40. package/src/scheduler/index.ts +1 -0
  41. package/src/scheduler/templates/scheduler-flex-month-horizontal-grouping.tsx +200 -0
  42. package/src/scheduler/templates/scheduler-flex-month.tsx +4 -4
  43. package/src/scheduler/tests/scheduler-month-horizontal-grouping.tsx +17 -0
package/dist/types/scheduler/index.d.ts CHANGED
@@ -29,4 +29,5 @@ export * from './templates/scheduler-horizontal-grouping';
29
29
  export * from './templates/scheduler-vertical-grouping';
30
30
  export * from './templates/scheduler-flex-horizontal-grouping';
31
31
  export * from './templates/scheduler-flex-vertical-grouping';
32
+ export * from './templates/scheduler-flex-month-horizontal-grouping';
32
33
  export * from './demos/scheduler';
package/dist/types/scheduler/templates/scheduler-flex-month-horizontal-grouping.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const SchedulerFlexMonthHorizontalGrouping: ({ style, ...props }: any) => import("react/jsx-runtime").JSX.Element;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@progress/kendo-themes-html",
3
3
  "description": "A collection of HTML helpers used for developing Kendo UI themes",
4
- "version": "14.5.0",
4
+ "version": "14.5.1-dev.1",
5
5
  "author": "Progress",
6
6
  "license": "Apache-2.0",
7
7
  "keywords": [
package/src/scheduler/index.ts CHANGED
@@ -29,4 +29,5 @@ export * from './templates/scheduler-horizontal-grouping';
29
29
  export * from './templates/scheduler-vertical-grouping';
30
30
  export * from './templates/scheduler-flex-horizontal-grouping';
31
31
  export * from './templates/scheduler-flex-vertical-grouping';
32
+ export * from './templates/scheduler-flex-month-horizontal-grouping';
32
33
  export * from './demos/scheduler';
package/src/scheduler/templates/scheduler-flex-month-horizontal-grouping.tsx ADDED
@@ -0,0 +1,200 @@
1
+ import { Button } from "../../button";
2
+ import { ButtonGroup } from "../../button-group";
3
+ import { SegmentedControl, SegmentedControlButton } from "../../segmented-control";
4
+ import { Scheduler, SchedulerHead, SchedulerBody, SchedulerRow, SchedulerToolbar, SchedulerCell, SchedulerGroup, SchedulerEvent } from "../index";
5
+
6
+ export const SchedulerFlexMonthHorizontalGrouping = ({ style, ...props }: any) => (
7
+ <Scheduler
8
+ style={style}
9
+ layout="flex"
10
+ view="month"
11
+ toolbar={
12
+ <SchedulerToolbar>
13
+ <Button themeColor="primary" icon="plus" aria-label="Add new event">
14
+ New Event
15
+ </Button>
16
+ <Button fillMode="flat">Today</Button>
17
+ <ButtonGroup fillMode="flat">
18
+ <Button icon="chevron-left" fillMode="flat" aria-label="Navigate to previous period"></Button>
19
+ <Button icon="chevron-right" fillMode="flat" aria-label="Navigate to next period"></Button>
20
+ </ButtonGroup>
21
+ <Button icon="calendar" className="k-nav-current" fillMode="flat" aria-live="polite">
22
+ February 2026
23
+ </Button>
24
+ <span className="k-spacer"></span>
25
+ <SegmentedControl thumbStyles={{ width: "19%", left: "34%" }} className="k-scheduler-views">
26
+ <SegmentedControlButton>Day</SegmentedControlButton>
27
+ <SegmentedControlButton>Week</SegmentedControlButton>
28
+ <SegmentedControlButton selected>Month</SegmentedControlButton>
29
+ <SegmentedControlButton>Timeline</SegmentedControlButton>
30
+ <SegmentedControlButton>Agenda</SegmentedControlButton>
31
+ </SegmentedControl>
32
+ </SchedulerToolbar>
33
+ }
34
+ children={
35
+ <>
36
+ <SchedulerHead as="div">
37
+ <SchedulerGroup>
38
+ <SchedulerRow>
39
+ <SchedulerCell as="div" cellType={["heading"]}>
40
+ Meeting Room 101
41
+ </SchedulerCell>
42
+ <SchedulerCell as="div" cellType={["heading"]}>
43
+ Meeting Room 201
44
+ </SchedulerCell>
45
+ </SchedulerRow>
46
+ <SchedulerRow>
47
+ <SchedulerCell as="div" cellType={["group"]}>
48
+ <SchedulerRow>
49
+ <SchedulerCell as="div" cellType={["heading"]} text="Sunday"></SchedulerCell>
50
+ <SchedulerCell as="div" cellType={["heading"]} text="Monday"></SchedulerCell>
51
+ <SchedulerCell as="div" cellType={["heading"]} text="Tuesday"></SchedulerCell>
52
+ <SchedulerCell as="div" cellType={["heading"]} text="Wednesday"></SchedulerCell>
53
+ <SchedulerCell as="div" cellType={["heading"]} text="Thursday"></SchedulerCell>
54
+ <SchedulerCell as="div" cellType={["heading"]} text="Friday"></SchedulerCell>
55
+ <SchedulerCell as="div" cellType={["heading"]} text="Saturday"></SchedulerCell>
56
+ </SchedulerRow>
57
+ </SchedulerCell>
58
+ <SchedulerCell as="div" cellType={["group"]}>
59
+ <SchedulerRow>
60
+ <SchedulerCell as="div" cellType={["heading"]} text="Sunday"></SchedulerCell>
61
+ <SchedulerCell as="div" cellType={["heading"]} text="Monday"></SchedulerCell>
62
+ <SchedulerCell as="div" cellType={["heading"]} text="Tuesday"></SchedulerCell>
63
+ <SchedulerCell as="div" cellType={["heading"]} text="Wednesday"></SchedulerCell>
64
+ <SchedulerCell as="div" cellType={["heading"]} text="Thursday"></SchedulerCell>
65
+ <SchedulerCell as="div" cellType={["heading"]} text="Friday"></SchedulerCell>
66
+ <SchedulerCell as="div" cellType={["heading"]} text="Saturday"></SchedulerCell>
67
+ </SchedulerRow>
68
+ </SchedulerCell>
69
+ </SchedulerRow>
70
+ </SchedulerGroup>
71
+ </SchedulerHead>
72
+ <SchedulerBody as="div">
73
+ <SchedulerGroup>
74
+ <SchedulerRow>
75
+ <SchedulerCell as="div" cellType={["group"]}>
76
+ <SchedulerRow>
77
+ <SchedulerCell as="div" cellType={["slot"]} text="26" className="k-other-month" />
78
+ <SchedulerCell as="div" cellType={["slot"]} text="27" className="k-other-month" />
79
+ <SchedulerCell as="div" cellType={["slot"]} text="28" className="k-other-month" />
80
+ <SchedulerCell as="div" cellType={["slot"]} text="29" className="k-other-month" />
81
+ <SchedulerCell as="div" cellType={["slot"]} text="30" className="k-other-month" />
82
+ <SchedulerCell as="div" cellType={["slot"]} text="31" className="k-other-month" />
83
+ <SchedulerCell as="div" cellType={["slot"]} text="01" />
84
+ </SchedulerRow>
85
+ <SchedulerRow>
86
+ <SchedulerCell as="div" cellType={["slot"]}>
87
+ <span className="k-link k-nav-day">02</span>
88
+ <Button className="k-more-events" size="xsmall" fillMode="flat" themeColor="primary" aria-label="1 more event">
89
+ 1 more
90
+ </Button>
91
+ </SchedulerCell>
92
+ <SchedulerCell as="div" cellType={["slot"]} text="03" />
93
+ <SchedulerCell as="div" cellType={["slot"]} text="04" />
94
+ <SchedulerCell as="div" cellType={["slot"]} text="05" />
95
+ <SchedulerCell as="div" cellType={["slot"]} text="06" />
96
+ <SchedulerCell as="div" cellType={["slot"]} text="07" />
97
+ <SchedulerCell as="div" cellType={["slot"]} text="08" />
98
+ </SchedulerRow>
99
+ <SchedulerRow>
100
+ <SchedulerCell as="div" cellType={["slot"]} text="09" />
101
+ <SchedulerCell as="div" cellType={["slot"]} text="10" />
102
+ <SchedulerCell as="div" cellType={["slot"]} text="11" />
103
+ <SchedulerCell as="div" cellType={["slot"]} text="12" />
104
+ <SchedulerCell as="div" cellType={["slot"]} text="13" />
105
+ <SchedulerCell as="div" cellType={["slot"]} text="14" />
106
+ <SchedulerCell as="div" cellType={["slot"]} text="15" />
107
+ </SchedulerRow>
108
+ <SchedulerRow>
109
+ <SchedulerCell as="div" cellType={["slot"]} text="16" />
110
+ <SchedulerCell as="div" cellType={["slot"]} text="17" />
111
+ <SchedulerCell as="div" cellType={["slot"]} text="18" />
112
+ <SchedulerCell as="div" cellType={["slot"]} text="19" />
113
+ <SchedulerCell as="div" cellType={["slot"]} text="20" />
114
+ <SchedulerCell as="div" cellType={["slot"]} text="21" />
115
+ <SchedulerCell as="div" cellType={["slot"]} text="22" />
116
+ </SchedulerRow>
117
+ <SchedulerRow>
118
+ <SchedulerCell as="div" cellType={["slot"]} text="23" />
119
+ <SchedulerCell as="div" cellType={["slot"]} text="24" />
120
+ <SchedulerCell as="div" cellType={["slot"]} text="25" />
121
+ <SchedulerCell as="div" cellType={["slot"]} text="26" />
122
+ <SchedulerCell as="div" cellType={["slot"]} text="27" />
123
+ <SchedulerCell as="div" cellType={["slot"]} text="28" />
124
+ <SchedulerCell as="div" cellType={["slot"]} text="29" />
125
+ </SchedulerRow>
126
+ <SchedulerRow>
127
+ <SchedulerCell as="div" cellType={["slot"]} text="30" />
128
+ <SchedulerCell as="div" cellType={["slot"]} text="31" />
129
+ <SchedulerCell as="div" cellType={["slot"]} text="01" className="k-other-month" />
130
+ <SchedulerCell as="div" cellType={["slot"]} text="02" className="k-other-month" />
131
+ <SchedulerCell as="div" cellType={["slot"]} text="03" className="k-other-month" />
132
+ <SchedulerCell as="div" cellType={["slot"]} text="04" className="k-other-month" />
133
+ <SchedulerCell as="div" cellType={["slot"]} text="05" className="k-other-month" />
134
+ </SchedulerRow>
135
+ </SchedulerCell>
136
+ <SchedulerCell as="div" cellType={["group"]}>
137
+ <SchedulerRow>
138
+ <SchedulerCell as="div" cellType={["slot"]} text="26" className="k-other-month" />
139
+ <SchedulerCell as="div" cellType={["slot"]} text="27" className="k-other-month" />
140
+ <SchedulerCell as="div" cellType={["slot"]} text="28" className="k-other-month" />
141
+ <SchedulerCell as="div" cellType={["slot"]} text="29" className="k-other-month" />
142
+ <SchedulerCell as="div" cellType={["slot"]} text="30" className="k-other-month" />
143
+ <SchedulerCell as="div" cellType={["slot"]} text="31" className="k-other-month" />
144
+ <SchedulerCell as="div" cellType={["slot"]} text="01" />
145
+ </SchedulerRow>
146
+ <SchedulerRow>
147
+ <SchedulerCell as="div" cellType={["slot"]} text="02" />
148
+ <SchedulerCell as="div" cellType={["slot"]} text="03" />
149
+ <SchedulerCell as="div" cellType={["slot"]} text="04" />
150
+ <SchedulerCell as="div" cellType={["slot"]} text="05" />
151
+ <SchedulerCell as="div" cellType={["slot"]} text="06" />
152
+ <SchedulerCell as="div" cellType={["slot"]} text="07" />
153
+ <SchedulerCell as="div" cellType={["slot"]} text="08" />
154
+ </SchedulerRow>
155
+ <SchedulerRow>
156
+ <SchedulerCell as="div" cellType={["slot"]} text="09" />
157
+ <SchedulerCell as="div" cellType={["slot"]} text="10" />
158
+ <SchedulerCell as="div" cellType={["slot"]} text="11" />
159
+ <SchedulerCell as="div" cellType={["slot"]} text="12" />
160
+ <SchedulerCell as="div" cellType={["slot"]} text="13" />
161
+ <SchedulerCell as="div" cellType={["slot"]} text="14" />
162
+ <SchedulerCell as="div" cellType={["slot"]} text="15" />
163
+ </SchedulerRow>
164
+ <SchedulerRow>
165
+ <SchedulerCell as="div" cellType={["slot"]} text="16" />
166
+ <SchedulerCell as="div" cellType={["slot"]} text="17" />
167
+ <SchedulerCell as="div" cellType={["slot"]} text="18" />
168
+ <SchedulerCell as="div" cellType={["slot"]} text="19" />
169
+ <SchedulerCell as="div" cellType={["slot"]} text="20" />
170
+ <SchedulerCell as="div" cellType={["slot"]} text="21" />
171
+ <SchedulerCell as="div" cellType={["slot"]} text="22" />
172
+ </SchedulerRow>
173
+ <SchedulerRow>
174
+ <SchedulerCell as="div" cellType={["slot"]} text="23" />
175
+ <SchedulerCell as="div" cellType={["slot"]} text="24" />
176
+ <SchedulerCell as="div" cellType={["slot"]} text="25" />
177
+ <SchedulerCell as="div" cellType={["slot"]} text="26" />
178
+ <SchedulerCell as="div" cellType={["slot"]} text="27" />
179
+ <SchedulerCell as="div" cellType={["slot"]} text="28" />
180
+ <SchedulerCell as="div" cellType={["slot"]} text="29" />
181
+ </SchedulerRow>
182
+ <SchedulerRow>
183
+ <SchedulerCell as="div" cellType={["slot"]} text="30" />
184
+ <SchedulerCell as="div" cellType={["slot"]} text="31" />
185
+ <SchedulerCell as="div" cellType={["slot"]} text="01" className="k-other-month" />
186
+ <SchedulerCell as="div" cellType={["slot"]} text="02" className="k-other-month" />
187
+ <SchedulerCell as="div" cellType={["slot"]} text="03" className="k-other-month" />
188
+ <SchedulerCell as="div" cellType={["slot"]} text="04" className="k-other-month" />
189
+ <SchedulerCell as="div" cellType={["slot"]} text="05" className="k-other-month" />
190
+ </SchedulerRow>
191
+ </SchedulerCell>
192
+ </SchedulerRow>
193
+ </SchedulerGroup>
194
+ <SchedulerEvent resizable="none" style={{ top: "137px", left: "1px", height: "25px", width: "70px" }} title="Event 1 Title" time="9:00 AM - 10:00 AM" />
195
+ </SchedulerBody>
196
+ </>
197
+ }
198
+ {...props}
199
+ ></Scheduler>
200
+ );
package/src/scheduler/templates/scheduler-flex-month.tsx CHANGED
@@ -114,10 +114,10 @@ export const SchedulerFlexMonth = ({ style, ...props } :any) => (
114
114
  </SchedulerCell>
115
115
  </SchedulerRow>
116
116
  </SchedulerGroup>
117
- <SchedulerEvent resizable="none" style={{ top: "137px", height: "25px", width: "138px" }} title="Event 1 Title" time="9:00 AM - 10:00 AM" />
118
- <SchedulerEvent resizable="none" style={{ top: "137px", left: "141px", height: "25px", width: "138px" }} title="Event 2 Title" time="10:00 AM - 11:00 AM" />
119
- <SchedulerEvent resizable="none" style={{ top: "165px", left: "141px", height: "25px", width: "138px" }} title="Event 3 Title" time="11:00 AM - 12:00 PM" />
120
- <SchedulerEvent resizable="none" style={{ top: "137px", left: "282px", height: "25px", width: "410px" }} title="Event 4 Title" time="1:00 PM - 2:00 PM" />
117
+ <SchedulerEvent resizable="horizontal" style={{ top: "137px", height: "25px", width: "138px" }} title="Event 1 Title" time="9:00 AM - 10:00 AM" />
118
+ <SchedulerEvent resizable="horizontal" style={{ top: "137px", left: "141px", height: "25px", width: "138px" }} title="Event 2 Title" time="10:00 AM - 11:00 AM" />
119
+ <SchedulerEvent resizable="horizontal" style={{ top: "165px", left: "141px", height: "25px", width: "138px" }} title="Event 3 Title" time="11:00 AM - 12:00 PM" />
120
+ <SchedulerEvent resizable="horizontal" style={{ top: "137px", left: "282px", height: "25px", width: "410px" }} title="Event 4 Title" time="1:00 PM - 2:00 PM" />
121
121
  </SchedulerBody>
122
122
  </>
123
123
  }
package/src/scheduler/tests/scheduler-month-horizontal-grouping.tsx ADDED
@@ -0,0 +1,17 @@
1
+ import { SchedulerFlexMonthHorizontalGrouping } from '../';
2
+
3
+ const style = `
4
+ #test-area {
5
+ max-width: 1080px;
6
+ }
7
+ `;
8
+
9
+ export default () => (
10
+ <>
11
+ <style>{style}</style>
12
+ <div id="test-area" className="k-d-grid k-grid-cols-1">
13
+ <span>Scheduler Flex Layout, Month View, Horizontal Grouping</span>
14
+ <SchedulerFlexMonthHorizontalGrouping />
15
+ </div>
16
+ </>
17
+ );