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

package/src/scheduler/tests/scheduler-recurrence-dialog.tsx

@@ -0,0 +1,437 @@
+import { Button } from "../../button";
+import { NumericTextbox } from "../../numerictextbox";
+import { DatePicker } from "../../datepicker";
+import { DropdownListNormal } from "../../dropdownlist";
+import { Dialog } from "../../dialog";
+import { Form, FormField, FormHint } from "../../form";
+import { RadioButton, RadioGroup, RadioItem } from "../../radio";
+
+const style = `
+    #test-area {
+        gap: 40px;
+    }
+    .k-dialog-wrapper {
+        position: relative;
+    }
+    .k-overlay {
+        display: none;
+    }
+`;
+
+export default () => (
+  <>
+    <style>{style}</style>
+    <div id="test-area" className="k-d-flex k-flex-wrap">
+      {/* ── Recurrence – Daily ─────────────────────────────────────────── */}
+      <section>
+        <span>Recurrence – Daily</span>
+        <Dialog
+          title="Recurrence"
+          actions={["x"]}
+          actionButtonsAlign="end"
+          actionButtons={
+            <>
+              <span className="k-spacer" />
+              <Button>Cancel</Button>
+              <Button themeColor="primary">
+                Save
+              </Button>
+            </>
+          }
+          style={{ width: "540px" }}
+        >
+          <Form tag="div" orientation="horizontal">
+            <FormField
+              orientation="horizontal"
+              label="Repeat every"
+              editor={
+                <div className="k-scheduler-recurrence-fields">
+                  <NumericTextbox showClearButton={false} value="1" aria-label="Interval" />
+                  <DropdownListNormal value="Day" aria-label="Frequency" />
+                </div>
+              }
+            />
+            <FormField
+              orientation="horizontal"
+              label="Ends"
+              editor={
+                <div className="k-scheduler-recurrence-fields">
+                  <DropdownListNormal value="Never" aria-label="End condition" />
+                </div>
+              }
+            />
+
+            <FormField editor={<FormHint>Repeats every day.</FormHint>} />
+          </Form>
+        </Dialog>
+      </section>
+
+      {/* ── Recurrence – Daily – After N occurrences ──────────────────── */}
+      <section>
+        <span>Recurrence – Daily – After occurrences</span>
+        <Dialog
+          title="Recurrence"
+          actions={["x"]}
+          actionButtonsAlign="end"
+          actionButtons={
+            <>
+              <span className="k-spacer" />
+              <Button>Cancel</Button>
+              <Button themeColor="primary">
+                Save
+              </Button>
+            </>
+          }
+          style={{ width: "540px" }}
+        >
+          <Form tag="div" orientation="horizontal">
+            <FormField
+              orientation="horizontal"
+              label="Repeat every"
+              editor={
+                <div className="k-scheduler-recurrence-fields">
+                  <NumericTextbox showClearButton={false} value="2" aria-label="Interval" />
+                  <DropdownListNormal value="Day" aria-label="Frequency" />
+                </div>
+              }
+            />
+            <FormField
+              orientation="horizontal"
+              label="Ends"
+              editor={
+                <div className="k-scheduler-recurrence-fields">
+                  <DropdownListNormal value="After" aria-label="End condition" />
+                  <NumericTextbox showClearButton={false} value="10" aria-label="Occurrences" />
+                </div>
+              }
+            />
+            <FormField editor={<FormHint>Repeats every 2 days, after 10 time(s).</FormHint>} />
+          </Form>
+        </Dialog>
+      </section>
+
+      {/* ── Recurrence – Daily – On date ──────────────────────────────── */}
+      <section>
+        <span>Recurrence – Daily – On date</span>
+        <Dialog
+          title="Recurrence"
+          actions={["x"]}
+          actionButtonsAlign="end"
+          actionButtons={
+            <>
+              <span className="k-spacer" />
+              <Button>Cancel</Button>
+              <Button themeColor="primary">
+                Save
+              </Button>
+            </>
+          }
+          style={{ width: "540px" }}
+        >
+          <Form tag="div" orientation="horizontal">
+            <FormField
+              orientation="horizontal"
+              label="Repeat every"
+              editor={
+                <div className="k-scheduler-recurrence-fields">
+                  <NumericTextbox showClearButton={false} value="1" aria-label="Interval" />
+                  <DropdownListNormal value="Day" aria-label="Frequency" />
+                </div>
+              }
+            />
+            <FormField
+              orientation="horizontal"
+              label="Ends"
+              editor={
+                <div className="k-scheduler-recurrence-fields">
+                  <DropdownListNormal value="On" aria-label="End condition" />
+                  <DatePicker value="01/31/2026" aria-label="End date" />
+                </div>
+              }
+            />
+            <FormField editor={<FormHint>Repeats every day until Jan 31, 2026.</FormHint>} />
+          </Form>
+        </Dialog>
+      </section>
+
+      {/* ── Recurrence – Weekly ────────────────────────────────────────── */}
+      <section>
+        <span>Recurrence – Weekly</span>
+        <Dialog
+          title="Recurrence"
+          actions={["x"]}
+          actionButtonsAlign="end"
+          actionButtons={
+            <>
+              <span className="k-spacer" />
+              <Button>Cancel</Button>
+              <Button themeColor="primary">
+                Save
+              </Button>
+            </>
+          }
+          style={{ width: "540px" }}
+        >
+          <Form tag="div" orientation="horizontal">
+            <FormField
+              orientation="horizontal"
+              label="Repeat every"
+              editor={
+                <div className="k-scheduler-recurrence-fields">
+                  <NumericTextbox showClearButton={false} value="1" aria-label="Interval" />
+                  <DropdownListNormal value="Week" aria-label="Frequency" />
+                </div>
+              }
+            />
+            <FormField
+              orientation="horizontal"
+              label="Repeat on"
+              editor={
+                <div className="k-scheduler-weekday-picker" role="group" aria-label="Repeat on days">
+                  <Button themeColor="primary" fillMode="flat" rounded="full" aria-label="Monday" aria-pressed="false" tabIndex={-1}>
+                    M
+                  </Button>
+                  <Button selected themeColor="primary" fillMode="flat" rounded="full" aria-label="Tuesday" aria-pressed="true" tabIndex={0}>
+                    T
+                  </Button>
+                  <Button themeColor="primary" fillMode="flat" rounded="full" aria-label="Wednesday" aria-pressed="false" tabIndex={-1}>
+                    W
+                  </Button>
+                  <Button themeColor="primary" fillMode="flat" rounded="full" aria-label="Thursday" aria-pressed="false" tabIndex={-1}>
+                    T
+                  </Button>
+                  <Button themeColor="primary" fillMode="flat" rounded="full" aria-label="Friday" aria-pressed="false" tabIndex={-1}>
+                    F
+                  </Button>
+                  <Button themeColor="primary" fillMode="flat" rounded="full" aria-label="Saturday" aria-pressed="false" tabIndex={-1}>
+                    S
+                  </Button>
+                  <Button themeColor="primary" fillMode="flat" rounded="full" aria-label="Sunday" aria-pressed="false" tabIndex={-1}>
+                    S
+                  </Button>
+                </div>
+              }
+            />
+            <FormField
+              orientation="horizontal"
+              label="Ends"
+              editor={
+                <div className="k-scheduler-recurrence-fields">
+                  <DropdownListNormal value="Never" aria-label="End condition" />
+                </div>
+              }
+            />
+            <FormField editor={<FormHint>Repeats every week on Tuesday.</FormHint>} />
+          </Form>
+        </Dialog>
+      </section>
+
+      {/* ── Recurrence – Monthly ───────────────────────────────────────── */}
+      <section>
+        <span>Recurrence – Monthly</span>
+        <Dialog
+          title="Recurrence"
+          actions={["x"]}
+          actionButtonsAlign="end"
+          actionButtons={
+            <>
+              <span className="k-spacer" />
+              <Button>Cancel</Button>
+              <Button themeColor="primary">
+                Save
+              </Button>
+            </>
+          }
+          style={{ width: "540px" }}
+        >
+          <Form tag="div" orientation="horizontal">
+            <FormField
+              orientation="horizontal"
+              label="Repeat every"
+              editor={
+                <div className="k-scheduler-recurrence-fields">
+                  <NumericTextbox showClearButton={false} value="1" aria-label="Interval" />
+                  <DropdownListNormal value="Month" aria-label="Frequency" />
+                </div>
+              }
+            />
+            <FormField
+              orientation="horizontal"
+              label="Repeat on"
+              editor={
+                <RadioGroup>
+                  <RadioItem>
+                    <RadioButton id="recur-monthday" checked aria-label="Day of the week" />
+                    <div className="k-scheduler-recurrence-fields">
+                      <DropdownListNormal value="Second" aria-label="Position" />
+                      <DropdownListNormal value="Weekend day" aria-label="Day type" />
+                    </div>
+                  </RadioItem>
+                  <RadioItem>
+                    <RadioButton id="recur-weekday" aria-label="Day of the month" />
+                    <div className="k-scheduler-recurrence-fields">
+                      <NumericTextbox showClearButton={false} value="31 day" aria-label="Day of month" />
+                    </div>
+                  </RadioItem>
+                </RadioGroup>
+              }
+            />
+            <FormField
+              orientation="horizontal"
+              label="Ends"
+              editor={
+                <div className="k-scheduler-recurrence-fields">
+                  <DropdownListNormal value="Never" aria-label="End condition" />
+                </div>
+              }
+            />
+            <FormField editor={<FormHint>Repeats every month on the second weekend day.</FormHint>} />
+          </Form>
+        </Dialog>
+      </section>
+
+      {/* ── Recurrence – Yearly ────────────────────────────────────────── */}
+      <section>
+        <span>Recurrence – Yearly</span>
+        <Dialog
+          title="Recurrence"
+          actions={["x"]}
+          actionButtonsAlign="end"
+          actionButtons={
+            <>
+              <span className="k-spacer" />
+              <Button>Cancel</Button>
+              <Button themeColor="primary">
+                Save
+              </Button>
+            </>
+          }
+          style={{ width: "540px" }}
+        >
+          <Form tag="div" orientation="horizontal">
+            <FormField
+              orientation="horizontal"
+              label="Repeat every"
+              editor={
+                <div className="k-scheduler-recurrence-fields">
+                  <NumericTextbox showClearButton={false} value="1" aria-label="Interval" />
+                  <DropdownListNormal value="Year" aria-label="Frequency" />
+                </div>
+              }
+            />
+            <FormField
+              orientation="horizontal"
+              label="Repeat on"
+              editor={
+                <RadioGroup>
+                  <RadioItem>
+                    <RadioButton id="recur-yearly-monthday" checked aria-label="Day of the month" />
+                    <div className="k-scheduler-recurrence-fields">
+                      <DropdownListNormal value="October" aria-label="Month" />
+                      <NumericTextbox showClearButton={false} value="1" aria-label="Day" />
+                    </div>
+                  </RadioItem>
+                  <RadioItem>
+                    <RadioButton id="recur-yearly-weekday" aria-label="Day of the week" />
+                    <div className="k-scheduler-recurrence-fields">
+                      <DropdownListNormal value="Second" aria-label="Position" />
+                      <DropdownListNormal value="Weekend day" aria-label="Day type" />
+                      <span className="k-scheduler-edit-form-row">
+                        <span>of</span>
+                        <DropdownListNormal value="October" aria-label="Month" />
+                      </span>
+                    </div>
+                  </RadioItem>
+                </RadioGroup>
+              }
+            />
+            <FormField
+              orientation="horizontal"
+              label="Ends"
+              editor={
+                <div className="k-scheduler-recurrence-fields">
+                  <DropdownListNormal value="Never" aria-label="End condition" />
+                </div>
+              }
+            />
+            <FormField editor={<FormHint>Repeats every year on October 1st.</FormHint>} />
+          </Form>
+        </Dialog>
+      </section>
+
+      {/* ── Recurrence – Weekly – Remove recurrence ────────────────────── */}
+      <section>
+        <span>Recurrence – Weekly – Remove recurrence</span>
+        <Dialog
+          title="Recurrence"
+          actions={["x"]}
+          actionButtonsAlign="end"
+          actionButtons={
+            <>
+              <Button fillMode="flat" themeColor="primary">
+                Remove recurrence
+              </Button>
+              <Button>Cancel</Button>
+              <Button themeColor="primary">
+                Save
+              </Button>
+            </>
+          }
+          style={{ width: "540px" }}
+        >
+          <Form tag="div" orientation="horizontal">
+            <FormField
+              orientation="horizontal"
+              label="Repeat every"
+              editor={
+                <div className="k-scheduler-recurrence-fields">
+                  <NumericTextbox showClearButton={false} value="1" aria-label="Interval" />
+                  <DropdownListNormal value="Week" aria-label="Frequency" />
+                </div>
+              }
+            />
+            <FormField
+              orientation="horizontal"
+              label="Repeat on"
+              editor={
+                <div className="k-scheduler-weekday-picker" role="group" aria-label="Repeat on days">
+                  <Button themeColor="primary" fillMode="flat" rounded="full" aria-label="Monday" aria-pressed="false" tabIndex={-1}>
+                    M
+                  </Button>
+                  <Button selected themeColor="primary" fillMode="flat" rounded="full" aria-label="Tuesday" aria-pressed="true" tabIndex={0}>
+                    T
+                  </Button>
+                  <Button selected themeColor="primary" fillMode="flat" rounded="full" aria-label="Wednesday" aria-pressed="true" tabIndex={-1}>
+                    W
+                  </Button>
+                  <Button selected themeColor="primary" fillMode="flat" rounded="full" aria-label="Thursday" aria-pressed="true" tabIndex={-1}>
+                    T
+                  </Button>
+                  <Button themeColor="primary" fillMode="flat" rounded="full" aria-label="Friday" aria-pressed="false" tabIndex={-1}>
+                    F
+                  </Button>
+                  <Button themeColor="primary" fillMode="flat" rounded="full" aria-label="Saturday" aria-pressed="false" tabIndex={-1}>
+                    S
+                  </Button>
+                  <Button themeColor="primary" fillMode="flat" rounded="full" aria-label="Sunday" aria-pressed="false" tabIndex={-1}>
+                    S
+                  </Button>
+                </div>
+              }
+            />
+            <FormField
+              orientation="horizontal"
+              label="Ends"
+              editor={
+                <div className="k-scheduler-recurrence-fields">
+                  <DropdownListNormal value="Never" aria-label="End condition" />
+                </div>
+              }
+            />
+            <FormField editor={<FormHint>Repeats every week on Tuesday, Wednesday and Thursday.</FormHint>} />
+          </Form>
+        </Dialog>
+      </section>
+    </div>
+  </>
+);

