@progress/kendo-themes-html 5.6.1-dev.6 → 5.8.0

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

@@ -16,8 +16,8 @@ root.render(
                         <div className="k-scheduler-navigation">
                             <div className="k-button-group">
                                 <Button>Today</Button>
-                                <Button icon="arrow-60-left"></Button>
-                                <Button icon="arrow-60-right"></Button>
+                                <Button icon="caret-alt-left"></Button>
+                                <Button icon="caret-alt-right"></Button>
                             </div>
                         </div>
                         <Button icon="calendar" className="k-nav-current" fillMode="flat" >

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

@@ -23,8 +23,8 @@ root.render(
                         <div className="k-scheduler-navigation">
                             <div className="k-button-group">
                                 <Button>Today</Button>
-                                <Button icon="arrow-60-left"></Button>
-                                <Button icon="arrow-60-right"></Button>
+                                <Button icon="caret-alt-left"></Button>
+                                <Button icon="caret-alt-right"></Button>
                             </div>
                         </div>
                         <Button icon="calendar" className="k-nav-current" fillMode="flat" >
@@ -212,18 +212,18 @@ root.render(
                                 </table>
 
                                 <div style={{ backgroundColor: "rgb(245, 138, 138)", borderColor: "rgb(245, 138, 138)", width: "162px", right: "163px", top: "123px", height: "25px" }} className="k-event">
-                                    <span className="k-event-actions"><Icon name="reload"></Icon></span>
+                                    <span className="k-event-actions"><Icon name="arrow-rotate-cw"></Icon></span>
                                     <div><div className="k-event-template">Dance Practice</div></div>
                                     <span className="k-event-actions"><a className="k-link k-event-delete"><Icon name="x"></Icon></a></span>
                                     <span className="k-resize-handle k-resize-w"></span>
                                     <span className="k-resize-handle k-resize-e"></span>
                                 </div>
                                 <div style={{ backgroundColor: "rgb(110, 179, 250)", borderColor: "rgb(110, 179, 250)", width: "162px", right: "327px", top: "123px", height: "25px" }} className="k-event">
-                                    <span className="k-event-actions"><Icon name="reload"></Icon></span>
+                                    <span className="k-event-actions"><Icon name="arrow-rotate-cw"></Icon></span>
                                     <div><div className="k-event-template">HR Lecture</div></div>
                                 </div>
                                 <div style={{ backgroundColor: "rgb(245, 138, 138)", borderColor: "rgb(245, 138, 138)", width: "162px", right: "490px", top: "123px", height: "25px" }} className="k-event">
-                                    <span className="k-event-actions"><Icon name="reload"></Icon></span>
+                                    <span className="k-event-actions"><Icon name="arrow-rotate-cw"></Icon></span>
                                     <div><div className="k-event-template">Dance Practice</div></div>
                                 </div>
                                 <div style={{ backgroundColor: "rgb(110, 179, 250)", borderColor: "rgb(110, 179, 250)", width: "488px", right: "653px", top: "123px", height: "25px" }} className="k-event">
@@ -235,7 +235,7 @@ root.render(
                                     <div><div className="k-event-template">Software updates</div></div>
                                 </div>
                                 <div style={{ backgroundColor: "rgb(110, 179, 250)", borderColor: "rgb(110, 179, 250)", width: "162px", right: "490px", top: "150px", height: "25px" }} className="k-event">
-                                    <span className="k-event-actions"><Icon name="reload"></Icon></span>
+                                    <span className="k-event-actions"><Icon name="arrow-rotate-cw"></Icon></span>
                                     <div><div className="k-event-template">Helpdesk weekly meeting</div></div>
                                 </div>
                                 <div style={{ backgroundColor: "rgb(110, 179, 250)", borderColor: "rgb(110, 179, 250)", width: "488px", right: "653px", top: "150px", height: "25px" }} className="k-event">
@@ -271,7 +271,7 @@ root.render(
                                     <div><div className="k-event-template">Car Service</div></div>
                                 </div>
                                 <div style={{ backgroundColor: "rgb(110, 179, 250)", borderColor: "rgb(110, 179, 250)", width: "162px", right: "327px", top: "247px", height: "25px" }} className="k-event">
-                                    <span className="k-event-actions"><Icon name="reload"></Icon></span>
+                                    <span className="k-event-actions"><Icon name="arrow-rotate-cw"></Icon></span>
                                     <div><div className="k-event-template">HR Lecture</div></div>
                                 </div>
                                 <div style={{ backgroundColor: "rgb(245, 138, 138)", borderColor: "rgb(245, 138, 138)", width: "162px", right: "490px", top: "247px", height: "25px" }} className="k-event">

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

@@ -23,8 +23,8 @@ root.render(
                         <div className="k-scheduler-navigation">
                             <div className="k-button-group">
                                 <Button>Today</Button>
-                                <Button icon="arrow-60-left"></Button>
-                                <Button icon="arrow-60-right"></Button>
+                                <Button icon="caret-alt-left"></Button>
+                                <Button icon="caret-alt-right"></Button>
                             </div>
                         </div>
                         <Button icon="calendar" className="k-nav-current" fillMode="flat" >
@@ -212,18 +212,18 @@ root.render(
                                 </table>
 
                                 <div style={{ backgroundColor: "rgb(245, 138, 138)", borderColor: "rgb(245, 138, 138)", width: "162px", left: "163px", top: "123px", height: "25px" }} className="k-event">
-                                    <span className="k-event-actions"><Icon name="reload"></Icon></span>
+                                    <span className="k-event-actions"><Icon name="arrow-rotate-cw"></Icon></span>
                                     <div><div className="k-event-template">Dance Practice</div></div>
                                     <span className="k-event-actions"><a className="k-link k-event-delete"><Icon name="x"></Icon></a></span>
                                     <span className="k-resize-handle k-resize-w"></span>
                                     <span className="k-resize-handle k-resize-e"></span>
                                 </div>
                                 <div style={{ backgroundColor: "rgb(110, 179, 250)", borderColor: "rgb(110, 179, 250)", width: "162px", left: "327px", top: "123px", height: "25px" }} className="k-event">
-                                    <span className="k-event-actions"><Icon name="reload"></Icon></span>
+                                    <span className="k-event-actions"><Icon name="arrow-rotate-cw"></Icon></span>
                                     <div><div className="k-event-template">HR Lecture</div></div>
                                 </div>
                                 <div style={{ backgroundColor: "rgb(245, 138, 138)", borderColor: "rgb(245, 138, 138)", width: "162px", left: "490px", top: "123px", height: "25px" }} className="k-event">
-                                    <span className="k-event-actions"><Icon name="reload"></Icon></span>
+                                    <span className="k-event-actions"><Icon name="arrow-rotate-cw"></Icon></span>
                                     <div><div className="k-event-template">Dance Practice</div></div>
                                 </div>
                                 <div style={{ backgroundColor: "rgb(110, 179, 250)", borderColor: "rgb(110, 179, 250)", width: "488px", left: "653px", top: "123px", height: "25px" }} className="k-event">
@@ -235,7 +235,7 @@ root.render(
                                     <div><div className="k-event-template">Software updates</div></div>
                                 </div>
                                 <div style={{ backgroundColor: "rgb(110, 179, 250)", borderColor: "rgb(110, 179, 250)", width: "162px", left: "490px", top: "150px", height: "25px" }} className="k-event">
-                                    <span className="k-event-actions"><Icon name="reload"></Icon></span>
+                                    <span className="k-event-actions"><Icon name="arrow-rotate-cw"></Icon></span>
                                     <div><div className="k-event-template">Helpdesk weekly meeting</div></div>
                                 </div>
                                 <div style={{ backgroundColor: "rgb(110, 179, 250)", borderColor: "rgb(110, 179, 250)", width: "488px", left: "653px", top: "150px", height: "25px" }} className="k-event">
@@ -271,7 +271,7 @@ root.render(
                                     <div><div className="k-event-template">Car Service</div></div>
                                 </div>
                                 <div style={{ backgroundColor: "rgb(110, 179, 250)", borderColor: "rgb(110, 179, 250)", width: "162px", left: "327px", top: "247px", height: "25px" }} className="k-event">
-                                    <span className="k-event-actions"><Icon name="reload"></Icon></span>
+                                    <span className="k-event-actions"><Icon name="arrow-rotate-cw"></Icon></span>
                                     <div><div className="k-event-template">HR Lecture</div></div>
                                 </div>
                                 <div style={{ backgroundColor: "rgb(245, 138, 138)", borderColor: "rgb(245, 138, 138)", width: "162px", left: "490px", top: "247px", height: "25px" }} className="k-event">

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

@@ -23,8 +23,8 @@ root.render(
                         <div className="k-scheduler-navigation">
                             <div className="k-button-group">
                                 <Button>Today</Button>
-                                <Button icon="arrow-60-left"></Button>
-                                <Button icon="arrow-60-right"></Button>
+                                <Button icon="caret-alt-left"></Button>
+                                <Button icon="caret-alt-right"></Button>
                             </div>
                         </div>
                         <Button icon="calendar" className="k-nav-current" fillMode="flat" >
@@ -365,7 +365,7 @@ root.render(
                                     </tbody>
                                 </table>
                                 <div className="k-event" style={{ width: "150px", right: "306px", top: '0px', height: "73px" }} >
-                                    <span className="k-event-actions"><Icon name="reload"></Icon></span>
+                                    <span className="k-event-actions"><Icon name="arrow-rotate-cw"></Icon></span>
                                     <div>
                                         <div className="k-event-template k-event-time">7:00 AM - 8:00 AM</div>
                                         <div className="k-event-template">HR Lecture</div>
@@ -374,7 +374,7 @@ root.render(
                                 </div>
 
                                 <div className="k-event k-event-drag-hint" style={{ width: "150px", right: "631px", top: '0px', height: "73px" }} >
-                                    <span className="k-event-actions"><Icon name="reload"></Icon></span>
+                                    <span className="k-event-actions"><Icon name="arrow-rotate-cw"></Icon></span>
                                     <div>
                                         <div className="k-event-template k-event-time">7:00 AM - 8:00 AM</div>
                                         <div className="k-event-template">HR Lecture</div>

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

@@ -23,8 +23,8 @@ root.render(
                         <div className="k-scheduler-navigation">
                             <div className="k-button-group">
                                 <Button>Today</Button>
-                                <Button icon="arrow-60-left"></Button>
-                                <Button icon="arrow-60-right"></Button>
+                                <Button icon="caret-alt-left"></Button>
+                                <Button icon="caret-alt-right"></Button>
                             </div>
                         </div>
                         <Button icon="calendar" className="k-nav-current" fillMode="flat" >
@@ -365,7 +365,7 @@ root.render(
                                     </tbody>
                                 </table>
                                 <div className="k-event" style={{ width: "150px", left: "306px", top: '0px', height: "73px" }} >
-                                    <span className="k-event-actions"><Icon name="reload"></Icon></span>
+                                    <span className="k-event-actions"><Icon name="arrow-rotate-cw"></Icon></span>
                                     <div>
                                         <div className="k-event-template k-event-time">7:00 AM - 8:00 AM</div>
                                         <div className="k-event-template">HR Lecture</div>
@@ -374,7 +374,7 @@ root.render(
                                 </div>
 
                                 <div className="k-event k-event-drag-hint" style={{ width: "150px", left: "631px", top: '0px', height: "73px" }} >
-                                    <span className="k-event-actions"><Icon name="reload"></Icon></span>
+                                    <span className="k-event-actions"><Icon name="arrow-rotate-cw"></Icon></span>
                                     <div>
                                         <div className="k-event-template k-event-time">7:00 AM - 8:00 AM</div>
                                         <div className="k-event-template">HR Lecture</div>

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

@@ -14,8 +14,8 @@ root.render(
                 <div className="k-scheduler-toolbar k-toolbar">
                     <span className="k-button-group k-scheduler-navigation">
                         <Button>Today</Button>
-                        <Button icon="arrow-60-left"></Button>
-                        <Button icon="arrow-60-right"></Button>
+                        <Button icon="caret-alt-left"></Button>
+                        <Button icon="caret-alt-right"></Button>
                     </span>
                     <Button icon="calendar" className="k-nav-current" fillMode="flat" >
                         Monday, June 24, 2019

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

@@ -21,8 +21,8 @@ root.render(
                 <div className="k-scheduler-toolbar k-toolbar">
                     <span className="k-button-group k-scheduler-navigation">
                         <Button>Today</Button>
-                        <Button icon="arrow-60-left"></Button>
-                        <Button icon="arrow-60-right"></Button>
+                        <Button icon="caret-alt-left"></Button>
+                        <Button icon="caret-alt-right"></Button>
                     </span>
                     <Button icon="calendar" className="k-nav-current" fillMode="flat" >
                         Monday, June 10, 2013 - Friday, June 14, 2013
@@ -104,7 +104,7 @@ root.render(
                                                 <td>
                                                     <div className="k-task">
                                                         <span className="k-scheduler-mark"></span>
-                                                        <Icon name="reload"></Icon>
+                                                        <Icon name="arrow-rotate-cw"></Icon>
                                                         <span className="k-scheduler-task-text">Recurring</span>
                                                     </div>
                                                 </td>

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

@@ -36,8 +36,8 @@ root.render(
                 <div className="k-scheduler-toolbar k-toolbar">
                     <span className="k-scheduler-navigation k-button-group">
                         <Button>Today</Button>
-                        <Button icon="arrow-60-left"></Button>
-                        <Button icon="arrow-60-right"></Button>
+                        <Button icon="caret-alt-left"></Button>
+                        <Button icon="caret-alt-right"></Button>
                     </span>
                     <Button icon="calendar" className="k-nav-current" fillMode="flat" >
                         June, 2013
@@ -226,15 +226,15 @@ root.render(
                                     </table>
 
                                     <div style={{ backgroundColor: "rgb(245, 138, 138)", borderColor: "rgb(245, 138, 138)", "--span": "1", "--col": "2", "--row": "2", "--slot": "1", height: "25px" } as React.CSSProperties} className="k-event">
-                                        <span className="k-event-actions"><Icon name="reload"></Icon></span>
+                                        <span className="k-event-actions"><Icon name="arrow-rotate-cw"></Icon></span>
                                         <div><div className="k-event-template">Dance Practice</div></div>
                                     </div>
                                     <div style={{ backgroundColor: "rgb(110, 179, 250)", borderColor: "rgb(110, 179, 250)", "--span": "1", "--col": "3", "--row": "2", "--slot": "1", height: "25px" } as React.CSSProperties} className="k-event">
-                                        <span className="k-event-actions"><Icon name="reload"></Icon></span>
+                                        <span className="k-event-actions"><Icon name="arrow-rotate-cw"></Icon></span>
                                         <div><div className="k-event-template">HR Lecture</div></div>
                                     </div>
                                     <div style={{ backgroundColor: "rgb(245, 138, 138)", borderColor: "rgb(245, 138, 138)", "--span": "1", "--col": "4", "--row": "2", "--slot": "1", height: "25px" } as React.CSSProperties} className="k-event">
-                                        <span className="k-event-actions"><Icon name="reload"></Icon></span>
+                                        <span className="k-event-actions"><Icon name="arrow-rotate-cw"></Icon></span>
                                         <div><div className="k-event-template">Dance Practice</div></div>
                                     </div>
                                     <div style={{ backgroundColor: "rgb(110, 179, 250)", borderColor: "rgb(110, 179, 250)", "--span": "3", "--col": "5", "--row": "2", "--slot": "1", height: "25px" } as React.CSSProperties} className="k-event">
@@ -246,7 +246,7 @@ root.render(
                                         <div><div className="k-event-template">Software updates</div></div>
                                     </div>
                                     <div style={{ backgroundColor: "rgb(110, 179, 250)", borderColor: "rgb(110, 179, 250)", "--span": "1", "--col": "4", "--row": "2", "--slot": "2", height: "25px" } as React.CSSProperties} className="k-event">
-                                        <span className="k-event-actions"><Icon name="reload"></Icon></span>
+                                        <span className="k-event-actions"><Icon name="arrow-rotate-cw"></Icon></span>
                                         <div><div className="k-event-template">Helpdesk weekly meeting</div></div>
                                     </div>
                                     <div style={{ backgroundColor: "rgb(110, 179, 250)", borderColor: "rgb(110, 179, 250)", "--span": "3", "--col": "5", "--row": "2", "--slot": "2", height: "25px" } as React.CSSProperties} className="k-event">
@@ -282,7 +282,7 @@ root.render(
                                         <div><div className="k-event-template">Car Service</div></div>
                                     </div>
                                     <div style={{ backgroundColor: "rgb(110, 179, 250)", borderColor: "rgb(110, 179, 250)", "--span": "1", "--col": "3", "--row": "3", "--slot": "2", height: "25px" } as React.CSSProperties} className="k-event">
-                                        <span className="k-event-actions"><Icon name="reload"></Icon></span>
+                                        <span className="k-event-actions"><Icon name="arrow-rotate-cw"></Icon></span>
                                         <div><div className="k-event-template">HR Lecture</div></div>
                                     </div>
                                     <div style={{ backgroundColor: "rgb(245, 138, 138)", borderColor: "rgb(245, 138, 138)", "--span": "1", "--col": "4", "--row": "3", "--slot": "2", height: "25px" } as React.CSSProperties} className="k-event">

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

@@ -22,8 +22,8 @@ root.render(
                 <div className="k-scheduler-toolbar k-toolbar">
                     <span className="k-button-group k-scheduler-navigation">
                         <Button>Today</Button>
-                        <Button icon="arrow-60-left"></Button>
-                        <Button icon="arrow-60-right"></Button>
+                        <Button icon="caret-alt-left"></Button>
+                        <Button icon="caret-alt-right"></Button>
                     </span>
                     <Button icon="calendar" className="k-nav-current" fillMode="flat" >
                         Sunday, June 21, 2020 - Saturday, June 27, 2020
@@ -84,7 +84,7 @@ root.render(
                                                             <div>9:30 PM-11:00 PM</div>
                                                         </div>
                                                         <div className="k-scheduler-cell">
-                                                            <div className="k-task"><span className="k-scheduler-mark" style={{ color: 'red', backgroundColor: 'red' }} ></span><Icon name="reload"></Icon>Dance Practice<a className="k-link k-event-delete"><Icon name="x"></Icon></a></div>
+                                                            <div className="k-task"><span className="k-scheduler-mark" style={{ color: 'red', backgroundColor: 'red' }} ></span><Icon name="arrow-rotate-cw"></Icon>Dance Practice<a className="k-link k-event-delete"><Icon name="x"></Icon></a></div>
                                                         </div>
                                                     </div>
                                                 </div>
@@ -99,7 +99,7 @@ root.render(
                                                             <div>10:00 PM-12:00 AM</div>
                                                         </div>
                                                         <div className="k-scheduler-cell">
-                                                            <div className="k-task"><span className="k-scheduler-mark" style={{ color: 'red', backgroundColor: 'red' }} ></span><Icon name="reload"></Icon>HR Lecture<a className="k-link k-event-delete"><Icon name="x"></Icon></a></div>
+                                                            <div className="k-task"><span className="k-scheduler-mark" style={{ color: 'red', backgroundColor: 'red' }} ></span><Icon name="arrow-rotate-cw"></Icon>HR Lecture<a className="k-link k-event-delete"><Icon name="x"></Icon></a></div>
                                                         </div>
                                                     </div>
                                                 </div>
@@ -167,7 +167,7 @@ root.render(
                                                             <div>6:00 PM-7:00 PM</div>
                                                         </div>
                                                         <div className="k-scheduler-cell">
-                                                            <div className="k-task"><span className="k-scheduler-mark" style={{ color: 'red', backgroundColor: 'red' }} ></span><Icon name="reload"></Icon>Helpdesk weekly meeting<a className="k-link k-event-delete"><Icon name="x"></Icon></a></div>
+                                                            <div className="k-task"><span className="k-scheduler-mark" style={{ color: 'red', backgroundColor: 'red' }} ></span><Icon name="arrow-rotate-cw"></Icon>Helpdesk weekly meeting<a className="k-link k-event-delete"><Icon name="x"></Icon></a></div>
                                                         </div>
                                                     </div>
                                                     <div className="k-scheduler-row">
@@ -183,7 +183,7 @@ root.render(
                                                             <div>9:30 PM-11:00 PM</div>
                                                         </div>
                                                         <div className="k-scheduler-cell">
-                                                            <div className="k-task"><span className="k-scheduler-mark" style={{ color: 'red', backgroundColor: 'red' }} ></span><Icon name="reload"></Icon>Dance Practice<a className="k-link k-event-delete"><Icon name="x"></Icon></a></div>
+                                                            <div className="k-task"><span className="k-scheduler-mark" style={{ color: 'red', backgroundColor: 'red' }} ></span><Icon name="arrow-rotate-cw"></Icon>Dance Practice<a className="k-link k-event-delete"><Icon name="x"></Icon></a></div>
                                                         </div>
                                                     </div>
                                                 </div>
@@ -216,7 +216,7 @@ root.render(
                                                             <div>9:30 PM-11:00 PM</div>
                                                         </div>
                                                         <div className="k-scheduler-cell">
-                                                            <div className="k-task"><span className="k-scheduler-mark" style={{ color: 'green', backgroundColor: 'green' }} ></span><Icon name="reload"></Icon>Dance Practice<a className="k-link k-event-delete"><Icon name="x"></Icon></a></div>
+                                                            <div className="k-task"><span className="k-scheduler-mark" style={{ color: 'green', backgroundColor: 'green' }} ></span><Icon name="arrow-rotate-cw"></Icon>Dance Practice<a className="k-link k-event-delete"><Icon name="x"></Icon></a></div>
                                                         </div>
                                                     </div>
                                                 </div>
@@ -231,7 +231,7 @@ root.render(
                                                             <div>10:00 PM-12:00 AM</div>
                                                         </div>
                                                         <div className="k-scheduler-cell">
-                                                            <div className="k-task"><span className="k-scheduler-mark" style={{ color: 'green', backgroundColor: 'green' }} ></span><Icon name="reload"></Icon>HR Lecture<a className="k-link k-event-delete"><Icon name="x"></Icon></a></div>
+                                                            <div className="k-task"><span className="k-scheduler-mark" style={{ color: 'green', backgroundColor: 'green' }} ></span><Icon name="arrow-rotate-cw"></Icon>HR Lecture<a className="k-link k-event-delete"><Icon name="x"></Icon></a></div>
                                                         </div>
                                                     </div>
                                                 </div>
@@ -310,7 +310,7 @@ root.render(
                                                             <div>6:00 PM-7:00 PM</div>
                                                         </div>
                                                         <div className="k-scheduler-cell">
-                                                            <div className="k-task"><span className="k-scheduler-mark" style={{ color: 'green', backgroundColor: 'green' }} ></span><Icon name="reload"></Icon>Helpdesk weekly meeting<a className="k-link k-event-delete"><Icon name="x"></Icon></a></div>
+                                                            <div className="k-task"><span className="k-scheduler-mark" style={{ color: 'green', backgroundColor: 'green' }} ></span><Icon name="arrow-rotate-cw"></Icon>Helpdesk weekly meeting<a className="k-link k-event-delete"><Icon name="x"></Icon></a></div>
                                                         </div>
                                                     </div>
                                                     <div className="k-scheduler-row">
@@ -326,7 +326,7 @@ root.render(
                                                             <div>9:30 PM-11:00 PM</div>
                                                         </div>
                                                         <div className="k-scheduler-cell">
-                                                            <div className="k-task"><span className="k-scheduler-mark" style={{ color: 'green', backgroundColor: 'green' }} ></span><Icon name="reload"></Icon>Dance Practice<a className="k-link k-event-delete"><Icon name="x"></Icon></a></div>
+                                                            <div className="k-task"><span className="k-scheduler-mark" style={{ color: 'green', backgroundColor: 'green' }} ></span><Icon name="arrow-rotate-cw"></Icon>Dance Practice<a className="k-link k-event-delete"><Icon name="x"></Icon></a></div>
                                                         </div>
                                                     </div>
                                                 </div>

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

@@ -22,8 +22,8 @@ root.render(
                 <div className="k-scheduler-toolbar k-toolbar">
                     <span className="k-button-group k-scheduler-navigation">
                         <Button>Today</Button>
-                        <Button icon="arrow-60-left"></Button>
-                        <Button icon="arrow-60-right"></Button>
+                        <Button icon="caret-alt-left"></Button>
+                        <Button icon="caret-alt-right"></Button>
                     </span>
                     <Button icon="calendar" className="k-nav-current" fillMode="flat" >
                         Wednesday, June 24, 2020