chore(html): add multiview calendar with captions

Author: epetrow

packages/html/src/multiviewcalendar/templates/multiviewcalendar-century.tsx

@@ -1,11 +1,11 @@
 import { MultiViewCalendar } from "..";
 import { CalendarTable, CalendarTableRow, CalendarCell } from "../../calendar";
 
-export const MultiViewCalendarCentury = ({ showOtherCentury, ...props }: any) => (
+export const MultiViewCalendarCentury = ({ showCaptions ,showOtherCentury, ...props }: any) => (
     <MultiViewCalendar calendarView="century" calendarTitleText="1900 - 2099"
         children={
             <>
-                <CalendarTable>
+                <CalendarTable calendarCaption={showCaptions && "1900 - 1999"}>
                     <CalendarTableRow>
                         <CalendarCell text="1890 - 1899" empty={!showOtherCentury}/>
                         <CalendarCell text="1900 - 1909" />
@@ -25,7 +25,7 @@ export const MultiViewCalendarCentury = ({ showOtherCentury, ...props }: any) =>
                         <CalendarCell text="2000 - 2009" empty={!showOtherCentury} />
                     </CalendarTableRow>
                 </CalendarTable>
-                <CalendarTable>
+                <CalendarTable calendarCaption={showCaptions && "2000 - 2099"}>
                     <CalendarTableRow>
                         <CalendarCell text="1990 - 1999" empty={!showOtherCentury}/>
                         <CalendarCell text="2000 - 2009" />

packages/html/src/multiviewcalendar/templates/multiviewcalendar-decade.tsx

@@ -1,11 +1,11 @@
 import { MultiViewCalendar } from "..";
 import { CalendarTable, CalendarTableRow, CalendarCell } from "../../calendar";
 
-export const MultiViewCalendarDecade = ({ showOtherDecade, ...props }: any) => (
+export const MultiViewCalendarDecade = ({ showCaptions, showOtherDecade, ...props }: any) => (
     <MultiViewCalendar calendarView="decade" calendarTitleText="2020 - 2039"
         children={
             <>
-                <CalendarTable>
+                <CalendarTable calendarCaption={showCaptions && "2020 - 2029"}>
                     <CalendarTableRow>
                         <CalendarCell text="2019" empty={!showOtherDecade} />
                         <CalendarCell text="2020" />
@@ -25,7 +25,7 @@ export const MultiViewCalendarDecade = ({ showOtherDecade, ...props }: any) => (
                         <CalendarCell text="2030" empty={!showOtherDecade} />
                     </CalendarTableRow>
                 </CalendarTable>
-                <CalendarTable>
+                <CalendarTable calendarCaption={showCaptions && "2030 - 2039"}>
                     <CalendarTableRow>
                         <CalendarCell text="2029" empty={!showOtherDecade} />
                         <CalendarCell text="2030" />

packages/html/src/multiviewcalendar/templates/multiviewcalendar-with-weeks.tsx

@@ -1,11 +1,11 @@
 import { MultiViewCalendar } from "..";
 import { CalendarTable, CalendarTableRow, CalendarCell } from "../../calendar";
 
-export const MultiViewCalendarWithWeeks = ({ showOtherMonth, ...other }: any) => (
+export const MultiViewCalendarWithWeeks = ({ showCaptions, showOtherMonth, ...other }: any) => (
     <MultiViewCalendar calendarView="month" showWeek
         children={
             <>
-                <CalendarTable showTableHead showWeek>
+                <CalendarTable calendarCaption={showCaptions && "October 2021"} showTableHead showWeek>
                     <CalendarTableRow>
                         <CalendarCell text="39" weekCell />
                         <CalendarCell text="26" showOtherMonth={showOtherMonth} empty={!showOtherMonth} weekend={showOtherMonth} />
@@ -67,7 +67,7 @@ export const MultiViewCalendarWithWeeks = ({ showOtherMonth, ...other }: any) =>
                         <CalendarCell text="6" showOtherMonth={showOtherMonth} empty={!showOtherMonth} weekend={showOtherMonth} />
                     </CalendarTableRow>
                 </CalendarTable>
-                <CalendarTable showTableHead showWeek>
+                <CalendarTable calendarCaption={showCaptions && "November 2021"} showTableHead showWeek>
                     <CalendarTableRow>
                         <CalendarCell text="45" weekCell />
                         <CalendarCell text="31" showOtherMonth={showOtherMonth} empty={!showOtherMonth} weekend={showOtherMonth} />

packages/html/src/multiviewcalendar/templates/multiviewcalendar-year.tsx

@@ -1,11 +1,11 @@
 import { MultiViewCalendar } from "..";
 import { CalendarTable, CalendarTableRow, CalendarCell } from "../../calendar";
 
-export const MultiViewCalendarYear = (props: any) => (
+export const MultiViewCalendarYear = ({ showCaptions, ...props }: any) => (
     <MultiViewCalendar calendarView="year" calendarTitleText="2021"
         children={
             <>
-                <CalendarTable>
+                <CalendarTable calendarCaption={showCaptions && "2021"}>
                     <CalendarTableRow>
                         <CalendarCell text="Jan" />
                         <CalendarCell text="Feb" />
@@ -25,7 +25,7 @@ export const MultiViewCalendarYear = (props: any) => (
                         <CalendarCell text="Dec" />
                     </CalendarTableRow>
                 </CalendarTable>
-                <CalendarTable>
+                <CalendarTable calendarCaption={showCaptions && "2022"}>
                     <CalendarTableRow>
                         <CalendarCell text="Jan" />
                         <CalendarCell text="Feb" />

packages/html/src/multiviewcalendar/tests/multiviewcalendar-captions.tsx

@@ -0,0 +1,46 @@
+import { MultiViewCalendarNormal, MultiViewCalendarYear, MultiViewCalendarDecade, MultiViewCalendarCentury, MultiViewCalendarWithWeeks } from '../../multiviewcalendar';
+
+const styles = `
+    #test-area {
+        max-width: 1240px;
+    }
+`;
+
+export default () => (
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-2 k-gap-4">
+
+            <section>
+                <div>Month View</div>
+                <MultiViewCalendarNormal showCaptions />
+            </section>
+
+            <section>
+                <div>Month View with Week Numbers</div>
+                <MultiViewCalendarWithWeeks showCaptions  calendarTitleText="October 2021 - November 2021"/>
+            </section>
+
+            <section>
+                <div>Year View</div>
+                <MultiViewCalendarYear showCaptions />
+            </section>
+
+            <section>
+                <div>Decade View</div>
+                <MultiViewCalendarDecade showCaptions />
+            </section>
+
+            <section>
+                <div>Century View</div>
+                <MultiViewCalendarCentury showCaptions />
+            </section>
+
+            <section>
+                <div>With Footer</div>
+                <MultiViewCalendarNormal showCalendarFooter showCaptions />
+            </section>
+
+        </div>
+    </>
+);