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

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

@@ -0,0 +1,228 @@
+import { Button } from '../../button';
+import { Scheduler, SchedulerBody, SchedulerCell, SchedulerContent, SchedulerHead, SchedulerHeader, SchedulerTable, SchedulerTimes, SchedulerToolbar, SchedulerEvent } from '../index';
+
+export const SchedulerDay = ({ style, ...props }: any) => (
+    <Scheduler
+        style={style}
+        layout="table"
+        view="day"
+        toolbar={
+            <SchedulerToolbar />
+        }
+        footer={
+            <>
+                <SchedulerToolbar footer>
+                    <Button icon="clock" className="k-scheduler-fullday">Show business hours</Button>
+                </SchedulerToolbar>
+            </>
+        }
+        children={
+            <>
+                <tbody>
+                    <SchedulerHead as="tr">
+                        <td>
+                            <SchedulerTimes>
+                                <SchedulerTable>
+                                    <tbody>
+                                        <tr style={{ height: "37px" }}>
+                                            <SchedulerCell as="th" />
+                                        </tr>
+                                        <tr style={{ height: "36px" }}>
+                                            <SchedulerCell as="th" allDay text="all day" />
+                                        </tr>
+                                    </tbody>
+                                </SchedulerTable>
+                            </SchedulerTimes>
+                        </td>
+                        <td>
+                            <SchedulerHeader>
+                                <SchedulerTable>
+                                    <tbody>
+                                        <tr className="k-scheduler-date-group">
+                                            <SchedulerCell as="th" text="Mon 6/13" />
+                                        </tr>
+                                    </tbody>
+                                </SchedulerTable>
+                                <div style={{ position: "relative" }}>
+                                    <SchedulerTable className="k-scheduler-header-all-day">
+                                        <tbody>
+                                            <tr style={{ height: "36px" }}>
+                                                <SchedulerCell as="td"/>
+                                            </tr>
+                                        </tbody>
+                                    </SchedulerTable>
+                                </div>
+                            </SchedulerHeader>
+                        </td>
+                    </SchedulerHead>
+                    <SchedulerBody as="tr">
+                        <td>
+                            <SchedulerTimes style={{ height: "195px" }}>
+                                <SchedulerTable style={{ height: "400px" }}>
+                                    <tbody>
+                                        <tr>
+                                            <SchedulerCell as="th">
+                                                <span>7:00 AM</span>
+                                            </SchedulerCell>
+                                        </tr>
+                                        <tr>
+                                            <SchedulerCell as="th" cellType={[ "slot" ]}></SchedulerCell>
+                                        </tr>
+                                        <tr>
+                                            <SchedulerCell as="th">
+                                                <span>8:00 AM</span>
+                                            </SchedulerCell>
+                                        </tr>
+                                        <tr>
+                                            <SchedulerCell as="th" cellType={[ "slot" ]}></SchedulerCell>
+                                        </tr>
+                                        <tr>
+                                            <SchedulerCell as="th">
+                                                <span>9:00 AM</span>
+                                            </SchedulerCell>
+                                        </tr>
+                                        <tr>
+                                            <SchedulerCell as="th" cellType={[ "slot" ]}></SchedulerCell>
+                                        </tr>
+                                        <tr>
+                                            <SchedulerCell as="th">
+                                                <span>10:00 AM</span>
+                                            </SchedulerCell>
+                                        </tr>
+                                        <tr>
+                                            <SchedulerCell as="th" cellType={[ "slot" ]}></SchedulerCell>
+                                        </tr>
+                                        <tr>
+                                            <SchedulerCell as="th">
+                                                <span>11:00 AM</span>
+                                            </SchedulerCell>
+                                        </tr>
+                                        <tr>
+                                            <SchedulerCell as="th" cellType={[ "slot" ]}></SchedulerCell>
+                                        </tr>
+                                        <tr>
+                                            <SchedulerCell as="th">
+                                                <span>12:00 PM</span>
+                                            </SchedulerCell>
+                                        </tr>
+                                        <tr>
+                                            <SchedulerCell as="th" cellType={[ "slot" ]}></SchedulerCell>
+                                        </tr>
+                                        <tr>
+                                            <SchedulerCell as="th">
+                                                <span>1:00 PM</span>
+                                            </SchedulerCell>
+                                        </tr>
+                                        <tr>
+                                            <SchedulerCell as="th" cellType={[ "slot" ]}></SchedulerCell>
+                                        </tr>
+                                        <tr>
+                                            <SchedulerCell as="th">
+                                                <span>2:00 PM</span>
+                                            </SchedulerCell>
+                                        </tr>
+                                        <tr>
+                                            <SchedulerCell as="th" cellType={[ "slot" ]}></SchedulerCell>
+                                        </tr>
+                                        <tr>
+                                            <SchedulerCell as="th">
+                                                <span>3:00 PM</span>
+                                            </SchedulerCell>
+                                        </tr>
+                                        <tr>
+                                            <SchedulerCell as="th" cellType={[ "slot" ]}></SchedulerCell>
+                                        </tr>
+                                        <tr>
+                                            <SchedulerCell as="th">
+                                                <span>4:00 PM</span>
+                                            </SchedulerCell>
+                                        </tr>
+                                        <tr>
+                                            <SchedulerCell as="th" cellType={[ "slot" ]}></SchedulerCell>
+                                        </tr>
+                                        <tr>
+                                            <SchedulerCell as="th">
+                                                <span>5:00 PM</span>
+                                            </SchedulerCell>
+                                        </tr>
+                                        <tr>
+                                            <SchedulerCell as="th" cellType={[ "slot" ]}></SchedulerCell>
+                                        </tr>
+                                    </tbody>
+                                </SchedulerTable>
+                            </SchedulerTimes>
+                        </td>
+                        <td>
+                            <SchedulerContent style={{ height: "195px" }}>
+                                <SchedulerTable>
+                                    <tbody>
+                                        <tr className="k-middle-row">
+                                            <SchedulerCell as="td" className="k-nonwork-hour">&nbsp;</SchedulerCell>
+                                        </tr>
+                                        <tr>
+                                            <SchedulerCell as="td" className="k-nonwork-hour">&nbsp;</SchedulerCell>
+                                        </tr>
+                                        <tr className="k-middle-row">
+                                            <SchedulerCell as="td">&nbsp;</SchedulerCell>
+                                        </tr>
+                                        <tr>
+                                            <SchedulerCell as="td">&nbsp;</SchedulerCell>
+                                        </tr>
+                                        <tr className="k-middle-row">
+                                            <SchedulerCell as="td">&nbsp;</SchedulerCell>
+                                        </tr>
+                                        <tr>
+                                            <SchedulerCell as="td">&nbsp;</SchedulerCell>
+                                        </tr>
+                                        <tr className="k-middle-row">
+                                            <SchedulerCell as="td">&nbsp;</SchedulerCell>
+                                        </tr>
+                                        <tr>
+                                            <SchedulerCell as="td">&nbsp;</SchedulerCell>
+                                        </tr>
+                                        <tr className="k-middle-row">
+                                            <SchedulerCell as="td">&nbsp;</SchedulerCell>
+                                        </tr>
+                                        <tr>
+                                            <SchedulerCell as="td">&nbsp;</SchedulerCell>
+                                        </tr>
+                                        <tr className="k-middle-row">
+                                            <SchedulerCell as="td">&nbsp;</SchedulerCell>
+                                        </tr>
+                                        <tr>
+                                            <SchedulerCell as="td">&nbsp;</SchedulerCell>
+                                        </tr>
+                                        <tr className="k-middle-row">
+                                            <SchedulerCell as="td">&nbsp;</SchedulerCell>
+                                        </tr>
+                                        <tr>
+                                            <SchedulerCell as="td">&nbsp;</SchedulerCell>
+                                        </tr>
+                                        <tr className="k-middle-row">
+                                            <SchedulerCell as="td">&nbsp;</SchedulerCell>
+                                        </tr>
+                                        <tr>
+                                            <SchedulerCell as="td">&nbsp;</SchedulerCell>
+                                        </tr>
+                                        <tr className="k-middle-row">
+                                            <SchedulerCell as="td">&nbsp;</SchedulerCell>
+                                        </tr>
+                                        <tr>
+                                            <SchedulerCell as="td">&nbsp;</SchedulerCell>
+                                        </tr>
+
+                                    </tbody>
+                                </SchedulerTable>
+                                <SchedulerEvent ongoing style={{ top: "74px", height: "72px", width: "200px" }}>
+                                    <div className="k-event-template k-event-time">8:00 AM - 9:00 AM</div>
+                                    <div className="k-event-template">Event Title</div>
+                                </SchedulerEvent>
+                            </SchedulerContent>
+                        </td>
+                    </SchedulerBody>
+                </tbody>
+            </>
+        }
+        {...props}
+    />
+);

