Mar 4, 2024 · Feb 19, 2024 · Feb 21, 2024 · Feb 22, 2024 · Feb 23, 2024 · Feb 23, 2024
diff --git a/.vscode/settings.json b/.vscode/settings.json
 {
    "workbench.colorCustomizations": {
        "activityBar.background": "#2A3012",
        "titleBar.activeBackground": "#3B431A",
        "titleBar.activeForeground": "#F9FAF2"
    }
 }
diff --git a/client/packages/lowcoder-comps/package.json b/client/packages/lowcoder-comps/package.json
 {
  "name": "lowcoder-comps",
  "version": "0.0.24",
  "version": "0.0.26",
  "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",
diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx
 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";
 import { EventContentArg, DateSelectArg } from "@fullcalendar/core";
 import momentPlugin from "@fullcalendar/moment";
 import {
  DefaultViewOptions,
  DefaultWithFreeViewOptions,
  DefaultWithPremiumViewOptions,
  FirstDayOptions,
  Wrapper,
  Event,
 } 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 () {
        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,
      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) {
            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) => {
    };

    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({
                </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>
          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) {
    } catch (error) {
      initialDate = undefined;
    }
    let defaultView = defaultFreeView;
    if (licenceKey != "") {
      defaultView = defaultPremiumView;
    }

    return (
      <Wrapper
          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;
              }
            } 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}
          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;
    );
  })
    .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"),
              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"),
            })}
              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>
        </>
      );
    })
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,7 @@
		{
		"workbench.colorCustomizations": {
		"activityBar.background": "#2A3012",
		"titleBar.activeBackground": "#3B431A",
		"titleBar.activeForeground": "#F9FAF2"
		}
		}
Original file line number	Diff line number	Diff line change
		@@ -1,15 +1,19 @@
		{
		"name": "lowcoder-comps",
		"version": "0.0.24",
		"version": "0.0.26",
		"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",
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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";
Expand All		@@ -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,
Expand All		@@ -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 () {
Expand All		@@ -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,
Expand All		@@ -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) {
Expand DownExpand Up		@@ -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) => {
Expand DownExpand Up		@@ -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({
Expand All		@@ -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>
Expand All		@@ -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) {
Expand DownExpand Up		@@ -287,6 +321,10 @@ let CalendarBasicComp = (function () {
		} catch (error) {
		initialDate = undefined;
		}
		let defaultView = defaultFreeView;
		if (licenceKey != "") {
		defaultView = defaultPremiumView;
		}

		return (
		<Wrapper
Expand All		@@ -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;
Expand All		@@ -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}
Expand All		@@ -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;
Expand DownExpand Up		@@ -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"),
Expand All		@@ -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"),
		})}
Expand All		@@ -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>
		</>
		);
		})
Expand Down