Calendar Premium Views

Author: FalkWolsky

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

@@ -20,6 +20,7 @@ import {
   CustomModal,
   jsonValueExposingStateControl,
   CalendarDeleteIcon,
+  jsonValueStateControl,
   Tooltip,
 } from "lowcoder-sdk";
 import { default as Form } from "antd/es/form";
@@ -54,13 +55,17 @@ import {
   slotLabelFormat,
   viewClassNames,
   FormWrapper,
+  resourcesDefaultData,
+  resourcesEventsDefaultData,
+  resourceTimeLineHeaderToolbar,
+  resourceTimeGridHeaderToolbar,
 } from "./calendarConstants";
 import dayjs from "dayjs";
 
-function filterViews() {}
-
 const childrenMap = {
   events: jsonValueExposingStateControl("events", defaultData),
+  resourcesEvents: jsonValueStateControl(resourcesEventsDefaultData),
+  resources: jsonValueStateControl(resourcesDefaultData),
   onEvent: ChangeEventHandlerControl,
 
   editable: withDefault(BoolControl, true),
@@ -70,15 +75,17 @@ const childrenMap = {
     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, ""),
+  licenceKey: withDefault(
+    StringControl,
+    "CC-Attribution-NonCommercial-NoDerivatives"
+  ),
 };
 
 let CalendarBasicComp = (function () {
@@ -103,7 +110,7 @@ let CalendarBasicComp = (function () {
       };
     });
 
-    const {
+    let {
       defaultDate,
       defaultFreeView,
       defaultPremiumView,
@@ -307,14 +314,28 @@ let CalendarBasicComp = (function () {
             }
             props.onEvent("change");
             form.resetFields();
-          });
+          }); //small change
         },
         onCancel: () => {
           form.resetFields();
         },
       });
     };
 
