Calendar Component - Bugfixes and Premium views

client/packages/lowcoder-comps/package.json

@@ -1,15 +1,19 @@
 {
   "name": "lowcoder-comps",
-  "version": "0.0.24",
+  "version": "0.0.25",
   "type": "module",
   "license": "MIT",
   "dependencies": {
+    "@fullcalendar/adaptive": "^6.1.11",
     "@fullcalendar/core": "^6.1.6",
     "@fullcalendar/daygrid": "^6.1.6",
     "@fullcalendar/interaction": "^6.1.6",
     "@fullcalendar/list": "^6.1.9",
     "@fullcalendar/moment": "^6.1.6",
     "@fullcalendar/react": "^6.1.6",
+    "@fullcalendar/resource": "^6.1.11",
+    "@fullcalendar/resource-timegrid": "^6.1.11",
+    "@fullcalendar/resource-timeline": "^6.1.11",
     "@fullcalendar/timegrid": "^6.1.6",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",

client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx

@@ -26,6 +26,10 @@ import { default as Form } from "antd/es/form";
 import { default as Input } from "antd/es/input";
 import { trans, getCalendarLocale } from "../../i18n/comps";
 import { createRef, useContext, useRef, useState } from "react";
+import resourceTimelinePlugin from "@fullcalendar/resource-timeline";
+import resourceTimeGridPlugin from "@fullcalendar/resource-timegrid";
+import adaptivePlugin from "@fullcalendar/adaptive";
+
 import FullCalendar from "@fullcalendar/react";
 import dayGridPlugin from "@fullcalendar/daygrid";
 import timeGridPlugin from "@fullcalendar/timegrid";
@@ -35,7 +39,8 @@ import allLocales from "@fullcalendar/core/locales-all";
 import { EventContentArg, DateSelectArg } from "@fullcalendar/core";
 import momentPlugin from "@fullcalendar/moment";
 import {
-  DefaultViewOptions,
+  DefaultWithFreeViewOptions,
+  DefaultWithPremiumViewOptions,
   FirstDayOptions,
   Wrapper,
   Event,
@@ -52,20 +57,28 @@ import {
 } from "./calendarConstants";
 import dayjs from "dayjs";
 
+function filterViews() {}
+
 const childrenMap = {
   events: jsonValueExposingStateControl("events", defaultData),
   onEvent: ChangeEventHandlerControl,
 
   editable: withDefault(BoolControl, true),
   defaultDate: withDefault(StringControl, "{{ new Date() }}"),
-  defaultView: dropdownControl(DefaultViewOptions, "timeGridWeek"),
+  defaultFreeView: dropdownControl(DefaultWithFreeViewOptions, "timeGridWeek"),
+  defaultPremiumView: dropdownControl(
+    DefaultWithPremiumViewOptions,
+    "timeGridWeek"
+  ),
+
   firstDay: dropdownControl(FirstDayOptions, "1"),
   showEventTime: withDefault(BoolControl, true),
   showWeekends: withDefault(BoolControl, true),
   showAllDay: withDefault(BoolControl, true),
   dayMaxEvents: withDefault(NumberControl, 2),
   eventMaxStack: withDefault(NumberControl, 0),
   style: styleControl(CalendarStyle),
+  licenceKey: withDefault(StringControl, ""),
 };
 
 let CalendarBasicComp = (function () {
@@ -83,14 +96,17 @@ let CalendarBasicComp = (function () {
         start: dayjs(item.start, DateParser).format(),
         end: dayjs(item.end, DateParser).format(),
         allDay: item.allDay,
-        color: isValidColor(item.color || "") ? item.color : theme?.theme?.primary,
+        color: isValidColor(item.color || "")
+          ? item.color
+          : theme?.theme?.primary,
         ...(item.groupId ? { groupId: item.groupId } : null),
       };
     });
 
     const {
       defaultDate,
-      defaultView,
+      defaultFreeView,
+      defaultPremiumView,
       showEventTime,
       showWeekends,
       showAllDay,
@@ -99,13 +115,19 @@ let CalendarBasicComp = (function () {
       style,
       firstDay,
       editable,
+      licenceKey,
     } = props;
 
     function renderEventContent(eventInfo: EventContentArg) {
       const isList = eventInfo.view.type === "listWeek";
       let sizeClass = "";
-      if ([ViewType.WEEK, ViewType.DAY].includes(eventInfo.view.type as ViewType)) {
-        const duration = dayjs(eventInfo.event.end).diff(dayjs(eventInfo.event.start), "minutes");
+      if (
+        [ViewType.WEEK, ViewType.DAY].includes(eventInfo.view.type as ViewType)
+      ) {
+        const duration = dayjs(eventInfo.event.end).diff(
+          dayjs(eventInfo.event.start),
+          "minutes"
+        );
         if (duration <= 30 || eventInfo.event.allDay) {
           sizeClass = "small";
         } else if (duration <= 60) {
@@ -137,7 +159,9 @@ let CalendarBasicComp = (function () {
             onClick={(e) => {
               e.stopPropagation();
               props.onEvent("change");
-              const event = events.filter((item: EventType) => item.id !== eventInfo.event.id);
+              const event = events.filter(
+                (item: EventType) => item.id !== eventInfo.event.id
+              );
               props.events.onChange(event);
             }}
             onMouseDown={(e) => {
@@ -195,7 +219,9 @@ let CalendarBasicComp = (function () {
     };
 
     const showModal = (event: EventType, ifEdit: boolean) => {
-      const modalTitle = ifEdit ? trans("calendar.editEvent") : trans("calendar.creatEvent");
+      const modalTitle = ifEdit
+        ? trans("calendar.editEvent")
+        : trans("calendar.creatEvent");
       form && form.setFieldsValue(event);
       const eventId = editEvent.current?.id;
       CustomModal.confirm({
@@ -209,14 +235,18 @@ let CalendarBasicComp = (function () {
                 </Tooltip>
               }
               name="id"
-              rules={[{ required: true, message: trans("calendar.eventIdRequire") }]}
+              rules={[
+                { required: true, message: trans("calendar.eventIdRequire") },
+              ]}
             >
               <Input />
             </Form.Item>
             <Form.Item
               label={trans("calendar.eventName")}
               name="title"
-              rules={[{ required: true, message: trans("calendar.eventNameRequire") }]}
+              rules={[
+                { required: true, message: trans("calendar.eventNameRequire") },
+              ]}
             >
               <Input />
             </Form.Item>
@@ -239,9 +269,13 @@ let CalendarBasicComp = (function () {
           form.submit();
           return form.validateFields().then(() => {
             const { id, groupId, color, title = "" } = form.getFieldsValue();
-            const idExist = props.events.value.findIndex((item: EventType) => item.id === id);
+            const idExist = props.events.value.findIndex(
+              (item: EventType) => item.id === id
+            );
             if (idExist > -1 && id !== eventId) {
-              form.setFields([{ name: "id", errors: [trans("calendar.eventIdExist")] }]);
+              form.setFields([
+                { name: "id", errors: [trans("calendar.eventIdExist")] },
+              ]);
               throw new Error();
             }
             if (ifEdit) {
@@ -287,6 +321,10 @@ let CalendarBasicComp = (function () {
     } catch (error) {
       initialDate = undefined;
     }
+    let defaultView = defaultFreeView;
+    if (licenceKey != "") {
+      defaultView = defaultPremiumView;
+    }
 
     return (
       <Wrapper
@@ -306,7 +344,16 @@ let CalendarBasicComp = (function () {
           locale={getCalendarLocale()}
           locales={allLocales}
           firstDay={Number(firstDay)}
-          plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin, momentPlugin]}
+          plugins={[
+            dayGridPlugin,
+            timeGridPlugin,
+            interactionPlugin,
+            listPlugin,
+            momentPlugin,
+            resourceTimelinePlugin,
+            resourceTimeGridPlugin,
+            adaptivePlugin,
+          ]}
           headerToolbar={headerToolbar}
           moreLinkClick={(info) => {
             let left = 0;
@@ -319,15 +366,19 @@ let CalendarBasicComp = (function () {
               }
             } else {
               if (info.allDay) {
-                left = ele.offsetParent?.parentElement?.parentElement?.offsetLeft || 0;
+                left =
+                  ele.offsetParent?.parentElement?.parentElement?.offsetLeft ||
+                  0;
               } else {
                 left =
-                  ele.offsetParent?.parentElement?.parentElement?.parentElement?.offsetLeft || 0;
+                  ele.offsetParent?.parentElement?.parentElement?.parentElement
+                    ?.offsetLeft || 0;
               }
             }
             setLeft(left);
           }}
           buttonText={buttonText}
+          schedulerLicenseKey={licenceKey}
           views={views}
           eventClassNames={() => (!showEventTime ? "no-time" : "")}
           slotLabelFormat={slotLabelFormat}
@@ -346,7 +397,9 @@ let CalendarBasicComp = (function () {
           eventContent={renderEventContent}
           select={(info) => handleCreate(info)}
           eventClick={(info) => {
-            const event = events.find((item: EventType) => item.id === info.event.id);
+            const event = events.find(
+              (item: EventType) => item.id === info.event.id
+            );
             editEvent.current = event;
             setTimeout(() => {
               editEvent.current = undefined;
@@ -385,10 +438,18 @@ let CalendarBasicComp = (function () {
     );
   })
     .setPropertyViewFn((children) => {
+      let licence = children.licenceKey.getView();
       return (
         <>
-          <Section name={sectionNames.basic}>{children.events.propertyView({})}</Section>
-          <Section name={sectionNames.interaction}>{children.onEvent.getPropertyView()}</Section>
+          <Section name={sectionNames.basic}>
+            {children.events.propertyView({})}
+          </Section>
+          <Section name={sectionNames.interaction}>
+            {children.licenceKey.propertyView({
+              label: trans("calendar.licence"),
+            })}
+            {children.onEvent.getPropertyView()}
+          </Section>
           <Section name={sectionNames.advanced}>
             {children.editable.propertyView({
               label: trans("calendar.editable"),
@@ -397,10 +458,15 @@ let CalendarBasicComp = (function () {
               label: trans("calendar.defaultDate"),
               tooltip: trans("calendar.defaultDateTooltip"),
             })}
-            {children.defaultView.propertyView({
-              label: trans("calendar.defaultView"),
-              tooltip: trans("calendar.defaultViewTooltip"),
-            })}
+            {licence == ""
+              ? children.defaultFreeView.propertyView({
+                  label: trans("calendar.defaultView"),
+                  tooltip: trans("calendar.defaultViewTooltip"),
+                })
+              : children.defaultPremiumView.propertyView({
+                  label: trans("calendar.defaultView"),
+                  tooltip: trans("calendar.defaultViewTooltip"),
+                })}
             {children.firstDay.propertyView({
               label: trans("calendar.startWeek"),
             })}
@@ -424,8 +490,12 @@ let CalendarBasicComp = (function () {
               tooltip: trans("calendar.eventMaxStackTooltip"),
             })}
           </Section>
-          <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
-          <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
+          <Section name={sectionNames.layout}>
+            {hiddenPropertyView(children)}
+          </Section>
+          <Section name={sectionNames.style}>
+            {children.style.getPropertyView()}
+          </Section>
         </>
       );
     })