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

package/dist/esm/wizard/templates/wizard-normal.mjs

@@ -139,7 +139,7 @@ var Wizard = (props) => {
         stateClassNames(WIZZARD_CLASSNAME, { disabled }),
         {
           [`${WIZZARD_CLASSNAME}-${orientation}`]: orientation,
-          [`${WIZZARD_CLASSNAME}-${contentPosition}`]: contentPosition === "left"
+          [`${WIZZARD_CLASSNAME}-${contentPosition}`]: contentPosition && orientation !== "horizontal"
         }
       ),
       children: props.children
@@ -4518,7 +4518,7 @@ var defaultProps6 = {
   buttons: /* @__PURE__ */ jsxs2(Fragment5, { children: [
     /* @__PURE__ */ jsxs2("span", { className: "k-wizard-buttons-left", children: [
       /* @__PURE__ */ jsx9(Button, { children: "Reset" }),
-      /* @__PURE__ */ jsx9("span", { className: "k-wizard-pager", children: "Step 1 of 2" })
+      /* @__PURE__ */ jsx9("span", { className: "k-wizard-pager", children: "Step 2 of 3" })
     ] }),
     /* @__PURE__ */ jsxs2("span", { className: "k-wizard-buttons-right", children: [
       /* @__PURE__ */ jsx9(Button, { children: "Previous" }),

package/dist/esm/wizard/templates/wizard-vertical.mjs

@@ -139,7 +139,7 @@ var Wizard = (props) => {
         stateClassNames(WIZZARD_CLASSNAME, { disabled }),
         {
           [`${WIZZARD_CLASSNAME}-${orientation}`]: orientation,
-          [`${WIZZARD_CLASSNAME}-${contentPosition}`]: contentPosition === "left"
+          [`${WIZZARD_CLASSNAME}-${contentPosition}`]: contentPosition && orientation !== "horizontal"
         }
       ),
       children: props.children
@@ -4518,7 +4518,7 @@ var defaultProps6 = {
   buttons: /* @__PURE__ */ jsxs2(Fragment5, { children: [
     /* @__PURE__ */ jsxs2("span", { className: "k-wizard-buttons-left", children: [
       /* @__PURE__ */ jsx9(Button, { children: "Reset" }),
-      /* @__PURE__ */ jsx9("span", { className: "k-wizard-pager", children: "Step 1 of 2" })
+      /* @__PURE__ */ jsx9("span", { className: "k-wizard-pager", children: "Step 2 of 3" })
     ] }),
     /* @__PURE__ */ jsxs2("span", { className: "k-wizard-buttons-right", children: [
       /* @__PURE__ */ jsx9(Button, { children: "Previous" }),

package/dist/esm/wizard/tests/wizard-horizontal.mjs

@@ -139,7 +139,7 @@ var Wizard = (props) => {
         stateClassNames(WIZZARD_CLASSNAME, { disabled }),
         {
           [`${WIZZARD_CLASSNAME}-${orientation}`]: orientation,
-          [`${WIZZARD_CLASSNAME}-${contentPosition}`]: contentPosition === "left"
+          [`${WIZZARD_CLASSNAME}-${contentPosition}`]: contentPosition && orientation !== "horizontal"
         }
       ),
       children: props.children
@@ -4518,7 +4518,7 @@ var defaultProps6 = {
   buttons: /* @__PURE__ */ jsxs2(Fragment5, { children: [
     /* @__PURE__ */ jsxs2("span", { className: "k-wizard-buttons-left", children: [
       /* @__PURE__ */ jsx9(Button, { children: "Reset" }),
-      /* @__PURE__ */ jsx9("span", { className: "k-wizard-pager", children: "Step 1 of 2" })
+      /* @__PURE__ */ jsx9("span", { className: "k-wizard-pager", children: "Step 2 of 3" })
     ] }),
     /* @__PURE__ */ jsxs2("span", { className: "k-wizard-buttons-right", children: [
       /* @__PURE__ */ jsx9(Button, { children: "Previous" }),

package/dist/esm/wizard/tests/wizard-vertical.mjs

@@ -139,7 +139,7 @@ var Wizard = (props) => {
         stateClassNames(WIZZARD_CLASSNAME, { disabled }),
         {
           [`${WIZZARD_CLASSNAME}-${orientation}`]: orientation,
-          [`${WIZZARD_CLASSNAME}-${contentPosition}`]: contentPosition === "left"
+          [`${WIZZARD_CLASSNAME}-${contentPosition}`]: contentPosition && orientation !== "horizontal"
         }
       ),
       children: props.children
@@ -4518,7 +4518,7 @@ var defaultProps6 = {
   buttons: /* @__PURE__ */ jsxs2(Fragment5, { children: [
     /* @__PURE__ */ jsxs2("span", { className: "k-wizard-buttons-left", children: [
       /* @__PURE__ */ jsx9(Button, { children: "Reset" }),
-      /* @__PURE__ */ jsx9("span", { className: "k-wizard-pager", children: "Step 1 of 2" })
+      /* @__PURE__ */ jsx9("span", { className: "k-wizard-pager", children: "Step 2 of 3" })
     ] }),
     /* @__PURE__ */ jsxs2("span", { className: "k-wizard-buttons-right", children: [
       /* @__PURE__ */ jsx9(Button, { children: "Previous" }),

package/dist/esm/wizard/wizard-step.mjs

@@ -4478,7 +4478,7 @@ var defaultProps5 = {
   buttons: /* @__PURE__ */ jsxs2(Fragment5, { children: [
     /* @__PURE__ */ jsxs2("span", { className: "k-wizard-buttons-left", children: [
       /* @__PURE__ */ jsx8(Button, { children: "Reset" }),
-      /* @__PURE__ */ jsx8("span", { className: "k-wizard-pager", children: "Step 1 of 2" })
+      /* @__PURE__ */ jsx8("span", { className: "k-wizard-pager", children: "Step 2 of 3" })
     ] }),
     /* @__PURE__ */ jsxs2("span", { className: "k-wizard-buttons-right", children: [
       /* @__PURE__ */ jsx8(Button, { children: "Previous" }),

package/dist/esm/wizard/wizard.spec.mjs

@@ -69,7 +69,7 @@ var Wizard = (props) => {
         stateClassNames(WIZZARD_CLASSNAME, { disabled }),
         {
           [`${WIZZARD_CLASSNAME}-${orientation}`]: orientation,
-          [`${WIZZARD_CLASSNAME}-${contentPosition}`]: contentPosition === "left"
+          [`${WIZZARD_CLASSNAME}-${contentPosition}`]: contentPosition && orientation !== "horizontal"
         }
       ),
       children: props.children

package/dist/types/scheduler/index.d.ts

@@ -0,0 +1,30 @@
+import './templates/scheduler-day';
+export * from './scheduler.spec';
+export * from './scheduler-view.spec';
+export * from './scheduler-header.spec';
+export * from './scheduler-content.spec';
+export * from './scheduler-times.spec';
+export * from './scheduler-table.spec';
+export * from './scheduler-cell.spec';
+export * from './scheduler-sticky-cell.spec';
+export * from './scheduler-row.spec';
+export * from './scheduler-toolbar.spec';
+export * from './scheduler-body.spec';
+export * from './scheduler-head.spec';
+export * from './scheduler-group.spec';
+export * from './scheduler-event.spec';
+export * from './scheduler-task.spec';
+export * from './templates/scheduler-day';
+export * from './templates/scheduler-week';
+export * from './templates/scheduler-month';
+export * from './templates/scheduler-timeline';
+export * from './templates/scheduler-agenda';
+export * from './templates/scheduler-flex-day';
+export * from './templates/scheduler-flex-week';
+export * from './templates/scheduler-flex-month';
+export * from './templates/scheduler-flex-timeline';
+export * from './templates/scheduler-flex-agenda';
+export * from './templates/scheduler-horizontal-grouping';
+export * from './templates/scheduler-vertical-grouping';
+export * from './templates/scheduler-flex-horizontal-grouping';
+export * from './templates/scheduler-flex-vertical-grouping';

package/dist/types/scheduler/scheduler-body.spec.d.ts

@@ -0,0 +1,5 @@
+export declare const SchedulerBody: (props: (React.HTMLAttributes<HTMLDivElement> & {
+    as: 'div';
+}) | (React.HTMLAttributes<HTMLTableRowElement> & {
+    as: 'tr';
+})) => import("react/jsx-runtime").JSX.Element;

package/dist/types/scheduler/scheduler-cell.spec.d.ts

@@ -0,0 +1,19 @@
+export type KendoSchedulerCellProps = {
+    cellType?: string[];
+    allDay?: boolean;
+    text?: string;
+    colspan?: number;
+    rowspan?: number;
+};
+export declare const SchedulerCell: {
+    (props: KendoSchedulerCellProps & ((React.AllHTMLAttributes<HTMLDivElement> & {
+        as: 'div';
+    }) | (React.HTMLAttributes<HTMLTableCellElement> & {
+        as: 'th' | 'td';
+    }))): import("react/jsx-runtime").JSX.Element;
+    states: any[];
+    options: {};
+    defaultProps: {};
+    className: string;
+};
+export default SchedulerCell;

package/dist/types/scheduler/scheduler-content.spec.d.ts

@@ -0,0 +1 @@
+export declare const SchedulerContent: (props: React.HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/scheduler/scheduler-event.spec.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+export type KendoSchedulerEventProps = {
+    inverse?: boolean;
+    ongoing?: boolean;
+    multiDay?: boolean;
+    resizable?: "horizontal" | "vertical" | "none";
+    hover?: boolean;
+    focus?: boolean;
+    selected?: boolean;
+    eventPrefix?: JSX.Element | null;
+    eventSuffix?: JSX.Element | null;
+};
+export declare const SchedulerEvent: {
+    (props: KendoSchedulerEventProps & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    states: ("focus" | "selected" | "hover")[];
+    options: {};
+    defaultProps: {
+        readonly resizable: "vertical";
+        readonly eventPrefix: import("react/jsx-runtime").JSX.Element;
+        readonly eventSuffix: import("react/jsx-runtime").JSX.Element;
+    };
+    className: string;
+};
+export default SchedulerEvent;

package/dist/types/scheduler/scheduler-group.spec.d.ts

@@ -0,0 +1,13 @@
+export type KendoSchedulerGroupProps = {
+    orientation?: "horizontal" | "vertical";
+};
+export declare const SchedulerGroup: {
+    (props: KendoSchedulerGroupProps & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    states: any[];
+    options: {};
+    defaultProps: {
+        orientation: string;
+    };
+    className: string;
+};
+export default SchedulerGroup;

package/dist/types/scheduler/scheduler-head.spec.d.ts

@@ -0,0 +1,5 @@
+export declare const SchedulerHead: (props: (React.HTMLAttributes<HTMLDivElement> & {
+    as: 'div';
+}) | (React.HTMLAttributes<HTMLTableRowElement> & {
+    as: 'tr';
+})) => import("react/jsx-runtime").JSX.Element;

package/dist/types/scheduler/scheduler-header.spec.d.ts

@@ -0,0 +1 @@
+export declare const SchedulerHeader: (props: React.HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/scheduler/scheduler-row.spec.d.ts

@@ -0,0 +1 @@
+export declare const SchedulerRow: (props: React.HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/scheduler/scheduler-sticky-cell.spec.d.ts

@@ -0,0 +1 @@
+export declare const SchedulerStickyCell: (props: React.HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/scheduler/scheduler-table.spec.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SchedulerTable: (props: React.HTMLAttributes<HTMLTableElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/scheduler/scheduler-task.spec.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+export type KendoSchedulerTaskProps = {
+    text?: string;
+    markStyle?: React.CSSProperties;
+    recurring?: boolean;
+    closable?: boolean;
+};
+export declare const SchedulerTask: {
+    (props: KendoSchedulerTaskProps & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    states: any[];
+    options: {};
+    defaultProps: {
+        markStyle: {
+            backgroundColor: string;
+        };
+    };
+    className: string;
+};
+export default SchedulerTask;

package/dist/types/scheduler/scheduler-times.spec.d.ts

@@ -0,0 +1 @@
+export declare const SchedulerTimes: (props: React.HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/scheduler/scheduler-toolbar.spec.d.ts

@@ -0,0 +1,5 @@
+import { KendoToolbarProps } from '../toolbar';
+export type KendoSchedulerToolbarProps = KendoToolbarProps & {
+    footer?: boolean;
+};
+export declare const SchedulerToolbar: (props: KendoSchedulerToolbarProps & React.HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/scheduler/scheduler-view.spec.d.ts

@@ -0,0 +1,15 @@
+export type KendoSchedulerViewProps = {
+    view?: "day" | "week" | "month" | "agenda" | "timeline" | "year";
+};
+export declare const SchedulerView: {
+    (props: KendoSchedulerViewProps & ((React.HTMLAttributes<HTMLDivElement> & {
+        as: 'div';
+    }) | (React.HTMLAttributes<HTMLTableElement> & {
+        as: 'table';
+    }))): import("react/jsx-runtime").JSX.Element;
+    states: any[];
+    options: {};
+    className: string;
+    defaultProps: {};
+};
+export default SchedulerView;

package/dist/types/scheduler/scheduler.spec.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export type KendoSchedulerProps = {
+    view?: "day" | "week" | "month" | "year" | "agenda" | "timeline";
+    toolbar?: JSX.Element | JSX.Element[];
+    footer?: JSX.Element | JSX.Element[];
+    layout?: "table" | "flex";
+};
+export declare const Scheduler: {
+    (props: KendoSchedulerProps & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    states: any[];
+    options: {};
+    className: string;
+    defaultProps: {};
+};
+export default Scheduler;

package/dist/types/scheduler/templates/scheduler-agenda.d.ts

@@ -0,0 +1 @@
+export declare const SchedulerAgenda: ({ style, ...props }: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/scheduler/templates/scheduler-day.d.ts

@@ -0,0 +1 @@
+export declare const SchedulerDay: ({ style, ...props }: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/scheduler/templates/scheduler-flex-agenda.d.ts

@@ -0,0 +1 @@
+export declare const SchedulerFlexAgenda: ({ style, ...props }: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/scheduler/templates/scheduler-flex-day.d.ts

@@ -0,0 +1 @@
+export declare const SchedulerFlexDay: ({ style, ...props }: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/scheduler/templates/scheduler-flex-horizontal-grouping.d.ts

@@ -0,0 +1 @@
+export declare const SchedulerFlexHorizontalGrouping: (...props: any[]) => import("react/jsx-runtime").JSX.Element;

package/dist/types/scheduler/templates/scheduler-flex-month.d.ts

@@ -0,0 +1 @@
+export declare const SchedulerFlexMonth: ({ style, ...props }: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/scheduler/templates/scheduler-flex-timeline.d.ts

@@ -0,0 +1 @@
+export declare const SchedulerFlexTimeline: ({ style, ...props }: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/scheduler/templates/scheduler-flex-vertical-grouping.d.ts

@@ -0,0 +1 @@
+export declare const SchedulerFlexVerticalGrouping: ({ style, ...props }: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/scheduler/templates/scheduler-flex-week.d.ts

@@ -0,0 +1 @@
+export declare const SchedulerFlexWeek: ({ style, ...props }: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/scheduler/templates/scheduler-horizontal-grouping.d.ts

@@ -0,0 +1 @@
+export declare const SchedulerHorizontalGrouping: (...props: any[]) => import("react/jsx-runtime").JSX.Element;

package/dist/types/scheduler/templates/scheduler-month.d.ts

@@ -0,0 +1 @@
+export declare const SchedulerMonth: ({ style, ...props }: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/scheduler/templates/scheduler-timeline.d.ts

@@ -0,0 +1 @@
+export declare const SchedulerTimeline: ({ style, ...props }: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/scheduler/templates/scheduler-vertical-grouping.d.ts

@@ -0,0 +1 @@
+export declare const SchedulerVerticalGrouping: (...props: any[]) => import("react/jsx-runtime").JSX.Element;

package/dist/types/scheduler/templates/scheduler-week.d.ts

@@ -0,0 +1 @@
+export declare const SchedulerWeek: ({ style, ...props }: any) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-themes-html",
   "description": "A collection of HTML helpers used for developing Kendo UI themes",
-  "version": "8.0.0-dev.3",
+  "version": "8.0.0-dev.5",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -53,5 +53,5 @@
   "devDependencies": {
     "@types/react": "^18.0.2"
   },
-  "gitHead": "98cdb5a9b5d437ac5b485d24dcd39b5f45252700"
+  "gitHead": "4e73fce8968603b1544c52cc3ee36fd270fea8ba"
 }

package/src/scheduler/index.ts

@@ -0,0 +1,30 @@
+import './templates/scheduler-day';
+export * from './scheduler.spec';
+export * from './scheduler-view.spec';
+export * from './scheduler-header.spec';
+export * from './scheduler-content.spec';
+export * from './scheduler-times.spec';
+export * from './scheduler-table.spec';
+export * from './scheduler-cell.spec';
+export * from './scheduler-sticky-cell.spec';
+export * from './scheduler-row.spec';
+export * from './scheduler-toolbar.spec';
+export * from './scheduler-body.spec';
+export * from './scheduler-head.spec';
+export * from './scheduler-group.spec';
+export * from './scheduler-event.spec';
+export * from './scheduler-task.spec';
+export * from './templates/scheduler-day';
+export * from './templates/scheduler-week';
+export * from './templates/scheduler-month';
+export * from './templates/scheduler-timeline';
+export * from './templates/scheduler-agenda';
+export * from './templates/scheduler-flex-day';
+export * from './templates/scheduler-flex-week';
+export * from './templates/scheduler-flex-month';
+export * from './templates/scheduler-flex-timeline';
+export * from './templates/scheduler-flex-agenda';
+export * from './templates/scheduler-horizontal-grouping';
+export * from './templates/scheduler-vertical-grouping';
+export * from './templates/scheduler-flex-horizontal-grouping';
+export * from './templates/scheduler-flex-vertical-grouping';

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

@@ -0,0 +1,25 @@
+import { classNames } from '../misc';
+
+const className = 'k-scheduler-body';
+
+export const SchedulerBody = (
+    props: React.HTMLAttributes<HTMLDivElement> & { as: 'div' }
+    | React.HTMLAttributes<HTMLTableRowElement> & { as: 'tr' }
+) => {
+    const {
+        as: Component = 'div',
+        ...other
+    } = props;
+
+    return (
+        <Component
+            {...other}
+            className={classNames(
+                className,
+                props.className
+            )}
+        >
+            {props.children}
+        </Component>
+    );
+};

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

@@ -0,0 +1,68 @@
+import { classNames } from '../misc';
+
+const className = 'k-scheduler-cell';
+
+const states = [];
+
+const options = {};
+
+const defaultOptions = {};
+
+export type KendoSchedulerCellProps = {
+    cellType?: string[];
+    allDay?: boolean;
+    text?: string;
+    colspan?: number;
+    rowspan?: number;
+}
+
+export const SchedulerCell = (
+    props: KendoSchedulerCellProps & (
+    | ( React.AllHTMLAttributes<HTMLDivElement> & { as: 'div' } )
+    | ( React.HTMLAttributes<HTMLTableCellElement> & { as: 'th' |'td' } )
+    )
+) => {
+    const {
+        cellType,
+        allDay,
+        text,
+        colspan,
+        rowspan,
+        as: Component = 'div',
+        ...other
+    } = props;
+
+    const textOrChildren = text ? text : props.children;
+
+    return (
+        <Component
+            {...other}
+            colSpan={colspan}
+            rowSpan={rowspan}
+            className={classNames(
+                className,
+                props.className,
+                {
+                    'k-scheduler-times-all-day': allDay,
+                },
+                cellType?.map((t) => ({
+                    [`k-${t}-cell`]: true,
+                }))
+            )}>
+            {!allDay && text ?
+                <span className="k-link k-nav-day">
+                    {textOrChildren}
+                </span>
+                :
+                textOrChildren
+            }
+        </Component>
+    );
+};
+
+SchedulerCell.states = states;
+SchedulerCell.options = options;
+SchedulerCell.defaultProps = defaultOptions;
+SchedulerCell.className = className;
+
+export default SchedulerCell;

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

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

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

@@ -0,0 +1,105 @@
+import { classNames, States, stateClassNames } from '../misc';
+import { Icon } from '../icon';
+
+const className = 'k-event';
+
+const states = [
+    States.hover,
+    States.focus,
+    States.selected
+];
+
+const options = {};
+
+const defaultProps = {
+    resizable: 'vertical',
+    eventPrefix: <Icon icon="arrow-rotate-cw" />,
+    eventSuffix: <><a href="#" className="k-link k-event-delete"><Icon icon="x" /></a></>
+} as const;
+
+export type KendoSchedulerEventProps = {
+    inverse?: boolean;
+    ongoing?: boolean;
+    multiDay?: boolean;
+    resizable?: "horizontal" | "vertical" | "none";
+    hover?: boolean;
+    focus?: boolean;
+    selected?: boolean;
+    eventPrefix?: JSX.Element | null;
+    eventSuffix?: JSX.Element | null;
+};
+
+export const SchedulerEvent = (
+    props: KendoSchedulerEventProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        inverse,
+        ongoing,
+        multiDay,
+        resizable = defaultProps.resizable,
+        hover,
+        focus,
+        selected,
+        eventPrefix = defaultProps.eventPrefix,
+        eventSuffix = defaultProps.eventSuffix,
+        ...others
+    } = props;
+
+    return (
+        <div
+            {...others}
+            className={classNames(
+                className,
+                props.className,
+                stateClassNames(className, {
+                    hover,
+                    focus,
+                    selected
+                }),
+                {
+                    'k-event-inverse': inverse,
+                    'k-event-ongoing': ongoing,
+                }
+            )}
+        >
+            <span className="k-event-actions">
+                {eventPrefix}
+            </span>
+            <div>
+                {props.children}
+            </div>
+            <span className="k-event-actions">
+                {eventSuffix}
+            </span>
+            {multiDay &&
+            <>
+                <span className="k-event-top-actions">
+                    <Icon icon="caret-alt-up" />
+                </span>
+                <span className="k-event-bottom-actions">
+                    <Icon icon="caret-alt-down" />
+                </span>
+            </>
+            }
+            {resizable === 'vertical' ?
+                <>
+                    <span className="k-resize-handle k-resize-n"></span>
+                    <span className="k-resize-handle k-resize-s"></span>
+                </> :
+                resizable === 'horizontal' &&
+                <>
+                    <span className="k-resize-handle k-resize-w"></span>
+                    <span className="k-resize-handle k-resize-e"></span>
+                </>
+            }
+        </div>
+    );
+};
+
+SchedulerEvent.states = states;
+SchedulerEvent.options = options;
+SchedulerEvent.defaultProps = defaultProps;
+SchedulerEvent.className = className;
+
+export default SchedulerEvent;

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

@@ -0,0 +1,47 @@
+import { classNames } from '../misc';
+
+const className = 'k-scheduler-group';
+
+const states = [];
+
+const options = {};
+
+const defaultProps = {
+    orientation: "horizontal"
+};
+
+export type KendoSchedulerGroupProps = {
+    orientation?: "horizontal" | "vertical";
+};
+
+export const SchedulerGroup = (
+    props: KendoSchedulerGroupProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        orientation = defaultProps.orientation,
+        ...other
+    } = props;
+
+    return (
+        <div
+            {...other}
+            className={classNames(
+                className,
+                props.className,
+                {
+                    'k-group-horizontal': orientation === 'horizontal',
+                }
+            )}
+        >
+            {props.children}
+        </div>
+    );
+};
+
+SchedulerGroup.states = states;
+SchedulerGroup.options = options;
+SchedulerGroup.defaultProps = defaultProps;
+SchedulerGroup.className = className;
+
+export default SchedulerGroup;