package/src/scheduler/tests/scheduler-timeline-view.tsx

@@ -1,7 +1,14 @@
 import { SchedulerTimeline, SchedulerFlexTimeline } from "../";
 
+const style = `
+    #test-area {
+        max-width: 1080px;
+    }
+`;
+
 export default () => (
     <>
+        <style>{style}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-1">
             <span>Scheduler Table Layout</span>
             <SchedulerTimeline />

package/src/scheduler/tests/scheduler-toolbar-responsive.tsx

@@ -0,0 +1,226 @@
+import { Button } from "../../button";
+import { ButtonGroup } from "../../button-group";
+import MenuButton from "../../menu-button/menu-button.spec";
+import { SegmentedControl, SegmentedControlButton } from "../../segmented-control";
+import { SchedulerToolbar } from "../scheduler-toolbar.spec";
+
+const styles = `
+    #test-area {
+        gap: 20px;
+        max-width: unset;
+        grid-template-columns: 20px 1fr;
+    }
+
+    /* These styles are used to test the pager items hiding order threshold */
+    #test-area > .k-toolbar {
+        width: fit-content;
+    }
+`;
+
+export default () => (
+  <>
+    <style>{styles}</style>
+    <div id="test-area" className="k-d-grid">
+      <span className="k-colspan-2">Scheduler Toolbar — Day view</span>
+
+      <span>0</span>
+      <SchedulerToolbar>
+        <Button themeColor="primary" icon="plus" aria-label="Add new event">
+          New Event
+        </Button>
+        <Button fillMode="flat">Today</Button>
+        <ButtonGroup fillMode="flat">
+          <Button icon="chevron-left" fillMode="flat" aria-label="Navigate to previous period"></Button>
+          <Button icon="chevron-right" fillMode="flat" aria-label="Navigate to next period"></Button>
+        </ButtonGroup>
+        <Button icon="calendar" className="k-nav-current" fillMode="flat" aria-live="polite">
+          3 February
+        </Button>
+        <span className="k-spacer"></span>
+        <SegmentedControl thumbStyles={{ width: "15%" }} className="k-scheduler-views">
+          <SegmentedControlButton selected>Day</SegmentedControlButton>
+          <SegmentedControlButton>Week</SegmentedControlButton>
+          <SegmentedControlButton>Month</SegmentedControlButton>
+          <SegmentedControlButton>Timeline</SegmentedControlButton>
+          <SegmentedControlButton>Agenda</SegmentedControlButton>
+        </SegmentedControl>
+      </SchedulerToolbar>
+
+      <span>1</span>
+      <SchedulerToolbar>
+        <Button themeColor="primary" icon="plus" aria-label="Add new event">
+          New Event
+        </Button>
+        <Button fillMode="flat">Today</Button>
+        <ButtonGroup fillMode="flat">
+          <Button icon="chevron-left" fillMode="flat" aria-label="Navigate to previous period"></Button>
+          <Button icon="chevron-right" fillMode="flat" aria-label="Navigate to next period"></Button>
+        </ButtonGroup>
+        <Button icon="calendar" className="k-nav-current" fillMode="flat" aria-live="polite">
+          3 February
+        </Button>
+        <span className="k-spacer"></span>
+        <span className="k-separator"></span>
+        <MenuButton fillMode="flat">Day</MenuButton>
+      </SchedulerToolbar>
+
+      <span>2</span>
+      <SchedulerToolbar>
+        <Button themeColor="primary" icon="plus" aria-label="Add new event"></Button>
+        <ButtonGroup fillMode="flat">
+          <Button icon="chevron-left" fillMode="flat" aria-label="Navigate to previous period"></Button>
+          <Button icon="chevron-right" fillMode="flat" aria-label="Navigate to next period"></Button>
+        </ButtonGroup>
+        <Button icon="calendar" className="k-nav-current" fillMode="flat" aria-live="polite">
+          3 Feb
+        </Button>
+        <span className="k-spacer"></span>
+        <MenuButton fillMode="flat">Day</MenuButton>
+      </SchedulerToolbar>
+
+      <span>3</span>
+      <SchedulerToolbar>
+        <Button themeColor="primary" icon="plus" aria-label="Add new event"></Button>
+        <Button icon="calendar" className="k-nav-current" fillMode="flat" aria-live="polite">
+          3 Feb
+        </Button>
+        <span className="k-spacer"></span>
+        <MenuButton fillMode="flat">Day</MenuButton>
+      </SchedulerToolbar>
+
+      <span className="k-colspan-2">Scheduler Toolbar — Week view</span>
+
+      <span>0</span>
+      <SchedulerToolbar>
+        <Button themeColor="primary" icon="plus" aria-label="Add new event">
+          New Event
+        </Button>
+        <Button fillMode="flat">Today</Button>
+        <ButtonGroup fillMode="flat">
+          <Button icon="chevron-left" fillMode="flat" aria-label="Navigate to previous period"></Button>
+          <Button icon="chevron-right" fillMode="flat" aria-label="Navigate to next period"></Button>
+        </ButtonGroup>
+        <Button icon="calendar" className="k-nav-current" fillMode="flat" aria-live="polite">
+          31 May – 6 June
+        </Button>
+        <span className="k-spacer"></span>
+        <SegmentedControl thumbStyles={{ width: "19%", left: "15%" }} className="k-scheduler-views">
+          <SegmentedControlButton>Day</SegmentedControlButton>
+          <SegmentedControlButton selected>Week</SegmentedControlButton>
+          <SegmentedControlButton>Month</SegmentedControlButton>
+          <SegmentedControlButton>Timeline</SegmentedControlButton>
+          <SegmentedControlButton>Agenda</SegmentedControlButton>
+        </SegmentedControl>
+      </SchedulerToolbar>
+
+      <span>1</span>
+      <SchedulerToolbar>
+        <Button themeColor="primary" icon="plus" aria-label="Add new event">
+          New Event
+        </Button>
+        <Button fillMode="flat">Today</Button>
+        <ButtonGroup fillMode="flat">
+          <Button icon="chevron-left" fillMode="flat" aria-label="Navigate to previous period"></Button>
+          <Button icon="chevron-right" fillMode="flat" aria-label="Navigate to next period"></Button>
+        </ButtonGroup>
+        <Button icon="calendar" className="k-nav-current" fillMode="flat" aria-live="polite">
+          31 May – 6 June
+        </Button>
+        <span className="k-spacer"></span>
+        <span className="k-separator"></span>
+        <MenuButton fillMode="flat">Week</MenuButton>
+      </SchedulerToolbar>
+
+      <span>2</span>
+      <SchedulerToolbar>
+        <Button themeColor="primary" icon="plus" aria-label="Add new event"></Button>
+        <ButtonGroup fillMode="flat">
+          <Button icon="chevron-left" fillMode="flat" aria-label="Navigate to previous period"></Button>
+          <Button icon="chevron-right" fillMode="flat" aria-label="Navigate to next period"></Button>
+        </ButtonGroup>
+        <Button icon="calendar" className="k-nav-current" fillMode="flat" aria-live="polite">
+          31 May
+        </Button>
+        <span className="k-spacer"></span>
+        <MenuButton fillMode="flat">Week</MenuButton>
+      </SchedulerToolbar>
+
+      <span>3</span>
+      <SchedulerToolbar>
+        <Button themeColor="primary" icon="plus" aria-label="Add new event"></Button>
+        <Button icon="calendar" className="k-nav-current" fillMode="flat" aria-live="polite">
+          31 May
+        </Button>
+        <span className="k-spacer"></span>
+        <MenuButton fillMode="flat">Week</MenuButton>
+      </SchedulerToolbar>
+
+      <span className="k-colspan-2">Scheduler Toolbar — Month view</span>
+
+      <span>0</span>
+      <SchedulerToolbar>
+        <Button themeColor="primary" icon="plus" aria-label="Add new event">
+          New Event
+        </Button>
+        <Button fillMode="flat">Today</Button>
+        <ButtonGroup fillMode="flat">
+          <Button icon="chevron-left" fillMode="flat" aria-label="Navigate to previous period"></Button>
+          <Button icon="chevron-right" fillMode="flat" aria-label="Navigate to next period"></Button>
+        </ButtonGroup>
+        <Button icon="calendar" className="k-nav-current" fillMode="flat" aria-live="polite">
+          February 2026
+        </Button>
+        <span className="k-spacer"></span>
+        <SegmentedControl thumbStyles={{ width: "19%", left: "34%" }} className="k-scheduler-views">
+          <SegmentedControlButton>Day</SegmentedControlButton>
+          <SegmentedControlButton>Week</SegmentedControlButton>
+          <SegmentedControlButton selected>Month</SegmentedControlButton>
+          <SegmentedControlButton>Timeline</SegmentedControlButton>
+          <SegmentedControlButton>Agenda</SegmentedControlButton>
+        </SegmentedControl>
+      </SchedulerToolbar>
+
+      <span>1</span>
+      <SchedulerToolbar>
+        <Button themeColor="primary" icon="plus" aria-label="Add new event">
+          New Event
+        </Button>
+        <Button fillMode="flat">Today</Button>
+        <ButtonGroup fillMode="flat">
+          <Button icon="chevron-left" fillMode="flat" aria-label="Navigate to previous period"></Button>
+          <Button icon="chevron-right" fillMode="flat" aria-label="Navigate to next period"></Button>
+        </ButtonGroup>
+        <Button icon="calendar" className="k-nav-current" fillMode="flat" aria-live="polite">
+          February 2026
+        </Button>
+        <span className="k-spacer"></span>
+        <span className="k-separator"></span>
+        <MenuButton fillMode="flat">Month</MenuButton>
+      </SchedulerToolbar>
+
+      <span>2</span>
+      <SchedulerToolbar>
+        <Button themeColor="primary" icon="plus" aria-label="Add new event"></Button>
+        <ButtonGroup fillMode="flat">
+          <Button icon="chevron-left" fillMode="flat" aria-label="Navigate to previous period"></Button>
+          <Button icon="chevron-right" fillMode="flat" aria-label="Navigate to next period"></Button>
+        </ButtonGroup>
+        <Button icon="calendar" className="k-nav-current" fillMode="flat" aria-live="polite">
+          Feb 2026
+        </Button>
+        <span className="k-spacer"></span>
+        <MenuButton fillMode="flat">Month</MenuButton>
+      </SchedulerToolbar>
+
+      <span>3</span>
+      <SchedulerToolbar>
+        <Button themeColor="primary" icon="plus" aria-label="Add new event"></Button>
+        <Button icon="calendar" className="k-nav-current" fillMode="flat" aria-live="polite">
+          Feb 2026
+        </Button>
+        <span className="k-spacer"></span>
+        <MenuButton fillMode="flat">Month</MenuButton>
+      </SchedulerToolbar>
+    </div>
+  </>
+);