package/src/scheduler/templates/scheduler-flex-agenda.tsx

@@ -0,0 +1,131 @@
+import { Button } from '../../button';
+import { ButtonGroup } from '../../button-group';
+import { Scheduler, SchedulerHead, SchedulerBody, SchedulerRow, SchedulerToolbar, SchedulerCell, SchedulerGroup, SchedulerTask } from '../index';
+
+export const SchedulerFlexAgenda = ({ style, ...props }: any) => (
+    <Scheduler
+        style={style}
+        layout="flex"
+        view="agenda"
+        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" >
+                    6/24/2024 - 6/25/2024
+                    </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>Timeline</Button>
+                        <Button className="k-group-end" selected>Agenda</Button>
+                    </ButtonGroup>
+                </SchedulerToolbar>
+            </>
+        }
+        children={
+            <>
+                <SchedulerHead as="div">
+                    <SchedulerGroup orientation="vertical">
+                        <SchedulerRow>
+                            <SchedulerCell as="div" className="k-group-content">
+                                <SchedulerRow>
+                                    <SchedulerCell as="div" cellType={[ "heading", "group" ]} className="k-scheduler-datecolumn" style={{ minWidth: "168px" }}>
+                                        Date
+                                    </SchedulerCell>
+                                    <SchedulerCell as="div" cellType={[ "heading", "group" ]} className="k-scheduler-timecolumn" style={{ minWidth: "595px" }}>
+                                        Time
+                                    </SchedulerCell>
+                                    <SchedulerCell as="div" cellType={[ "heading", "group" ]} className="k-scheduler-eventcolumn" style={{ minWidth: "168px" }}>
+                                        Event
+                                    </SchedulerCell>
+                                </SchedulerRow>
+                            </SchedulerCell>
+                        </SchedulerRow>
+                    </SchedulerGroup>
+                </SchedulerHead>
+                <SchedulerBody as="div">
+                    <SchedulerGroup orientation="vertical">
+                        <SchedulerRow className="k-scheduler-content">
+                            <SchedulerCell as="div" cellType={[ "group", "slot" ]} className="k-scheduler-datecolumn" style={{ minWidth: "168px" }}>
+                                <div>
+                                    <strong className="k-scheduler-agendaday">25</strong>
+                                    <em className="k-scheduler-agendaweek">Monday</em>
+                                    <span className="k-scheduler-agendadate">Jun 2024</span>
+                                </div>
+                            </SchedulerCell>
+                            <SchedulerCell as="div" className="k-group-content">
+                                <SchedulerRow>
+                                    <SchedulerCell as="div" className="k-scheduler-timecolumn" style={{ minWidth: "595px" }}>
+                                        <div>11:30 AM-1:00 PM</div>
+                                    </SchedulerCell>
+                                    <SchedulerCell as="div">
+                                        <SchedulerTask text="Task 1 Title" closable />
+                                    </SchedulerCell>
+                                </SchedulerRow>
+                                <SchedulerRow>
+                                    <SchedulerCell as="div" className="k-scheduler-timecolumn" style={{ minWidth: "595px" }}>
+                                        <div>12:45 PM-2:30 PM</div>
+                                    </SchedulerCell>
+                                    <SchedulerCell as="div">
+                                        <SchedulerTask text="Task 2 Title" recurring closable />
+                                    </SchedulerCell>
+                                </SchedulerRow>
+                                <SchedulerRow>
+                                    <SchedulerCell as="div" className="k-scheduler-timecolumn" style={{ minWidth: "595px" }}>
+                                        <div>all day</div>
+                                    </SchedulerCell>
+                                    <SchedulerCell as="div">
+                                        <SchedulerTask text="Task 3 Title" closable />
+                                    </SchedulerCell>
+                                </SchedulerRow>
+                            </SchedulerCell>
+                        </SchedulerRow>
+                        <SchedulerRow className="k-scheduler-content">
+                            <SchedulerCell as="div" cellType={[ "group", "slot" ]} className="k-scheduler-datecolumn" style={{ minWidth: "168px" }}>
+                                <div>
+                                    <strong className="k-scheduler-agendaday">25</strong>
+                                    <em className="k-scheduler-agendaweek">Tuesday</em>
+                                    <span className="k-scheduler-agendadate">Jun 2024</span>
+                                </div>
+                            </SchedulerCell>
+                            <SchedulerCell as="div" className="k-group-content">
+                                <SchedulerRow>
+                                    <SchedulerCell as="div" className="k-scheduler-timecolumn" style={{ minWidth: "595px" }}>
+                                        <div>9:30 AM-11:00 AM</div>
+                                    </SchedulerCell>
+                                    <SchedulerCell as="div">
+                                        <SchedulerTask text="Task 1 Title" closable />
+                                    </SchedulerCell>
+                                </SchedulerRow>
+                                <SchedulerRow>
+                                    <SchedulerCell as="div" className="k-scheduler-timecolumn" style={{ minWidth: "595px" }}>
+                                        <div>3:00 PM-4:30 PM</div>
+                                    </SchedulerCell>
+                                    <SchedulerCell as="div">
+                                        <SchedulerTask text="Task 2 Title" recurring closable />
+                                    </SchedulerCell>
+                                </SchedulerRow>
+                                <SchedulerRow>
+                                    <SchedulerCell as="div" className="k-scheduler-timecolumn" style={{ minWidth: "595px" }}>
+                                        <div>6:00 PM-7:00 PM</div>
+                                    </SchedulerCell>
+                                    <SchedulerCell as="div">
+                                        <SchedulerTask text="Task 3 Title" closable />
+                                    </SchedulerCell>
+                                </SchedulerRow>
+                            </SchedulerCell>
+                        </SchedulerRow>
+                    </SchedulerGroup>
+                </SchedulerBody>
+            </>
+        }
+        {...props}
+    />
+);

