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

package/src/scheduler/scheduler-task.spec.tsx

@@ -0,0 +1,60 @@
+import { classNames } from '../misc';
+import Icon from '../icon/icon.spec';
+
+
+const className = 'k-task';
+
+const states = [];
+
+const options = {};
+
+const defaultProps = {
+    markStyle: { backgroundColor: "gold" },
+};
+
+
+export type KendoSchedulerTaskProps = {
+    text?: string;
+    markStyle?: React.CSSProperties;
+    recurring?: boolean;
+    closable?: boolean;
+};
+
+export const SchedulerTask = (
+    props: KendoSchedulerTaskProps
+        & React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        text,
+        markStyle,
+        recurring,
+        closable,
+        ...other
+    } = props;
+
+    return (
+        <div
+            {...other}
+            className={classNames(
+                className,
+                props.className
+            )}>
+            <span className="k-scheduler-mark" style={markStyle}></span>
+            {recurring && <Icon icon="arrow-rotate-cw" />}
+            <span className="k-scheduler-task text">{text}</span>
+            {closable &&
+                <a href="#" className="k-link k-event-delete">
+                    <Icon icon="x" />
+                </a>
+            }
+        </div>
+    );
+};
+
+
+SchedulerTask.states = states;
+SchedulerTask.options = options;
+SchedulerTask.defaultProps = defaultProps;
+SchedulerTask.className = className;
+
+export default SchedulerTask;

package/src/scheduler/scheduler-times.spec.tsx

@@ -0,0 +1,17 @@
+import { classNames } from '../misc';
+
+const className = 'k-scheduler-times';
+
+export const SchedulerTimes = (
+    props: React.HTMLAttributes<HTMLDivElement>
+) => (
+    <div
+        {...props}
+        className={classNames(
+            className,
+            props.className
+        )}
+    >
+        {props.children}
+    </div>
+);

package/src/scheduler/scheduler-toolbar.spec.tsx

@@ -0,0 +1,50 @@
+import { Button } from '../button';
+import { ButtonGroup } from '../button-group';
+import { classNames } from '../misc';
+import { Toolbar, KendoToolbarProps } from '../toolbar';
+
+const className = 'k-scheduler-toolbar';
+
+export type KendoSchedulerToolbarProps = KendoToolbarProps & {
+    footer?: boolean
+};
+
+export const SchedulerToolbar = (
+    props: KendoSchedulerToolbarProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const { footer, ...others } = props;
+
+    return (
+        <Toolbar
+            {...others}
+            className={classNames(
+                props.className,
+                {
+                    [ footer ? 'k-scheduler-footer' : className ]: true
+                }
+            )}
+        >
+            {props.children ||
+                <>
+                    <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 13, 2022
+                    </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>
+                </>
+            }
+        </Toolbar>
+    );
+};

package/src/scheduler/scheduler-view.spec.tsx

@@ -0,0 +1,47 @@
+import { classNames } from '../misc';
+
+const SCHEDULER_VIEW_CLASSNAME = 'k-scheduler-layout';
+
+const states = [];
+
+const options = {};
+
+const defaultProps = {};
+
+export type KendoSchedulerViewProps = {
+    view?: "day" | "week" | "month" | "agenda" | "timeline" | "year";
+};
+
+export const SchedulerView = (
+    props: KendoSchedulerViewProps & (
+        | ( React.HTMLAttributes<HTMLDivElement> & { as: 'div' } )
+        | ( React.HTMLAttributes<HTMLTableElement> & { as: 'table' } )
+    )
+) => {
+    const {
+        as: Component = 'div',
+        view,
+        ...other
+    } = props;
+
+    return (
+        <Component
+            {...other}
+            className={classNames(
+                props.className,
+                SCHEDULER_VIEW_CLASSNAME,
+                {
+                    [`k-scheduler-${view}view`]: view,
+                }
+            )}>
+            {props.children}
+        </Component>
+    );
+};
+
+SchedulerView.states = states;
+SchedulerView.options = options;
+SchedulerView.className = SCHEDULER_VIEW_CLASSNAME;
+SchedulerView.defaultProps = defaultProps;
+
+export default SchedulerView;

package/src/scheduler/scheduler.spec.tsx

@@ -0,0 +1,60 @@
+import { classNames } from '../misc';
+import SchedulerView from './scheduler-view.spec';
+
+const SCHEDULER_CLASSNAME = 'k-scheduler';
+
+const states = [];
+
+const options = {};
+
+const defaultProps = {};
+
+export type KendoSchedulerProps = {
+    view?: "day" | "week" | "month" | "year" | "agenda" | "timeline";
+    toolbar?: JSX.Element | JSX.Element[];
+    footer?: JSX.Element | JSX.Element[];
+    layout?: "table" | "flex";
+};
+
+export const Scheduler = (
+    props: KendoSchedulerProps & React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        view,
+        toolbar,
+        footer,
+        layout,
+        ...other
+    } = props;
+
+    return (
+        <div
+            {...other}
+            className={classNames(
+                props.className,
+                SCHEDULER_CLASSNAME
+            )}
+        >
+            {toolbar}
+            <SchedulerView
+                className={classNames(
+                    {
+                        'k-scheduler-layout-flex': layout === 'flex',
+                    }
+                )}
+                as={layout === 'table' ? 'table' : 'div'}
+                view={view}
+            >
+                {props.children}
+            </SchedulerView>
+            {footer}
+        </div>
+    );
+};
+
+Scheduler.states = states;
+Scheduler.options = options;
+Scheduler.className = SCHEDULER_CLASSNAME;
+Scheduler.defaultProps = defaultProps;
+
+export default Scheduler;

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

