@progress/kendo-themes-html 8.0.0-dev.3 → 8.0.0-dev.5

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

@@ -1,300 +0,0 @@
-import { Button } from '../../button';
-import { ButtonGroup } from '../../button-group';
-import { Icon } from '../../icon';
-import { Toolbar } from '../../toolbar';
-
-
-const style = `
-    #test-area {
-        max-width: 1200px;
-    }
-`;
-
-export default () =>(
-    <>
-        <style>{style}</style>
-        <div id="test-area" className="k-d-grid k-grid-cols-1">
-            <div className="k-widget k-scheduler">
-                <Toolbar className="k-scheduler-toolbar">
-                    <div className="k-toolbar-group">
-                        <ButtonGroup className="k-scheduler-navigation">
-                            <Button className="k-group-start">Today</Button>
-                            <Button icon="caret-alt-left"></Button>
-                            <Button className="k-group-end" 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>
-                    <ButtonGroup className="k-scheduler-views">
-                        <Button className="k-group-start">Day</Button>
-                        <Button>Week</Button>
-                        <Button>Month</Button>
-                        <Button>Timeline</Button>
-                        <Button className="k-group-end" selected>Agenda</Button>
-                    </ButtonGroup>
-                </Toolbar>
-                <div>
-                    <table className="k-scheduler-layout k-scheduler-agendaview k-scheduler-agenda">
-                        <tbody>
-                            <tr>
-                                <td>
-                                    <div className="k-scheduler-header">
-                                        <div className="k-scheduler-header-wrap">
-                                            <table className="k-scheduler-table">
-                                                <tbody>
-                                                    <tr>
-                                                        <th className="k-scheduler-datecolumn">Date</th>
-                                                        <th className="k-scheduler-timecolumn">Time</th>
-                                                        <th>Event</th>
-                                                    </tr>
-                                                </tbody>
-                                            </table>
-                                        </div>
-                                    </div>
-                                </td>
-                            </tr>
-                            <tr>
-                                <td>
-                                    <div className="k-scheduler-content" style={{ height: "508px" }} >
-                                        <table className="k-scheduler-table">
-                                            <tbody>
-                                                <tr>
-                                                    <td className="k-scheduler-datecolumn" rowSpan={9}>
-                                                        <strong className="k-scheduler-agendaday">24</strong>
-                                                        <em className="k-scheduler-agendaweek">Monday</em>
-                                                        <span className="k-scheduler-agendadate">Jun 2013</span>
-                                                    </td>
-                                                    <td className="k-scheduler-timecolumn">
-                                                        <div><Icon icon="caret-alt-left"></Icon> all day</div>
-                                                    </td>
-                                                    <td>
-                                                        <div className="k-task">
-                                                            <span className="k-scheduler-mark" style={{ backgroundColor: "rgb(110, 179, 250)" }} ></span>
-                                                            All day event
-                                                            <a className="k-link k-event-delete"><Icon icon="x"></Icon></a>
-                                                        </div>
-                                                    </td>
-                                                </tr>
-                                                <tr>
-                                                    <td className="k-scheduler-timecolumn">
-                                                        <div>8:30 AM-2:30 PM</div>
-                                                    </td>
-                                                    <td>
-                                                        <div className="k-task">
-                                                            <span className="k-scheduler-mark" style={{ backgroundColor: "rgb(245, 138, 138)" }} ></span>
-                                                            Event 1
-                                                            <a className="k-link k-event-delete"><Icon icon="x"></Icon></a>
-                                                        </div>
-                                                    </td>
-                                                </tr>
-                                                <tr>
-                                                    <td className="k-scheduler-timecolumn">
-                                                        <div>8:30 AM-2:30 PM</div>
-                                                    </td>
-                                                    <td>
-                                                        <div className="k-task">
-                                                            <span className="k-scheduler-mark" style={{ backgroundColor: "rgb(245, 138, 138)" }} ></span>
-                                                            Event 2
-                                                            <a className="k-link k-event-delete"><Icon icon="x"></Icon></a>
-                                                        </div>
-                                                    </td>
-                                                </tr>
-                                                <tr>
-                                                    <td className="k-scheduler-timecolumn">
-                                                        <div>8:30 AM-2:30 PM</div>
-                                                    </td>
-                                                    <td>
-                                                        <div className="k-task">
-                                                            <span className="k-scheduler-mark" style={{ backgroundColor: "rgb(245, 138, 138)" }} ></span>
-                                                            Event 3
-                                                            <a className="k-link k-event-delete"><Icon icon="x"></Icon></a>
-                                                        </div>
-                                                    </td>
-                                                </tr>
-                                                <tr>
-                                                    <td className="k-scheduler-timecolumn">
-                                                        <div>8:30 AM-2:30 PM</div>
-                                                    </td>
-                                                    <td>
-                                                        <div className="k-task">
-                                                            <span className="k-scheduler-mark" style={{ backgroundColor: "rgb(245, 138, 138)" }} ></span>
-                                                            Event 4
-                                                            <a className="k-link k-event-delete"><Icon icon="x"></Icon></a>
-                                                        </div>
-                                                    </td>
-                                                </tr>
-                                                <tr>
-                                                    <td className="k-scheduler-timecolumn">
-                                                        <div>8:30 AM-2:30 PM</div>
-                                                    </td>
-                                                    <td>
-                                                        <div className="k-task">
-                                                            <span className="k-scheduler-mark" style={{ backgroundColor: "rgb(110, 179, 250)" }} ></span>
-                                                            Event 5
-                                                            <a className="k-link k-event-delete"><Icon icon="x"></Icon></a>
-                                                        </div>
-                                                    </td>
-                                                </tr>
-                                                <tr>
-                                                    <td className="k-scheduler-timecolumn">
-                                                        <div>8:30 AM-2:30 PM</div>
-                                                    </td>
-                                                    <td>
-                                                        <div className="k-task">
-                                                            <span className="k-scheduler-mark" style={{ backgroundColor: "rgb(110, 179, 250)" }} ></span>
-                                                            Event 6
-                                                            <a className="k-link k-event-delete"><Icon icon="x"></Icon></a>
-                                                        </div>
-                                                    </td>
-                                                </tr>
-                                                <tr>
-                                                    <td className="k-scheduler-timecolumn">
-                                                        <div>8:30 AM-2:30 PM</div>
-                                                    </td>
-                                                    <td>
-                                                        <div className="k-task">
-                                                            <span className="k-scheduler-mark" style={{ backgroundColor: "rgb(110, 179, 250)" }} ></span>
-                                                            Event 7
-                                                            <a className="k-link k-event-delete"><Icon icon="x"></Icon></a>
-                                                        </div>
-                                                    </td>
-                                                </tr>
-                                                <tr>
-                                                    <td className="k-scheduler-timecolumn">
-                                                        <div>8:30 AM-2:30 PM</div>
-                                                    </td>
-                                                    <td>
-                                                        <div className="k-task">
-                                                            <span className="k-scheduler-mark" style={{ backgroundColor: "rgb(110, 179, 250)" }} ></span>
-                                                            Event 8
-                                                            <a className="k-link k-event-delete"><Icon icon="x"></Icon></a>
-                                                        </div>
-                                                    </td>
-                                                </tr>
-                                                <tr>
-                                                    <td className="k-scheduler-datecolumn" rowSpan={9}>
-                                                        <strong className="k-scheduler-agendaday">25</strong>
-                                                        <em className="k-scheduler-agendaweek">Tuesday</em>
-                                                        <span className="k-scheduler-agendadate">Jun 2013</span>
-                                                    </td>
-                                                    <td className="k-scheduler-timecolumn">
-                                                        <div><Icon icon="caret-alt-left"></Icon> all day</div>
-                                                    </td>
-                                                    <td>
-                                                        <div className="k-task">
-                                                            <span className="k-scheduler-mark" style={{ backgroundColor: "rgb(110, 179, 250)" }} ></span>
-                                                            All day event
-                                                            <a className="k-link k-event-delete"><Icon icon="x"></Icon></a>
-                                                        </div>
-                                                    </td>
-                                                </tr>
-                                                <tr>
-                                                    <td className="k-scheduler-timecolumn">
-                                                        <div>8:30 AM-2:30 PM</div>
-                                                    </td>
-                                                    <td>
-                                                        <div className="k-task">
-                                                            <span className="k-scheduler-mark" style={{ backgroundColor: "rgb(245, 138, 138)" }} ></span>
-                                                            Event 1
-                                                            <a className="k-link k-event-delete"><Icon icon="x"></Icon></a>
-                                                        </div>
-                                                    </td>
-                                                </tr>
-                                                <tr>
-                                                    <td className="k-scheduler-timecolumn">
-                                                        <div>8:30 AM-2:30 PM</div>
-                                                    </td>
-                                                    <td>
-                                                        <div className="k-task">
-                                                            <span className="k-scheduler-mark" style={{ backgroundColor: "rgb(245, 138, 138)" }} ></span>
-                                                            Event 2
-                                                            <a className="k-link k-event-delete"><Icon icon="x"></Icon></a>
-                                                        </div>
-                                                    </td>
-                                                </tr>
-                                                <tr>
-                                                    <td className="k-scheduler-timecolumn">
-                                                        <div>8:30 AM-2:30 PM</div>
-                                                    </td>
-                                                    <td>
-                                                        <div className="k-task">
-                                                            <span className="k-scheduler-mark" style={{ backgroundColor: "rgb(245, 138, 138)" }} ></span>
-                                                            Event 3
-                                                            <a className="k-link k-event-delete"><Icon icon="x"></Icon></a>
-                                                        </div>
-                                                    </td>
-                                                </tr>
-                                                <tr>
-                                                    <td className="k-scheduler-timecolumn">
-                                                        <div>8:30 AM-2:30 PM</div>
-                                                    </td>
-                                                    <td>
-                                                        <div className="k-task">
-                                                            <span className="k-scheduler-mark" style={{ backgroundColor: "rgb(245, 138, 138)" }} ></span>
-                                                            Event 4
-                                                            <a className="k-link k-event-delete"><Icon icon="x"></Icon></a>
-                                                        </div>
-                                                    </td>
-                                                </tr>
-                                                <tr>
-                                                    <td className="k-scheduler-timecolumn">
-                                                        <div>8:30 AM-2:30 PM</div>
-                                                    </td>
-                                                    <td>
-                                                        <div className="k-task">
-                                                            <span className="k-scheduler-mark" style={{ backgroundColor: "rgb(110, 179, 250)" }} ></span>
-                                                            Event 5
-                                                            <a className="k-link k-event-delete"><Icon icon="x"></Icon></a>
-                                                        </div>
-                                                    </td>
-                                                </tr>
-                                                <tr>
-                                                    <td className="k-scheduler-timecolumn">
-                                                        <div>8:30 AM-2:30 PM</div>
-                                                    </td>
-                                                    <td>
-                                                        <div className="k-task">
-                                                            <span className="k-scheduler-mark" style={{ backgroundColor: "rgb(110, 179, 250)" }} ></span>
-                                                            Event 6
-                                                            <a className="k-link k-event-delete"><Icon icon="x"></Icon></a>
-                                                        </div>
-                                                    </td>
-                                                </tr>
-                                                <tr>
-                                                    <td className="k-scheduler-timecolumn">
-                                                        <div>8:30 AM-2:30 PM</div>
-                                                    </td>
-                                                    <td>
-                                                        <div className="k-task">
-                                                            <span className="k-scheduler-mark" style={{ backgroundColor: "rgb(110, 179, 250)" }} ></span>
-                                                            Event 7
-                                                            <a className="k-link k-event-delete"><Icon icon="x"></Icon></a>
-                                                        </div>
-                                                    </td>
-                                                </tr>
-                                                <tr>
-                                                    <td className="k-scheduler-timecolumn">
-                                                        <div>8:30 AM-2:30 PM</div>
-                                                    </td>
-                                                    <td>
-                                                        <div className="k-task">
-                                                            <span className="k-scheduler-mark" style={{ backgroundColor: "rgb(110, 179, 250)" }} ></span>
-                                                            Event 8
-                                                            <a className="k-link k-event-delete"><Icon icon="x"></Icon></a>
-                                                        </div>
-                                                    </td>
-                                                </tr>
-                                            </tbody>
-                                        </table>
-                                    </div>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-        </div>
-    </>
-);

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

