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

package/src/scheduler/scheduler-event.spec.tsx

@@ -1,36 +1,37 @@
-import { classNames, States, stateClassNames } from '../misc';
-import { Icon } from '../icon';
+import { classNames, States, stateClassNames } from "../misc";
+import { Icon } from "../icon";
 
-import { KendoComponent } from '../_types/component';
-import { SCHEDULER_FOLDER_NAME, SCHEDULER_MODULE_NAME } from './constants';
-const className = 'k-event';
+import { KendoComponent } from "../_types/component";
+import { SCHEDULER_FOLDER_NAME, SCHEDULER_MODULE_NAME } from "./constants";
+const className = "k-event";
 
-const states = [
-    States.hover,
-    States.focus,
-    States.selected
-];
+const states = [States.hover, States.focus, States.selected];
 
 const options = {};
 
 const defaultOptions = {
-    resizable: 'vertical',
-    eventPrefix: <Icon icon="arrow-rotate-cw" />,
-    eventSuffix: <><a className="k-link k-event-delete" aria-label="Delete event"><Icon icon="x" /></a></>
+  resizable: "vertical",
 } as const;
 
 export type KendoSchedulerEventProps = {
-    inverse?: boolean;
-    ongoing?: boolean;
-    multiDay?: boolean;
-    resizable?: "horizontal" | "vertical" | "none";
-    hover?: boolean;
-    focus?: boolean;
-    selected?: boolean;
-    eventPrefix?: React.JSX.Element | null;
-    eventSuffix?: React.JSX.Element | null;
+  inverse?: boolean;
+  ongoing?: boolean;
+  multiDay?: boolean;
+  readonly?: boolean;
+  recurring?: "recurring" | "non-recurring";
+  resizable?: "horizontal" | "vertical" | "none";
+  hover?: boolean;
+  focus?: boolean;
+  selected?: boolean;
+  continuationRight?: boolean;
+  continuationLeft?: boolean;
+  continuationTop?: boolean;
+  continuationBottom?: boolean;
+  title?: string;
+  time?: string;
 };
 
+
 /**
  * @aria {role="button"} Indicating that the event element is interactive.
  * @aria {aria-label} Label containing the title, start, and end date of the appointment.
@@ -39,74 +40,93 @@ export type KendoSchedulerEventProps = {
  * @ux {Edit on click} Clicking the event opens an edit form.
  * @ux {Overflow indicator} A count badge shows when multiple events overlap in the same slot.
  */