@@ -0,0 +1,123 @@
+import { ButtonGroup } from '../../button-group';
+import { Button } from '../../button';
+import { Scheduler, SchedulerBody, SchedulerCell, SchedulerContent, SchedulerHead, SchedulerHeader, SchedulerTable, SchedulerToolbar } from '../index';
+import SchedulerTask from '../scheduler-task.spec';
+
+export const SchedulerAgenda = ({ style, ...props }: any) => (
+    <Scheduler
+        style={style}
+        layout="table"
+        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" >
+                    06/13/2022 - 06/20/2022
+                    </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>
+            </>
+        }
+        footer={
+            <>
+                <SchedulerToolbar footer>
+                    <Button icon="clock" className="k-scheduler-fullday">Show business hours</Button>
+                </SchedulerToolbar>
+            </>
+        }
+        children={
+            <tbody>
+                <SchedulerHead as="tr">
+                    <td>
+                        <SchedulerHeader>
+                            <SchedulerTable>
+                                <tbody>
+                                    <tr>
+                                        <SchedulerCell as="th" className="k-scheduler-datecolumn">Date</SchedulerCell>
+                                        <SchedulerCell as="th" className="k-scheduler-timecolumn">Time</SchedulerCell>
+                                        <SchedulerCell as="th">Event</SchedulerCell>
+                                    </tr>
+                                </tbody>
+                            </SchedulerTable>
+                        </SchedulerHeader>
+                    </td>
+                </SchedulerHead>
+                <SchedulerBody as="tr">
+                    <td>
+                        <SchedulerContent>
+                            <SchedulerTable>
+                                <tbody>
+                                    <tr>
+                                        <SchedulerCell as="td" className="k-scheduler-datecolumn k-first">
+                                            <strong className="k-scheduler-agendaday">13</strong>
+                                            <em className="k-scheduler-agendaweek">Monday</em>
+                                            <span className="k-scheduler-agendadate">June, 2022</span>
+                                        </SchedulerCell>
+                                        <SchedulerCell as="td" className="k-scheduler-timecolumn">
+                                            <div>7:00 PM-9:00 PM</div>
+                                        </SchedulerCell>
+                                        <SchedulerCell as="td">
+                                            <SchedulerTask text="Task 1 Title" closable />
+                                        </SchedulerCell>
+                                    </tr>
+                                    <tr>
+                                        <SchedulerCell as="td" className="k-scheduler-datecolumn k-first">
+                                            <strong className="k-scheduler-agendaday">14</strong>
+                                            <em className="k-scheduler-agendaweek">Tuesday</em>
+                                            <span className="k-scheduler-agendadate">June, 2013</span>
+                                        </SchedulerCell>
+                                        <SchedulerCell as="td" className="k-scheduler-timecolumn">
+                                            <div>all day</div>
+                                        </SchedulerCell>
+                                        <SchedulerCell as="td">
+                                            <SchedulerTask text="Task 2 Title" closable />
+                                        </SchedulerCell>
+                                    </tr>
+                                    <tr>
+                                        <SchedulerCell as="td" className="k-scheduler-datecolumn k-first">
+                                            <strong className="k-scheduler-agendaday">15</strong>
+                                            <em className="k-scheduler-agendaweek">Wednesday</em>
+                                            <span className="k-scheduler-agendadate">June, 2013</span>
+                                        </SchedulerCell>
+                                        <SchedulerCell as="td" className="k-scheduler-timecolumn">
+                                            <div>6:30 PM-8:00 PM</div>
+                                        </SchedulerCell>
+                                        <SchedulerCell as="td">
+                                            <SchedulerTask text="Task 3 Title" closable />
+                                        </SchedulerCell>
+                                    </tr>
+                                    <tr>
+                                        <SchedulerCell as="td" className="k-scheduler-datecolumn k-first">
+                                            <strong className="k-scheduler-agendaday">16</strong>
+                                            <em className="k-scheduler-agendaweek">Wednesday</em>
+                                            <span className="k-scheduler-agendadate">June, 2013</span>
+                                        </SchedulerCell>
+                                        <SchedulerCell as="td" className="k-scheduler-timecolumn">
+                                            <div>7:30 AM-8:30 AM</div>
+                                        </SchedulerCell>
+                                        <SchedulerCell as="td">
+                                            <SchedulerTask text="Task 4 Title" recurring />
+                                        </SchedulerCell>
+                                    </tr>
+                                </tbody>
+                            </SchedulerTable>
+                        </SchedulerContent>
+                    </td>
+                </SchedulerBody>
+            </tbody>
+        }
+        {...props}
+    ></Scheduler>
+);

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}
+    />
+);