+    const toolBar = (defaultView: any) => {
+      switch (defaultView) {
+        case "resourceTimelineDay":
+          return resourceTimeLineHeaderToolbar;
+          break;
+        case "resourceTimeGridDay":
+          return resourceTimeGridHeaderToolbar;
+          break;
+        default:
+          return headerToolbar;
+          break;
+      }
+    };
+
     let initialDate = defaultDate;
     try {
       initialDate = new Date(defaultDate).toISOString();
@@ -338,7 +359,12 @@ let CalendarBasicComp = (function () {
       >
         <FullCalendar
           slotEventOverlap={false}
-          events={events}
+          events={
+            defaultView == "resourceTimelineDay" ||
+            defaultView == "resourceTimeGridDay"
+              ? props.resourcesEvents.value
+              : events
+          }
           expandRows={true}
           height={"100%"}
           locale={getCalendarLocale()}
@@ -354,7 +380,7 @@ let CalendarBasicComp = (function () {
             resourceTimeGridPlugin,
             adaptivePlugin,
           ]}
-          headerToolbar={headerToolbar}
+          headerToolbar={toolBar(defaultView)}
           moreLinkClick={(info) => {
             let left = 0;
             const ele = info.jsEvent.target as HTMLElement;
@@ -380,6 +406,12 @@ let CalendarBasicComp = (function () {
           buttonText={buttonText}
           schedulerLicenseKey={licenceKey}
           views={views}
+          resources={
+            defaultView == "resourceTimelineDay" ||
+            defaultView == "resourceTimeGridDay"
+              ? props.resources.value
+              : []
+          }
           eventClassNames={() => (!showEventTime ? "no-time" : "")}
           slotLabelFormat={slotLabelFormat}
           viewClassNames={viewClassNames}
@@ -429,7 +461,7 @@ let CalendarBasicComp = (function () {
               }
             });
             if (needChange) {
-              props.events.onChange(changeEvents);
+              // props.events.onChange(changeEvents);
               props.onEvent("change");
             }
           }}
@@ -439,11 +471,15 @@ let CalendarBasicComp = (function () {
   })
     .setPropertyViewFn((children) => {
       let licence = children.licenceKey.getView();
+
       return (
         <>
           <Section name={sectionNames.basic}>
             {children.events.propertyView({})}
           </Section>
+          <Section name="Resources">
+            {children.resources.propertyView({})}
+          </Section>
           <Section name={sectionNames.interaction}>
             {children.licenceKey.propertyView({
               label: trans("calendar.licence"),
@@ -511,4 +547,4 @@ CalendarBasicComp = class extends CalendarBasicComp {
 export const CalendarComp = withExposingConfigs(CalendarBasicComp, [
   new NameConfig("events", trans("calendar.events")),
   NameConfigHidden,
-]);
+]);

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

@@ -781,7 +781,6 @@ export enum ViewType {
   TIMEGRID = "timeGridDay",
 }
 
-
 export const DefaultWithPremiumViewOptions = [
   {
     label: trans("calendar.month"),
@@ -791,9 +790,13 @@ export const DefaultWithPremiumViewOptions = [
     label: trans("calendar.week"),
     value: "timeGridWeek",
   },
+  {
+    label: trans("calendar.resourceTimeGridDay"),
+    value: "resourceTimeGridDay",
+  },
   {
     label: trans("calendar.timeline"),
-    value: "resourceTimeline",
+    value: "resourceTimelineDay",
   },
   {
     label: trans("calendar.day"),
@@ -871,6 +874,52 @@ export const defaultData = [
     allDay: true,
   },
 ];
+export const resourcesEventsDefaultData = [
+  {
+    resourceId: "d",
+    title: "event 1",
+    start: dayjs().hour(10).minute(0).second(0).format(DATE_TIME_FORMAT),
+    end: dayjs().hour(17).minute(30).second(0).format(DATE_TIME_FORMAT),
+  },
+  {
+    resourceId: "b",
+    title: "event 5",
+    start: dayjs().hour(8).minute(0).second(0).format(DATE_TIME_FORMAT),
+    end: dayjs().hour(16).minute(30).second(0).format(DATE_TIME_FORMAT),
+  },
+  {
+    resourceId: "a",
+    title: "event 3",
+    start: dayjs().hour(12).minute(0).second(0).format(DATE_TIME_FORMAT),
+    end: dayjs().hour(21).minute(30).second(0).format(DATE_TIME_FORMAT),
+  },
+];
+
+export const resourcesDefaultData = [
+  {
+    id: "a",
+    title: "Auditorium A",
+  },
+  {
+    id: "b",
+    title: "Auditorium B",
+    eventColor: "green",
+  },
+  {
+    id: "d",
+    title: "Auditorium D",
+    children: [
+      {
+        id: "d1",
+        title: "Room D1",
+      },
+      {
+        id: "d2",
+        title: "Room D2",
+      },
+    ],
+  },
+];
 
 export const buttonText = {
   today: trans("calendar.today"),
@@ -886,6 +935,16 @@ export const headerToolbar = {
   right: "prev today next dayGridMonth,timeGridWeek,timeGridDay,listWeek",
 };
 
+export const resourceTimeLineHeaderToolbar = {
+  left: "title",
+  right:
+    "prev today next resourceTimelineMonth,resourceTimelineWeek,resourceTimelineDay",
+};
+export const resourceTimeGridHeaderToolbar = {
+  left: "title",
+  right: "prev today next",
+};
+
 const weekHeadContent = (info: DayHeaderContentArg) => {
   const text = info.text.split(" ");
   return {
@@ -943,4 +1002,4 @@ export const viewClassNames = (info: ViewContentArg) => {
     }
   }
   return className;
-};
+};

client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts

@@ -127,7 +127,8 @@ export const en = {
     week: "Week",
     day: "Day",
     list: "List",
-    timeline: "TimeLine", //added by fred
+    timeline: "Resource Timeline", //added by fred
+    resourceTimeGridDay: "Resource Grid", //added by fred
     monday: "Monday",
     tuesday: "Tuesday",
     wednesday: "Wednesday",

client/packages/lowcoder-comps/src/i18n/comps/locales/zh.ts

@@ -120,6 +120,8 @@ export const zh = {
         week: "周",
         day: "日",
         list: "列表",
+        timeline: "时间轴",
+        resourceTimeGridDay: "资源时间网格日",
         monday: "星期一",
         tuesday: "星期二",
         wednesday: "星期三",

client/packages/lowcoder-design/src/i18n/design/locales/en.ts

@@ -18,13 +18,14 @@ export const en = {
   },
   prop: {
     basic: "Basic",
+    resources: "Resources",
     interaction: "Interaction",
     advanced: "Advanced",
     validation: "Validation",
     layout: "Layout",
     labelStyle:"Label Style",
     style: "Style",
-    meetings : "Meeting Settings",
+    meetings: "Meeting Settings",
     data: "Data",
   },
   passwordInput: {

client/packages/lowcoder-design/src/i18n/design/locales/zh.ts

@@ -18,6 +18,7 @@ export const zh = {
     },
     prop: {
       basic: "基础",
+      resources: "资源",
       interaction: "交互",
       advanced: "高级",
       validation: "验证",