@progress/kendo-themes-html 6.3.1-dev.0 → 6.4.0-dev.0

package/src/scheduler/tests/scheduler-angular-month-rtl.tsx

@@ -1,5 +1,6 @@
 import ReactDOM from 'react-dom/client';
 import { Button } from '../../button';
+import { ButtonGroup } from '../../button-group';
 import { Icon } from '../../icon';
 import { Toolbar } from '../../toolbar';
 
@@ -20,28 +21,23 @@ root.render(
             <div className="k-widget k-scheduler k-rtl" dir="rtl">
                 <Toolbar className="k-scheduler-toolbar">
                     <div className="k-toolbar-group">
-                        <div className="k-scheduler-navigation">
-                            <div className="k-button-group">
-                                <Button>Today</Button>
-                                <Button icon="caret-alt-left"></Button>
-                                <Button icon="caret-alt-right"></Button>
-                            </div>
-                        </div>
+                        <ButtonGroup className="k-scheduler-navigation">
+                            <Button>Today</Button>
+                            <Button icon="caret-alt-left"></Button>
+                            <Button icon="caret-alt-right"></Button>
+                        </ButtonGroup>
                         <Button icon="calendar" className="k-nav-current" fillMode="flat" >
                             June 2013
                         </Button>
                     </div>
                     <span className="k-spacer"></span>
-                    <div className="k-scheduler-views-wrapper">
-                        <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md"></select>
-                        <div className="k-scheduler-views k-button-group">
-                            <Button>Day</Button>
-                            <Button>Week</Button>
-                            <Button selected>Month</Button>
-                            <Button>Timeline</Button>
-                            <Button>Agenda</Button>
-                        </div>
-                    </div>
+                    <ButtonGroup className="k-scheduler-views">
+                        <Button>Day</Button>
+                        <Button>Week</Button>
+                        <Button selected>Month</Button>
+                        <Button>Timeline</Button>
+                        <Button>Agenda</Button>
+                    </ButtonGroup>
                 </Toolbar>
                 <div style={{ display: "block" }} >
                     <div className="k-scheduler-layout k-scheduler-monthview k-scheduler-flex-layout">

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

@@ -1,5 +1,6 @@
 import ReactDOM from 'react-dom/client';
 import { Button } from '../../button';
+import { ButtonGroup } from '../../button-group';
 import { Icon } from '../../icon';
 import { Toolbar } from '../../toolbar';
 
@@ -20,28 +21,23 @@ root.render(
             <div className="k-widget k-scheduler">
                 <Toolbar className="k-scheduler-toolbar">
                     <div className="k-toolbar-group">
-                        <div className="k-scheduler-navigation">
-                            <div className="k-button-group">
-                                <Button>Today</Button>
-                                <Button icon="caret-alt-left"></Button>
-                                <Button icon="caret-alt-right"></Button>
-                            </div>
-                        </div>
+                        <ButtonGroup className="k-scheduler-navigation">
+                            <Button>Today</Button>
+                            <Button icon="caret-alt-left"></Button>
+                            <Button icon="caret-alt-right"></Button>
+                        </ButtonGroup>
                         <Button icon="calendar" className="k-nav-current" fillMode="flat" >
                             June 2013
                         </Button>
                     </div>
                     <span className="k-spacer"></span>
-                    <div className="k-scheduler-views-wrapper">
-                        <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md"></select>
-                        <div className="k-scheduler-views k-button-group">
-                            <Button>Day</Button>
-                            <Button>Week</Button>
-                            <Button selected>Month</Button>
-                            <Button>Timeline</Button>
-                            <Button>Agenda</Button>
-                        </div>
-                    </div>
+                    <ButtonGroup className="k-scheduler-views">
+                        <Button>Day</Button>
+                        <Button>Week</Button>
+                        <Button selected>Month</Button>
+                        <Button>Timeline</Button>
+                        <Button>Agenda</Button>
+                    </ButtonGroup>
                 </Toolbar>
                 <div style={{ display: "block" }} >
                     <div className="k-scheduler-layout k-scheduler-monthview k-scheduler-flex-layout">

package/src/scheduler/tests/scheduler-angular-rtl.tsx

@@ -1,5 +1,6 @@
 import ReactDOM from 'react-dom/client';
 import { Button } from '../../button';
+import { ButtonGroup } from '../../button-group';
 import { Icon } from '../../icon';
 import { Toolbar } from '../../toolbar';
 
@@ -20,28 +21,23 @@ root.render(
             <div className="k-widget k-scheduler k-readonly-scheduler k-rtl" dir="rtl">
                 <Toolbar className="k-scheduler-toolbar">
                     <div className="k-toolbar-group">
-                        <div className="k-scheduler-navigation">
-                            <div className="k-button-group">
-                                <Button>Today</Button>
-                                <Button icon="caret-alt-left"></Button>
-                                <Button icon="caret-alt-right"></Button>
-                            </div>
-                        </div>
+                        <ButtonGroup className="k-scheduler-navigation">
+                            <Button>Today</Button>
+                            <Button icon="caret-alt-left"></Button>
+                            <Button icon="caret-alt-right"></Button>
+                        </ButtonGroup>
                         <Button icon="calendar" className="k-nav-current" fillMode="flat" >
                             Sunday, June 23, 2019 - Saturday, June 29, 2019
                         </Button>
                     </div>
                     <span className="k-spacer"></span>
-                    <div className="k-scheduler-views-wrapper">
-                        <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md"></select>
-                        <div className="k-scheduler-views k-button-group">
-                            <Button>Day</Button>
-                            <Button selected>Week</Button>
-                            <Button>Month</Button>
-                            <Button>Timeline</Button>
-                            <Button>Agenda</Button>
-                        </div>
-                    </div>
+                    <ButtonGroup className="k-scheduler-views">
+                        <Button>Day</Button>
+                        <Button selected>Week</Button>
+                        <Button>Month</Button>
+                        <Button>Timeline</Button>
+                        <Button>Agenda</Button>
+                    </ButtonGroup>
                 </Toolbar>
                 <div style={{ display: "block" }} >
                     <div className="k-scheduler-layout k-scheduler-flex-layout k-scheduler-weekview">

package/src/scheduler/tests/scheduler-angular.tsx

@@ -1,5 +1,6 @@
 import ReactDOM from 'react-dom/client';
 import { Button } from '../../button';
+import { ButtonGroup } from '../../button-group';
 import { Icon } from '../../icon';
 import { Toolbar } from '../../toolbar';
 
@@ -20,28 +21,23 @@ root.render(
             <div className="k-widget k-scheduler k-readonly-scheduler">
                 <Toolbar className="k-scheduler-toolbar">
                     <div className="k-toolbar-group">
-                        <div className="k-scheduler-navigation">
-                            <div className="k-button-group">
-                                <Button>Today</Button>
-                                <Button icon="caret-alt-left"></Button>
-                                <Button icon="caret-alt-right"></Button>
-                            </div>
-                        </div>
+                        <ButtonGroup className="k-scheduler-navigation">
+                            <Button>Today</Button>
+                            <Button icon="caret-alt-left"></Button>
+                            <Button icon="caret-alt-right"></Button>
+                        </ButtonGroup>
                         <Button icon="calendar" className="k-nav-current" fillMode="flat" >
                             Sunday, June 23, 2019 - Saturday, June 29, 2019
                         </Button>
                     </div>
                     <span className="k-spacer"></span>
-                    <div className="k-scheduler-views-wrapper">
-                        <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md"></select>
-                        <div className="k-scheduler-views k-button-group">
-                            <Button>Day</Button>
-                            <Button selected>Week</Button>
-                            <Button>Month</Button>
-                            <Button>Timeline</Button>
-                            <Button>Agenda</Button>
-                        </div>
-                    </div>
+                    <ButtonGroup className="k-scheduler-views">
+                        <Button>Day</Button>
+                        <Button selected>Week</Button>
+                        <Button>Month</Button>
+                        <Button>Timeline</Button>
+                        <Button>Agenda</Button>
+                    </ButtonGroup>
                 </Toolbar>
                 <div style={{ display: "block" }} >
                     <div className="k-scheduler-layout k-scheduler-flex-layout k-scheduler-weekview">

package/src/scheduler/tests/scheduler-flex-layout.tsx

@@ -1,5 +1,6 @@
 import ReactDOM from 'react-dom/client';
 import { Button } from '../../button';
+import { ButtonGroup } from '../../button-group';
 import { Icon } from '../../icon';
 import { Toolbar } from '../../toolbar';
 
@@ -12,27 +13,22 @@ root.render(
         <div id="test-area" className="k-d-grid k-grid-cols-1">
             <div className="k-widget k-scheduler k-scheduler-flex">
                 <Toolbar className="k-scheduler-toolbar">
-                    <span className="k-button-group k-scheduler-navigation">
+                    <ButtonGroup className="k-scheduler-navigation">
                         <Button>Today</Button>
                         <Button icon="caret-alt-left"></Button>
                         <Button icon="caret-alt-right"></Button>
-                    </span>
+                    </ButtonGroup>
                     <Button icon="calendar" className="k-nav-current" fillMode="flat" >
                         Monday, June 24, 2019
                     </Button>
                     <span className="k-spacer"></span>
-                    <span className="k-scheduler-views-wrapper">
-                        <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">
-                            <option>Day</option>
-                        </select>
-                        <span className="k-button-group k-scheduler-views">
-                            <Button selected>Day</Button>
-                            <Button>Week</Button>
-                            <Button>Month</Button>
-                            <Button>Timeline</Button>
-                            <Button>Agenda</Button>
-                        </span>
-                    </span>
+                    <ButtonGroup className="k-scheduler-views">
+                        <Button selected>Day</Button>
+                        <Button>Week</Button>
+                        <Button>Month</Button>
+                        <Button>Timeline</Button>
+                        <Button>Agenda</Button>
+                    </ButtonGroup>
                 </Toolbar>
                 <div className="k-scheduler-layout k-scheduler-layout-flex k-scheduler-day-view" style={{ height: "600px" }} >
                     <div className="k-scheduler-head">

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

@@ -1,5 +1,6 @@
 import ReactDOM from 'react-dom/client';
 import { Button } from '../../button';
+import { ButtonGroup } from '../../button-group';
 import { Icon } from '../../icon';
 import { Toolbar } from '../../toolbar';
 
@@ -19,27 +20,22 @@ root.render(
         <div id="test-area" className="k-d-grid k-grid-cols-1">
             <div className="k-widget k-scheduler">
                 <Toolbar className="k-scheduler-toolbar">
-                    <span className="k-button-group k-scheduler-navigation">
+                    <ButtonGroup className="k-scheduler-navigation">
                         <Button>Today</Button>
                         <Button icon="caret-alt-left"></Button>
                         <Button icon="caret-alt-right"></Button>
-                    </span>
+                    </ButtonGroup>
                     <Button icon="calendar" className="k-nav-current" fillMode="flat" >
                         Monday, June 10, 2013 - Friday, June 14, 2013
                     </Button>
                     <span className="k-spacer"></span>
-                    <span className="k-scheduler-views-wrapper">
-                        <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">
-                            <option>Agenda</option>
-                        </select>
-                        <span className="k-button-group k-scheduler-views">
-                            <Button >Day</Button>
-                            <Button >Week</Button>
-                            <Button >Month</Button>
-                            <Button >Timeline</Button>
-                            <Button selected>Agenda</Button>
-                        </span>
-                    </span>
+                    <ButtonGroup className="k-scheduler-views">
+                        <Button >Day</Button>
+                        <Button >Week</Button>
+                        <Button >Month</Button>
+                        <Button >Timeline</Button>
+                        <Button selected>Agenda</Button>
+                    </ButtonGroup>
                 </Toolbar>
                 <table className="k-scheduler-layout k-scheduler-agendaview k-scheduler-agenda k-scrollbar-h">
                     <tbody>

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

@@ -1,5 +1,6 @@
 import ReactDOM from 'react-dom/client';
 import { Button } from '../../button';
+import { ButtonGroup } from '../../button-group';
 import { Icon } from '../../icon';
 import { Toolbar } from '../../toolbar';
 
@@ -34,27 +35,22 @@ root.render(
 
             <div className="k-widget k-scheduler">
                 <Toolbar className="k-scheduler-toolbar">
-                    <span className="k-scheduler-navigation k-button-group">
+                    <ButtonGroup className="k-scheduler-navigation">
                         <Button>Today</Button>
                         <Button icon="caret-alt-left"></Button>
                         <Button icon="caret-alt-right"></Button>
-                    </span>
+                    </ButtonGroup>
                     <Button icon="calendar" className="k-nav-current" fillMode="flat" >
                         June, 2013
                     </Button>
                     <span className="k-spacer"></span>
-                    <span className="k-scheduler-views-wrapper">
-                        <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">
-                            <option>Month</option>
-                        </select>
-                        <span className="k-scheduler-views k-button-group">
-                            <Button>Day</Button>
-                            <Button>Week</Button>
-                            <Button selected>Month</Button>
-                            <Button>Timeline</Button>
-                            <Button>Agenda</Button>
-                        </span>
-                    </span>
+                    <ButtonGroup className="k-scheduler-views">
+                        <Button>Day</Button>
+                        <Button>Week</Button>
+                        <Button selected>Month</Button>
+                        <Button>Timeline</Button>
+                        <Button>Agenda</Button>
+                    </ButtonGroup>
                 </Toolbar>
                 <table className="k-scheduler-layout k-scheduler-monthview k-scrollbar-v">
                     <tbody>

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

@@ -1,6 +1,7 @@
 
 import ReactDOM from 'react-dom/client';
 import { Button } from '../../button';
+import { ButtonGroup } from '../../button-group';
 import { Icon } from '../../icon';
 import { Toolbar } from '../../toolbar';
 
@@ -20,27 +21,22 @@ root.render(
         <div id="test-area" className="k-d-grid k-grid-cols-1">
             <div className="k-widget k-scheduler k-scheduler-flex" style={{ height: "900px" }} >
                 <Toolbar className="k-scheduler-toolbar">
-                    <span className="k-button-group k-scheduler-navigation">
+                    <ButtonGroup className="k-scheduler-navigation">
                         <Button>Today</Button>
                         <Button icon="caret-alt-left"></Button>
                         <Button icon="caret-alt-right"></Button>
-                    </span>
+                    </ButtonGroup>
                     <Button icon="calendar" className="k-nav-current" fillMode="flat" >
                         Sunday, June 21, 2020 - Saturday, June 27, 2020
                     </Button>
                     <span className="k-spacer"></span>
-                    <span className="k-scheduler-views-wrapper">
-                        <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">
-                            <option>Agenda</option>
-                        </select>
-                        <span className="k-button-group k-scheduler-views">
-                            <Button>Day</Button>
-                            <Button>Week</Button>
-                            <Button>Month</Button>
-                            <Button>Timeline</Button>
-                            <Button selected>Agenda</Button>
-                        </span>
-                    </span>
+                    <ButtonGroup className="k-scheduler-views">
+                        <Button>Day</Button>
+                        <Button>Week</Button>
+                        <Button>Month</Button>
+                        <Button>Timeline</Button>
+                        <Button selected>Agenda</Button>
+                    </ButtonGroup>
                 </Toolbar>
                 <div className="k-scheduler-layout k-scheduler-layout-flex k-scheduler-agendaview">
                     <div className="k-scheduler-head">

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

@@ -1,6 +1,7 @@
 
 import ReactDOM from 'react-dom/client';
 import { Button } from '../../button';
+import { ButtonGroup } from '../../button-group';
 import { Icon } from '../../icon';
 import { Toolbar } from '../../toolbar';
 
@@ -20,27 +21,22 @@ root.render(
         <div id="test-area" className="k-d-grid k-grid-cols-1">
             <div className="k-widget k-scheduler k-scheduler-flex" style={{ height: "900px" }} >
                 <Toolbar className="k-scheduler-toolbar">
-                    <span className="k-button-group k-scheduler-navigation">
+                    <ButtonGroup className="k-scheduler-navigation">
                         <Button>Today</Button>
                         <Button icon="caret-alt-left"></Button>
                         <Button icon="caret-alt-right"></Button>
-                    </span>
+                    </ButtonGroup>
                     <Button icon="calendar" className="k-nav-current" fillMode="flat" >
                         Wednesday, June 24, 2020
                     </Button>
                     <span className="k-spacer"></span>
-                    <span className="k-scheduler-views-wrapper">
-                        <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">
-                            <option>Day</option>
-                        </select>
-                        <span className="k-button-group k-scheduler-views">
-                            <Button selected>Day</Button>
-                            <Button>Week</Button>
-                            <Button>Month</Button>
-                            <Button>Timeline</Button>
-                            <Button>Agenda</Button>
-                        </span>
-                    </span>
+                    <ButtonGroup className="k-scheduler-views">
+                        <Button selected>Day</Button>
+                        <Button>Week</Button>
+                        <Button>Month</Button>
+                        <Button>Timeline</Button>
+                        <Button>Agenda</Button>
+                    </ButtonGroup>
                 </Toolbar>
                 <div className="k-scheduler-layout k-scheduler-layout-flex k-scheduler-day-view">
                     <div className="k-scheduler-head">

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

@@ -1,6 +1,7 @@
 
 import ReactDOM from 'react-dom/client';
 import { Button } from '../../button';
+import { ButtonGroup } from '../../button-group';
 import { Icon } from '../../icon';
 import { Toolbar } from '../../toolbar';
 
@@ -20,27 +21,22 @@ root.render(
         <div id="test-area" className="k-d-grid k-grid-cols-1">
             <div className="k-widget k-scheduler k-scheduler-flex" style={{ height: "900px" }} >
                 <Toolbar className="k-scheduler-toolbar">
-                    <span className="k-button-group k-scheduler-navigation">
+                    <ButtonGroup className="k-scheduler-navigation">
                         <Button>Today</Button>
                         <Button icon="caret-alt-left"></Button>
                         <Button icon="caret-alt-right"></Button>
-                    </span>
+                    </ButtonGroup>
                     <Button icon="calendar" className="k-nav-current" fillMode="flat" >
                         June 2020
                     </Button>
                     <span className="k-spacer"></span>
-                    <span className="k-scheduler-views-wrapper">
-                        <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">
-                            <option>Month</option>
-                        </select>
-                        <span className="k-button-group k-scheduler-views">
-                            <Button>Day</Button>
-                            <Button>Week</Button>
-                            <Button selected>Month</Button>
-                            <Button>Timeline</Button>
-                            <Button>Agenda</Button>
-                        </span>
-                    </span>
+                    <ButtonGroup className="k-scheduler-views">
+                        <Button>Day</Button>
+                        <Button>Week</Button>
+                        <Button selected>Month</Button>
+                        <Button>Timeline</Button>
+                        <Button>Agenda</Button>
+                    </ButtonGroup>
                 </Toolbar>
                 <div className="k-scheduler-layout k-scheduler-layout-flex k-scheduler-monthview">
                     <div className="k-scheduler-head">

package/src/scheduler/tests/scheduler-react-timeline-multi.tsx

@@ -1,6 +1,7 @@
 
 import ReactDOM from 'react-dom/client';
 import { Button } from '../../button';
+import { ButtonGroup } from '../../button-group';
 import { Icon } from '../../icon';
 import { Toolbar } from '../../toolbar';
 
@@ -20,27 +21,22 @@ root.render(
         <div id="test-area" className="k-d-grid k-grid-cols-1">
             <div className="k-widget k-scheduler k-scheduler-flex" style={{ height: "900px" }} >
                 <Toolbar className="k-scheduler-toolbar">
-                    <span className="k-button-group k-scheduler-navigation">
+                    <ButtonGroup className="k-scheduler-navigation">
                         <Button>Today</Button>
                         <Button icon="caret-alt-left"></Button>
                         <Button icon="caret-alt-right"></Button>
-                    </span>
+                    </ButtonGroup>
                     <Button icon="calendar" className="k-nav-current" fillMode="flat" >
                         Wednesday, June 24, 2020 - Thursday, June 25, 2020
                     </Button>
                     <span className="k-spacer"></span>
-                    <span className="k-scheduler-views-wrapper">
-                        <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">
-                            <option>Timeline Multiday</option>
-                        </select>
-                        <span className="k-button-group k-scheduler-views">
-                            <Button>Day</Button>
-                            <Button>Week</Button>
-                            <Button>Month</Button>
-                            <Button selected>Timeline</Button>
-                            <Button>Agenda</Button>
-                        </span>
-                    </span>
+                    <ButtonGroup className="k-scheduler-views">
+                        <Button>Day</Button>
+                        <Button>Week</Button>
+                        <Button>Month</Button>
+                        <Button selected>Timeline</Button>
+                        <Button>Agenda</Button>
+                    </ButtonGroup>
                 </Toolbar>
                 <div className="k-scheduler-layout k-scheduler-layout-flex k-scheduler-timeline-view">
                     <div className="k-scheduler-head" style={{ width: "14401px" }} >

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

@@ -1,6 +1,7 @@
 
 import ReactDOM from 'react-dom/client';
 import { Button } from '../../button';
+import { ButtonGroup } from '../../button-group';
 import { Icon } from '../../icon';
 import { Toolbar } from '../../toolbar';
 
@@ -20,27 +21,22 @@ root.render(
         <div id="test-area" className="k-d-grid k-grid-cols-1">
             <div className="k-widget k-scheduler k-scheduler-flex" style={{ height: "400px" }} >
                 <Toolbar className="k-scheduler-toolbar">
-                    <span className="k-button-group k-scheduler-navigation">
+                    <ButtonGroup className="k-scheduler-navigation">
                         <Button>Today</Button>
                         <Button icon="caret-alt-left"></Button>
                         <Button icon="caret-alt-right"></Button>
-                    </span>
+                    </ButtonGroup>
                     <Button icon="calendar" className="k-nav-current" fillMode="flat" >
                         Wednesday, June 24, 2020
                     </Button>
                     <span className="k-spacer"></span>
-                    <span className="k-scheduler-views-wrapper">
-                        <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">
-                            <option>Timeline</option>
-                        </select>
-                        <span className="k-button-group k-scheduler-views">
-                            <Button>Day</Button>
-                            <Button>Week</Button>
-                            <Button>Month</Button>
-                            <Button selected>Timeline</Button>
-                            <Button>Agenda</Button>
-                        </span>
-                    </span>
+                    <ButtonGroup className="k-scheduler-views">
+                        <Button>Day</Button>
+                        <Button>Week</Button>
+                        <Button>Month</Button>
+                        <Button selected>Timeline</Button>
+                        <Button>Agenda</Button>
+                    </ButtonGroup>
                 </Toolbar>
                 <div className="k-scheduler-layout k-scheduler-layout-flex k-scheduler-timeline-view">
                     <div className="k-scheduler-head" style={{ width: "7201px" }} >
@@ -451,27 +447,22 @@ root.render(
             <span>Scheduler with Slot Templates</span>
             <div className="k-widget k-scheduler k-scheduler-flex" style={{ height: "400px" }} >
                 <Toolbar className="k-scheduler-toolbar">
-                    <span className="k-button-group k-scheduler-navigation">
+                    <ButtonGroup className="k-scheduler-navigation">
                         <Button>Today</Button>
                         <Button icon="caret-alt-left"></Button>
                         <Button icon="caret-alt-right"></Button>
-                    </span>
+                    </ButtonGroup>
                     <Button icon="calendar" className="k-nav-current" fillMode="flat" >
                         Wednesday, June 24, 2020
                     </Button>
                     <span className="k-spacer"></span>
-                    <span className="k-scheduler-views-wrapper">
-                        <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">
-                            <option>Timeline</option>
-                        </select>
-                        <span className="k-button-group k-scheduler-views">
-                            <Button>Day</Button>
-                            <Button>Week</Button>
-                            <Button>Month</Button>
-                            <Button selected>Timeline</Button>
-                            <Button>Agenda</Button>
-                        </span>
-                    </span>
+                    <ButtonGroup className="k-scheduler-views">
+                        <Button>Day</Button>
+                        <Button>Week</Button>
+                        <Button>Month</Button>
+                        <Button selected>Timeline</Button>
+                        <Button>Agenda</Button>
+                    </ButtonGroup>
                 </Toolbar>
                 <div className="k-scheduler-layout k-scheduler-layout-flex k-scheduler-timeline-view">
                     <div className="k-scheduler-head" style={{ width: "7201px" }} >