-export const SchedulerEvent: KendoComponent<KendoSchedulerEventProps & React.HTMLAttributes<HTMLDivElement>> = (
-    props: KendoSchedulerEventProps &
-        React.HTMLAttributes<HTMLDivElement>
-) => {
-    const {
-        inverse,
-        ongoing,
-        multiDay,
-        resizable = defaultOptions.resizable,
-        hover,
-        focus,
-        selected,
-        eventPrefix = defaultOptions.eventPrefix,
-        eventSuffix = defaultOptions.eventSuffix,
-        ...others
-    } = props;
+export const SchedulerEvent: KendoComponent<KendoSchedulerEventProps & React.HTMLAttributes<HTMLDivElement>> = (props: KendoSchedulerEventProps & React.HTMLAttributes<HTMLDivElement>) => {
+  const { inverse, ongoing, readonly, title, time, recurring, resizable = defaultOptions.resizable, hover, focus, selected, continuationLeft, continuationRight, continuationTop, continuationBottom, ...others } = props;
 
-    return (
-        <div
-            {...others}
-            className={classNames(
-                className,
-                props.className,
-                stateClassNames(className, {
-                    hover,
-                    focus,
-                    selected
-                }),
-                {
-                    'k-event-inverse': inverse,
-                    'k-event-ongoing': ongoing,
-                }
+  return (
+    <div
+      {...others}
+      className={classNames(
+        className,
+        props.className,
+        stateClassNames(className, {
+          hover,
+          focus,
+          selected,
+        }),
+        {
+          "k-event-inverse": inverse,
+          "k-event-ongoing": ongoing,
+          "k-readonly": readonly,
+        },
+      )}
+      role="button"
+      aria-disabled={readonly || undefined}
+      aria-label={others["aria-label"] || "Event"}
+    >
+      {continuationLeft && (
+        <span className="k-event-continuation">
+          <Icon icon="chevron-left" />
+        </span>
+      )}
+      <div>
+        {continuationTop && (
+          <span className="k-event-continuation">
+            <Icon icon="chevron-up" />
+          </span>
+        )}
+        {title && <div className="k-event-template k-event-title">{title}</div>}
+        {time && (
+          <div className="k-event-template k-event-time">
+            {recurring === "recurring" && (
+              <span className="k-event-recurrence-icon">
+                <Icon size="small" icon="arrow-rotate-cw" />
+              </span>
+            )}
+            {recurring === "non-recurring" && (
+              <span className="k-event-recurrence-icon">
+                <Icon size="small" icon="arrows-no-repeat" />
+              </span>
             )}
-            role="button"
-            aria-label={others['aria-label'] || 'Event'}
-        >
-            <span className="k-event-actions">
-                {eventPrefix}
-            </span>
-            <div>
-                {props.children}
-            </div>
-            <span className="k-event-actions">
-                {eventSuffix}
-            </span>
-            {multiDay &&
-            <>
-                <span className="k-event-top-actions">
-                    <Icon icon="chevron-up" />
-                </span>
-                <span className="k-event-bottom-actions">
-                    <Icon icon="chevron-down" />
-                </span>
-            </>
-            }
-            {resizable === 'vertical' ?
-                <>
-                    <span className="k-resize-handle k-resize-n"></span>
-                    <span className="k-resize-handle k-resize-s"></span>
-                </> :
-                resizable === 'horizontal' &&
-                <>
-                    <span className="k-resize-handle k-resize-w"></span>
-                    <span className="k-resize-handle k-resize-e"></span>
-                </>
-            }
-        </div>
-    );
+            {time}
+          </div>
+        )}
+        {continuationBottom && (
+          <span className="k-event-continuation">
+            <Icon icon="chevron-down" />
+          </span>
+        )}
+      </div>
+      {recurring === "recurring" && (
+        <span className="k-event-recurrence-icon">
+          <Icon icon="arrow-rotate-cw" />
+        </span>
+      )}
+      {recurring === "non-recurring" && (
+        <span className="k-event-recurrence-icon">
+          <Icon icon="arrows-no-repeat" />
+        </span>
+      )}
+      {continuationRight && (
+        <span className="k-event-continuation">
+          <Icon icon="chevron-right" />
+        </span>
+      )}
+      {resizable === "vertical" ? (
+        <>
+          <span className="k-resize-handle k-resize-n"></span>
+          <span className="k-resize-handle k-resize-s"></span>
+        </>
+      ) : (
+        resizable === "horizontal" && (
+          <>
+            <span className="k-resize-handle k-resize-w"></span>
+            <span className="k-resize-handle k-resize-e"></span>
+          </>
+        )
+      )}
+    </div>
+  );
 };
 
 SchedulerEvent.states = states;

package/src/scheduler/scheduler-toolbar.spec.tsx

@@ -1,5 +1,4 @@
 import { Button } from '../button';
-import { ButtonGroup } from '../button-group';
 import { classNames } from '../misc';
 import { SegmentedControl, SegmentedControlButton } from '../segmented-control';
 import { Toolbar, KendoToolbarProps } from '../toolbar';
@@ -25,6 +24,7 @@ export const SchedulerToolbar: KendoComponent<KendoSchedulerToolbarProps & React
     return (
         <Toolbar
             {...others}
+            fillMode="flat"
             className={classNames(
                 props.className,
                 {
@@ -35,16 +35,15 @@ export const SchedulerToolbar: KendoComponent<KendoSchedulerToolbarProps & React
         >
             {props.children ||
                 [
-                    <ButtonGroup key="nav" className="k-scheduler-navigation">
-                        <Button className="k-group-start">Today</Button>
-                        <Button icon="chevron-left" aria-label="Navigate to previous period"></Button>
-                        <Button className="k-group-end" icon="chevron-right" aria-label="Navigate to next period"></Button>
-                    </ButtonGroup>,
+                    <Button key="new-event" themeColor="primary" icon="plus" aria-label="Add new event">New Event</Button>,
+                    <Button key="today" fillMode="flat">Today</Button>,
+                    <Button key="prev" icon="chevron-left" fillMode="flat" aria-label="Navigate to previous period"></Button>,
+                    <Button key="next" icon="chevron-right" fillMode="flat" aria-label="Navigate to next period"></Button>,
                     <Button key="current" icon="calendar" className="k-nav-current" fillMode="flat" aria-live="polite">
-                        Monday, June 13, 2022
+                        13 June
                     </Button>,
                     <span key="spacer" className="k-spacer"></span>,
-                    <SegmentedControl key="views" thumbStyles={{ width: "15%", left: "2px" }} className="k-scheduler-views">
+                    <SegmentedControl thumbStyles={{width: "15%"}} key="views" className="k-scheduler-views">
                         <SegmentedControlButton selected>Day</SegmentedControlButton>
                         <SegmentedControlButton>Week</SegmentedControlButton>
                         <SegmentedControlButton>Month</SegmentedControlButton>

package/src/scheduler/scheduler.spec.tsx

@@ -22,11 +22,28 @@ export type KendoSchedulerProps = {
  * @aria {role="application"} Specifies the role of the component.
  * @aria {aria-label} Required as the previous navigation button contains only an icon (no text).
  * @aria {aria-label} Required as the next navigation button contains only an icon (no text).
+ * @aria {aria-label} Required for the "New Event" button. When collapsed to icon-only at narrow widths, this is the only accessible name.
+ * @aria {aria-label} Required as the Open calendar button contains only an icon (no text).
+ * @aria {aria-label} Required as the Create event button contains only an icon (no text).
+ * @aria {aria-live="polite"} The new date of the Scheduler view will be announced upon navigation to a new time span or view type.
  * @aria {role="group"} Follows SegmentedControl spec: sets the proper role for the group of view buttons.
  * @aria {aria-pressed} Follows SegmentedControl spec: specifies the current state of the view SegmentedControl. Only the selected button within the group will have this attribute set to true.
  * @aria {role="grid"} The main table of the Agenda view must indicate it is a Data Grid.
- * @aria {role="none"|\"presentation"} The <tbody> element must have its semantics removed.
- * @aria {role="none"|\"presentation"} All <table> elements within the Scheduler must have their semantic role removed.
+ * @aria {role="none"|"presentation"} The <tbody> element must have its semantics removed.
+ * @aria {role="none"|"presentation"} All <table> elements within the Scheduler must have their semantic role removed.
+ * @aria {role="button"} Indicating that the event element is interactive.
+ * @aria {aria-label} Label containing the title, start, and end date of the appointment.
+ * @aria {aria-disabled="true"} Read-only events cannot be edited or dragged; aria-disabled signals this to assistive technologies.
+ * @aria {aria-label} When the date cell shows a short day abbreviation and a date number separately, aria-label should combine both so the link has a descriptive accessible name.
+ * @aria {aria-label} The "N more" button text is ambiguous; aria-label should read "N more events" to clarify what the button reveals.
+ * @aria {role="list"} The tooltip events container acts as a list of event summaries.
+ * @aria {role="listitem"} Each tooltip event is a non-interactive list item.
+ * @aria {role="group"} Groups the day-of-week toggle buttons into a logical set.
+ * @aria {aria-label} Labels the weekday picker group (e.g. "Repeat on days").
+ * @aria {aria-label} Full day name for each abbreviated day button in the weekday picker (e.g. "Monday").
+ * @aria {aria-pressed} Indicates whether the day is currently selected in the weekday picker.
+ * @aria {tabindex} Roving tabindex: only one weekday picker button has tabindex="0", the rest have tabindex="-1".
+ * @aria {tabindex="0"} Scrollable non-agenda content must be focusable to ensure keyboard scrolling is available.
  * @ux {Multiple views} Switches between day, week, month, agenda, and timeline views.
  * @ux {View switcher} Views are accessible via a ButtonGroup or a DropDown in the toolbar.
  * @ux {Navigation} Previous and next buttons move to the adjacent time period.

package/src/scheduler/templates/scheduler-agenda.tsx

@@ -1,5 +1,5 @@
-import { ButtonGroup } from '../../button-group';
 import { Button } from '../../button';
+import { ButtonGroup } from '../../button-group';
 import { SegmentedControl, SegmentedControlButton } from '../../segmented-control';
 import { Scheduler, SchedulerBody, SchedulerCell, SchedulerContent, SchedulerHead, SchedulerHeader, SchedulerTable, SchedulerToolbar } from '../index';
 import SchedulerTask from '../scheduler-task.spec';
@@ -11,22 +11,24 @@ export const SchedulerAgenda = ({ style, ...props }: any) => (
         view="agenda"
         toolbar={
             <SchedulerToolbar>
-                <ButtonGroup className="k-scheduler-navigation">
-                    <Button className="k-group-start">Today</Button>
-                    <Button icon="chevron-left" aria-label="Navigate to previous period"></Button>
-                    <Button className="k-group-end" icon="chevron-right" aria-label="Navigate to next period"></Button>
+                <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">
-                    06/13/2022 - 06/20/2022
+                    24 June – 25 June
                 </Button>
                 <span className="k-spacer"></span>
-                <SegmentedControl thumbStyles={{ width: "22%", right: "2px" }} className="k-scheduler-views">
+                <SegmentedControl thumbStyles={{width: "22%", right: "0%"}} className="k-scheduler-views">
                     <SegmentedControlButton>Day</SegmentedControlButton>
                     <SegmentedControlButton>Week</SegmentedControlButton>
                     <SegmentedControlButton>Month</SegmentedControlButton>
                     <SegmentedControlButton>Timeline</SegmentedControlButton>
                     <SegmentedControlButton selected>Agenda</SegmentedControlButton>
                 </SegmentedControl>
+
             </SchedulerToolbar>
         }
         children={

package/src/scheduler/templates/scheduler-day.tsx

@@ -22,7 +22,7 @@ export const SchedulerDay = ({ style, ...props }: any) => (
                             <SchedulerTimes>
                                 <SchedulerTable role="none">
                                     <tbody>
-                                        <tr style={{ height: "37px" }}>
+                                        <tr style={{ height: "55px" }}>
                                             <SchedulerCell as="th" />
                                         </tr>
                                         <tr style={{ height: "36px" }}>
@@ -37,7 +37,7 @@ export const SchedulerDay = ({ style, ...props }: any) => (
                                 <SchedulerTable>
                                     <tbody>
                                         <tr className="k-scheduler-date-group">
-                                            <SchedulerCell as="th" text="Mon 6/13" />
+                                            <SchedulerCell as="th" className="k-today" dayText="Mon" text="13" />
                                         </tr>
                                     </tbody>
                                 </SchedulerTable>
@@ -211,10 +211,7 @@ export const SchedulerDay = ({ style, ...props }: any) => (
 
                                     </tbody>
                                 </SchedulerTable>
-                                <SchedulerEvent style={{ top: "74px", height: "72px", width: "200px" }}>
-                                    <div className="k-event-template k-event-time">8:00 AM - 9:00 AM</div>
-                                    <div className="k-event-template">Event Title</div>
-                                </SchedulerEvent>
+                                <SchedulerEvent style={{ top: "74px", height: "72px", width: "200px" }} title="Event Title" time="8:00 AM - 9:00 AM" />
                             </SchedulerContent>
                         </td>
                     </SchedulerBody>

package/src/scheduler/templates/scheduler-flex-agenda.tsx

@@ -10,22 +10,24 @@ export const SchedulerFlexAgenda = ({ style, ...props }: any) => (
         view="agenda"
         toolbar={
             <SchedulerToolbar>
-                <ButtonGroup className="k-scheduler-navigation">
-                    <Button className="k-group-start">Today</Button>
-                    <Button icon="chevron-left" aria-label="Navigate to previous period"></Button>
-                    <Button className="k-group-end" icon="chevron-right" aria-label="Navigate to next period"></Button>
+                <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">
-                    6/24/2024 - 6/25/2024
+                    24 June – 25 June
                 </Button>
                 <span className="k-spacer"></span>
-                <SegmentedControl thumbStyles={{ width: "22%", right: "2px" }}  className="k-scheduler-views">
+                <SegmentedControl thumbStyles={{width: "22%", right: "0%"}} className="k-scheduler-views">
                     <SegmentedControlButton>Day</SegmentedControlButton>
                     <SegmentedControlButton>Week</SegmentedControlButton>
                     <SegmentedControlButton>Month</SegmentedControlButton>
                     <SegmentedControlButton>Timeline</SegmentedControlButton>
                     <SegmentedControlButton selected>Agenda</SegmentedControlButton>
                 </SegmentedControl>
+
             </SchedulerToolbar>
         }
         children={

package/src/scheduler/templates/scheduler-flex-day.tsx

@@ -10,22 +10,24 @@ export const SchedulerFlexDay = ({ style, ...props }: any) => (
         view="day"
         toolbar={
             <SchedulerToolbar>
-                <ButtonGroup className="k-scheduler-navigation">
-                    <Button className="k-group-start">Today</Button>
-                    <Button icon="chevron-left" aria-label="Navigate to previous period"></Button>
-                    <Button className="k-group-end" icon="chevron-right" aria-label="Navigate to next period"></Button>
+                <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">
-                    Monday, June 24, 2024
+                    24 June
                 </Button>
                 <span className="k-spacer"></span>
-                <SegmentedControl thumbStyles={{ width: "15%", left: "2px" }} className="k-scheduler-views">
+                <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>
         }
         footer={
@@ -41,7 +43,7 @@ export const SchedulerFlexDay = ({ style, ...props }: any) => (
                             <SchedulerCell as="div" cellType={[ "side" ]} style={{ minWidth: "65px" }} />
                             <SchedulerCell as="div" cellType={[ "group" ]}>
                                 <SchedulerRow>
-                                    <SchedulerCell as="div" cellType={[ "heading" ]} text="Mon, 6/24"/>
+                                    <SchedulerCell as="div" cellType={[ "heading" ]} className="k-today" dayText="Mon" text="24"/>
                                 </SchedulerRow>
                             </SchedulerCell>
                         </SchedulerRow>
@@ -138,10 +140,7 @@ export const SchedulerFlexDay = ({ style, ...props }: any) => (
                             </SchedulerCell>
                         </SchedulerRow>
                     </SchedulerGroup>
-                    <SchedulerEvent style={{ top: "0px", left: "80px", height: "72px", width: "200px" }}>
-                        <div className="k-event-template k-event-time">8:00 AM - 9:00 AM</div>
-                        <div className="k-event-template">Event Title</div>
-                    </SchedulerEvent>
+                    <SchedulerEvent style={{ top: "0px", left: "80px", height: "72px", width: "200px" }} title="Event Title" time="8:00 AM - 9:00 AM" />
                 </SchedulerBody>
             </>
         }

package/src/scheduler/templates/scheduler-flex-horizontal-grouping.tsx

@@ -34,22 +34,22 @@ export const SchedulerFlexHorizontalGrouping = (...props) => (
                             <SchedulerCell as="div" cellType={[ "side" ]} style={{ minWidth: "61px" }} />
                             <SchedulerCell as="div" cellType={[ "group" ]}>
                                 <SchedulerRow>
-                                    <SchedulerCell as="div" cellType={[ "heading" ]} text="Mon, 6/13" />
+                                    <SchedulerCell as="div" cellType={[ "heading" ]} dayText="Mon" text="13" />
                                 </SchedulerRow>
                             </SchedulerCell>
                             <SchedulerCell as="div" cellType={[ "group" ]}>
                                 <SchedulerRow>
-                                    <SchedulerCell as="div" cellType={[ "heading" ]} text="Tue, 6/14" />
+                                    <SchedulerCell as="div" cellType={[ "heading" ]} className="k-today" dayText="Tue" text="14" />
                                 </SchedulerRow>
                             </SchedulerCell>
                             <SchedulerCell as="div" cellType={[ "group" ]}>
                                 <SchedulerRow>
-                                    <SchedulerCell as="div" cellType={[ "heading" ]} text="Mon, 6/13" />
+                                    <SchedulerCell as="div" cellType={[ "heading" ]} dayText="Mon" text="13" />
                                 </SchedulerRow>
                             </SchedulerCell>
                             <SchedulerCell as="div" cellType={[ "group" ]}>
                                 <SchedulerRow>
-                                    <SchedulerCell as="div" cellType={[ "heading" ]} text="Tue, 6/14" />
+                                    <SchedulerCell as="div" cellType={[ "heading" ]} className="k-today" dayText="Tue" text="14" />
                                 </SchedulerRow>
                             </SchedulerCell>
                         </SchedulerRow>
@@ -316,14 +316,8 @@ export const SchedulerFlexHorizontalGrouping = (...props) => (
                             </SchedulerCell>
                         </SchedulerRow>
                     </SchedulerGroup>
-                    <SchedulerEvent eventPrefix={null} style={{ top: "100px", left: "88px", height: "194px", width: "200px" }}>
-                        <div className="k-event-template k-event-time">8:00 AM - 9:00 AM</div>
-                        <div className="k-event-template">Event 1 Title</div>
-                    </SchedulerEvent>
-                    <SchedulerEvent style={{ top: "100px", left: "293px", height: "194px", width: "200px" }}>
-                        <div className="k-event-template k-event-time">8:00 AM - 9:00 AM</div>
-                        <div className="k-event-template">Event 2 Title</div>
-                    </SchedulerEvent>
+                    <SchedulerEvent style={{ top: "100px", left: "88px", height: "194px", width: "200px" }} title="Event 1 Title" time="8:00 AM - 9:00 AM" />
+                    <SchedulerEvent style={{ top: "100px", left: "293px", height: "194px", width: "200px" }} title="Event 2 Title" time="8:00 AM - 9:00 AM" />
                 </SchedulerBody>
             </>
         }

package/src/scheduler/templates/scheduler-flex-month.tsx

@@ -11,22 +11,24 @@ export const SchedulerFlexMonth = ({ style, ...props } :any) => (
         view="month"
         toolbar={
             <SchedulerToolbar>
-                <ButtonGroup className="k-scheduler-navigation">
-                    <Button className="k-group-start">Today</Button>
-                    <Button icon="chevron-left" aria-label="Navigate to previous period"></Button>
-                    <Button className="k-group-end" icon="chevron-right" aria-label="Navigate to next period"></Button>
+                <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">
-                    June 23 2024
+                    February 2026
                 </Button>
                 <span className="k-spacer"></span>
-                <SegmentedControl thumbStyles={{ width: "19%", left: "34%" }} className="k-scheduler-views">
+                <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>
         }
         children={
@@ -64,7 +66,7 @@ export const SchedulerFlexMonth = ({ style, ...props } :any) => (
                                 <SchedulerRow>
                                     <SchedulerCell as="div" cellType={[ "slot" ]}>
                                         <span className="k-link k-nav-day">02</span>
-                                        <Button className="k-more-events" icon="more-horizontal" aria-label="Show more events"></Button>
+                                        <Button className="k-more-events" size="xsmall" fillMode="flat" themeColor="primary" aria-label="3 more events">3 more</Button>
                                     </SchedulerCell>
                                     <SchedulerCell as="div" cellType={[ "slot" ]} text="03" />
                                     <SchedulerCell as="div" cellType={[ "slot" ]} text="04" />
@@ -112,34 +114,10 @@ export const SchedulerFlexMonth = ({ style, ...props } :any) => (
                             </SchedulerCell>
                         </SchedulerRow>
                     </SchedulerGroup>
-                    <SchedulerEvent eventPrefix={null} eventSuffix={null} resizable="none" style={{ top: "137px", width: "138px" }}>
-                        <div>
-                            <div className="k-event-template">
-                                            Event 1 Title
-                            </div>
-                        </div>
-                    </SchedulerEvent>
-                    <SchedulerEvent eventPrefix={null} eventSuffix={null} resizable="none" style={{ top: "137px", left: "141px", width: "138px" }}>
-                        <div>
-                            <div className="k-event-template">
-                                            Event 2 Title
-                            </div>
-                        </div>
-                    </SchedulerEvent>
-                    <SchedulerEvent eventPrefix={null} eventSuffix={null} resizable="none" style={{ top: "165px", left: "141px", width: "138px" }}>
-                        <div>
-                            <div className="k-event-template">
-                                            Event 3 Title
-                            </div>
-                        </div>
-                    </SchedulerEvent>
-                    <SchedulerEvent eventSuffix={null} resizable="none" style={{ top: "137px", left: "282px", width: "410px" }}>
-                        <div>
-                            <div className="k-event-template">
-                                            Event 4 Title
-                            </div>
-                        </div>
-                    </SchedulerEvent>
+                    <SchedulerEvent resizable="none" style={{ top: "137px", height: "25px", width: "138px" }} title="Event 1 Title" />
+                    <SchedulerEvent resizable="none" style={{ top: "137px", left: "141px", height: "25px", width: "138px" }} title="Event 2 Title" />
+                    <SchedulerEvent resizable="none" style={{ top: "165px", left: "141px", height: "25px", width: "138px" }} title="Event 3 Title" />
+                    <SchedulerEvent resizable="none" style={{ top: "137px", left: "282px", height: "25px", width: "410px" }} title="Event 4 Title" />
                 </SchedulerBody>
             </>
         }

package/src/scheduler/templates/scheduler-flex-timeline.tsx

@@ -11,22 +11,24 @@ export const SchedulerFlexTimeline = ({ style, ...props }: any) => (
         view="timeline"
         toolbar={
             <SchedulerToolbar>
-                <ButtonGroup className="k-scheduler-navigation">
-                    <Button className="k-group-start">Today</Button>
-                    <Button icon="chevron-left" aria-label="Navigate to previous period"></Button>
-                    <Button className="k-group-end" icon="chevron-right" aria-label="Navigate to next period"></Button>
+                <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">
-                    Friday, June 21, 2024
+                    21 June
                 </Button>
                 <span className="k-spacer"></span>
-                <SegmentedControl thumbStyles={{ width: "23%", left: "54%" }} className="k-scheduler-views">
+                <SegmentedControl thumbStyles={{width: "23%", left: "54%"}} className="k-scheduler-views">
                     <SegmentedControlButton>Day</SegmentedControlButton>
                     <SegmentedControlButton>Week</SegmentedControlButton>
                     <SegmentedControlButton>Month</SegmentedControlButton>
                     <SegmentedControlButton selected>Timeline</SegmentedControlButton>
                     <SegmentedControlButton>Agenda</SegmentedControlButton>
                 </SegmentedControl>
+
             </SchedulerToolbar>
         }
         footer={