Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit d3523c1

Browse files
added input format option in calendar comp
1 parent b9956bc commit d3523c1

File tree

2 files changed

+54
-8
lines changed

2 files changed

+54
-8
lines changed

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

Lines changed: 51 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,9 @@ import {
8484
} from "./calendarConstants";
8585
import { EventOptionControl } from "./eventOptionsControl";
8686
import { EventImpl } from "@fullcalendar/core/internal";
87+
import DatePicker from "antd/es/date-picker";
88+
89+
const DATE_TIME_FORMAT = "YYYY-MM-DD HH:mm:ss";
8790

8891
function fixOldData(oldData: any) {
8992
if(!Boolean(oldData)) return;
@@ -205,6 +208,7 @@ let childrenMap: any = {
205208
updatedEvents: stateComp<JSONObject>({}),
206209
insertedEvents: stateComp<JSONObject>({}),
207210
deletedEvents: stateComp<JSONObject>({}),
211+
inputFormat: withDefault(StringControl, DATE_TIME_FORMAT),
208212
};
209213

210214
// this should ensure backwards compatibility with older versions of the SDK
@@ -245,6 +249,7 @@ let CalendarBasicComp = (function () {
245249
modalStyle?:any;
246250
showVerticalScrollbar?:boolean;
247251
initialData: Array<EventType>;
252+
inputFormat: string;
248253
}, dispatch: any) => {
249254
const comp = useContext(EditorContext)?.getUICompByName(
250255
useContext(CompNameContext)
@@ -531,7 +536,14 @@ let CalendarBasicComp = (function () {
531536
const modalTitle = ifEdit
532537
? trans("calendar.editEvent")
533538
: trans("calendar.creatEvent");
534-
form && form.setFieldsValue(event);
539+
if (form) {
540+
const eventData = {
541+
...event,
542+
start: Boolean(event.start) ? dayjs(event.start, props.inputFormat): null,
543+
end: Boolean(event.end) ? dayjs(event.end, props.inputFormat): null,
544+
}
545+
form.setFieldsValue(eventData)
546+
}
535547
const eventId = editEvent.current?.id;
536548

537549
CustomModal.confirm({
@@ -589,13 +601,21 @@ let CalendarBasicComp = (function () {
589601
label={trans("calendar.eventStartTime")}
590602
name="start"
591603
>
592-
<Input />
604+
<DatePicker
605+
showTime
606+
format={props.inputFormat}
607+
popupStyle={{zIndex: 2050}}
608+
/>
593609
</Form.Item>
594610
<Form.Item
595611
label={trans("calendar.eventEndTime")}
596612
name="end"
597613
>
598-
<Input />
614+
<DatePicker
615+
showTime
616+
format={props.inputFormat}
617+
popupStyle={{zIndex: 2050}}
618+
/>
599619
</Form.Item>
600620
<Form.Item
601621
label={trans("calendar.eventAllDay")}
@@ -739,7 +759,11 @@ let CalendarBasicComp = (function () {
739759
animation,
740760
animationDelay,
741761
animationDuration,
742-
animationIterationCount } = form.getFieldsValue();
762+
animationIterationCount,
763+
start,
764+
end,
765+
allDay,
766+
} = form.getFieldsValue();
743767
const idExist = props.events.findIndex(
744768
(item: EventType) => item.id === id
745769
);
@@ -757,6 +781,9 @@ let CalendarBasicComp = (function () {
757781
label,
758782
detail,
759783
id,
784+
start: dayjs(start, DateParser).format(),
785+
end: dayjs(end, DateParser).format(),
786+
allDay,
760787
...(groupId !== undefined ? { groupId } : null),
761788
...(resourceId !== undefined ? { resourceId } : null),
762789
...(color !== undefined ? { color } : null),
@@ -779,9 +806,9 @@ let CalendarBasicComp = (function () {
779806
handleEventDataChange(changeEvents);
780807
} else {
781808
const createInfo = {
782-
allDay: event.allDay,
783-
start: event.start,
784-
end: event.end,
809+
allDay: allDay,
810+
start: dayjs(start,DateParser).format(),
811+
end: dayjs(end,DateParser).format(),
785812
id,
786813
label,
787814
detail,
@@ -1033,6 +1060,7 @@ let CalendarBasicComp = (function () {
10331060
modalStyle: { getPropertyView: () => any; };
10341061
licenseKey: { getView: () => any; propertyView: (arg0: { label: string; }) => any; };
10351062
showVerticalScrollbar: { propertyView: (arg0: { label: string; }) => any; };
1063+
inputFormat: { propertyView: (arg0: {}) => any; };
10361064
}) => {
10371065
const license = children.licenseKey.getView();
10381066

@@ -1072,6 +1100,22 @@ let CalendarBasicComp = (function () {
10721100
{children.eventMaxStack.propertyView({ label: trans("calendar.eventMaxStack"), tooltip: trans("calendar.eventMaxStackTooltip"), })}
10731101
</Section>
10741102
<Section name={sectionNames.layout}>
1103+
{children.inputFormat.propertyView({
1104+
label: trans("calendar.inputFormat"),
1105+
placeholder: DATE_TIME_FORMAT,
1106+
tooltip: (
1107+
<>
1108+
{trans("calendar.reference")} &nbsp;
1109+
<a
1110+
href={`https://day.js.org/docs/en/display/format`}
1111+
target={"_blank"}
1112+
rel="noreferrer"
1113+
>
1114+
dayjs format
1115+
</a>
1116+
</>
1117+
),
1118+
})}
10751119
{children.licenseKey.propertyView({ label: trans("calendar.license"), tooltip: trans("calendar.licenseTooltip"), })}
10761120
{license == ""
10771121
? children.currentFreeView.propertyView({ label: trans("calendar.defaultView"), tooltip: trans("calendar.defaultViewTooltip"), })

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -424,7 +424,9 @@ export const en = {
424424
animationDelay:"Delay",
425425
animationDuration:"Duration",
426426
animationIterationCount:"IterationCount",
427-
showVerticalScrollbar:"Show Vertical ScrollBar"
427+
showVerticalScrollbar:"Show Vertical ScrollBar",
428+
inputFormat: "Input Format",
429+
reference: "Please Refer to",
428430
},
429431
};
430432

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /