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

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>
+                <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>
+                <Button fillMode="flat">Today</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>
+                <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>
+                <Button fillMode="flat">Today</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>
+                <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>
+                <Button fillMode="flat">Today</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>
+                <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>
+                <Button fillMode="flat">Today</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={

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

@@ -25,8 +25,8 @@ export const SchedulerFlexVerticalGrouping = ({ style, ...props }: any) => (
                             <SchedulerCell as="div" cellType={[ "side" ]} style={{ minWidth: "61px" }} />
                             <SchedulerCell as="div" className="k-group-content">
                                 <SchedulerRow>
-                                    <SchedulerCell as="div" cellType={[ "heading" ]} text="Mon, 6/13" />
-                                    <SchedulerCell as="div" cellType={[ "heading" ]} text="Tue, 6/14" />
+                                    <SchedulerCell as="div" cellType={[ "heading" ]} dayText="Mon" text="13" />
+                                    <SchedulerCell as="div" cellType={[ "heading" ]} className="k-today" dayText="Tue" text="14" />
                                 </SchedulerRow>
                             </SchedulerCell>
                         </SchedulerRow>
@@ -325,14 +325,8 @@ export const SchedulerFlexVerticalGrouping = ({ style, ...props }: any) => (
                             </SchedulerCell>
                         </SchedulerRow>
                     </SchedulerGroup>
-                    <SchedulerEvent eventPrefix={null} style={{ top: "39px", left: "269px", height: "149px", width: "345px" }}>
-                        <div className="k-event-template k-event-time">8:00 AM - 10:00 AM</div>
-                        <div className="k-event-template">Event 1 Title</div>
-                    </SchedulerEvent>
-                    <SchedulerEvent style={{ top: "39px", left: "618px", height: "194px", width: "342px" }}>
-                        <div className="k-event-template k-event-time">8:00 AM - 10:30 AM</div>
-                        <div className="k-event-template">Event 2 Title</div>
-                    </SchedulerEvent>
+                    <SchedulerEvent style={{ top: "39px", left: "269px", height: "149px", width: "345px" }} title="Event 1 Title" time="8:00 AM - 10:00 AM" />
+                    <SchedulerEvent style={{ top: "39px", left: "618px", height: "194px", width: "342px" }} title="Event 2 Title" time="8:00 AM - 10:30 AM" />
                 </SchedulerBody>
             </>
         }

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

@@ -11,22 +11,24 @@ export const SchedulerFlexWeek = ({ style, ...props }: any) => (
         view="week"
         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>
+                <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/12/2022 - 6/18/2022
+                    31 May – 6 June
                 </Button>
+                <Button fillMode="flat">Today</Button>
                 <span className="k-spacer"></span>
-                <SegmentedControl thumbStyles={{ width: "18%", left: "16%" }} className="k-scheduler-views">
+                <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>
         }
         footer={
@@ -42,13 +44,13 @@ export const SchedulerFlexWeek = ({ style, ...props }: any) => (
                             <SchedulerCell as="div" cellType={[ "side" ]} style={{ minWidth: "65px" }} />
                             <SchedulerCell as="div" cellType={[ "group" ]}>
                                 <SchedulerRow>
-                                    <SchedulerCell as="div" cellType={[ "heading" ]} text="Sun, 6/12"></SchedulerCell>
-                                    <SchedulerCell as="div" cellType={[ "heading" ]} text="Mon, 6/13"></SchedulerCell>
-                                    <SchedulerCell as="div" cellType={[ "heading" ]} text="Tue, 6/14"></SchedulerCell>
-                                    <SchedulerCell as="div" cellType={[ "heading" ]} text="Wed, 6/15"></SchedulerCell>
-                                    <SchedulerCell as="div" cellType={[ "heading" ]} text="Thu, 6/16"></SchedulerCell>
-                                    <SchedulerCell as="div" cellType={[ "heading" ]} text="Fri, 6/17"></SchedulerCell>
-                                    <SchedulerCell as="div" cellType={[ "heading" ]} text="Sat, 6/18"></SchedulerCell>
+                                    <SchedulerCell as="div" cellType={[ "heading" ]} dayText="Sun" text="12"></SchedulerCell>
+                                    <SchedulerCell as="div" cellType={[ "heading" ]} dayText="Mon" text="13"></SchedulerCell>
+                                    <SchedulerCell as="div" cellType={[ "heading" ]} dayText="Tue" text="14"></SchedulerCell>
+                                    <SchedulerCell as="div" cellType={[ "heading" ]} className="k-today" dayText="Wed" text="15"></SchedulerCell>
+                                    <SchedulerCell as="div" cellType={[ "heading" ]} dayText="Thu" text="16"></SchedulerCell>
+                                    <SchedulerCell as="div" cellType={[ "heading" ]} dayText="Fri" text="17"></SchedulerCell>
+                                    <SchedulerCell as="div" cellType={[ "heading" ]} dayText="Sat" text="18"></SchedulerCell>
                                 </SchedulerRow>
                             </SchedulerCell>
                         </SchedulerRow>

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

@@ -12,21 +12,25 @@ export const SchedulerFlexYear = ({ style, ...props }: any) => (
         view="year"
         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>
+                <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">
                     2021
                 </Button>
+                <Button fillMode="flat">Today</Button>
                 <span className="k-spacer"></span>
-                <SegmentedControl thumbStyles={{ width: "22%", right: "2px" }} className="k-scheduler-views">
+                <SegmentedControl thumbStyles={{width: "14%", right: "1px"}}  className="k-scheduler-views">
                     <SegmentedControlButton>Day</SegmentedControlButton>
                     <SegmentedControlButton>Week</SegmentedControlButton>
                     <SegmentedControlButton>Month</SegmentedControlButton>
+                    <SegmentedControlButton>Timeline</SegmentedControlButton>
+                    <SegmentedControlButton>Agenda</SegmentedControlButton>
                     <SegmentedControlButton selected>Year</SegmentedControlButton>
                 </SegmentedControl>
+
             </SchedulerToolbar>
         }
         children={

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

@@ -24,7 +24,7 @@ export const SchedulerHorizontalGrouping = (...props) => (
                                         <tr style={{ height: "37px" }}>
                                             <SchedulerCell as="th" />
                                         </tr>
-                                        <tr style={{ height: "37px" }}>
+                                        <tr style={{ height: "55px" }}>
                                             <SchedulerCell as="th" />
                                         </tr>
                                         <tr style={{ height: "36px" }}>
@@ -43,8 +43,8 @@ export const SchedulerHorizontalGrouping = (...props) => (
                                             <SchedulerCell as="th" cellType={["slot", "group"]}>Meeting Room 201</SchedulerCell>
                                         </tr>
                                         <tr className="k-scheduler-date-group">
-                                            <SchedulerCell as="th" text="Mon 6/13" />
-                                            <SchedulerCell as="th" text="Mon 6/13" />
+                                            <SchedulerCell as="th" dayText="Mon" text="13" />
+                                            <SchedulerCell as="th" dayText="Mon" text="13" />
                                         </tr>
                                     </tbody>
                                 </SchedulerTable>
@@ -244,14 +244,8 @@ export const SchedulerHorizontalGrouping = (...props) => (
                                         </tr>
                                     </tbody>
                                 </SchedulerTable>
-                                <SchedulerEvent eventPrefix={null} style={{ top: "148px", left: "445px", height: "590px", width: "120px" }}>
-                                    <div className="k-event-template k-event-time">9:00 AM - 4:00 PM</div>
-                                    <div className="k-event-template">Event 1 Title</div>
-                                </SchedulerEvent>
-                                <SchedulerEvent style={{ top: "298px", left: "567px", height: "72px", width: "120px" }}>
-                                    <div className="k-event-template k-event-time">10:00 AM - 11:00 AM</div>
-                                    <div className="k-event-template">Event 2 Title</div>
-                                </SchedulerEvent>
+                                <SchedulerEvent style={{ top: "148px", left: "445px", height: "590px", width: "120px" }} title="Event 1 Title" time="9:00 AM - 4:00 PM" />
+                                <SchedulerEvent style={{ top: "298px", left: "567px", height: "72px", width: "120px" }} title="Event 2 Title" time="10:00 AM - 11:00 AM" />
                             </SchedulerContent>
                         </td>
                     </SchedulerBody>

package/src/scheduler/templates/scheduler-month.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, SchedulerEvent } from '../index';
 
@@ -11,22 +11,24 @@ export const SchedulerMonth = ({ 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>
+                <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">
-                        Jun, 2024
+                    June 2024
                 </Button>
+                <Button fillMode="flat">Today</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={
@@ -121,34 +123,11 @@ export const SchedulerMonth = ({ style, ...props }: any) => (
                                         </tr>
                                     </tbody>
                                 </SchedulerTable>
-                                <SchedulerEvent eventPrefix={null} eventSuffix={null} resizable="none" style={{ top: "137px", width: "137px" }}>
-                                    <div>
-                                        <div className="k-event-template">
-                                            Event 1 Title
-                                        </div>
-                                    </div>
-                                </SchedulerEvent>
-                                <SchedulerEvent eventPrefix={null} eventSuffix={null} resizable="none" style={{ top: "137px", left: "138px", width: "137px" }}>
-                                    <div>
-                                        <div className="k-event-template">
-                                            Event 2 Title
-                                        </div>
-                                    </div>
-                                </SchedulerEvent>
-                                <SchedulerEvent eventPrefix={null} eventSuffix={null} resizable="none" style={{ top: "165px", left: "138px", width: "137px" }}>
-                                    <div>
-                                        <div className="k-event-template">
-                                            Event 3 Title
-                                        </div>
-                                    </div>
-                                </SchedulerEvent>
-                                <SchedulerEvent eventSuffix={null} resizable="none" style={{ top: "137px", left: "276px", width: "410px" }}>
-                                    <div>
-                                        <div className="k-event-template">
-                                            Event 4 Title
-                                        </div>
-                                    </div>
-                                </SchedulerEvent>
+                                <SchedulerEvent resizable="none" style={{ top: "137px", height: "25px", width: "137px" }} title="Event 1 Title" />
+                                <SchedulerEvent resizable="none" style={{ top: "137px", left: "138px", height: "25px", width: "137px" }} title="Event 2 Title" />
+                                <SchedulerEvent resizable="none" style={{ top: "165px", left: "138px", height: "25px", width: "137px" }} title="Event 3 Title" />
+                                <Button className="k-more-events" size="xsmall" fillMode="flat" themeColor="primary" aria-label="3 more events" style={{ top: "165px", width: "137px" }}>3 more</Button>
+                                <SchedulerEvent resizable="none" style={{ top: "137px", left: "276px", height: "25px", width: "410px" }} title="Event 4 Title" />
                             </SchedulerContent>
                         </td>
                     </SchedulerBody>

package/src/scheduler/templates/scheduler-timeline.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, SchedulerTimes } from '../index';
 
@@ -11,22 +11,24 @@ export const SchedulerTimeline = ({ 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>
+                <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 13, 2024
+                    13 June
                 </Button>
+                <Button fillMode="flat">Today</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={

package/src/scheduler/templates/scheduler-vertical-grouping.tsx

@@ -21,7 +21,7 @@ export const SchedulerVerticalGrouping = (...props) => (
                             <SchedulerTimes>
                                 <SchedulerTable role="none">
                                     <tbody>
-                                        <tr style={{ height: "37px" }}>
+                                        <tr style={{ height: "55px" }}>
                                             <SchedulerCell as="th" />
                                         </tr>
                                     </tbody>
@@ -33,7 +33,7 @@ export const SchedulerVerticalGrouping = (...props) => (
                                 <SchedulerTable>
                                     <tbody>
                                         <tr className="k-scheduler-date-group">
-                                            <SchedulerCell as="th" text="Mon 6/13" />
+                                            <SchedulerCell as="th" dayText="Mon" text="13" />
                                         </tr>
                                     </tbody>
                                 </SchedulerTable>