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 Down Expand 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 Down Expand 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 Down Expand 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 Down Expand 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