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

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

@@ -11,22 +11,24 @@ export const SchedulerWeek = ({ 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,7 +44,7 @@ export const SchedulerWeek = ({ style, ...props }: any) => (
                             <SchedulerTimes>
                                 <SchedulerTable role="none">
                                     <tbody>
-                                        <tr style={{ height: "37px" }}>
+                                        <tr style={{ height: "55px" }}>
                                             <SchedulerCell as="th" />
                                         </tr>
                                         <tr style={{ height: "36px" }}>
@@ -57,13 +59,13 @@ export const SchedulerWeek = ({ style, ...props }: any) => (
                                 <SchedulerTable>
                                     <tbody>
                                         <tr className="k-scheduler-date-group">
-                                            <SchedulerCell as="th" text="Sun 6/12" />
-                                            <SchedulerCell as="th" text="Mon 6/13" />
-                                            <SchedulerCell as="th" text="Tue 6/14" />
-                                            <SchedulerCell as="th" text="Wed 6/15" />
-                                            <SchedulerCell as="th" text="Thu 6/16" />
-                                            <SchedulerCell as="th" text="Fri 6/17" />
-                                            <SchedulerCell as="th" text="Sat 6/18" />
+                                            <SchedulerCell as="th" dayText="Sun" text="12" />
+                                            <SchedulerCell as="th" dayText="Mon" text="13" />
+                                            <SchedulerCell as="th" dayText="Tue" text="14" />
+                                            <SchedulerCell as="th" className="k-today" dayText="Wed" text="15" />
+                                            <SchedulerCell as="th" dayText="Thu" text="16" />
+                                            <SchedulerCell as="th" dayText="Fri" text="17" />
+                                            <SchedulerCell as="th" dayText="Sat" text="18" />
                                         </tr>
                                     </tbody>
                                 </SchedulerTable>
@@ -242,18 +244,9 @@ export const SchedulerWeek = ({ style, ...props }: any) => (
                                         </tr>
                                     </tbody>
                                 </SchedulerTable>
-                                <SchedulerEvent style={{ top: "74px", left: "129px", height: "72px", width: "124px" }}>
-                                    <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 resizable="vertical" style={{ top: "147px", left: "255px", height: "72px", width: "378px" }}>
-                                    <div className="k-event-template k-event-time">9:00 AM - 10:00 AM</div>
-                                    <div className="k-event-template">Event Title</div>
-                                </SchedulerEvent>
-                                <SchedulerEvent style={{ top: "74px", left: "636px", height: "72px", width: "124px" }}>
-                                    <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", left: "129px", height: "72px", width: "124px" }} title="Event Title" time="8:00 AM - 9:00 AM" />
+                                <SchedulerEvent resizable="vertical" style={{ top: "147px", left: "255px", height: "72px", width: "378px" }} title="Event Title" time="9:00 AM - 10:00 AM" />
+                                <SchedulerEvent style={{ top: "74px", left: "636px", height: "72px", width: "124px" }} title="Event Title" time="8:00 AM - 9:00 AM" />
                             </SchedulerContent>
                         </td>
                     </SchedulerBody>

package/src/scheduler/tests/scheduler-adaptive-agenda.tsx

@@ -1,11 +1,18 @@
 import { Button } from '../../button';
 import { ButtonGroup } from '../../button-group';
 import { Icon } from '../../icon';
+import MenuButton from '../../menu-button/menu-button.spec';
 import { Toolbar } from '../../toolbar';
 
+const style = `
+    #test-area {
+        max-width: 1080px;
+    }
+`;
 
 export default () =>(
     <>
+        <style>{style}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-1">
 
             <div className="k-pane-wrapper">
@@ -13,25 +20,23 @@ export default () =>(
                     <div className="k-view">
                         <div className="k-stretched-view k-content">
                             <div id="scheduler" className="k-scheduler k-scheduler-mobile">
-                                <Toolbar className="k-scheduler-toolbar">
+                                <Toolbar className="k-scheduler-toolbar" aria-label="Scheduler toolbar">
                                     <ButtonGroup className="k-scheduler-tools">
-                                        <Button className="k-pdf k-group-start" icon="file-pdf"></Button>
-                                        <Button className="k-nav-calendar" icon="calendar"></Button>
-                                        <Button className="k-create-event k-group-end" icon="plus"></Button>
+                                        <Button className="k-pdf k-group-start" icon="file-pdf" aria-label="Export to PDF"></Button>
+                                        <Button className="k-nav-calendar" icon="calendar" aria-label="Open calendar"></Button>
+                                        <Button className="k-create-event k-group-end" icon="plus" aria-label="Create event"></Button>
                                     </ButtonGroup>
                                     <span className="k-spacer"></span>
-                                    <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown">
-                                        <option>Agenda</option>
-                                    </select>
+                                    <MenuButton fillMode="flat">Agenda</MenuButton>
                                 </Toolbar>
-                                <Toolbar className="k-scheduler-toolbar">
-                                    <Button className="k-nav-prev" icon="chevron-left"></Button>
+                                <Toolbar className="k-scheduler-toolbar" aria-label="Scheduler navigation">
+                                    <Button className="k-nav-prev" icon="chevron-left" aria-label="Navigate to previous period"></Button>
                                     <span className="k-spacer"></span>
-                                    <Button className="k-nav-current" fillMode="flat" >
-                                        Jun 13 - 20, 2013
+                                    <Button className="k-nav-current" fillMode="flat" aria-live="polite">
+                                        13 – 20 Jun 2013
                                     </Button>
                                     <span className="k-spacer"></span>
-                                    <Button className="k-nav-next" icon="chevron-right"></Button>
+                                    <Button className="k-nav-next" icon="chevron-right" aria-label="Navigate to next period"></Button>
                                 </Toolbar>
                                 <table className="k-scheduler-layout k-scheduler-agendaview k-scheduler-agenda k-scrollbar-v">
                                     <tbody>

package/src/scheduler/tests/scheduler-adaptive-day-resource-group.tsx

@@ -1,11 +1,18 @@
 import { Button } from '../../button';
 import { ButtonGroup } from '../../button-group';
-import { Icon } from '../../icon';
+import MenuButton from '../../menu-button/menu-button.spec';
 import { Toolbar } from '../../toolbar';
+import { SchedulerEvent } 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">
 
             <div className="k-pane-wrapper">
@@ -13,25 +20,23 @@ export default () =>(
                     <div className="k-view">
                         <div className="k-stretched-view k-content">
                             <div id="scheduler" className="k-scheduler k-scheduler-mobile">
-                                <Toolbar className="k-scheduler-toolbar">
+                                <Toolbar className="k-scheduler-toolbar" aria-label="Scheduler toolbar">
                                     <ButtonGroup className="k-scheduler-tools">
-                                        <Button className="k-pdf k-group-start" icon="file-pdf"></Button>
-                                        <Button className="k-nav-calendar" icon="calendar"></Button>
-                                        <Button className="k-create-event k-group-end" icon="plus"></Button>
+                                        <Button className="k-pdf k-group-start" icon="file-pdf" aria-label="Export to PDF"></Button>
+                                        <Button className="k-nav-calendar" icon="calendar" aria-label="Open calendar"></Button>
+                                        <Button className="k-create-event k-group-end" icon="plus" aria-label="Create event"></Button>
                                     </ButtonGroup>
                                     <span className="k-spacer"></span>
-                                    <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown">
-                                        <option>Day</option>
-                                    </select>
+                                    <MenuButton fillMode="flat">Day</MenuButton>
                                 </Toolbar>
-                                <Toolbar className="k-scheduler-toolbar">
-                                    <Button className="k-nav-prev" icon="chevron-left"></Button>
+                                <Toolbar className="k-scheduler-toolbar" aria-label="Scheduler navigation">
+                                    <Button className="k-nav-prev" icon="chevron-left" aria-label="Navigate to previous period"></Button>
                                     <span className="k-spacer"></span>
-                                    <Button className="k-nav-current" fillMode="flat" >
+                                    <Button className="k-nav-current" fillMode="flat" aria-live="polite">
                                         Jun 13, 2013
                                     </Button>
                                     <span className="k-spacer"></span>
-                                    <Button className="k-nav-next" icon="chevron-right"></Button>
+                                    <Button className="k-nav-next" icon="chevron-right" aria-label="Navigate to next period"></Button>
                                 </Toolbar>
                                 <table className="k-scheduler-layout k-scheduler-dayview k-scrollbar-v">
                                     <tbody>
@@ -165,21 +170,7 @@ export default () =>(
                                                             <tr><td className=" k-nonwork-hour">&nbsp;</td><td>&nbsp;</td></tr>
                                                         </tbody>
                                                     </table>
-                                                    <div style={{ top: "135px", height: "42px", width: "290.1px", left: "2px" }}
-                                                        className="k-event k-event-inverse">
-                                                        <span className="k-event-actions"></span>
-                                                        <div title="(8:30 AM - 9:00 AM): Test">
-                                                            <div className="k-event-template k-event-time">8:30 AM - 9:00 AM</div>
-                                                            <div className="k-event-template">Test</div>
-                                                        </div>
-                                                        <span className="k-event-actions">
-                                                            <a className="k-link k-event-delete"><Icon icon="x"></Icon></a>
-                                                        </span>
-                                                        <span className="k-event-top-actions"></span>
-                                                        <span className="k-event-bottom-actions"></span>
-                                                        <span className="k-resize-handle k-resize-n"></span>
-                                                        <span className="k-resize-handle k-resize-s"></span>
-                                                    </div>
+                                                    <SchedulerEvent style={{ top: "135px", height: "42px", width: "290.1px", left: "2px" }} title="Test" time="8:30 AM - 9:00 AM" />
                                                 </div>
                                             </td>
                                         </tr>

package/src/scheduler/tests/scheduler-adaptive-day.tsx

@@ -1,11 +1,18 @@
 import { Button } from '../../button';
 import { ButtonGroup } from '../../button-group';
-import { Icon } from '../../icon';
+import MenuButton from '../../menu-button/menu-button.spec';
 import { Toolbar } from '../../toolbar';
+import { SchedulerEvent } 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">
 
             <div className="k-pane-wrapper">
@@ -13,25 +20,23 @@ export default () =>(
                     <div className="k-view">
                         <div className="k-stretched-view k-content">
                             <div id="scheduler" className="k-scheduler k-scheduler-mobile">
-                                <Toolbar className="k-scheduler-toolbar">
+                                <Toolbar className="k-scheduler-toolbar" aria-label="Scheduler toolbar">
                                     <ButtonGroup className="k-scheduler-tools">
-                                        <Button className="k-pdf k-group-start" icon="file-pdf"></Button>
-                                        <Button className="k-nav-calendar" icon="calendar"></Button>
-                                        <Button className="k-create-event k-group-end" icon="plus"></Button>
+                                        <Button className="k-pdf k-group-start" icon="file-pdf" aria-label="Export to PDF"></Button>
+                                        <Button className="k-nav-calendar" icon="calendar" aria-label="Open calendar"></Button>
+                                        <Button className="k-create-event k-group-end" icon="plus" aria-label="Create event"></Button>
                                     </ButtonGroup>
                                     <span className="k-spacer"></span>
-                                    <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown">
-                                        <option>Day</option>
-                                    </select>
+                                    <MenuButton fillMode="flat">Day</MenuButton>
                                 </Toolbar>
-                                <Toolbar className="k-scheduler-toolbar">
-                                    <Button className="k-nav-prev" icon="chevron-left"></Button>
+                                <Toolbar className="k-scheduler-toolbar" aria-label="Scheduler navigation">
+                                    <Button className="k-nav-prev" icon="chevron-left" aria-label="Navigate to previous period"></Button>
                                     <span className="k-spacer"></span>
-                                    <Button className="k-nav-current" fillMode="flat" >
+                                    <Button className="k-nav-current" fillMode="flat" aria-live="polite">
                                         Jun 13, 2013
                                     </Button>
                                     <span className="k-spacer"></span>
-                                    <Button className="k-nav-next" icon="chevron-right"></Button>
+                                    <Button className="k-nav-next" icon="chevron-right" aria-label="Navigate to next period"></Button>
                                 </Toolbar>
                                 <table className="k-scheduler-layout k-scheduler-dayview k-scrollbar-v">
                                     <tbody>
@@ -157,21 +162,7 @@ export default () =>(
                                                             <tr><td className=" k-nonwork-hour">&nbsp;</td></tr>
                                                         </tbody>
                                                     </table>
-                                                    <div style={{ top: "135px", height: "42px", width: "490.1px", left: "2px" }}
-                                                        className="k-event k-event-inverse">
-                                                        <span className="k-event-actions"></span>
-                                                        <div title="(8:30 AM - 9:00 AM): Test">
-                                                            <div className="k-event-template k-event-time">8:30 AM - 9:00 AM</div>
-                                                            <div className="k-event-template">Test</div>
-                                                        </div>
-                                                        <span className="k-event-actions">
-                                                            <a className="k-link k-event-delete"><Icon icon="x"></Icon></a>
-                                                        </span>
-                                                        <span className="k-event-top-actions"></span>
-                                                        <span className="k-event-bottom-actions"></span>
-                                                        <span className="k-resize-handle k-resize-n"></span>
-                                                        <span className="k-resize-handle k-resize-s"></span>
-                                                    </div>
+                                                    <SchedulerEvent style={{ top: "135px", height: "42px", width: "490.1px", left: "2px" }} title="Test" time="8:30 AM - 9:00 AM" />
                                                 </div>
                                             </td>
                                         </tr>

package/src/scheduler/tests/scheduler-adaptive-edit-no-height.tsx

@@ -1,21 +1,27 @@
 import { Button } from '../../button';
 import { Icon } from '../../icon';
 
+const style = `
+    #test-area {
+        max-width: 1080px;
+    }
+`;
 
 export default () =>(
     <>
+        <style>{style}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-1">
 
             <section>
                 <div className="k-pane-wrapper">
                     <div className="k-pane">
-                        <div className="k-popup-edit-form k-scheduler-edit-form k-mobile-list k-view">
+                        <div className="k-popup-edit-form k-mobile-list k-view">
                             <div className="k-appbar k-appbar-primary">
-                                <Button className="k-header-cancel" fillMode="flat" icon="chevron-left"></Button>
+                                <Button className="k-header-cancel" fillMode="flat" icon="chevron-left" aria-label="Cancel"></Button>
                                 <span className="k-spacer"></span>
                                 <span>Event</span>
                                 <span className="k-spacer"></span>
-                                <Button className="k-header-done" fillMode="flat" icon="check"></Button>
+                                <Button className="k-header-done" fillMode="flat" icon="check" aria-label="Done"></Button>
                             </div>
                             <div className="k-stretched-view k-content">
                                 <ul className="k-listgroup k-listgroup-flush">

package/src/scheduler/tests/scheduler-adaptive-edit-time-zones.tsx

@@ -1,23 +1,29 @@
 import { Button } from '../../button';
 
+const style = `
+    #test-area {
+        max-width: 1080px;
+    }
+`;
 
 export default () =>(
     <>
+        <style>{style}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-1">
 
             <section>
                 <div className="k-pane-wrapper" style={{ height: "600px" }}>
                     <div className="k-pane">
-                        <div className="k-popup-edit-form k-scheduler-edit-form k-mobile-list k-view">
+                        <div className="k-popup-edit-form k-mobile-list k-view">
                             <div className="k-appbar k-appbar-primary">
-                                <Button className="k-header-cancel" fillMode="flat" icon="chevron-left"></Button>
+                                <Button className="k-header-cancel" fillMode="flat" icon="chevron-left" aria-label="Cancel"></Button>
                                 <span className="k-spacer"></span>
                                 <span>Time zones</span>
                                 <span className="k-spacer"></span>
-                                <Button className="k-header-done" fillMode="flat" icon="check"></Button>
+                                <Button className="k-header-done" fillMode="flat" icon="check" aria-label="Done"></Button>
                             </div>
                             <div className="k-stretched-view k-content">
-                                <div className="k-popup-edit-form k-scheduler-edit-form k-scheduler-timezones">
+                                <div className="k-popup-edit-form k-scheduler-timezones">
                                     <ul className="k-listgroup k-listgroup-flush">
                                         <li className="k-item k-listgroup-item">
                                             <label className="k-label k-listgroup-form-row">

package/src/scheduler/tests/scheduler-adaptive-edit.tsx

@@ -1,21 +1,27 @@
 import { Button } from '../../button';
 import { Icon } from '../../icon';
 
+const style = `
+    #test-area {
+        max-width: 1080px;
+    }
+`;
 
 export default () =>(
     <>
+        <style>{style}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-1">
 
             <section>
                 <div className="k-pane-wrapper" style={{ height: "600px" }}>
                     <div className="k-pane">
-                        <div className="k-popup-edit-form k-scheduler-edit-form k-mobile-list k-view">
+                        <div className="k-popup-edit-form k-mobile-list k-view">
                             <div className="k-appbar k-appbar-primary">
-                                <Button className="k-header-cancel" fillMode="flat" icon="chevron-left"></Button>
+                                <Button className="k-header-cancel" fillMode="flat" icon="chevron-left" aria-label="Cancel"></Button>
                                 <span className="k-spacer"></span>
                                 <span>Event</span>
                                 <span className="k-spacer"></span>
-                                <Button className="k-header-done" fillMode="flat" icon="check"></Button>
+                                <Button className="k-header-done" fillMode="flat" icon="check" aria-label="Done"></Button>
                             </div>
                             <div className="k-stretched-view k-content">
                                 <ul className="k-listgroup k-listgroup-flush">

package/src/scheduler/tests/scheduler-adaptive-month.tsx

@@ -1,11 +1,18 @@
 import { Button } from '../../button';
 import { ButtonGroup } from '../../button-group';
-import { Icon } from '../../icon';
+import MenuButton from '../../menu-button/menu-button.spec';
 import { Toolbar } from '../../toolbar';
+import { SchedulerEvent } 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">
 
             <div className="k-pane-wrapper">
@@ -13,25 +20,23 @@ export default () =>(
                     <div className="k-view">
                         <div className="k-stretched-view k-content">
                             <div id="scheduler" className="k-scheduler k-scheduler-mobile">
-                                <Toolbar className="k-scheduler-toolbar">
+                                <Toolbar className="k-scheduler-toolbar" aria-label="Scheduler toolbar">
                                     <ButtonGroup className="k-scheduler-tools">
-                                        <Button className="k-pdf k-group-start" icon="file-pdf"></Button>
-                                        <Button className="k-nav-calendar" icon="calendar"></Button>
-                                        <Button className="k-create-event k-group-end" icon="plus"></Button>
+                                        <Button className="k-pdf k-group-start" icon="file-pdf" aria-label="Export to PDF"></Button>
+                                        <Button className="k-nav-calendar" icon="calendar" aria-label="Open calendar"></Button>
+                                        <Button className="k-create-event k-group-end" icon="plus" aria-label="Create event"></Button>
                                     </ButtonGroup>
                                     <span className="k-spacer"></span>
-                                    <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown">
-                                        <option>Month</option>
-                                    </select>
+                                    <MenuButton fillMode="flat">Month</MenuButton>
                                 </Toolbar>
-                                <Toolbar className="k-scheduler-toolbar">
-                                    <Button className="k-nav-prev" icon="chevron-left"></Button>
+                                <Toolbar className="k-scheduler-toolbar" aria-label="Scheduler navigation">
+                                    <Button className="k-nav-prev" icon="chevron-left" aria-label="Navigate to previous period"></Button>
                                     <span className="k-spacer"></span>
-                                    <Button className="k-nav-current" fillMode="flat" >
-                                        June, 2013
+                                    <Button className="k-nav-current" fillMode="flat" aria-live="polite">
+                                        Jun 2013
                                     </Button>
                                     <span className="k-spacer"></span>
-                                    <Button className="k-nav-next" icon="chevron-right"></Button>
+                                    <Button className="k-nav-next" icon="chevron-right" aria-label="Navigate to next period"></Button>
                                 </Toolbar>
                                 <table className="k-scheduler-layout k-scheduler-monthview">
                                     <tbody>
@@ -118,23 +123,11 @@ export default () =>(
                                                         </tbody>
                                                     </table>
                                                     <div className="k-events-container" style={{ top: "97px", left: "140px", width: "140px" }}>
-                                                        <div style={{ backgroundColor: "#51a0ed", borderColor: "#51a0ed" }} className="k-event">
-                                                            <span className="k-event-actions"><Icon icon="arrow-rotate-cw"></Icon></span>
-                                                            <div><div className="k-event-template">Dance Practice</div></div>
-                                                            <span className="k-event-actions"></span>
-                                                        </div>
+                                                        <SchedulerEvent recurring="recurring" resizable="none" style={{ backgroundColor: "#51a0ed", borderColor: "#51a0ed" }} title="Dance Practice" />
                                                     </div>
                                                     <div className="k-events-container" style={{ top: "97px", left: "280px", width: "140px" }}>
-                                                        <div style={{ backgroundColor: "#f8a398", borderColor: "#f8a398" }} className="k-event">
-                                                            <span className="k-event-actions"></span>
-                                                            <div><div className="k-event-template">Breakfast at Starbucks</div></div>
-                                                            <span className="k-event-actions"></span>
-                                                        </div>
-                                                        <div style={{ backgroundColor: "#56ca85", borderColor: "#56ca85" }} className="k-event">
-                                                            <span className="k-event-actions"></span>
-                                                            <div><div className="k-event-template">Software updates</div></div>
-                                                            <span className="k-event-actions"></span>
-                                                        </div>
+                                                        <SchedulerEvent resizable="none" style={{ backgroundColor: "#f8a398", borderColor: "#f8a398" }} title="Breakfast at Starbucks" />
+                                                        <SchedulerEvent resizable="none" style={{ backgroundColor: "#56ca85", borderColor: "#56ca85" }} title="Software updates" />
                                                     </div>
                                                 </div>
                                             </td>

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

@@ -1,7 +1,14 @@
 import { SchedulerAgenda, SchedulerFlexAgenda } 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>
             <SchedulerAgenda />