[WC-2791] Calendar complete rendering

packages/pluggableWidgets/calendar-web/src/Calendar.editorPreview.tsx

@@ -1,9 +1,12 @@
-import classNames from "classnames";
+import classnames from "classnames";
+import * as dateFns from "date-fns";
 import { ReactElement, createElement } from "react";
 import { Calendar, dateFnsLocalizer } from "react-big-calendar";
-import * as dateFns from "date-fns";
+import { CalendarPreviewProps } from "../typings/CalendarProps";
+import { CustomToolbar } from "./components/Toolbar";
 import "react-big-calendar/lib/css/react-big-calendar.css";
-import { CalendarPreviewProps } from "typings/CalendarProps";
+import { constructWrapperStyle, WrapperStyleProps } from "./utils/style-utils";
+import { eventPropGetter } from "./utils/calendar-utils";
 
 const localizer = dateFnsLocalizer({
     format: dateFns.format,
@@ -13,20 +16,70 @@ const localizer = dateFnsLocalizer({
     locales: {}
 });
 
-export function preview(_props: CalendarPreviewProps): ReactElement {
+const events = [
+    {
+        title: "Leave",
+        allDay: true,
+        start: new Date(new Date().setDate(new Date().getDate() - 15)),
+        end: new Date(new Date().setDate(new Date().getDate() - 7)),
+        guid: "",
+        color: ""
+    },
+    {
+        title: "Leave",
+        allDay: true,
+        start: new Date(new Date().setDate(new Date().getDate() - 9)),
+        end: new Date(new Date().setDate(new Date().getDate() - 5)),
+        guid: "",
+        color: "green"
+    },
+    {
+        title: "BD",
+        allDay: true,
+        start: new Date(),
+        end: new Date(),
+        guid: "",
+        color: "red"
+    },
+    {
+        title: "Bank Holiday",
+        allDay: true,
+        start: new Date(new Date().valueOf() + 6000 * 3600 * 24),
+        end: new Date(new Date().valueOf() + 9000 * 3600 * 24),
+        guid: "",
+        color: "grey"
+    },
+    {
+        title: "Bank Holiday",
+        allDay: true,
+        start: new Date(new Date().valueOf() + 4000 * 3600 * 24),
+        end: new Date(new Date().valueOf() + 8000 * 3600 * 24),
+        guid: "",
+        color: "purple"
+    },
+    {
+        title: "Leave",
+        allDay: true,
+        start: new Date(new Date().valueOf() + 10000 * 3600 * 24),
+        end: new Date(new Date().valueOf() + 14000 * 3600 * 24),
+        guid: "",
+        color: ""
+    }
+];
+
+export function preview(props: CalendarPreviewProps): ReactElement {
+    const { class: className } = props;
+    const wrapperStyle = constructWrapperStyle(props as WrapperStyleProps);
+
     return (
-        <div className={classNames("widget-events-preview")} style={{ minHeight: "250px" }}>
+        <div className={classnames("widget-events-preview", "widget-calendar", className)} style={wrapperStyle}>
             <Calendar
+                components={{ toolbar: CustomToolbar }}
+                defaultView={props.defaultView}
+                events={events}
                 localizer={localizer}
-                events={[
-                    {
-                        title: "My event",
-                        start: new Date(),
-                        end: new Date()
-                    }
-                ]}
-                startAccessor="start"
-                endAccessor="end"
+                views={["day", "week", "month"]}
+                eventPropGetter={eventPropGetter}
             />
         </div>
     );

packages/pluggableWidgets/calendar-web/src/Calendar.tsx

@@ -2,7 +2,8 @@ import classnames from "classnames";
 import { ReactElement, createElement } from "react";
 import { DnDCalendar, extractCalendarProps } from "./utils/calendar-utils";
 import { CalendarContainerProps } from "../typings/CalendarProps";
-import { constructWrapperStyle } from "./utils/utils";
+import { constructWrapperStyle } from "./utils/style-utils";
+import "./ui/Calendar.scss";
 
 export default function MxCalendar(props: CalendarContainerProps): ReactElement {
     const { class: className } = props;

packages/pluggableWidgets/calendar-web/src/Calendar.xml

@@ -173,7 +173,7 @@
                     <enumerationValue key="percentageOfView">Viewport</enumerationValue>
                 </enumerationValues>
             </property>
-            <property key="height" type="integer" defaultValue="250">
+            <property key="height" type="integer" defaultValue="580">
                 <caption>Height</caption>
                 <description />
             </property>

packages/pluggableWidgets/calendar-web/src/__tests__/__snapshots__/Calendar.spec.tsx.snap

@@ -13,54 +13,67 @@ exports[`Calendar renders correctly with basic props 1`] = `
           class="rbc-addons-dnd rbc-calendar"
         >
           <div
-            class="rbc-toolbar"
+            class="calendar-toolbar"
           >
-            <span
-              class="rbc-btn-group"
+            <div
+              class="align-left btn-group"
             >
               <button
+                class="btn btn-default"
                 type="button"
               >
-                Today
+                <span
+                  aria-hidden="true"
+                  class="glyphicon glyphicon-backward"
+                />
               </button>
               <button
+                class="btn btn-default"
                 type="button"
               >
-                Back
+                Today
               </button>
               <button
+                class="btn btn-default"
                 type="button"
               >
-                Next
+                <span
+                  aria-hidden="true"
+                  class="glyphicon glyphicon-forward"
+                />
               </button>
-            </span>
-            <span
-              class="rbc-toolbar-label"
+            </div>
+            <div
+              class="align-center btn-group"
             >
-              April 2025
-            </span>
-            <span
-              class="rbc-btn-group"
+              <span
+                class="calendar-label"
+              >
+                April 2025
+              </span>
+            </div>
+            <div
+              class="align-right btn-group"
             >
               <button
-                class="rbc-active"
+                class="btn btn-default"
                 type="button"
               >
-                Month
+                Day
               </button>
               <button
-                class=""
+                class="btn btn-default"
                 type="button"
               >
                 Week
               </button>
               <button
-                class=""
+                class="btn btn-default active"
                 type="button"
               >
-                Day
+                Month
               </button>
-            </span>
+            </div>
           </div>
           <div
             aria-label="Month View"
@@ -751,54 +764,67 @@ exports[`Calendar renders correctly with basic props 1`] = `
         class="rbc-addons-dnd rbc-calendar"
       >
         <div
-          class="rbc-toolbar"
+          class="calendar-toolbar"
         >
-          <span
-            class="rbc-btn-group"
+          <div
+            class="align-left btn-group"
           >
             <button
+              class="btn btn-default"
               type="button"
             >
-              Today
+              <span
+                aria-hidden="true"
+                class="glyphicon glyphicon-backward"
+              />
             </button>
             <button
+              class="btn btn-default"
               type="button"
             >
-              Back
+              Today
             </button>
             <button
+              class="btn btn-default"
               type="button"
             >
-              Next
+              <span
+                aria-hidden="true"
+                class="glyphicon glyphicon-forward"
+              />
             </button>
-          </span>
-          <span
-            class="rbc-toolbar-label"
+          </div>
+          <div
+            class="align-center btn-group"
           >
-            April 2025
-          </span>
-          <span
-            class="rbc-btn-group"
+            <span
+              class="calendar-label"
+            >
+              April 2025
+            </span>
+          </div>
+          <div
+            class="align-right btn-group"
           >
             <button
-              class="rbc-active"
+              class="btn btn-default"
               type="button"
             >
-              Month
+              Day
             </button>
             <button
-              class=""
+              class="btn btn-default"
               type="button"
             >
               Week
             </button>
             <button
-              class=""
+              class="btn btn-default active"
               type="button"
             >
-              Day
+              Month
             </button>
-          </span>
+          </div>
         </div>
         <div
           aria-label="Month View"

packages/pluggableWidgets/calendar-web/src/components/Toolbar.tsx

@@ -0,0 +1,43 @@
+import { Button } from "@mendix/widget-plugin-component-kit/Button";
+import { IconInternal } from "@mendix/widget-plugin-component-kit/IconInternal";
+import classNames from "classnames";
+import { createElement, ReactElement } from "react";
+import { Navigate, ToolbarProps } from "react-big-calendar";
+import "react-big-calendar/lib/css/react-big-calendar.css";
+
+export function CustomToolbar({ label, localizer, onNavigate, onView, view, views }: ToolbarProps): ReactElement {
+    return (
+        <div className="calendar-toolbar">
+            <div className="align-left btn-group">
+                <Button className="btn btn-default" onClick={() => onNavigate(Navigate.PREVIOUS)}>
+                    <IconInternal icon={{ type: "glyph", iconClass: "glyphicon-backward" }} />
+                </Button>
+                <Button className="btn btn-default" onClick={() => onNavigate(Navigate.TODAY)}>
+                    {localizer.messages.today}
+                </Button>
+                <Button className="btn btn-default" onClick={() => onNavigate(Navigate.NEXT)}>
+                    <IconInternal icon={{ type: "glyph", iconClass: "glyphicon-forward" }} />
+                </Button>
+            </div>
+
+            <div className="align-center btn-group">
+                <span className="calendar-label">{label}</span>
+            </div>
+
+            <div className="align-right btn-group">
+                {Array.isArray(views) &&
+                    views.map(name => {
+                        return (
+                            <Button
+                                key={name}
+                                onClick={() => onView(name)}
+                                className={classNames("btn", "btn-default", { active: view === name })}
+                            >
+                                {localizer.messages[name]}
+                            </Button>
+                        );
+                    })}
+            </div>
+        </div>
+    );
+}