package/src/scheduler/templates/scheduler-flex-day.tsx

@@ -0,0 +1,153 @@
+import { Button } from '../../button';
+import { ButtonGroup } from '../../button-group';
+import { Scheduler, SchedulerHead, SchedulerBody, SchedulerRow, SchedulerToolbar, SchedulerCell, SchedulerGroup, SchedulerEvent } from '../index';
+
+export const SchedulerFlexDay = ({ style,...props }: any) => (
+    <Scheduler
+        style={style}
+        layout="flex"
+        view="day"
+        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" >
+                        Monday, June 24, 2024
+                    </Button>
+                    <span className="k-spacer"></span>
+                    <ButtonGroup className="k-scheduler-views">
+                        <Button className="k-group-start" selected>Day</Button>
+                        <Button>Week</Button>
+                        <Button>Month</Button>
+                        <Button>Timeline</Button>
+                        <Button className="k-group-end">Agenda</Button>
+                    </ButtonGroup>
+                </SchedulerToolbar>
+            </>
+        }
+        footer={
+            <>
+                <SchedulerToolbar footer>
+                    <Button icon="clock" className="k-scheduler-fullday">Show business hours</Button>
+                </SchedulerToolbar>
+            </>
+        }
+        children={
+            <>
+                <SchedulerHead as="div">
+                    <SchedulerGroup>
+                        <SchedulerRow>
+                            <SchedulerCell as="div" cellType={[ "side" ]} style={{ minWidth: "65px" }} />
+                            <SchedulerCell as="div" cellType={[ "group" ]}>
+                                <SchedulerRow>
+                                    <SchedulerCell as="div" cellType={[ "heading" ]} text="Mon, 6/24"/>
+                                </SchedulerRow>
+                            </SchedulerCell>
+                        </SchedulerRow>
+                    </SchedulerGroup>
+                    <SchedulerGroup>
+                        <SchedulerRow>
+                            <SchedulerCell as="div" cellType={[ "heading", "side" ]} allDay style={{ minWidth: "65px" }}>all day</SchedulerCell>
+                            <SchedulerCell as="div" cellType={[ "group" ]}>
+                                <SchedulerRow>
+                                    <SchedulerCell as="div" cellType={[ "slot" ]} />
+                                </SchedulerRow>
+                            </SchedulerCell>
+                        </SchedulerRow>
+                    </SchedulerGroup>
+                </SchedulerHead>
+                <SchedulerBody as="div">
+                    <SchedulerGroup>
+                        <SchedulerRow>
+                            <SchedulerCell as="div" cellType={[ "heading", "side", "major" ]} style={{ minWidth: "65px" }}>8:00 AM</SchedulerCell>
+                            <SchedulerCell as="div" cellType={[ "group" ]}>
+                                <SchedulerRow className="k-middle-row">
+                                    <SchedulerCell as="div" cellType={[ "slot" ]} />
+                                </SchedulerRow>
+                            </SchedulerCell>
+                        </SchedulerRow>
+                    </SchedulerGroup>
+                    <SchedulerGroup>
+                        <SchedulerRow>
+                            <SchedulerCell as="div" cellType={[ "heading", "side" ]} style={{ minWidth: "65px" }}/>
+                            <SchedulerCell as="div" cellType={[ "group" ]}>
+                                <SchedulerRow>
+                                    <SchedulerCell as="div" cellType={[ "slot" ]} />
+                                </SchedulerRow>
+                            </SchedulerCell>
+                        </SchedulerRow>
+                    </SchedulerGroup>
+                    <SchedulerGroup>
+                        <SchedulerRow>
+                            <SchedulerCell as="div" cellType={[ "heading", "side", "major" ]} style={{ minWidth: "65px" }}>9:00 AM</SchedulerCell>
+                            <SchedulerCell as="div" cellType={[ "group" ]}>
+                                <SchedulerRow className="k-middle-row">
+                                    <SchedulerCell as="div" cellType={[ "slot" ]}/>
+                                </SchedulerRow>
+                            </SchedulerCell>
+                        </SchedulerRow>
+                    </SchedulerGroup>
+                    <SchedulerGroup>
+                        <SchedulerRow>
+                            <SchedulerCell as="div" cellType={[ "heading", "side" ]} style={{ minWidth: "65px" }}/>
+                            <SchedulerCell as="div" cellType={[ "group" ]}>
+                                <SchedulerRow>
+                                    <SchedulerCell as="div" cellType={[ "slot" ]} />
+                                </SchedulerRow>
+                            </SchedulerCell>
+                        </SchedulerRow>
+                    </SchedulerGroup>
+                    <SchedulerGroup>
+                        <SchedulerRow>
+                            <SchedulerCell as="div" cellType={[ "heading", "side", "major" ]} style={{ minWidth: "65px" }}>10:00 AM</SchedulerCell>
+                            <SchedulerCell as="div" cellType={[ "group" ]}>
+                                <SchedulerRow className="k-middle-row">
+                                    <SchedulerCell as="div" cellType={[ "slot" ]}/>
+                                </SchedulerRow>
+                            </SchedulerCell>
+                        </SchedulerRow>
+                    </SchedulerGroup>
+                    <SchedulerGroup>
+                        <SchedulerRow>
+                            <SchedulerCell as="div" cellType={[ "heading", "side" ]} style={{ minWidth: "65px" }}/>
+                            <SchedulerCell as="div" cellType={[ "group" ]}>
+                                <SchedulerRow>
+                                    <SchedulerCell as="div" cellType={[ "slot" ]} />
+                                </SchedulerRow>
+                            </SchedulerCell>
+                        </SchedulerRow>
+                    </SchedulerGroup>
+                    <SchedulerGroup>
+                        <SchedulerRow>
+                            <SchedulerCell as="div" cellType={[ "heading", "side", "major" ]} style={{ minWidth: "65px" }}>11:00 AM</SchedulerCell>
+                            <SchedulerCell as="div" cellType={[ "group" ]}>
+                                <SchedulerRow className="k-middle-row">
+                                    <SchedulerCell as="div" cellType={[ "slot" ]} />
+                                </SchedulerRow>
+                            </SchedulerCell>
+                        </SchedulerRow>
+                    </SchedulerGroup>
+                    <SchedulerGroup>
+                        <SchedulerRow>
+                            <SchedulerCell as="div" cellType={[ "heading", "side" ]} style={{ minWidth: "65px" }}/>
+                            <SchedulerCell as="div" cellType={[ "group" ]}>
+                                <SchedulerRow>
+                                    <SchedulerCell as="div" cellType={[ "slot" ]} />
+                                </SchedulerRow>
+                            </SchedulerCell>
+                        </SchedulerRow>
+                    </SchedulerGroup>
+                    <SchedulerEvent ongoing style={{ top: "0px", left: "80px", height: "72px", width: "200px" }}>
+                        <div className="k-event-template k-event-time">8:00 AM - 9:00 AM</div>
+                        <div className="k-event-template">Event Title</div>
+                    </SchedulerEvent>
+                </SchedulerBody>
+            </>
+        }
+        {...props}
+    ></Scheduler>
+);