@@ -1,254 +0,0 @@
-import { Button } from '../../button';
-import { ButtonGroup } from '../../button-group';
-import { Icon } from '../../icon';
-import { Toolbar } from '../../toolbar';
-
-
-export default () =>(
-    <>
-        <div id="test-area" className="k-d-grid k-grid-cols-1">
-            <div className="k-widget k-scheduler k-rtl" dir="rtl">
-                <Toolbar className="k-scheduler-toolbar">
-                    <div className="k-toolbar-group">
-                        <ButtonGroup className="k-scheduler-navigation">
-                            <Button className="k-group-start">Today</Button>
-                            <Button icon="caret-alt-right"></Button>
-                            <Button className="k-group-end" icon="caret-alt-left"></Button>
-                        </ButtonGroup>
-                        <Button icon="calendar" className="k-nav-current" fillMode="flat" >
-                            Monday, June 24, 2013
-                        </Button>
-                    </div>
-                    <span className="k-spacer"></span>
-                    <ButtonGroup className="k-scheduler-views">
-                        <Button className="k-group-start" selected>Day</Button>
-                        <Button>Week</Button>
-                        <Button>Month</Button>
-                        <Button>Timeline</Button>
-                        <Button className="k-group-start">Agenda</Button>
-                    </ButtonGroup>
-                </Toolbar>
-                <div style={{ display: "block" }}>
-                    <div className="k-scheduler-layout k-scheduler-flex-layout k-scheduler-dayview">
-                        <div className="k-scheduler-pane">
-                            <div className="k-scheduler-times" style={{ width: "79px" }}>
-                                <table className="k-scheduler-table">
-                                    <tbody>
-                                        <tr><th></th></tr>
-                                        <tr><th className="k-scheduler-times-all-day" style={{ height: "46px" }}>all day</th></tr>
-                                    </tbody>
-                                </table>
-                            </div>
-                            <div className="k-scheduler-header">
-                                <div className="k-scheduler-header-wrap">
-                                    <table className="k-scheduler-table">
-                                        <tbody>
-                                            <tr><th><span className="k-link k-nav-day">Mon, 6/24</span></th></tr>
-                                        </tbody>
-                                    </table>
-                                    <div style={{ position: "relative" }}>
-                                        <table className="k-scheduler-table k-scheduler-header-all-day">
-                                            <tbody>
-                                                <tr><td style={{ height: "46px" }}></td></tr>
-                                            </tbody>
-                                        </table>
-                                        <div style={{ backgroundColor: "rgb(17, 134, 64)", borderColor: "rgb(17, 134, 64)", width: "454px", right: "1px", top: '0px', height: "25px" }} className="k-event">
-                                            <span className="k-event-actions"><Icon icon="caret-alt-left"></Icon></span>
-                                            <div><div className="k-event-template">Attending HR Conference</div></div>
-                                            <span className="k-event-actions"><a className="k-link k-event-delete"><Icon icon="x"></Icon></a></span>
-                                            <span className="k-resize-handle k-resize-w"></span>
-                                            <span className="k-resize-handle k-resize-e"></span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="k-scheduler-pane">
-                            <div className="k-scheduler-times" style={{ height: "404px" }}>
-                                <table className="k-scheduler-table">
-                                    <tbody>
-                                        <tr><th>8:00 AM</th></tr>
-                                        <tr><th className="k-slot-cell"></th></tr>
-                                        <tr><th>9:00 AM</th></tr>
-                                        <tr><th className="k-slot-cell"></th></tr>
-                                        <tr><th>10:00 AM</th></tr>
-                                        <tr><th className="k-slot-cell"></th></tr>
-                                        <tr><th>11:00 AM</th></tr>
-                                        <tr><th className="k-slot-cell"></th></tr>
-                                        <tr><th>12:00 PM</th></tr>
-                                        <tr><th className="k-slot-cell"></th></tr>
-                                        <tr><th>1:00 PM</th></tr>
-                                        <tr><th className="k-slot-cell"></th></tr>
-                                        <tr><th>2:00 PM</th></tr>
-                                        <tr><th className="k-slot-cell"></th></tr>
-                                        <tr><th>3:00 PM</th></tr>
-                                        <tr><th className="k-slot-cell"></th></tr>
-                                        <tr><th>4:00 PM</th></tr>
-                                        <tr><th className="k-slot-cell"></th></tr>
-                                        <tr><th>5:00 PM</th></tr>
-                                        <tr><th className="k-slot-cell"></th></tr>
-                                        <tr><th>6:00 PM</th></tr>
-                                        <tr><th className="k-slot-cell"></th></tr>
-                                        <tr><th>7:00 PM</th></tr>
-                                        <tr><th className="k-slot-cell"></th></tr>
-                                        <tr><th>8:00 PM</th></tr>
-                                        <tr><th className="k-slot-cell"></th></tr>
-                                        <tr><th>9:00 PM</th></tr>
-                                        <tr><th className="k-slot-cell"></th></tr>
-                                        <tr><th>10:00 PM</th></tr>
-                                        <tr><th className="k-slot-cell"></th></tr>
-                                        <tr><th>11:00 PM</th></tr>
-                                        <tr><th className="k-slot-cell"></th></tr>
-                                    </tbody>
-                                </table>
-                            </div>
-                            <div className="k-scheduler-content" style={{ height: "404px" }}>
-
-                                <table className="k-scheduler-table">
-                                    <tbody>
-                                        <tr className="k-middle-row"><td></td></tr>
-                                        <tr><td></td></tr>
-                                        <tr className="k-middle-row"><td></td></tr>
-                                        <tr><td></td></tr>
-                                        <tr className="k-middle-row"><td></td></tr>
-                                        <tr><td></td></tr>
-                                        <tr className="k-middle-row"><td></td></tr>
-                                        <tr><td></td></tr>
-                                        <tr className="k-middle-row"><td></td></tr>
-                                        <tr><td></td></tr>
-                                        <tr className="k-middle-row"><td></td></tr>
-                                        <tr><td></td></tr>
-                                        <tr className="k-middle-row"><td></td></tr>
-                                        <tr><td></td></tr>
-                                        <tr className="k-middle-row"><td></td></tr>
-                                        <tr><td></td></tr>
-                                        <tr className="k-middle-row"><td></td></tr>
-                                        <tr><td></td></tr>
-                                        <tr className="k-middle-row"><td className="k-nonwork-hour"></td></tr>
-                                        <tr><td className="k-nonwork-hour"></td></tr>
-                                        <tr className="k-middle-row"><td className="k-nonwork-hour"></td></tr>
-                                        <tr><td className="k-nonwork-hour"></td></tr>
-                                        <tr className="k-middle-row"><td className="k-nonwork-hour"></td></tr>
-                                        <tr><td className="k-nonwork-hour"></td></tr>
-                                        <tr className="k-middle-row"><td className="k-nonwork-hour"></td></tr>
-                                        <tr><td className="k-nonwork-hour"></td></tr>
-                                        <tr className="k-middle-row"><td className="k-nonwork-hour"></td></tr>
-                                        <tr><td className="k-nonwork-hour"></td></tr>
-                                        <tr className="k-middle-row"><td className="k-nonwork-hour"></td></tr>
-                                        <tr><td className="k-nonwork-hour"></td></tr>
-                                        <tr className="k-middle-row"><td className="k-nonwork-hour"></td></tr>
-                                        <tr><td className="k-nonwork-hour"></td></tr>
-                                    </tbody>
-                                </table>
-
-                                <div style={{ width: "56px", right: "3px", top: "37px", height: "443px" }} className="k-event">
-                                    <span className="k-event-actions"></span>
-                                    <div>
-                                        <div className="k-event-template k-event-time">8:30 AM - 2:30 PM</div>
-                                        <div className="k-event-template">Car Service</div>
-                                    </div>
-                                    <span className="k-event-actions"><a className="k-link k-event-delete"><Icon icon="x"></Icon></a></span>
-                                    <span className="k-resize-handle k-resize-n"></span>
-                                    <span className="k-resize-handle k-resize-s"></span>
-                                </div>
-                                <div style={{ width: "54px", right: "61px", top: "259px", height: "73px" }} className="k-event">
-                                    <span className="k-event-actions"></span>
-                                    <div>
-                                        <div className="k-event-template k-event-time">11:30 AM - 12:30 PM</div>
-                                        <div className="k-event-template">Event 4</div>
-                                    </div>
-                                    <span className="k-event-actions"><a className="k-link k-event-delete"><Icon icon="x"></Icon></a></span>
-                                    <span className="k-resize-handle k-resize-n"></span>
-                                    <span className="k-resize-handle k-resize-s"></span>
-                                </div>
-                                <div style={{ width: "54px", right: "117px", top: "259px", height: "73px" }} className="k-event">
-                                    <span className="k-event-actions"></span>
-                                    <div>
-                                        <div className="k-event-template k-event-time">11:30 AM - 12:30 PM</div>
-                                        <div className="k-event-template">Event 5</div>
-                                    </div>
-                                    <span className="k-event-actions"><a className="k-link k-event-delete"><Icon icon="x"></Icon></a></span>
-                                    <span className="k-resize-handle k-resize-n"></span>
-                                    <span className="k-resize-handle k-resize-s"></span>
-                                </div>
-                                <div style={{ width: "54px", right: "173px", top: "259px", height: "73px" }} className="k-event">
-                                    <span className="k-event-actions"></span>
-                                    <div>
-                                        <div className="k-event-template k-event-time">11:30 AM - 12:30 PM</div>
-                                        <div className="k-event-template">Event 6</div>
-                                    </div>
-                                    <span className="k-event-actions"><a className="k-link k-event-delete"><Icon icon="x"></Icon></a></span>
-                                    <span className="k-resize-handle k-resize-n"></span>
-                                    <span className="k-resize-handle k-resize-s"></span>
-                                </div>
-                                <div style={{ width: "54px", right: "229px", top: "259px", height: "73px" }} className="k-event">
-                                    <span className="k-event-actions"></span>
-                                    <div>
-                                        <div className="k-event-template k-event-time">11:30 AM - 12:30 PM</div>
-                                        <div className="k-event-template">Event 1</div>
-                                    </div>
-                                    <span className="k-event-actions"><a className="k-link k-event-delete"><Icon icon="x"></Icon></a></span>
-                                    <span className="k-resize-handle k-resize-n"></span>
-                                    <span className="k-resize-handle k-resize-s"></span>
-                                </div>
-                                <div style={{ width: "54px", right: "285px", top: "259px", height: "73px" }} className="k-event">
-                                    <span className="k-event-actions"></span>
-                                    <div>
-                                        <div className="k-event-template k-event-time">11:30 AM - 12:30 PM</div>
-                                        <div className="k-event-template">Event 2</div>
-                                    </div>
-                                    <span className="k-event-actions"><a className="k-link k-event-delete"><Icon icon="x"></Icon></a></span>
-                                    <span className="k-resize-handle k-resize-n"></span>
-                                    <span className="k-resize-handle k-resize-s"></span>
-                                </div>
-                                <div style={{ width: "54px", right: "341px", top: "259px", height: "73px" }} className="k-event">
-                                    <span className="k-event-actions"></span>
-                                    <div>
-                                        <div className="k-event-template k-event-time">11:30 AM - 12:30 PM</div>
-                                        <div className="k-event-template">Event 3</div>
-                                    </div>
-                                    <span className="k-event-actions"><a className="k-link k-event-delete"><Icon icon="x"></Icon></a></span>
-                                    <span className="k-resize-handle k-resize-n"></span>
-                                    <span className="k-resize-handle k-resize-s"></span>
-                                </div>
-                                <div style={{ backgroundColor: "rgb(17, 134, 64)", borderColor: "rgb(17, 134, 64)", width: "393px", right: "61px", top: "370px", height: "73px" }} className="k-event">
-                                    <span className="k-event-actions"></span>
-                                    <div>
-                                        <div className="k-event-template k-event-time">1:00 PM - 2:00 PM</div>
-                                        <div className="k-event-template">Replace the printer on the 1st floor</div>
-                                    </div>
-                                    <span className="k-event-actions"><a className="k-link k-event-delete"><Icon icon="x"></Icon></a></span>
-                                    <span className="k-resize-handle k-resize-n"></span>
-                                    <span className="k-resize-handle k-resize-s"></span>
-                                </div>
-                                <div style={{ backgroundColor: "rgb(17, 134, 64)", borderColor: "rgb(17, 134, 64)", width: "54px", right: "397px", top: "259px", height: "36px" }} className="k-event">
-                                    <span className="k-event-actions"></span>
-                                    <div>
-                                        <div className="k-event-template k-event-time">11:30 AM - 12:00 PM</div>
-                                        <div className="k-event-template">Breakfast with Tom</div>
-                                    </div>
-                                    <span className="k-event-actions"><a className="k-link k-event-delete"><Icon icon="x"></Icon></a></span>
-                                    <span className="k-resize-handle k-resize-n"></span>
-                                    <span className="k-resize-handle k-resize-s"></span>
-                                </div>
-                                <div style={{ width: "393px", right: "61px", top: "333px", height: "36px" }} className="k-event">
-                                    <span className="k-event-actions"></span>
-                                    <div>
-                                        <div className="k-event-template k-event-time">12:30 PM - 1:00 PM</div>
-                                        <div className="k-event-template">Team planning meeting</div>
-                                    </div>
-                                    <span className="k-event-actions"><a className="k-link k-event-delete"><Icon icon="x"></Icon></a></span>
-                                    <span className="k-resize-handle k-resize-n"></span>
-                                    <span className="k-resize-handle k-resize-s"></span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <Toolbar className="k-scheduler-footer">
-                    <Button icon="clock" className="k-scheduler-fullday">Show business hours</Button>
-                </Toolbar>
-            </div>
-        </div>
-    </>
-);