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

package/src/scheduler/tests/scheduler-adaptive-edit-no-height.tsx

@@ -1,21 +1,27 @@
 import { Button } from '../../button';
 import { Icon } from '../../icon';
 
+const style = `
+    #test-area {
+        max-width: 1080px;
+    }
+`;
 
 export default () =>(
     <>
+        <style>{style}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-1">
 
             <section>
                 <div className="k-pane-wrapper">
                     <div className="k-pane">
-                        <div className="k-popup-edit-form k-scheduler-edit-form k-mobile-list k-view">
+                        <div className="k-popup-edit-form k-mobile-list k-view">
                             <div className="k-appbar k-appbar-primary">
-                                <Button className="k-header-cancel" fillMode="flat" icon="chevron-left"></Button>
+                                <Button className="k-header-cancel" fillMode="flat" icon="chevron-left" aria-label="Cancel"></Button>
                                 <span className="k-spacer"></span>
                                 <span>Event</span>
                                 <span className="k-spacer"></span>
-                                <Button className="k-header-done" fillMode="flat" icon="check"></Button>
+                                <Button className="k-header-done" fillMode="flat" icon="check" aria-label="Done"></Button>
                             </div>
                             <div className="k-stretched-view k-content">
                                 <ul className="k-listgroup k-listgroup-flush">

package/src/scheduler/tests/scheduler-adaptive-edit-time-zones.tsx

@@ -1,23 +1,29 @@
 import { Button } from '../../button';
 
+const style = `
+    #test-area {
+        max-width: 1080px;
+    }
+`;
 
 export default () =>(
     <>
+        <style>{style}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-1">
 
             <section>
                 <div className="k-pane-wrapper" style={{ height: "600px" }}>
                     <div className="k-pane">
-                        <div className="k-popup-edit-form k-scheduler-edit-form k-mobile-list k-view">
+                        <div className="k-popup-edit-form k-mobile-list k-view">
                             <div className="k-appbar k-appbar-primary">
-                                <Button className="k-header-cancel" fillMode="flat" icon="chevron-left"></Button>
+                                <Button className="k-header-cancel" fillMode="flat" icon="chevron-left" aria-label="Cancel"></Button>
                                 <span className="k-spacer"></span>
                                 <span>Time zones</span>
                                 <span className="k-spacer"></span>
-                                <Button className="k-header-done" fillMode="flat" icon="check"></Button>
+                                <Button className="k-header-done" fillMode="flat" icon="check" aria-label="Done"></Button>
                             </div>
                             <div className="k-stretched-view k-content">
-                                <div className="k-popup-edit-form k-scheduler-edit-form k-scheduler-timezones">
+                                <div className="k-popup-edit-form k-scheduler-timezones">
                                     <ul className="k-listgroup k-listgroup-flush">
                                         <li className="k-item k-listgroup-item">
                                             <label className="k-label k-listgroup-form-row">

package/src/scheduler/tests/scheduler-adaptive-edit.tsx

@@ -1,21 +1,27 @@
 import { Button } from '../../button';
 import { Icon } from '../../icon';
 
+const style = `
+    #test-area {
+        max-width: 1080px;
+    }
+`;
 
 export default () =>(
     <>
+        <style>{style}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-1">
 
             <section>
                 <div className="k-pane-wrapper" style={{ height: "600px" }}>
                     <div className="k-pane">
-                        <div className="k-popup-edit-form k-scheduler-edit-form k-mobile-list k-view">
+                        <div className="k-popup-edit-form k-mobile-list k-view">
                             <div className="k-appbar k-appbar-primary">
-                                <Button className="k-header-cancel" fillMode="flat" icon="chevron-left"></Button>
+                                <Button className="k-header-cancel" fillMode="flat" icon="chevron-left" aria-label="Cancel"></Button>
                                 <span className="k-spacer"></span>
                                 <span>Event</span>
                                 <span className="k-spacer"></span>
-                                <Button className="k-header-done" fillMode="flat" icon="check"></Button>
+                                <Button className="k-header-done" fillMode="flat" icon="check" aria-label="Done"></Button>
                             </div>
                             <div className="k-stretched-view k-content">
                                 <ul className="k-listgroup k-listgroup-flush">

package/src/scheduler/tests/scheduler-adaptive-month.tsx

@@ -1,11 +1,18 @@
 import { Button } from '../../button';
 import { ButtonGroup } from '../../button-group';
-import { Icon } from '../../icon';
+import MenuButton from '../../menu-button/menu-button.spec';
 import { Toolbar } from '../../toolbar';
+import { SchedulerEvent } from '..';
 
+const style = `
+    #test-area {
+        max-width: 1080px;
+    }
+`;
 
 export default () =>(
     <>
+        <style>{style}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-1">
 
             <div className="k-pane-wrapper">
@@ -13,25 +20,23 @@ export default () =>(
                     <div className="k-view">
                         <div className="k-stretched-view k-content">
                             <div id="scheduler" className="k-scheduler k-scheduler-mobile">
-                                <Toolbar className="k-scheduler-toolbar">
+                                <Toolbar className="k-scheduler-toolbar" aria-label="Scheduler toolbar">
                                     <ButtonGroup className="k-scheduler-tools">
-                                        <Button className="k-pdf k-group-start" icon="file-pdf"></Button>
-                                        <Button className="k-nav-calendar" icon="calendar"></Button>
-                                        <Button className="k-create-event k-group-end" icon="plus"></Button>
+                                        <Button className="k-pdf k-group-start" icon="file-pdf" aria-label="Export to PDF"></Button>
+                                        <Button className="k-nav-calendar" icon="calendar" aria-label="Open calendar"></Button>
+                                        <Button className="k-create-event k-group-end" icon="plus" aria-label="Create event"></Button>
                                     </ButtonGroup>
                                     <span className="k-spacer"></span>
-                                    <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown">
-                                        <option>Month</option>
-                                    </select>
+                                    <MenuButton fillMode="flat">Month</MenuButton>
                                 </Toolbar>
-                                <Toolbar className="k-scheduler-toolbar">
-                                    <Button className="k-nav-prev" icon="chevron-left"></Button>
+                                <Toolbar className="k-scheduler-toolbar" aria-label="Scheduler navigation">
+                                    <Button className="k-nav-prev" icon="chevron-left" aria-label="Navigate to previous period"></Button>
                                     <span className="k-spacer"></span>
-                                    <Button className="k-nav-current" fillMode="flat" >
-                                        June, 2013
+                                    <Button className="k-nav-current" fillMode="flat" aria-live="polite">
+                                        Jun 2013
                                     </Button>
                                     <span className="k-spacer"></span>
-                                    <Button className="k-nav-next" icon="chevron-right"></Button>
+                                    <Button className="k-nav-next" icon="chevron-right" aria-label="Navigate to next period"></Button>
                                 </Toolbar>
                                 <table className="k-scheduler-layout k-scheduler-monthview">
                                     <tbody>
@@ -118,23 +123,11 @@ export default () =>(
                                                         </tbody>
                                                     </table>
                                                     <div className="k-events-container" style={{ top: "97px", left: "140px", width: "140px" }}>
-                                                        <div style={{ backgroundColor: "#51a0ed", borderColor: "#51a0ed" }} className="k-event">
-                                                            <span className="k-event-actions"><Icon icon="arrow-rotate-cw"></Icon></span>
-                                                            <div><div className="k-event-template">Dance Practice</div></div>
-                                                            <span className="k-event-actions"></span>
-                                                        </div>
+                                                        <SchedulerEvent recurring="recurring" resizable="none" style={{ backgroundColor: "#51a0ed", borderColor: "#51a0ed" }} title="Dance Practice" />
                                                     </div>
                                                     <div className="k-events-container" style={{ top: "97px", left: "280px", width: "140px" }}>
-                                                        <div style={{ backgroundColor: "#f8a398", borderColor: "#f8a398" }} className="k-event">
-                                                            <span className="k-event-actions"></span>
-                                                            <div><div className="k-event-template">Breakfast at Starbucks</div></div>
-                                                            <span className="k-event-actions"></span>
-                                                        </div>
-                                                        <div style={{ backgroundColor: "#56ca85", borderColor: "#56ca85" }} className="k-event">
-                                                            <span className="k-event-actions"></span>
-                                                            <div><div className="k-event-template">Software updates</div></div>
-                                                            <span className="k-event-actions"></span>
-                                                        </div>
+                                                        <SchedulerEvent resizable="none" style={{ backgroundColor: "#f8a398", borderColor: "#f8a398" }} title="Breakfast at Starbucks" />
+                                                        <SchedulerEvent resizable="none" style={{ backgroundColor: "#56ca85", borderColor: "#56ca85" }} title="Software updates" />
                                                     </div>
                                                 </div>
                                             </td>

package/src/scheduler/tests/scheduler-agenda-view.tsx

@@ -1,7 +1,14 @@
 import { SchedulerAgenda, SchedulerFlexAgenda } from '../';
 
+const style = `
+    #test-area {
+        max-width: 1080px;
+    }
+`;
+
 export default () => (
     <>
+        <style>{style}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-1">
             <span>Scheduler Table Layout</span>
             <SchedulerAgenda />

package/src/scheduler/tests/scheduler-current-time-marker.tsx

@@ -3,22 +3,29 @@ import { ButtonGroup } from "../../button-group";
 import { SegmentedControl, SegmentedControlButton } from "../../segmented-control";
 import { Toolbar } from "../../toolbar";
 import { SchedulerBody, SchedulerCell, SchedulerContent, SchedulerEvent, SchedulerHead, SchedulerHeader, SchedulerTable, SchedulerTimeline, SchedulerTimes, SchedulerToolbar, SchedulerWeek } from "..";
-import { Icon } from "../../icon";
+
+const style = `
+    #test-area {
+        max-width: 1080px;
+    }
+`;
 
 export default () => (
     <>
+        <style>{style}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-1">
 
             <SchedulerWeek
                 toolbar={
                     <SchedulerToolbar>
-                        <ButtonGroup className="k-scheduler-navigation">
-                            <Button className="k-group-start">Today</Button>
-                            <Button icon="chevron-left"></Button>
-                            <Button className="k-group-end" icon="chevron-right"></Button>
+                        <Button themeColor="primary" icon="plus" aria-label="Add new event">New Event</Button>
+                        <Button fillMode="flat">Today</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" >
-                        Monday, June 10, 2013 - Friday, June 14, 2013
+                        <Button icon="calendar" className="k-nav-current" fillMode="flat" aria-live="polite">
+                            10 June – 14 June
                         </Button>
                         <span className="k-spacer"></span>
                         <SegmentedControl thumbStyles={{ width: "18%", left: "16%" }} className="k-scheduler-views">
@@ -45,7 +52,7 @@ export default () => (
                                     <SchedulerTimes>
                                         <SchedulerTable>
                                             <tbody>
-                                                <tr style={{ height: "37px" }}>
+                                                <tr style={{ height: "55px" }}>
                                                     <SchedulerCell as="th" />
                                                 </tr>
                                                 <tr style={{ height: "72px" }}>
@@ -60,11 +67,11 @@ export default () => (
                                         <SchedulerTable>
                                             <tbody>
                                                 <tr>
-                                                    <SchedulerCell as="th" text="Mon 6/10" colspan={1} />
-                                                    <SchedulerCell as="th" text="Tue 6/11" colspan={1} />
-                                                    <SchedulerCell as="th" text="Wed 6/12" colspan={1} />
-                                                    <SchedulerCell as="th" text="Thu 6/13" colspan={1} />
-                                                    <SchedulerCell as="th" text="Fri 6/14" colspan={1} />
+                                                    <SchedulerCell as="th" dayText="Mon" text="10" colspan={1} />
+                                                    <SchedulerCell as="th" dayText="Tue" text="11" colspan={1} />
+                                                    <SchedulerCell as="th" className="k-today" dayText="Wed" text="12" colspan={1} />
+                                                    <SchedulerCell as="th" dayText="Thu" text="13" colspan={1} />
+                                                    <SchedulerCell as="th" dayText="Fri" text="14" colspan={1} />
                                                 </tr>
                                             </tbody>
                                         </SchedulerTable>
@@ -80,21 +87,7 @@ export default () => (
                                                     </tr>
                                                 </tbody>
                                             </SchedulerTable>
-                                            <SchedulerEvent
-                                                resizable="horizontal"
-                                                eventPrefix={
-                                                    <Icon icon="chevron-left"></Icon>
-                                                }
-                                                eventSuffix={
-                                                    <>
-                                                        <a className="k-link k-event-delete"><Icon icon="x"></Icon></a>
-                                                        <Icon icon="chevron-right"></Icon>
-                                                    </>
-                                                }>
-                                                <div>
-                                                    <div className="k-event-template">Two Weeks in NZ</div>
-                                                </div>
-                                            </SchedulerEvent>
+                                            <SchedulerEvent resizable="horizontal" title="Two Weeks in NZ" />
                                         </div>
                                     </SchedulerHeader>
                                 </td>
@@ -468,13 +461,14 @@ export default () => (
                 toolbar={
                     <>
                         <SchedulerToolbar>
-                            <ButtonGroup className="k-scheduler-navigation">
-                                <Button className="k-group-start">Today</Button>
-                                <Button icon="chevron-left"></Button>
-                                <Button className="k-group-end" icon="chevron-right"></Button>
+                            <Button themeColor="primary" icon="plus" aria-label="Add new event">New Event</Button>
+                            <Button fillMode="flat">Today</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" >
-                        Monday, February 18, 2019
+                            <Button icon="calendar" className="k-nav-current" fillMode="flat" aria-live="polite">
+                                18 February
                             </Button>
                             <span className="k-spacer"></span>
                             <SegmentedControl thumbStyles={{ width: "23%", left: "54%" }} className="k-scheduler-views">

package/src/scheduler/tests/scheduler-day-view.tsx

@@ -1,7 +1,14 @@
 import { SchedulerDay, SchedulerFlexDay } from '../';
 
+const style = `
+    #test-area {
+        max-width: 1080px;
+    }
+`;
+
 export default () => (
     <>
+        <style>{style}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-1">
             <span>Scheduler Table Layout</span>
             <SchedulerDay />

package/src/scheduler/tests/scheduler-edit-event-dialog.tsx

@@ -0,0 +1,144 @@
+import { Button } from "../../button";
+import { Textbox } from "../../textbox";
+import { TimePicker } from "../../timepicker";
+import { Switch } from "../../switch";
+import { Dialog } from "../../dialog";
+import { Form, FormField } from "../../form";
+import { Icon } from "../../icon";
+import Textarea from "../../textarea/textarea.spec";
+import { DatePicker } from "../../datepicker";
+
+const style = `
+    #test-area {
+        gap: 32px;
+    }
+    .k-dialog-wrapper {
+        position: relative;
+        align-items: start;
+    }
+
+    .k-window {
+      position: relative;
+    }
+
+    .k-animation-container {
+     position: relative;
+    }
+`;
+
+export default () => (
+  <>
+    <style>{style}</style>
+    <div id="test-area" className="k-d-grid">
+      <section>
+        <span>Dialog - Edit Event</span>
+        <Dialog
+          modal={false}
+          title="Edit event"
+          actions={["x"]}
+          actionButtonsAlign="end"
+          actionButtons={
+            <>
+              <Button themeColor="primary" fillMode="flat" icon="trash">
+                Delete
+              </Button>
+              <Button>Cancel</Button>
+              <Button themeColor="primary">Save</Button>
+            </>
+          }
+          style={{ width: "650px" }}
+        >
+          <Form className="k-scheduler-edit-form" orientation="horizontal">
+            <FormField orientation="horizontal" label={<Icon size="xlarge" icon="right-double-quotes" />} editor={<Textbox showClearButton={false} value="Event Name" aria-label="Event title" />} />
+
+            <FormField
+              label={<Icon size="xlarge" icon="clock" />}
+              editor={
+                <div className="k-scheduler-datetime-section">
+                  <div className="k-scheduler-edit-form-row">
+                    <Switch checked={false} aria-label="All day" />
+                    <span>All day</span>
+                  </div>
+                  <div className="k-scheduler-datetime-grid">
+                    <div className="k-scheduler-edit-form-row">
+                      <DatePicker showClearButton={false} value="1/21/2021" aria-label="Start date" />
+                      <span className="k-scheduler-datetime-label">from</span>
+                      <TimePicker showClearButton={false} value="3:07 AM" aria-label="Start time" />
+                    </div>
+                    <Button className="k-col-span-2" title="Set Timezone" fillMode="flat" themeColor="primary" icon="globe">
+                      Time zone
+                    </Button>
+                    <div className="k-scheduler-edit-form-row">
+                      <DatePicker showClearButton={false} value="1/21/2021" aria-label="End date" />
+                      <span className="k-scheduler-datetime-label">to</span>
+                      <TimePicker showClearButton={false} value="3:07 AM" aria-label="End time" />
+                    </div>
+                  </div>
+                </div>
+              }
+            />
+
+            <FormField orientation="horizontal" label={<Icon size="xlarge" icon="comment" />} editor={<Textarea resize="y" placeholder="Add Description" aria-label="Description" />} />
+          </Form>
+        </Dialog>
+      </section>
+
+      <section>
+        <span>Dialog - Edit Series</span>
+        <Dialog
+          modal={false}
+          title="Edit event"
+          actions={["x"]}
+          actionButtonsAlign="end"
+          actionButtons={
+            <>
+              <Button themeColor="primary" fillMode="flat" icon="trash">
+                Delete
+              </Button>
+              <Button>Cancel</Button>
+              <Button themeColor="primary">Save</Button>
+            </>
+          }
+          style={{ width: "650px" }}
+        >
+          <Form className="k-scheduler-edit-form" orientation="horizontal">
+            <FormField orientation="horizontal" label={<Icon size="xlarge" icon="right-double-quotes" />} editor={<Textbox showClearButton={false} value="Event Name" aria-label="Event title" />} />
+
+            <FormField
+              label={<Icon size="xlarge" icon="clock" />}
+              editor={
+                <div className="k-scheduler-datetime-section">
+                  <div className="k-scheduler-edit-form-row">
+                    <Switch checked={false} aria-label="All day" />
+                    <span>All day</span>
+                  </div>
+                  <div className="k-scheduler-datetime-grid">
+                    <div className="k-scheduler-edit-form-row">
+                      <DatePicker showClearButton={false} value="1/21/2021" aria-label="Start date" />
+                      <span className="k-scheduler-datetime-label">from</span>
+                      <TimePicker showClearButton={false} value="3:07 AM" aria-label="Start time" />
+                    </div>
+                    <Button className="k-col-span-2" title="Set Timezone" fillMode="flat" themeColor="primary" icon="globe">
+                      Time zone
+                    </Button>
+                    <div className="k-scheduler-edit-form-row">
+                      <DatePicker showClearButton={false} value="1/21/2021" aria-label="End date" />
+                      <span className="k-scheduler-datetime-label">to</span>
+                      <TimePicker showClearButton={false} value="3:07 AM" aria-label="End time" />
+                    </div>
+                  </div>
+                  <div className="k-scheduler-edit-form-row">
+                    <Button fillMode="flat" icon="arrow-rotate-cw" themeColor="primary">
+                      Repeats every 2 days for 3 occurrences.
+                    </Button>
+                  </div>
+                </div>
+              }
+            />
+            <FormField orientation="horizontal" label={<Icon size="xlarge" icon="comment" />} editor={<Textarea resize="y" placeholder="Add Description" aria-label="Description" />} />
+          </Form>
+        </Dialog>
+      </section>
+    </div>
+  </>
+);

package/src/scheduler/tests/scheduler-events-popover.tsx

@@ -0,0 +1,122 @@
+import { NoData } from "../../nodata";
+import { Popover } from "../../popover";
+
+const style = `
+    #test-area {
+        max-width: 1080px;
+    }
+    /* reset position and visibility */
+    .k-animation-container,
+    .k-popup,
+    .k-popover {
+        position: relative;
+        overflow: visible;
+    }
+
+    /* reset display and align */
+    .k-animation-container {
+        display: inline-flex;
+        vertical-align: top;
+    }
+`;
+
+export default () => (
+  <>
+    <style>{style}</style>
+    <div id="test-area" className="k-d-grid k-grid-cols-3">
+      <span>Events List</span>
+      <span>Events List Long</span>
+      <span>No Data</span>
+
+      <section>
+        <Popover className="k-scheduler-popover" style={{ width: "220px" }} callout="left">
+          <div className="k-popover-header">
+            <div className="k-month">Jan</div>
+            <div className="k-link k-day">02</div>
+          </div>
+          <div className="k-popover-body">
+              <div className="k-popover-events" role="list" aria-label="Events">
+                <div className="k-popover-event k-event" role="listitem">
+                  <div className="k-event-title">Dance Practice</div>
+                  <span className="k-event-time">6:30 PM</span>
+                </div>
+                <div className="k-popover-event k-event" role="listitem">
+                  <div className="k-event-title">Helpdesk weekly meeting</div>
+                  <span className="k-event-time">12:30 PM</span>
+                </div>
+                <div className="k-popover-event k-event" role="listitem">
+                  <div className="k-event-title">Regular Appointment</div>
+                  <span className="k-event-time">13:30 PM</span>
+                </div>
+              </div>
+            </div>
+        </Popover>
+      </section>
+
+      <section>
+        <Popover className="k-scheduler-popover" style={{ width: "220px" }} callout="left">
+          <div className="k-popover-header">
+            <div className="k-month">Jan</div>
+            <div className="k-link k-day">02</div>
+          </div>
+          <div className="k-popover-body">
+              <div className="k-popover-events" role="list" aria-label="Events">
+                <div className="k-popover-event k-event" role="listitem">
+                  <div className="k-event-title">Dance Practice</div>
+                  <span className="k-event-time">6:30 PM</span>
+                </div>
+                <div className="k-popover-event k-event" role="listitem">
+                  <div className="k-event-title">Helpdesk weekly meeting</div>
+                  <span className="k-event-time">12:30 PM</span>
+                </div>
+                <div className="k-popover-event k-event" role="listitem">
+                  <div className="k-event-title">Regular Appointment</div>
+                  <span className="k-event-time">13:30 PM</span>
+                </div>
+                <div className="k-popover-event k-event" role="listitem">
+                  <div className="k-event-title">Dance Practice</div>
+                  <span className="k-event-time">6:30 PM</span>
+                </div>
+                <div className="k-popover-event k-event" role="listitem">
+                  <div className="k-event-title">Dance Practice</div>
+                  <span className="k-event-time">6:30 PM</span>
+                </div>
+                <div className="k-popover-event k-event" role="listitem">
+                  <div className="k-event-title">Dance Practice</div>
+                  <span className="k-event-time">6:30 PM</span>
+                </div>
+                <div className="k-popover-event k-event" role="listitem">
+                  <div className="k-event-title">Dance Practice</div>
+                  <span className="k-event-time">6:30 PM</span>
+                </div>
+                <div className="k-popover-event k-event" role="listitem">
+                  <div className="k-event-title">Dance Practice</div>
+                  <span className="k-event-time">6:30 PM</span>
+                </div>
+                <div className="k-popover-event k-event" role="listitem">
+                  <div className="k-event-title">Dance Practice</div>
+                  <span className="k-event-time">6:30 PM</span>
+                </div>
+                <div className="k-popover-event k-event" role="listitem">
+                  <div className="k-event-title">Dance Practice</div>
+                  <span className="k-event-time">6:30 PM</span>
+                </div>
+              </div>
+            </div>
+        </Popover>
+      </section>
+
+      <section>
+        <Popover className="k-scheduler-popover" style={{ width: "220px" }} callout="left">
+          <div className="k-popover-header">
+            <div className="k-month">Jan</div>
+            <div className="k-link k-day">29</div>
+          </div>
+          <div className="k-popover-body">
+            <NoData>No events on this date.</NoData>
+          </div>
+        </Popover>
+      </section>
+    </div>
+  </>
+);