npm - @progress/kendo-themes-html - Versions diffs - 8.0.0-dev.3 → 8.0.0-dev.5 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (424) hide show

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

@@ -1,8 +1,7 @@
 import { Button } from '../../button';
 import { ButtonGroup } from '../../button-group';
-import { Icon } from '../../icon';
-import { Toolbar } from '../../toolbar';
+import { SchedulerBody, SchedulerCell, SchedulerEvent, SchedulerFlexTimeline, SchedulerGroup, SchedulerHead, SchedulerRow, SchedulerStickyCell, SchedulerToolbar } from '../';
 const style = `
@@ -15,669 +14,666 @@ export default () =>(
     <>
         <style>{style}</style>
         <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">
-                    <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" >
-                        Wednesday, June 24, 2020 - Thursday, June 25, 2020
-                    </Button>
-                    <span className="k-spacer"></span>
-                    <ButtonGroup className="k-scheduler-views">
-                        <Button className="k-group-start">Day</Button>
-                        <Button>Week</Button>
-                        <Button>Month</Button>
-                        <Button selected>Timeline</Button>
-                        <Button className="k-group-end">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" }} >
-                        <div className="k-scheduler-group k-group-horizontal">
-                            <div className="k-scheduler-row">
-                                <div className="k-sticky-cell">
-                                    <div className="k-scheduler-cell k-side-cell" style={{ minWidth: "62px" }} ></div>
-                                </div>
-                                <div className="k-scheduler-cell k-heading-cell">Meeting Room 101</div>
-                                <div className="k-scheduler-cell k-heading-cell">Meeting Room 201</div>
-                            </div>
-                            <div className="k-scheduler-row">
-                                <div className="k-sticky-cell">
-                                    <div className="k-scheduler-cell k-side-cell" style={{ minWidth: "62px" }} ></div>
-                                </div>
-                                <div className="k-scheduler-cell k-heading-cell">Peter</div>
-                                <div className="k-scheduler-cell k-heading-cell">Alex</div>
-                                <div className="k-scheduler-cell k-heading-cell">Peter</div>
-                                <div className="k-scheduler-cell k-heading-cell">Alex</div>
-                            </div>
-                            <div className="k-scheduler-row">
-                                <div className="k-sticky-cell">
-                                    <div className="k-scheduler-cell k-side-cell" style={{ minWidth: "62px" }} ></div>
-                                </div>
-                                <div className="k-scheduler-cell k-group-cell">
-                                    <div className="k-scheduler-row">
-                                        <div className="k-scheduler-cell k-heading-cell">Jun 24</div>
-                                        <div className="k-scheduler-cell k-heading-cell">Jun 25</div>
-                                    </div>
-                                    <div className="k-scheduler-row">
-                                        <div className="k-scheduler-cell k-heading-cell">8:00 AM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">9:00 AM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">10:00 AM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">11:00 AM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">12:00 PM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">1:00 PM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">2:00 PM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">3:00 PM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">4:00 PM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">8:00 AM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">9:00 AM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">10:00 AM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">11:00 AM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">12:00 PM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">1:00 PM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">2:00 PM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">3:00 PM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">4:00 PM</div>
-                                    </div>
-                                </div>
-                                <div className="k-scheduler-cell k-group-cell">
-                                    <div className="k-scheduler-row">
-                                        <div className="k-scheduler-cell k-heading-cell">Jun 24</div>
-                                        <div className="k-scheduler-cell k-heading-cell">Jun 25</div>
-                                    </div>
-                                    <div className="k-scheduler-row">
-                                        <div className="k-scheduler-cell k-heading-cell">8:00 AM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">9:00 AM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">10:00 AM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">11:00 AM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">12:00 PM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">1:00 PM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">2:00 PM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">3:00 PM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">4:00 PM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">8:00 AM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">9:00 AM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">10:00 AM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">11:00 AM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">12:00 PM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">1:00 PM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">2:00 PM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">3:00 PM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">4:00 PM</div>
-                                    </div>
-                                </div>
-                                <div className="k-scheduler-cell k-group-cell">
-                                    <div className="k-scheduler-row">
-                                        <div className="k-scheduler-cell k-heading-cell">Jun 24</div>
-                                        <div className="k-scheduler-cell k-heading-cell">Jun 25</div>
-                                    </div>
-                                    <div className="k-scheduler-row">
-                                        <div className="k-scheduler-cell k-heading-cell">8:00 AM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">9:00 AM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">10:00 AM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">11:00 AM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">12:00 PM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">1:00 PM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">2:00 PM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">3:00 PM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">4:00 PM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">8:00 AM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">9:00 AM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">10:00 AM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">11:00 AM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">12:00 PM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">1:00 PM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">2:00 PM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">3:00 PM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">4:00 PM</div>
-                                    </div>
-                                </div>
-                                <div className="k-scheduler-cell k-group-cell">
-                                    <div className="k-scheduler-row">
-                                        <div className="k-scheduler-cell k-heading-cell">Jun 24</div>
-                                        <div className="k-scheduler-cell k-heading-cell">Jun 25</div>
-                                    </div>
-                                    <div className="k-scheduler-row">
-                                        <div className="k-scheduler-cell k-heading-cell">8:00 AM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">9:00 AM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">10:00 AM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">11:00 AM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">12:00 PM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">1:00 PM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">2:00 PM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">3:00 PM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">4:00 PM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">8:00 AM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">9:00 AM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">10:00 AM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">11:00 AM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">12:00 PM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">1:00 PM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">2:00 PM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">3:00 PM</div>
-                                        <div className="k-scheduler-cell k-heading-cell">4:00 PM</div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="k-scheduler-body" style={{ width: "14401px" }} >
-                        <div className="k-scheduler-group k-group-horizontal">
-                            <div className="k-scheduler-row">
-                                <div className="k-sticky-cell">
-                                    <div className="k-scheduler-cell k-heading-cell k-side-cell k-scheduler-times-all-day" style={{ minWidth: "62px" }} >All events</div>
-                                </div>
-                                <div className="k-scheduler-cell k-group-cell">
-                                    <div className="k-scheduler-row">
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "36px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "62px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "62px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "36px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "36px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "36px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                    </div>
-                                </div>
-                                <div className="k-scheduler-cell k-group-cell">
-                                    <div className="k-scheduler-row">
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "36px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "62px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "62px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "36px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "36px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "36px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                    </div>
-                                </div>
-                                <div className="k-scheduler-cell k-group-cell">
-                                    <div className="k-scheduler-row">
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "36px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "62px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "62px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "36px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "36px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "36px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                    </div>
-                                </div>
-                                <div className="k-scheduler-cell k-group-cell">
-                                    <div className="k-scheduler-row">
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "36px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "62px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "62px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "36px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "36px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "36px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell" style={{ userSelect: 'none', minHeight: "10px" }} ></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                        <div className="k-scheduler-cell k-slot-cell"></div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: '0px', left: "775px", width: "299px", height: "25px" }} >
-                            <span className="k-event-actions"></span>
-                            <div>
-                                <div className="k-event-template k-event-time">(11:30 AM - 1:00 PM): Car Service</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-w"></span><span className="k-resize-handle k-resize-e"></span>
-                        </div>
-                        <div className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: '0px', left: "4356px", width: "299px", height: "25px" }} >
-                            <span className="k-event-actions"></span>
-                            <div>
-                                <div className="k-event-template k-event-time">(11:30 AM - 1:00 PM): Car Service</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-w"></span><span className="k-resize-handle k-resize-e"></span>
-                        </div>
-                        <div className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: '0px', left: "7936px", width: "299px", height: "25px" }} >
-                            <span className="k-event-actions"></span>
-                            <div>
-                                <div className="k-event-template k-event-time">(11:30 AM - 1:00 PM): Car Service</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-w"></span><span className="k-resize-handle k-resize-e"></span>
-                        </div>
-                        <div className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: '0px', left: "11517px", width: "299px", height: "25px" }} >
-                            <span className="k-event-actions"></span>
-                            <div>
-                                <div className="k-event-template k-event-time">(11:30 AM - 1:00 PM): Car Service</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-w"></span><span className="k-resize-handle k-resize-e"></span>
-                        </div>
-                        <div className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: "26px", left: "974px", width: "399px", height: "25px" }} >
-                            <span className="k-event-actions"></span>
-                            <div>
-                                <div className="k-event-template k-event-time">(12:45 PM - 2:30 PM): Breakfast with Tom</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-w"></span><span className="k-resize-handle k-resize-e"></span>
-                        </div>
-                        <div className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: "26px", left: "4555px", width: "399px", height: "25px" }} >
-                            <span className="k-event-actions"></span>
-                            <div>
-                                <div className="k-event-template k-event-time">(12:45 PM - 2:30 PM): Breakfast with Tom</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-w"></span><span className="k-resize-handle k-resize-e"></span>
-                        </div>
-                        <div className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: "26px", left: "8135px", width: "399px", height: "25px" }} >
-                            <span className="k-event-actions"></span>
-                            <div>
-                                <div className="k-event-template k-event-time">(12:45 PM - 2:30 PM): Breakfast with Tom</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-w"></span><span className="k-resize-handle k-resize-e"></span>
-                        </div>
-                        <div className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: "26px", left: "11716px", width: "399px", height: "25px" }} >
-                            <span className="k-event-actions"></span>
-                            <div>
-                                <div className="k-event-template k-event-time">(12:45 PM - 2:30 PM): Breakfast with Tom</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-w"></span><span className="k-resize-handle k-resize-e"></span>
-                        </div>
-                        <div className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: '0px', left: "1074px", width: "395px", height: "25px" }} >
-                            <span className="k-event-actions"></span>
-                            <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-w"></span><span className="k-resize-handle k-resize-e"></span>
-                        </div>
-                        <div className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: '0px', left: "4654px", width: "395px", height: "25px" }} >
-                            <span className="k-event-actions"></span>
-                            <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-w"></span><span className="k-resize-handle k-resize-e"></span>
-                        </div>
-                        <div className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: '0px', left: "8235px", width: "395px", height: "25px" }} >
-                            <span className="k-event-actions"></span>
-                            <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-w"></span><span className="k-resize-handle k-resize-e"></span>
-                        </div>
-                        <div className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: '0px', left: "11815px", width: "395px", height: "25px" }} >
-                            <span className="k-event-actions"></span>
-                            <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-w"></span><span className="k-resize-handle k-resize-e"></span>
-                        </div>
-                        <div className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: "52px", left: "1074px", width: "197px", height: "25px" }} >
-                            <span className="k-event-actions"></span>
-                            <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-w"></span><span className="k-resize-handle k-resize-e"></span>
-                        </div>
-                        <div className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: "52px", left: "4654px", width: "197px", height: "25px" }} >
-                            <span className="k-event-actions"></span>
-                            <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-w"></span><span className="k-resize-handle k-resize-e"></span>
-                        </div>
-                        <div className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: "52px", left: "8235px", width: "197px", height: "25px" }} >
-                            <span className="k-event-actions"></span>
-                            <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-w"></span><span className="k-resize-handle k-resize-e"></span>
-                        </div>
-                        <div className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: "52px", left: "11815px", width: "197px", height: "25px" }} >
-                            <span className="k-event-actions"></span>
-                            <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-w"></span><span className="k-resize-handle k-resize-e"></span>
-                        </div>
-                        <div className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: '0px', left: "1472px", width: "99px", height: "25px" }} >
-                            <span className="k-event-actions"></span>
-                            <div>
-                                <div className="k-event-template">Register new Access Cards</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 className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: '0px', left: "5052px", width: "99px", height: "25px" }} >
-                            <span className="k-event-actions"></span>
-                            <div>
-                                <div className="k-event-template">Register new Access Cards</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 className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: '0px', left: "8632px", width: "99px", height: "25px" }} >
-                            <span className="k-event-actions"></span>
-                            <div>
-                                <div className="k-event-template">Register new Access Cards</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 className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: '0px', left: "12213px", width: "99px", height: "25px" }} >
-                            <span className="k-event-actions"></span>
-                            <div>
-                                <div className="k-event-template">Register new Access Cards</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 className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: '0px', left: "1770px", width: "98px", height: "25px" }} >
-                            <span className="k-event-actions"></span>
-                            <div>
-                                <div className="k-event-template k-event-time">(4:30 PM - 6:00 PM): Install new laptops in conference rooms</div>
-                                <div className="k-event-template">Install new laptops in conference rooms</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 className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: '0px', left: "5350px", width: "98px", height: "25px" }} >
-                            <span className="k-event-actions"></span>
-                            <div>
-                                <div className="k-event-template k-event-time">(4:30 PM - 6:00 PM): Install new laptops in conference rooms</div>
-                                <div className="k-event-template">Install new laptops in conference rooms</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 className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: '0px', left: "8931px", width: "98px", height: "25px" }} >
-                            <span className="k-event-actions"></span>
-                            <div>
-                                <div className="k-event-template k-event-time">(4:30 PM - 6:00 PM): Install new laptops in conference rooms</div>
-                                <div className="k-event-template">Install new laptops in conference rooms</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 className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: '0px', left: "12511px", width: "98px", height: "25px" }} >
-                            <span className="k-event-actions"></span>
-                            <div>
-                                <div className="k-event-template k-event-time">(4:30 PM - 6:00 PM): Install new laptops in conference rooms</div>
-                                <div className="k-event-template">Install new laptops in conference rooms</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 className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: "26px", left: "1770px", width: "98px", height: "25px" }} >
-                            <span className="k-event-actions"></span>
-                            <div title="Job Interview - Bernard Atkins">
-                                <div className="k-event-template k-event-time">(4:30 PM - 5:30 PM): Job Interview - Bernard Atkins</div>
-                                <div className="k-event-template">Job Interview - Bernard Atkins</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 className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: "26px", left: "5350px", width: "98px", height: "25px" }} >
-                            <span className="k-event-actions"></span>
-                            <div title="Job Interview - Bernard Atkins">
-                                <div className="k-event-template k-event-time">(4:30 PM - 5:30 PM): Job Interview - Bernard Atkins</div>
-                                <div className="k-event-template">Job Interview - Bernard Atkins</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 className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: "26px", left: "8931px", width: "98px", height: "25px" }} >
-                            <span className="k-event-actions"></span>
-                            <div title="Job Interview - Bernard Atkins">
-                                <div className="k-event-template k-event-time">(4:30 PM - 5:30 PM): Job Interview - Bernard Atkins</div>
-                                <div className="k-event-template">Job Interview - Bernard Atkins</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 className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: "26px", left: "12511px", width: "98px", height: "25px" }} >
-                            <span className="k-event-actions"></span>
-                            <div title="Job Interview - Bernard Atkins">
-                                <div className="k-event-template k-event-time">(4:30 PM - 5:30 PM): Job Interview - Bernard Atkins</div>
-                                <div className="k-event-template">Job Interview - Bernard Atkins</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 className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: '0px', left: "2665px", width: "197px", height: "25px" }} >
-                            <span className="k-event-actions"></span>
-                            <div>
-                                <div className="k-event-template k-event-time">(12:00 PM - 1:00 PM): Business breakfast with Caroline</div>
-                                <div className="k-event-template">Business breakfast with Caroline</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 className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: '0px', left: "6245px", width: "197px", height: "25px" }} >
-                            <span className="k-event-actions"></span>
-                            <div>
-                                <div className="k-event-template k-event-time">(12:00 PM - 1:00 PM): Business breakfast with Caroline</div>
-                                <div className="k-event-template">Business breakfast with Caroline</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 className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: '0px', left: "9826px", width: "197px", height: "25px" }} >
-                            <span className="k-event-actions"></span>
-                            <div>
-                                <div className="k-event-template k-event-time">(12:00 PM - 1:00 PM): Business breakfast with Caroline</div>
-                                <div className="k-event-template">Business breakfast with Caroline</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 className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: '0px', left: "13406px", width: "197px", height: "25px" }} >
-                            <span className="k-event-actions"></span>
-                            <div>
-                                <div className="k-event-template k-event-time">(12:00 PM - 1:00 PM): Business breakfast with Caroline</div>
-                                <div className="k-event-template">Business breakfast with Caroline</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 className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: '0px', left: "2864px", width: "395px", height: "25px" }} >
-                            <span className="k-event-actions"></span>
-                            <div>
-                                <div className="k-event-template k-event-time">(1:00 PM - 3:00 PM): Software updates</div>
-                                <div className="k-event-template">Software updates</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 className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: '0px', left: "6444px", width: "395px", height: "25px" }} >
-                            <span className="k-event-actions"></span>
-                            <div>
-                                <div className="k-event-template k-event-time">(1:00 PM - 3:00 PM): Software updates</div>
-                                <div className="k-event-template">Software updates</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 className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: '0px', left: "10025px", width: "395px", height: "25px" }} >
-                            <span className="k-event-actions"></span>
-                            <div>
-                                <div className="k-event-template k-event-time">(1:00 PM - 3:00 PM): Software updates</div>
-                                <div className="k-event-template">Software updates</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 className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: '0px', left: "13605px", width: "395px", height: "25px" }} >
-                            <span className="k-event-actions"></span>
-                            <div>
-                                <div className="k-event-template k-event-time">(1:00 PM - 3:00 PM): Software updates</div>
-                                <div className="k-event-template">Software updates</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 className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: "26px", left: "3063px", width: "98px", height: "25px" }} >
-                            <span className="k-event-actions"></span>
-                            <div title="Discuss projects&apos; deadlines">
-                                <div className="k-event-template k-event-time">(2:00 PM - 2:30 PM): Discuss projects&apos; deadlines</div>
-                                <div className="k-event-template">Discuss projects&apos; deadlines</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 className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: "26px", left: "6643px", width: "98px", height: "25px" }} >
-                            <span className="k-event-actions"></span>
-                            <div title="Discuss projects&apos; deadlines">
-                                <div className="k-event-template k-event-time">(2:00 PM - 2:30 PM): Discuss projects&apos; deadlines</div>
-                                <div className="k-event-template">Discuss projects&apos; deadlines</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 className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: "26px", left: "10224px", width: "98px", height: "25px" }} >
-                            <span className="k-event-actions"></span>
-                            <div title="Discuss projects&apos; deadlines">
-                                <div className="k-event-template k-event-time">(2:00 PM - 2:30 PM): Discuss projects&apos; deadlines</div>
-                                <div className="k-event-template">Discuss projects&apos; deadlines</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 className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: "26px", left: "13804px", width: "98px", height: "25px" }} >
-                            <span className="k-event-actions"></span>
-                            <div title="Discuss projects&apos; deadlines">
-                                <div className="k-event-template k-event-time">(2:00 PM - 2:30 PM): Discuss projects&apos; deadlines</div>
-                                <div className="k-event-template">Discuss projects&apos; deadlines</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 className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: '0px', left: "3262px", width: "197px", height: "25px" }} >
-                            <span className="k-event-actions"></span>
-                            <div>
-                                <div className="k-event-template k-event-time">(3:00 PM - 4:00 PM): Business Lunch with Gregory Watkins</div>
-                                <div className="k-event-template">Business Lunch with Gregory Watkins</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 className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: '0px', left: "6842px", width: "197px", height: "25px" }} >
-                            <span className="k-event-actions"></span>
-                            <div>
-                                <div className="k-event-template k-event-time">(3:00 PM - 4:00 PM): Business Lunch with Gregory Watkins</div>
-                                <div className="k-event-template">Business Lunch with Gregory Watkins</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 className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: '0px', left: "10423px", width: "197px", height: "25px" }} >
-                            <span className="k-event-actions"></span>
-                            <div>
-                                <div className="k-event-template k-event-time">(3:00 PM - 4:00 PM): Business Lunch with Gregory Watkins</div>
-                                <div className="k-event-template">Business Lunch with Gregory Watkins</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 className="k-event" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: '0px', left: "14003px", width: "197px", height: "25px" }} >
-                            <span className="k-event-actions"></span>
-                            <div>
-                                <div className="k-event-template k-event-time">(3:00 PM - 4:00 PM): Business Lunch with Gregory Watkins</div>
-                                <div className="k-event-template">Business Lunch with Gregory Watkins</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>
-                <Toolbar className="k-scheduler-footer">
-                    <Button icon="clock" className="k-scheduler-fullday">Show full day</Button>
-                </Toolbar>
-            </div>
+            <SchedulerFlexTimeline style={{ height: "900px" }}
+                toolbar={
+                    <>
+                        <SchedulerToolbar>
+                            <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" >
+                                Wednesday, June 24, 2020 - Thursday, June 25, 2020
+                            </Button>
+                            <span className="k-spacer"></span>
+                            <ButtonGroup className="k-scheduler-views">
+                                <Button className="k-group-start">Day</Button>
+                                <Button>Week</Button>
+                                <Button>Month</Button>
+                                <Button selected>Timeline</Button>
+                                <Button className="k-group-end">Agenda</Button>
+                            </ButtonGroup>
+                        </SchedulerToolbar>
+                    </>
+                }
+                children={
+                    <>
+                        <SchedulerHead as="div" style={{ width: "14401px" }}>
+                            <SchedulerGroup>
+                                <SchedulerRow>
+                                    <SchedulerStickyCell>
+                                        <SchedulerCell as="div" cellType={[ "side" ]} style={{ minWidth: "62px" }}/>
+                                    </SchedulerStickyCell>
+                                    <SchedulerCell as="div" cellType={[ "heading" ]}>Meeting Room 101</SchedulerCell>
+                                    <SchedulerCell as="div" cellType={[ "heading" ]}>Meeting Room 201</SchedulerCell>
+                                </SchedulerRow>
+                                <SchedulerRow>
+                                    <SchedulerStickyCell>
+                                        <SchedulerCell as="div" cellType={[ "side" ]} style={{ minWidth: "62px" }}/>
+                                    </SchedulerStickyCell>
+                                    <SchedulerCell as="div" cellType={[ "heading" ]}>Peter</SchedulerCell>
+                                    <SchedulerCell as="div" cellType={[ "heading" ]}>Alex</SchedulerCell>
+                                    <SchedulerCell as="div" cellType={[ "heading" ]}>Peter</SchedulerCell>
+                                    <SchedulerCell as="div" cellType={[ "heading" ]}>Alex</SchedulerCell>
+                                </SchedulerRow>
+                                <SchedulerRow>
+                                    <SchedulerStickyCell>
+                                        <SchedulerCell as="div" cellType={[ "side" ]} style={{ minWidth: "62px" }}/>
+                                    </SchedulerStickyCell>
+                                    <SchedulerCell as="div" cellType={[ "group" ]}>
+                                        <SchedulerRow>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>Jun 24</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>Jun 25</SchedulerCell>
+                                        </SchedulerRow>
+                                        <SchedulerRow>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>8:00 AM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>9:00 AM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>10:00 AM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>11:00 AM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>12:00 PM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>1:00 PM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>2:00 PM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>3:00 PM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>4:00 PM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>8:00 AM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>9:00 AM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>10:00 AM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>11:00 AM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>12:00 PM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>1:00 PM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>2:00 PM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>3:00 PM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>4:00 PM</SchedulerCell>
+                                        </SchedulerRow>
+                                    </SchedulerCell>
+                                    <SchedulerCell as="div" cellType={[ "group" ]}>
+                                        <SchedulerRow>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>Jun 24</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>Jun 25</SchedulerCell>
+                                        </SchedulerRow>
+                                        <SchedulerRow>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>8:00 AM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>9:00 AM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>10:00 AM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>11:00 AM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>12:00 PM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>1:00 PM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>2:00 PM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>3:00 PM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>4:00 PM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>8:00 AM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>9:00 AM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>10:00 AM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>11:00 AM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>12:00 PM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>1:00 PM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>2:00 PM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>3:00 PM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>4:00 PM</SchedulerCell>
+                                        </SchedulerRow>
+                                    </SchedulerCell>
+                                    <SchedulerCell as="div" cellType={[ "group" ]}>
+                                        <SchedulerRow>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>Jun 24</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>Jun 25</SchedulerCell>
+                                        </SchedulerRow>
+                                        <SchedulerRow>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>8:00 AM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>9:00 AM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>10:00 AM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>11:00 AM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>12:00 PM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>1:00 PM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>2:00 PM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>3:00 PM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>4:00 PM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>8:00 AM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>9:00 AM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>10:00 AM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>11:00 AM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>12:00 PM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>1:00 PM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>2:00 PM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>3:00 PM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>4:00 PM</SchedulerCell>
+                                        </SchedulerRow>
+                                    </SchedulerCell>
+                                    <SchedulerCell as="div" cellType={[ "group" ]}>
+                                        <SchedulerRow>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>Jun 24</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>Jun 25</SchedulerCell>
+                                        </SchedulerRow>
+                                        <SchedulerRow>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>8:00 AM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>9:00 AM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>10:00 AM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>11:00 AM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>12:00 PM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>1:00 PM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>2:00 PM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>3:00 PM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>4:00 PM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>8:00 AM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>9:00 AM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>10:00 AM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>11:00 AM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>12:00 PM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>1:00 PM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>2:00 PM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>3:00 PM</SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "heading" ]}>4:00 PM</SchedulerCell>
+                                        </SchedulerRow>
+                                    </SchedulerCell>
+                                </SchedulerRow>
+                            </SchedulerGroup>
+                        </SchedulerHead>
+                        <SchedulerBody as="div" style={{ width: "14401px" }}>
+                            <SchedulerGroup>
+                                <SchedulerRow>
+                                    <SchedulerStickyCell>
+                                        <SchedulerCell as="div" cellType={[ "heading", "side" ]} allDay style={{ minWidth: "62px" }}>
+                                            All events
+                                        </SchedulerCell>
+                                    </SchedulerStickyCell>
+                                    <SchedulerCell as="div" cellType={[ "group" ]}>
+                                        <SchedulerRow>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "10px" }} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "10px" }} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "36px" }} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "62px" }} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "62px" }} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "36px" }} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "10px" }} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "10px" }} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "36px" }} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]}></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]}></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]}></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]}></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]}></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]}></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]}></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]}></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "10px" }} ></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "10px" }} ></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "10px" }} ></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "10px" }} ></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "36px" }}></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "10px" }} ></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "10px" }} ></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "10px" }} ></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]}></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]}></SchedulerCell>
+                                        </SchedulerRow>
+                                    </SchedulerCell>
+                                    <SchedulerCell as="div" cellType={[ "group" ]}>
+                                        <SchedulerRow>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "10px" }} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "10px" }} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "36px" }} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "62px" }} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "62px" }} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "36px" }} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "10px" }} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "10px" }} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "36px" }} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]}></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]}></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]}></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]}></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]}></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]}></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]}></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]}></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "10px" }} ></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "10px" }} ></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "10px" }} ></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "10px" }} ></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "36px" }}></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "10px" }} ></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "10px" }} ></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "10px" }} ></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]}></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]}></SchedulerCell>
+                                        </SchedulerRow>
+                                    </SchedulerCell>
+                                    <SchedulerCell as="div" cellType={[ "group" ]}>
+                                        <SchedulerRow>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "10px" }} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "10px" }} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "36px" }} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "62px" }} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "62px" }} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "36px" }} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "10px" }} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "10px" }} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "36px" }} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]}></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]}></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]}></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]}></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]}></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]}></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]}></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]}></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "10px" }} ></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "10px" }} ></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "10px" }} ></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "10px" }} ></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "36px" }}></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "10px" }} ></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "10px" }} ></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "10px" }} ></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]}></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]}></SchedulerCell>
+                                        </SchedulerRow>
+                                    </SchedulerCell>
+                                    <SchedulerCell as="div" cellType={[ "group" ]}>
+                                        <SchedulerRow>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "10px" }} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "10px" }} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "36px" }} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "62px" }} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "62px" }} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "36px" }} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "10px" }} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "10px" }} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "36px" }} />
+                                            <SchedulerCell as="div" cellType={[ "slot" ]}></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]}></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]}></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]}></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]}></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]}></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]}></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]}></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "10px" }} ></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "10px" }} ></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "10px" }} ></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "10px" }} ></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "36px" }}></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "10px" }} ></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "10px" }} ></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]} style={{ userSelect: 'none', minHeight: "10px" }} ></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]}></SchedulerCell>
+                                            <SchedulerCell as="div" cellType={[ "slot" ]}></SchedulerCell>
+                                        </SchedulerRow>
+                                    </SchedulerCell>
+                                </SchedulerRow>
+                            </SchedulerGroup>
+                            <SchedulerEvent eventPrefix={null} resizable="horizontal" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: '0px', left: "775px", width: "299px", height: "25px" }} >
+                                <div>
+                                    <div className="k-event-template k-event-time">(11:30 AM - 1:00 PM): Car Service</div>
+                                    <div className="k-event-template">Car Service</div>
+                                </div>
+                            </SchedulerEvent>
+                            <SchedulerEvent eventPrefix={null} resizable="horizontal" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: '0px', left: "4356px", width: "299px", height: "25px" }} >
+                                <div>
+                                    <div className="k-event-template k-event-time">(11:30 AM - 1:00 PM): Car Service</div>
+                                    <div className="k-event-template">Car Service</div>
+                                </div>
+                            </SchedulerEvent>
+                            <SchedulerEvent eventPrefix={null} resizable="horizontal" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: '0px', left: "7936px", width: "299px", height: "25px" }} >
+                                <div>
+                                    <div className="k-event-template k-event-time">(11:30 AM - 1:00 PM): Car Service</div>
+                                    <div className="k-event-template">Car Service</div>
+                                </div>
+                            </SchedulerEvent>
+                            <SchedulerEvent eventPrefix={null} resizable="horizontal" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: '0px', left: "11517px", width: "299px", height: "25px" }} >
+                                <div>
+                                    <div className="k-event-template k-event-time">(11:30 AM - 1:00 PM): Car Service</div>
+                                    <div className="k-event-template">Car Service</div>
+                                </div>
+                            </SchedulerEvent>
+                            <SchedulerEvent eventPrefix={null} resizable="horizontal" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: "26px", left: "974px", width: "399px", height: "25px" }} >
+                                <div>
+                                    <div className="k-event-template k-event-time">(12:45 PM - 2:30 PM): Breakfast with Tom</div>
+                                    <div className="k-event-template">Breakfast with Tom</div>
+                                </div>
+                            </SchedulerEvent>
+                            <SchedulerEvent eventPrefix={null} resizable="horizontal" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: "26px", left: "4555px", width: "399px", height: "25px" }} >
+                                <div>
+                                    <div className="k-event-template k-event-time">(12:45 PM - 2:30 PM): Breakfast with Tom</div>
+                                    <div className="k-event-template">Breakfast with Tom</div>
+                                </div>
+                            </SchedulerEvent>
+                            <SchedulerEvent eventPrefix={null} resizable="horizontal" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: "26px", left: "8135px", width: "399px", height: "25px" }} >
+                                <div>
+                                    <div className="k-event-template k-event-time">(12:45 PM - 2:30 PM): Breakfast with Tom</div>
+                                    <div className="k-event-template">Breakfast with Tom</div>
+                                </div>
+                            </SchedulerEvent>
+                            <SchedulerEvent eventPrefix={null} resizable="horizontal" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: "26px", left: "11716px", width: "399px", height: "25px" }} >
+                                <div>
+                                    <div className="k-event-template k-event-time">(12:45 PM - 2:30 PM): Breakfast with Tom</div>
+                                    <div className="k-event-template">Breakfast with Tom</div>
+                                </div>
+                            </SchedulerEvent>
+                            <SchedulerEvent eventPrefix={null} resizable="horizontal" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: '0px', left: "1074px", width: "395px", height: "25px" }} >
+                                <div>
+                                    <div className="k-event-template">Team planning meeting</div>
+                                </div>
+                            </SchedulerEvent>
+                            <SchedulerEvent eventPrefix={null} resizable="horizontal" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: '0px', left: "4654px", width: "395px", height: "25px" }} >
+                                <div>
+                                    <div className="k-event-template">Team planning meeting</div>
+                                </div>
+                            </SchedulerEvent>
+                            <SchedulerEvent eventPrefix={null} resizable="horizontal" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: '0px', left: "8235px", width: "395px", height: "25px" }} >
+                                <div>
+                                    <div className="k-event-template">Team planning meeting</div>
+                                </div>
+                            </SchedulerEvent>
+                            <SchedulerEvent eventPrefix={null} resizable="horizontal" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: '0px', left: "11815px", width: "395px", height: "25px" }} >
+                                <div>
+                                    <div className="k-event-template">Team planning meeting</div>
+                                </div>
+                            </SchedulerEvent>
+                            <SchedulerEvent eventPrefix={null} resizable="horizontal" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: "52px", left: "1074px", width: "197px", height: "25px" }} >
+                                <div>
+                                    <div className="k-event-template">Replace the printer on the 1st floor</div>
+                                </div>
+                            </SchedulerEvent>
+                            <SchedulerEvent eventPrefix={null} resizable="horizontal" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: "52px", left: "4654px", width: "197px", height: "25px" }} >
+                                <div>
+                                    <div className="k-event-template">Replace the printer on the 1st floor</div>
+                                </div>
+                            </SchedulerEvent>
+                            <SchedulerEvent eventPrefix={null} resizable="horizontal" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: "52px", left: "8235px", width: "197px", height: "25px" }} >
+                                <div>
+                                    <div className="k-event-template">Replace the printer on the 1st floor</div>
+                                </div>
+                            </SchedulerEvent>
+                            <SchedulerEvent eventPrefix={null} resizable="horizontal" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: "52px", left: "11815px", width: "197px", height: "25px" }} >
+                                <div>
+                                    <div className="k-event-template">Replace the printer on the 1st floor</div>
+                                </div>
+                            </SchedulerEvent>
+                            <SchedulerEvent eventPrefix={null} resizable="horizontal" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: '0px', left: "1472px", width: "99px", height: "25px" }} >
+                                <div>
+                                    <div className="k-event-template">Register new Access Cards</div>
+                                </div>
+                            </SchedulerEvent>
+                            <SchedulerEvent eventPrefix={null} resizable="horizontal" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: '0px', left: "5052px", width: "99px", height: "25px" }} >
+                                <div>
+                                    <div className="k-event-template">Register new Access Cards</div>
+                                </div>
+                            </SchedulerEvent>
+                            <SchedulerEvent eventPrefix={null} resizable="horizontal" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: '0px', left: "8632px", width: "99px", height: "25px" }} >
+                                <div>
+                                    <div className="k-event-template">Register new Access Cards</div>
+                                </div>
+                            </SchedulerEvent>
+                            <SchedulerEvent eventPrefix={null} resizable="horizontal" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: '0px', left: "12213px", width: "99px", height: "25px" }} >
+                                <div>
+                                    <div className="k-event-template">Register new Access Cards</div>
+                                </div>
+                            </SchedulerEvent>
+                            <SchedulerEvent eventPrefix={null} resizable="horizontal" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: '0px', left: "1770px", width: "98px", height: "25px" }} >
+                                <div>
+                                    <div className="k-event-template k-event-time">(4:30 PM - 6:00 PM): Install new laptops in conference rooms</div>
+                                    <div className="k-event-template">Install new laptops in conference rooms</div>
+                                </div>
+                            </SchedulerEvent>
+                            <SchedulerEvent eventPrefix={null} resizable="horizontal" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: '0px', left: "5350px", width: "98px", height: "25px" }} >
+                                <div>
+                                    <div className="k-event-template k-event-time">(4:30 PM - 6:00 PM): Install new laptops in conference rooms</div>
+                                    <div className="k-event-template">Install new laptops in conference rooms</div>
+                                </div>
+                            </SchedulerEvent>
+                            <SchedulerEvent eventPrefix={null} resizable="horizontal" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: '0px', left: "8931px", width: "98px", height: "25px" }} >
+                                <div>
+                                    <div className="k-event-template k-event-time">(4:30 PM - 6:00 PM): Install new laptops in conference rooms</div>
+                                    <div className="k-event-template">Install new laptops in conference rooms</div>
+                                </div>
+                            </SchedulerEvent>
+                            <SchedulerEvent eventPrefix={null} resizable="horizontal" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: '0px', left: "12511px", width: "98px", height: "25px" }} >
+                                <div>
+                                    <div className="k-event-template k-event-time">(4:30 PM - 6:00 PM): Install new laptops in conference rooms</div>
+                                    <div className="k-event-template">Install new laptops in conference rooms</div>
+                                </div>
+                            </SchedulerEvent>
+                            <SchedulerEvent eventPrefix={null} resizable="horizontal" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: "26px", left: "1770px", width: "98px", height: "25px" }} >
+                                <div title="Job Interview - Bernard Atkins">
+                                    <div className="k-event-template k-event-time">(4:30 PM - 5:30 PM): Job Interview - Bernard Atkins</div>
+                                    <div className="k-event-template">Job Interview - Bernard Atkins</div>
+                                </div>
+                            </SchedulerEvent>
+                            <SchedulerEvent eventPrefix={null} resizable="horizontal" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: "26px", left: "5350px", width: "98px", height: "25px" }} >
+                                <div title="Job Interview - Bernard Atkins">
+                                    <div className="k-event-template k-event-time">(4:30 PM - 5:30 PM): Job Interview - Bernard Atkins</div>
+                                    <div className="k-event-template">Job Interview - Bernard Atkins</div>
+                                </div>
+                            </SchedulerEvent>
+                            <SchedulerEvent eventPrefix={null} resizable="horizontal" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: "26px", left: "8931px", width: "98px", height: "25px" }} >
+                                <div title="Job Interview - Bernard Atkins">
+                                    <div className="k-event-template k-event-time">(4:30 PM - 5:30 PM): Job Interview - Bernard Atkins</div>
+                                    <div className="k-event-template">Job Interview - Bernard Atkins</div>
+                                </div>
+                            </SchedulerEvent>
+                            <SchedulerEvent eventPrefix={null} resizable="horizontal" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: "26px", left: "12511px", width: "98px", height: "25px" }} >
+                                <div title="Job Interview - Bernard Atkins">
+                                    <div className="k-event-template k-event-time">(4:30 PM - 5:30 PM): Job Interview - Bernard Atkins</div>
+                                    <div className="k-event-template">Job Interview - Bernard Atkins</div>
+                                </div>
+                            </SchedulerEvent>
+                            <SchedulerEvent eventPrefix={null} resizable="horizontal" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: '0px', left: "2665px", width: "197px", height: "25px" }} >
+                                <div>
+                                    <div className="k-event-template k-event-time">(12:00 PM - 1:00 PM): Business breakfast with Caroline</div>
+                                    <div className="k-event-template">Business breakfast with Caroline</div>
+                                </div>
+                            </SchedulerEvent>
+                            <SchedulerEvent eventPrefix={null} resizable="horizontal" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: '0px', left: "6245px", width: "197px", height: "25px" }} >
+                                <div>
+                                    <div className="k-event-template k-event-time">(12:00 PM - 1:00 PM): Business breakfast with Caroline</div>
+                                    <div className="k-event-template">Business breakfast with Caroline</div>
+                                </div>
+                            </SchedulerEvent>
+                            <SchedulerEvent eventPrefix={null} resizable="horizontal" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: '0px', left: "9826px", width: "197px", height: "25px" }} >
+                                <div>
+                                    <div className="k-event-template k-event-time">(12:00 PM - 1:00 PM): Business breakfast with Caroline</div>
+                                    <div className="k-event-template">Business breakfast with Caroline</div>
+                                </div>
+                            </SchedulerEvent>
+                            <SchedulerEvent eventPrefix={null} resizable="horizontal" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: '0px', left: "13406px", width: "197px", height: "25px" }} >
+                                <div>
+                                    <div className="k-event-template k-event-time">(12:00 PM - 1:00 PM): Business breakfast with Caroline</div>
+                                    <div className="k-event-template">Business breakfast with Caroline</div>
+                                </div>
+                            </SchedulerEvent>
+                            <SchedulerEvent eventPrefix={null} resizable="horizontal" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: '0px', left: "2864px", width: "395px", height: "25px" }} >
+                                <div>
+                                    <div className="k-event-template k-event-time">(1:00 PM - 3:00 PM): Software updates</div>
+                                    <div className="k-event-template">Software updates</div>
+                                </div>
+                            </SchedulerEvent>
+                            <SchedulerEvent eventPrefix={null} resizable="horizontal" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: '0px', left: "6444px", width: "395px", height: "25px" }} >
+                                <div>
+                                    <div className="k-event-template k-event-time">(1:00 PM - 3:00 PM): Software updates</div>
+                                    <div className="k-event-template">Software updates</div>
+                                </div>
+                            </SchedulerEvent>
+                            <SchedulerEvent eventPrefix={null} resizable="horizontal" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: '0px', left: "10025px", width: "395px", height: "25px" }} >
+                                <div>
+                                    <div className="k-event-template k-event-time">(1:00 PM - 3:00 PM): Software updates</div>
+                                    <div className="k-event-template">Software updates</div>
+                                </div>
+                            </SchedulerEvent>
+                            <SchedulerEvent eventPrefix={null} resizable="horizontal" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: '0px', left: "13605px", width: "395px", height: "25px" }} >
+                                <div>
+                                    <div className="k-event-template k-event-time">(1:00 PM - 3:00 PM): Software updates</div>
+                                    <div className="k-event-template">Software updates</div>
+                                </div>
+                            </SchedulerEvent>
+                            <SchedulerEvent eventPrefix={null} resizable="horizontal" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: "26px", left: "3063px", width: "98px", height: "25px" }} >
+                                <div title="Discuss projects&apos; deadlines">
+                                    <div className="k-event-template k-event-time">(2:00 PM - 2:30 PM): Discuss projects&apos; deadlines</div>
+                                    <div className="k-event-template">Discuss projects&apos; deadlines</div>
+                                </div>
+                            </SchedulerEvent>
+                            <SchedulerEvent eventPrefix={null} resizable="horizontal" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: "26px", left: "6643px", width: "98px", height: "25px" }} >
+                                <div title="Discuss projects&apos; deadlines">
+                                    <div className="k-event-template k-event-time">(2:00 PM - 2:30 PM): Discuss projects&apos; deadlines</div>
+                                    <div className="k-event-template">Discuss projects&apos; deadlines</div>
+                                </div>
+                            </SchedulerEvent>
+                            <SchedulerEvent eventPrefix={null} resizable="horizontal" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: "26px", left: "10224px", width: "98px", height: "25px" }} >
+                                <div title="Discuss projects&apos; deadlines">
+                                    <div className="k-event-template k-event-time">(2:00 PM - 2:30 PM): Discuss projects&apos; deadlines</div>
+                                    <div className="k-event-template">Discuss projects&apos; deadlines</div>
+                                </div>
+                            </SchedulerEvent>
+                            <SchedulerEvent eventPrefix={null} resizable="horizontal" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: "26px", left: "13804px", width: "98px", height: "25px" }} >
+                                <div title="Discuss projects&apos; deadlines">
+                                    <div className="k-event-template k-event-time">(2:00 PM - 2:30 PM): Discuss projects&apos; deadlines</div>
+                                    <div className="k-event-template">Discuss projects&apos; deadlines</div>
+                                </div>
+                            </SchedulerEvent>
+                            <SchedulerEvent eventPrefix={null} resizable="horizontal" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: '0px', left: "3262px", width: "197px", height: "25px" }} >
+                                <div>
+                                    <div className="k-event-template k-event-time">(3:00 PM - 4:00 PM): Business Lunch with Gregory Watkins</div>
+                                    <div className="k-event-template">Business Lunch with Gregory Watkins</div>
+                                </div>
+                            </SchedulerEvent>
+                            <SchedulerEvent eventPrefix={null} resizable="horizontal" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'darkred', backgroundColor: 'darkred', top: '0px', left: "6842px", width: "197px", height: "25px" }} >
+                                <div>
+                                    <div className="k-event-template k-event-time">(3:00 PM - 4:00 PM): Business Lunch with Gregory Watkins</div>
+                                    <div className="k-event-template">Business Lunch with Gregory Watkins</div>
+                                </div>
+                            </SchedulerEvent>
+                            <SchedulerEvent eventPrefix={null} resizable="horizontal" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: '0px', left: "10423px", width: "197px", height: "25px" }} >
+                                <div>
+                                    <div className="k-event-template k-event-time">(3:00 PM - 4:00 PM): Business Lunch with Gregory Watkins</div>
+                                    <div className="k-event-template">Business Lunch with Gregory Watkins</div>
+                                </div>
+                            </SchedulerEvent>
+                            <SchedulerEvent eventPrefix={null} resizable="horizontal" style={{ cursor: 'pointer', userSelect: 'none', borderColor: 'green', backgroundColor: 'green', top: '0px', left: "14003px", width: "197px", height: "25px" }} >
+                                <div>
+                                    <div className="k-event-template k-event-time">(3:00 PM - 4:00 PM): Business Lunch with Gregory Watkins</div>
+                                    <div className="k-event-template">Business Lunch with Gregory Watkins</div>
+                                </div>
+                            </SchedulerEvent>
+                        </SchedulerBody>
+                    </>
+                }
+                footer={
+                    <>
+                        <SchedulerToolbar footer>
+                            <Button icon="clock" className="k-scheduler-fullday">Show full day</Button>
+                        </SchedulerToolbar>
+                    </>
+                }
+            />
         </div>
     </>
 );