@progress/kendo-themes-html 14.4.1-dev.0 → 14.4.1-dev.1

package/src/citation/citation-popover.spec.tsx

@@ -15,13 +15,11 @@ export type KendoCitationPopoverProps = {
   pageIndex?: number;
   totalPages?: number;
   body?: React.JSX.Element;
-  currentView?: number;
 };
 
 const defaultOptions = {
-  currentView: 1,
   pageIndex: 1,
-  totalPages: 6,
+  totalPages: 2,
 };
 
 /**
@@ -30,20 +28,20 @@ const defaultOptions = {
  * @ux {Sliding views} Slides between page views using the --kendo-citation-popover-view-current CSS variable instead of unmounting content.
  */
 export const CitationPopover: KendoComponent<KendoCitationPopoverProps & React.HTMLAttributes<HTMLDivElement>> = (props: KendoCitationPopoverProps & React.HTMLAttributes<HTMLDivElement>) => {
-  const { body, currentView = defaultOptions.currentView, pageIndex = defaultOptions.pageIndex, totalPages = defaultOptions.totalPages, className, children, ...other } = props;
+  const { body, pageIndex = defaultOptions.pageIndex, totalPages = defaultOptions.totalPages, className, children, ...other } = props;
   return (
     <Popover
       {...other}
       className={classNames(className, CITATION_POPOVER_CLASSNAME)}
-      style={{ "--kendo-citation-popover-view-current": currentView } as React.CSSProperties}
+      style={{ "--kendo-citation-popover-view-current": pageIndex } as React.CSSProperties}
       title={
         <>
           <span className="k-citation-pages">
             {pageIndex}/{totalPages}
           </span>
           <ButtonGroup fillMode="flat">
-            <IconButton icon="arrow-left" fillMode="flat" size="small" aria-label="Previous" />
-            <IconButton icon="arrow-right" fillMode="flat" size="small" aria-label="Next" />
+            <IconButton className="k-group-start" icon="arrow-left" fillMode="flat" size="small" aria-label="Previous" disabled={pageIndex <= 1} />
+            <IconButton className="k-group-end" icon="arrow-right" fillMode="flat" size="small" aria-label="Next" disabled={pageIndex >= totalPages} />
           </ButtonGroup>
         </>
       }

package/src/citation/index.ts

@@ -1,4 +1,5 @@
 export * from './citation.spec';
 export * from './citation-popover.spec';
+export * from './citation-popover-view.spec';
 export * from './templates/citation-normal';
 export * from './templates/citation-opened';

package/src/citation/templates/citation-opened.tsx

@@ -1,5 +1,6 @@
 import Citation from "../citation.spec";
 import CitationPopover from "../citation-popover.spec";
+import CitationPopoverView from "../citation-popover-view.spec";
 
 export const CitationOpened = (props: any) => (
   <>
@@ -7,12 +8,8 @@ export const CitationOpened = (props: any) => (
     <CitationPopover
       body={
         <>
-          <div className="k-citation-popover-view">
-            <div>View 1</div>
-          </div>
-          <div className="k-citation-popover-view">
-            <div>View 2</div>
-          </div>
+          <CitationPopoverView title="View 1" />
+          <CitationPopoverView title="View 2" />
         </>
       }
     />

package/src/citation/tests/citation.tsx

@@ -1,10 +1,11 @@
 import { Citation } from "../citation.spec";
 import CitationPopover from "../citation-popover.spec";
-import Icon from "../../icon/icon.spec";
+import CitationPopoverView from "../citation-popover-view.spec";
 
 const styles = `
     .k-animation-container {
         position: relative;
+        width: 318px;
     }
 `;
 
@@ -16,34 +17,33 @@ export default () => (
         <p>Inline Citation</p>
         <div className="k-d-flex k-flex-wrap k-gap-2 k-align-items-center">
           <Citation domain="some-link.com" count={5} />
-          <Citation domain="some-link.com" count={5} selected />
+          <Citation domain="some-link.com" count={5} hover />
         </div>
       </section>
 
       <section>
         <p>Inline Citation + Popover</p>
         <p>
-          An inline citation component is an interactive UI element that embeds clickable reference badges, like [1] or source names, directly into text. <Citation domain="some-link.com" count={5} selected /> When users hover over or click these badges, the component displays full source details, such as titles, domains, URLs.
+          An inline citation component is an interactive UI element that embeds clickable reference badges, like [1] or source names, directly into text. <Citation domain="some-link.com" count={5} hover /> When users hover over or click these badges, the component displays full source details, such as titles, domains, URLs.
         </p>
         <CitationPopover
           body={
             <>
-              <div className="k-citation-popover-view">
-                <div className="k-font-weight-bold">Advances in Natural Language Processing</div>
-                <span className="k-color-subtle k-font-size-sm k-mt-2">A comprehensive study on the recent developments in natural language processing technologies and their...</span>
-                <a href="#" className="k-d-flex k-align-items-center k-font-size-sm k-mt-1 k-gap-1">
-                  <Icon icon="globe" />
-                  https://example.com/nlp-advances
-                </a>
-              </div>
-              <div className="k-citation-popover-view">
-                <div className="k-font-weight-bold">Advances in Natural Language Processing</div>
-                <span className="k-color-subtle k-font-size-sm k-mt-2">A comprehensive study on the recent developments in natural language processing technologies and their...</span>
-                <a href="#" className="k-d-flex k-align-items-center k-font-size-sm k-mt-1 k-gap-1">
-                  <Icon icon="globe" />
-                  https://example.com/nlp-advances
-                </a>
-              </div>
+              <CitationPopoverView title="Advances in Natural Language" body="A comprehensive study on the recent developments in natural language processing technologies" source="https://example.com/nlp-advances" />
+              <CitationPopoverView title="Advances in Natural Language" body="A comprehensive study on the recent developments in natural language processing technologies" source="https://example.com/nlp-advances" />
+            </>
+          }
+        />
+      </section>
+
+      <section>
+        <p>Inline Citation + Popover with long texts</p>
+        <CitationPopover
+          pageIndex={2}
+          body={
+            <>
+              <CitationPopoverView title="Advances in Natural Language Processing Long Long Long" body="A comprehensive study on the recent developments in natural language processing technologies and their long long long long long long long long long long long long long long long long long long long long long text" source="https://example.com/nlp-advances/long/long/long" />
+              <CitationPopoverView title="Advances in Natural Language Processing Long Long Long" body="A comprehensive study on the recent developments in natural language processing technologies and their long long long long long long long long long long long long long long long long long long long long long text" source="https://example.com/nlp-advances/long/long/long" />
             </>
           }
         />

package/src/datepicker/datepicker.spec.tsx

@@ -35,6 +35,7 @@ const options = {
 };
 
 const defaultOptions = {
+    showClearButton: true
 };
 
 export type KendoDatePickerOptions = {
@@ -48,6 +49,7 @@ export type KendoDatePickerProps = KendoDatePickerOptions & {
     suffix?: React.JSX.Element;
     value?: string;
     placeholder?: string;
+    showClearButton?: boolean;
     opened?: boolean;
     adaptive?: boolean;
     adaptiveSettings?: KendoActionSheetProps;
@@ -88,6 +90,7 @@ export const DatePicker: KendoComponent<KendoDatePickerProps & KendoDatePickerSt
         suffix,
         value,
         placeholder,
+        showClearButton = defaultOptions.showClearButton,
         hover,
         focus,
         valid,
@@ -143,11 +146,11 @@ export const DatePicker: KendoComponent<KendoDatePickerProps & KendoDatePickerSt
                 <InputLoadingIcon
                     loading={loading}
                     disabled={disabled} />
-                <InputClearValue
+                { showClearButton && <InputClearValue
                     loading={loading}
                     disabled={disabled}
                     readonly={readonly}
-                    value={value} />
+                    value={value} />}
                 <InputSuffix>{suffix}</InputSuffix>
                 <Button
                     className="k-input-button"

package/src/form/form-field.tsx

@@ -10,7 +10,7 @@ const states = [
 ];
 
 export type KendoFormFieldProps = {
-    label?: null | string;
+    label?: null | string | React.ReactNode;
     orientation?: string;
     optional?: boolean;
     editorId?: string;

package/src/form/form.spec.tsx

@@ -48,7 +48,8 @@ export const Form: KendoComponent<KendoFormProps & React.HTMLAttributes<HTMLDivE
         cols,
         gutters,
         tag = defaultOptions.tag,
-        children
+        children,
+        style
     } = props;
 
     const Tag = tag;
@@ -76,7 +77,8 @@ export const Form: KendoComponent<KendoFormProps & React.HTMLAttributes<HTMLDivE
                 )} style={{
                     ...(typeof gutters === 'string' && { gap: gutters }),
                     ...(typeof gutters === 'object' && gutters.rows && { rowGap: gutters.rows }),
-                    ...(typeof gutters === 'object' && gutters.cols && { columnGap: gutters.cols })
+                    ...(typeof gutters === 'object' && gutters.cols && { columnGap: gutters.cols }),
+                    ...style
                 }}>
                     {children}
                 </div>

package/src/grid/templates/grid-hierarchy.tsx

@@ -57,7 +57,7 @@ export const GridHierarchy = ({ containerClassName, ...other }: any) => (
                                     <TableTd className="k-detail-cell" role="gridcell" colspan={3}>
                                         <Grid _renderAriaRoot className="k-grid-no-scrollbar">
                                             <GridHeader>
-                                                <div className="k-grid-header-wrap">
+                                                <div className="k-grid-header-wrap" role="none">
                                                     <GridHeaderTable role="none">
                                                         <colgroup>
                                                             <col />

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

@@ -14,6 +14,7 @@ export type KendoSchedulerCellProps = {
     cellType?: string[];
     allDay?: boolean;
     text?: string;
+    dayText?: string;
     colspan?: number;
     rowspan?: number;
 }
@@ -28,6 +29,7 @@ export const SchedulerCell: KendoComponent<KendoSchedulerCellProps & ( | ( React
         cellType,
         allDay,
         text,
+        dayText,
         colspan,
         rowspan,
         as: Component = 'div',
@@ -54,12 +56,17 @@ export const SchedulerCell: KendoComponent<KendoSchedulerCellProps & ( | ( React
                     [`k-${t}-cell`]: true,
                 }))
             )}>
-            {!allDay && text ?
-                <span className="k-link k-nav-day">
-                    {textOrChildren}
-                </span>
-                :
-                textOrChildren
+            {dayText ?
+                <>
+                    <span className="k-scheduler-date-day">{dayText}</span>
+                    <span className="k-link k-nav-day" aria-label={`${dayText} ${text}`}>{text}</span>
+                </>
+                : !allDay && text ?
+                    <span className="k-link k-nav-day">
+                        {textOrChildren}
+                    </span>
+                    :
+                    textOrChildren
             }
         </Component>
     );

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

@@ -1,36 +1,37 @@
-import { classNames, States, stateClassNames } from '../misc';
-import { Icon } from '../icon';
+import { classNames, States, stateClassNames } from "../misc";
+import { Icon } from "../icon";
 
-import { KendoComponent } from '../_types/component';
-import { SCHEDULER_FOLDER_NAME, SCHEDULER_MODULE_NAME } from './constants';
-const className = 'k-event';
+import { KendoComponent } from "../_types/component";
+import { SCHEDULER_FOLDER_NAME, SCHEDULER_MODULE_NAME } from "./constants";
+const className = "k-event";
 
-const states = [
-    States.hover,
-    States.focus,
-    States.selected
-];
+const states = [States.hover, States.focus, States.selected];
 
 const options = {};
 
 const defaultOptions = {
-    resizable: 'vertical',
-    eventPrefix: <Icon icon="arrow-rotate-cw" />,
-    eventSuffix: <><a className="k-link k-event-delete" aria-label="Delete event"><Icon icon="x" /></a></>
+  resizable: "vertical",
 } as const;
 
 export type KendoSchedulerEventProps = {
-    inverse?: boolean;
-    ongoing?: boolean;
-    multiDay?: boolean;
-    resizable?: "horizontal" | "vertical" | "none";
-    hover?: boolean;
-    focus?: boolean;
-    selected?: boolean;
-    eventPrefix?: React.JSX.Element | null;
-    eventSuffix?: React.JSX.Element | null;
+  inverse?: boolean;
+  ongoing?: boolean;
+  multiDay?: boolean;
+  readonly?: boolean;
+  recurring?: "recurring" | "non-recurring";
+  resizable?: "horizontal" | "vertical" | "none";
+  hover?: boolean;
+  focus?: boolean;
+  selected?: boolean;
+  continuationRight?: boolean;
+  continuationLeft?: boolean;
+  continuationTop?: boolean;
+  continuationBottom?: boolean;
+  title?: string;
+  time?: string;
 };
 
+
 /**
  * @aria {role="button"} Indicating that the event element is interactive.
  * @aria {aria-label} Label containing the title, start, and end date of the appointment.
@@ -39,74 +40,93 @@ export type KendoSchedulerEventProps = {
  * @ux {Edit on click} Clicking the event opens an edit form.
  * @ux {Overflow indicator} A count badge shows when multiple events overlap in the same slot.
  */
-export const SchedulerEvent: KendoComponent<KendoSchedulerEventProps & React.HTMLAttributes<HTMLDivElement>> = (
-    props: KendoSchedulerEventProps &
-        React.HTMLAttributes<HTMLDivElement>
-) => {
-    const {
-        inverse,
-        ongoing,
-        multiDay,
-        resizable = defaultOptions.resizable,
-        hover,
-        focus,
-        selected,
-        eventPrefix = defaultOptions.eventPrefix,
-        eventSuffix = defaultOptions.eventSuffix,
-        ...others
-    } = props;
+export const SchedulerEvent: KendoComponent<KendoSchedulerEventProps & React.HTMLAttributes<HTMLDivElement>> = (props: KendoSchedulerEventProps & React.HTMLAttributes<HTMLDivElement>) => {
+  const { inverse, ongoing, readonly, title, time, recurring, resizable = defaultOptions.resizable, hover, focus, selected, continuationLeft, continuationRight, continuationTop, continuationBottom, ...others } = props;
 
-    return (
-        <div
-            {...others}
-            className={classNames(
-                className,
-                props.className,
-                stateClassNames(className, {
-                    hover,
-                    focus,
-                    selected
-                }),
-                {
-                    'k-event-inverse': inverse,
-                    'k-event-ongoing': ongoing,
-                }
+  return (
+    <div
+      {...others}
+      className={classNames(
+        className,
+        props.className,
+        stateClassNames(className, {
+          hover,
+          focus,
+          selected,
+        }),
+        {
+          "k-event-inverse": inverse,
+          "k-event-ongoing": ongoing,
+          "k-readonly": readonly,
+        },
+      )}
+      role="button"
+      aria-disabled={readonly || undefined}
+      aria-label={others["aria-label"] || "Event"}
+    >
+      {continuationLeft && (
+        <span className="k-event-continuation">
+          <Icon icon="chevron-left" />
+        </span>
+      )}
+      <div>
+        {continuationTop && (
+          <span className="k-event-continuation">
+            <Icon icon="chevron-up" />
+          </span>
+        )}
+        {title && <div className="k-event-template k-event-title">{title}</div>}
+        {time && (
+          <div className="k-event-template k-event-time">
+            {recurring === "recurring" && (
+              <span className="k-event-recurrence-icon">
+                <Icon size="small" icon="arrow-rotate-cw" />
+              </span>
+            )}
+            {recurring === "non-recurring" && (
+              <span className="k-event-recurrence-icon">
+                <Icon size="small" icon="arrows-no-repeat" />
+              </span>
             )}
-            role="button"
-            aria-label={others['aria-label'] || 'Event'}
-        >
-            <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="chevron-up" />
-                </span>
-                <span className="k-event-bottom-actions">
-                    <Icon icon="chevron-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>
-    );
+            {time}
+          </div>
+        )}
+        {continuationBottom && (
+          <span className="k-event-continuation">
+            <Icon icon="chevron-down" />
+          </span>
+        )}
+      </div>
+      {recurring === "recurring" && (
+        <span className="k-event-recurrence-icon">
+          <Icon icon="arrow-rotate-cw" />
+        </span>
+      )}
+      {recurring === "non-recurring" && (
+        <span className="k-event-recurrence-icon">
+          <Icon icon="arrows-no-repeat" />
+        </span>
+      )}
+      {continuationRight && (
+        <span className="k-event-continuation">
+          <Icon icon="chevron-right" />
+        </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;

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

@@ -1,5 +1,4 @@
 import { Button } from '../button';
-import { ButtonGroup } from '../button-group';
 import { classNames } from '../misc';
 import { SegmentedControl, SegmentedControlButton } from '../segmented-control';
 import { Toolbar, KendoToolbarProps } from '../toolbar';
@@ -25,6 +24,7 @@ export const SchedulerToolbar: KendoComponent<KendoSchedulerToolbarProps & React
     return (
         <Toolbar
             {...others}
+            fillMode="flat"
             className={classNames(
                 props.className,
                 {
@@ -35,16 +35,15 @@ export const SchedulerToolbar: KendoComponent<KendoSchedulerToolbarProps & React
         >
             {props.children ||
                 [
-                    <ButtonGroup key="nav" className="k-scheduler-navigation">
-                        <Button className="k-group-start">Today</Button>
-                        <Button icon="chevron-left" aria-label="Navigate to previous period"></Button>
-                        <Button className="k-group-end" icon="chevron-right" aria-label="Navigate to next period"></Button>
-                    </ButtonGroup>,
+                    <Button key="new-event" themeColor="primary" icon="plus" aria-label="Add new event">New Event</Button>,
+                    <Button key="prev" icon="chevron-left" fillMode="flat" aria-label="Navigate to previous period"></Button>,
+                    <Button key="next" icon="chevron-right" fillMode="flat" aria-label="Navigate to next period"></Button>,
                     <Button key="current" icon="calendar" className="k-nav-current" fillMode="flat" aria-live="polite">
-                        Monday, June 13, 2022
+                        13 June
                     </Button>,
+                    <Button key="today" fillMode="flat">Today</Button>,
                     <span key="spacer" className="k-spacer"></span>,
-                    <SegmentedControl key="views" thumbStyles={{ width: "15%", left: "2px" }} className="k-scheduler-views">
+                    <SegmentedControl thumbStyles={{width: "15%"}} key="views" className="k-scheduler-views">
                         <SegmentedControlButton selected>Day</SegmentedControlButton>
                         <SegmentedControlButton>Week</SegmentedControlButton>
                         <SegmentedControlButton>Month</SegmentedControlButton>

package/src/scheduler/scheduler.spec.tsx

@@ -22,11 +22,28 @@ export type KendoSchedulerProps = {
  * @aria {role="application"} Specifies the role of the component.
  * @aria {aria-label} Required as the previous navigation button contains only an icon (no text).
  * @aria {aria-label} Required as the next navigation button contains only an icon (no text).
+ * @aria {aria-label} Required for the "New Event" button. When collapsed to icon-only at narrow widths, this is the only accessible name.
+ * @aria {aria-label} Required as the Open calendar button contains only an icon (no text).
+ * @aria {aria-label} Required as the Create event button contains only an icon (no text).
+ * @aria {aria-live="polite"} The new date of the Scheduler view will be announced upon navigation to a new time span or view type.
  * @aria {role="group"} Follows SegmentedControl spec: sets the proper role for the group of view buttons.
  * @aria {aria-pressed} Follows SegmentedControl spec: specifies the current state of the view SegmentedControl. Only the selected button within the group will have this attribute set to true.
  * @aria {role="grid"} The main table of the Agenda view must indicate it is a Data Grid.
- * @aria {role="none"|\"presentation"} The <tbody> element must have its semantics removed.
- * @aria {role="none"|\"presentation"} All <table> elements within the Scheduler must have their semantic role removed.
+ * @aria {role="none"|"presentation"} The <tbody> element must have its semantics removed.
+ * @aria {role="none"|"presentation"} All <table> elements within the Scheduler must have their semantic role removed.
+ * @aria {role="button"} Indicating that the event element is interactive.
+ * @aria {aria-label} Label containing the title, start, and end date of the appointment.
+ * @aria {aria-disabled="true"} Read-only events cannot be edited or dragged; aria-disabled signals this to assistive technologies.
+ * @aria {aria-label} When the date cell shows a short day abbreviation and a date number separately, aria-label should combine both so the link has a descriptive accessible name.
+ * @aria {aria-label} The "N more" button text is ambiguous; aria-label should read "N more events" to clarify what the button reveals.
+ * @aria {role="list"} The tooltip events container acts as a list of event summaries.
+ * @aria {role="listitem"} Each tooltip event is a non-interactive list item.
+ * @aria {role="group"} Groups the day-of-week toggle buttons into a logical set.
+ * @aria {aria-label} Labels the weekday picker group (e.g. "Repeat on days").
+ * @aria {aria-label} Full day name for each abbreviated day button in the weekday picker (e.g. "Monday").
+ * @aria {aria-pressed} Indicates whether the day is currently selected in the weekday picker.
+ * @aria {tabindex} Roving tabindex: only one weekday picker button has tabindex="0", the rest have tabindex="-1".
+ * @aria {tabindex="0"} Scrollable non-agenda content must be focusable to ensure keyboard scrolling is available.
  * @ux {Multiple views} Switches between day, week, month, agenda, and timeline views.
  * @ux {View switcher} Views are accessible via a ButtonGroup or a DropDown in the toolbar.
  * @ux {Navigation} Previous and next buttons move to the adjacent time period.

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

@@ -1,5 +1,5 @@
-import { ButtonGroup } from '../../button-group';
 import { Button } from '../../button';
+import { ButtonGroup } from '../../button-group';
 import { SegmentedControl, SegmentedControlButton } from '../../segmented-control';
 import { Scheduler, SchedulerBody, SchedulerCell, SchedulerContent, SchedulerHead, SchedulerHeader, SchedulerTable, SchedulerToolbar } from '../index';
 import SchedulerTask from '../scheduler-task.spec';
@@ -11,22 +11,24 @@ export const SchedulerAgenda = ({ style, ...props }: any) => (
         view="agenda"
         toolbar={
             <SchedulerToolbar>
-                <ButtonGroup className="k-scheduler-navigation">
-                    <Button className="k-group-start">Today</Button>
-                    <Button icon="chevron-left" aria-label="Navigate to previous period"></Button>
-                    <Button className="k-group-end" icon="chevron-right" aria-label="Navigate to next period"></Button>
+                <Button themeColor="primary" icon="plus" aria-label="Add new event">New Event</Button>
+                <ButtonGroup fillMode="flat">
+                    <Button icon="chevron-left" fillMode="flat" aria-label="Navigate to previous period"></Button>
+                    <Button icon="chevron-right" fillMode="flat" aria-label="Navigate to next period"></Button>
                 </ButtonGroup>
                 <Button icon="calendar" className="k-nav-current" fillMode="flat" aria-live="polite">
-                    06/13/2022 - 06/20/2022
+                    24 June – 25 June
                 </Button>
+                <Button fillMode="flat">Today</Button>
                 <span className="k-spacer"></span>
-                <SegmentedControl thumbStyles={{ width: "22%", right: "2px" }} className="k-scheduler-views">
+                <SegmentedControl thumbStyles={{width: "22%", right: "0%"}} className="k-scheduler-views">
                     <SegmentedControlButton>Day</SegmentedControlButton>
                     <SegmentedControlButton>Week</SegmentedControlButton>
                     <SegmentedControlButton>Month</SegmentedControlButton>
                     <SegmentedControlButton>Timeline</SegmentedControlButton>
                     <SegmentedControlButton selected>Agenda</SegmentedControlButton>
                 </SegmentedControl>
+
             </SchedulerToolbar>
         }
         children={

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

@@ -22,7 +22,7 @@ export const SchedulerDay = ({ style, ...props }: any) => (
                             <SchedulerTimes>
                                 <SchedulerTable role="none">
                                     <tbody>
-                                        <tr style={{ height: "37px" }}>
+                                        <tr style={{ height: "55px" }}>
                                             <SchedulerCell as="th" />
                                         </tr>
                                         <tr style={{ height: "36px" }}>
@@ -37,7 +37,7 @@ export const SchedulerDay = ({ style, ...props }: any) => (
                                 <SchedulerTable>
                                     <tbody>
                                         <tr className="k-scheduler-date-group">
-                                            <SchedulerCell as="th" text="Mon 6/13" />
+                                            <SchedulerCell as="th" className="k-today" dayText="Mon" text="13" />
                                         </tr>
                                     </tbody>
                                 </SchedulerTable>
@@ -211,10 +211,7 @@ export const SchedulerDay = ({ style, ...props }: any) => (
 
                                     </tbody>
                                 </SchedulerTable>
-                                <SchedulerEvent 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>
+                                <SchedulerEvent style={{ top: "74px", height: "72px", width: "200px" }} title="Event Title" time="8:00 AM - 9:00 AM" />
                             </SchedulerContent>
                         </td>
                     </SchedulerBody>