Skip to content

Commit f02edcd

Browse files
MenamAfzalMenamAfzal
committed
style properties added
1 parent 66ac429 commit f02edcd

File tree

3 files changed

+93
-15
lines changed

3 files changed

+93
-15
lines changed

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

Lines changed: 52 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -159,13 +159,19 @@ let CalendarBasicComp = (function () {
159159
end: dayjs(item.end, DateParser).format(),
160160
allDay: item.allDay,
161161
resourceId: item.resourceId ? item.resourceId : null,
162-
color: isValidColor(item.color || "") ? item.color : theme?.theme?.primary,
163-
...(item.groupId ? { groupId: item.groupId } : {}),
162+
backgroundColor: item.backgroundColor,
163+
extendedProps: {
164+
color: isValidColor(item.color || "") ? item.color : theme?.theme?.primary,
165+
...(item.groupId ? { groupId: item.groupId } : {}), // Ensure color is in extendedProps
166+
description: item.description,
167+
titleColor:item.titleColor,
168+
descriptionColor:item.descriptionColor
169+
},
164170
};
165171
}) : [currentEvents.value];
166172

167-
const resources = props.resources.value;
168173

174+
const resources = props.resources.value;
169175
// list all plugins for Fullcalendar
170176
const plugins = [
171177
dayGridPlugin,
@@ -266,18 +272,23 @@ let CalendarBasicComp = (function () {
266272
(eventInfo.view.type as ViewType) !== ViewType.MONTH
267273
? "past"
268274
: "";
269-
270275
return (
271276
<Event
272277
className={`event ${sizeClass} ${stateClass}`}
273-
$bg={eventInfo.backgroundColor}
278+
$bg={eventInfo.event.extendedProps.color}
274279
theme={theme?.theme}
275280
$isList={isList}
276281
$allDay={Boolean(showAllDay)}
277282
$style={props.style}
283+
$backgroundColor={eventInfo.backgroundColor}
284+
$description={eventInfo.event.extendedProps.description}
285+
$titleColor={eventInfo.event.extendedProps.titleColor}
286+
$descriptionColor={eventInfo.event.extendedProps.descriptionColor}
287+
278288
>
279289
<div className="event-time">{eventInfo.timeText}</div>
280290
<div className="event-title">{eventInfo.event.title}</div>
291+
<div className="event-description">{eventInfo.event.extendedProps.description}</div>
281292
<Remove
282293
$isList={isList}
283294
className="event-remove"
@@ -308,12 +319,16 @@ let CalendarBasicComp = (function () {
308319
return;
309320
}
310321
if (event) {
311-
const { title, groupId, color, id } = event;
322+
const { title, groupId, color, id , backgroundColor,description,titleColor,descriptionColor} = event;
312323
const eventInfo = {
313324
title,
314325
groupId,
315326
color,
316327
id,
328+
backgroundColor,
329+
titleColor,
330+
description,
331+
descriptionColor,
317332
};
318333
showModal(eventInfo, true);
319334
} else {
@@ -387,9 +402,30 @@ let CalendarBasicComp = (function () {
387402
>
388403
<Input />
389404
</Form.Item>
405+
<Form.Item
406+
label={trans("calendar.eventDescription")}
407+
name="description"
408+
>
409+
<Input />
410+
</Form.Item>
411+
<Form.Item
412+
label={trans("calendar.eventTitleColor")}
413+
name="titleColor"
414+
>
415+
<Input />
416+
</Form.Item>
417+
<Form.Item
418+
label={trans("calendar.eventDescriptionColor")}
419+
name="descriptionColor"
420+
>
421+
<Input />
422+
</Form.Item>
390423
<Form.Item label={trans("calendar.eventColor")} name="color">
391424
<Input />
392425
</Form.Item>
426+
<Form.Item label={trans("calendar.eventBackgroundColor")} name="backgroundColor">
427+
<Input />
428+
</Form.Item>
393429
<Form.Item
394430
label={
395431
<Tooltip title={trans("calendar.groupIdTooltip")}>
@@ -405,7 +441,7 @@ let CalendarBasicComp = (function () {
405441
onConfirm: () => {
406442
form.submit();
407443
return form.validateFields().then(() => {
408-
const { id, groupId, color, title = "" } = form.getFieldsValue();
444+
const { id, groupId, color, title = "", backgroundColor,description,titleColor,descriptionColor } = form.getFieldsValue();
409445
const idExist = props.events.value.findIndex(
410446
(item: EventType) => item.id === id
411447
);
@@ -421,9 +457,13 @@ let CalendarBasicComp = (function () {
421457
return {
422458
...item,
423459
title,
460+
description,
424461
id,
425462
...(groupId !== undefined ? { groupId } : null),
426463
...(color !== undefined ? { color } : null),
464+
...(backgroundColor !== undefined ? { backgroundColor } : null),
465+
...(titleColor !== undefined ? { titleColor } : null),
466+
...(descriptionColor !== undefined ? { descriptionColor } : null),
427467
};
428468
} else {
429469
return item;
@@ -437,8 +477,12 @@ let CalendarBasicComp = (function () {
437477
end: event.end,
438478
id,
439479
title,
480+
description,
440481
...(groupId !== undefined ? { groupId } : null),
441482
...(color !== undefined ? { color } : null),
483+
...(backgroundColor !== undefined ? { backgroundColor } : null),
484+
...(titleColor !== undefined ? { titleColor } : null),
485+
...(descriptionColor !== undefined ? { descriptionColor } : null),
442486
};
443487
props.events.onChange([...props.events.value, createInfo]);
444488
}
@@ -779,4 +823,4 @@ let CalendarComp = withMethodExposing(TmpCalendarComp, [
779823
]);
780824

781825

782-
export { CalendarComp };
826+
export { CalendarComp };

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

Lines changed: 36 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -363,6 +363,7 @@ export const Wrapper = styled.div<{
363363
// event
364364
.fc-timegrid-event .fc-event-main {
365365
padding: 4px 0 4px 1px;
366+
366367
}
367368
.fc-event {
368369
position: relative;
@@ -658,6 +659,10 @@ export const Event = styled.div<{
658659
$isList: boolean;
659660
$allDay: boolean;
660661
$style: CalendarStyleType;
662+
$backgroundColor:string;
663+
$description:string;
664+
$titleColor:string;
665+
$descriptionColor:string;
661666
}>`
662667
height: 100%;
663668
width: 100%;
@@ -666,8 +671,7 @@ export const Event = styled.div<{
666671
box-shadow: ${(props) => !props.$isList && "0 0 5px 0 rgba(0, 0, 0, 0.15)"};
667672
border: 1px solid ${(props) => props.$style.border};
668673
display: ${(props) => props.$isList && "flex"};
669-
background-color: ${(props) =>
670-
!props.$isList && lightenColor(props.$style.background, 0.1)};
674+
background-color:${(props) => props.$backgroundColor};
671675
overflow: hidden;
672676
font-size: 13px;
673677
line-height: 19px;
@@ -697,19 +701,29 @@ export const Event = styled.div<{
697701
margin-top: 2px;
698702
}
699703
.event-title {
700-
color: ${(props) => !props.$isList && props.$style.text};
704+
color: ${(props) => props.$titleColor};
701705
font-weight: 500;
702706
margin-left: 15px;
703707
white-space: pre-wrap;
704708
word-break: break-word;
705709
}
710+
.event-description {
711+
color: ${(props) => props.$descriptionColor};
712+
font-weight: 500;
713+
margin-left: 15px;
714+
white-space: pre-wrap;
715+
word-break: break-word;
716+
margin-top: 2px;
717+
}
706718
707719
&.small {
708720
height: 20px;
709721
.event-time {
710722
display: none;
711723
}
712-
.event-title {
724+
.event-title,
725+
.event-description
726+
{
713727
text-overflow: ellipsis;
714728
overflow: hidden;
715729
white-space: nowrap;
@@ -718,7 +732,9 @@ export const Event = styled.div<{
718732
&.middle {
719733
padding-top: 2px;
720734
.event-time,
721-
.event-title {
735+
.event-title,
736+
.event-description
737+
{
722738
text-overflow: ellipsis;
723739
overflow: hidden;
724740
white-space: nowrap;
@@ -738,7 +754,9 @@ export const Event = styled.div<{
738754
}
739755
&::before,
740756
.event-title,
741-
.event-time {
757+
.event-time,
758+
.event-description
759+
{
742760
opacity: 0.35;
743761
}
744762
}
@@ -781,8 +799,12 @@ export type EventType = {
781799
end?: string;
782800
allDay?: boolean;
783801
color?: string;
802+
backgroundColor?:string;
784803
groupId?: string;
785804
value?: string;
805+
description?:string;
806+
titleColor?:string;
807+
descriptionColor?:string;
786808
};
787809

788810
export enum ViewType {
@@ -903,12 +925,19 @@ export const defaultData = [
903925
start: dayjs().hour(10).minute(0).second(0).format(DATE_TIME_FORMAT),
904926
end: dayjs().hour(12).minute(30).second(0).format(DATE_TIME_FORMAT),
905927
color: "#079968",
928+
backgroundColor:"purple",
929+
description: 'Discuss project milestones and deliverables.',
930+
titleColor:"black",
931+
descriptionColor:"black",
906932
},
907933
{
908934
id: "2",
909935
title: "Rest",
910936
start: dayjs().hour(24).format(DATE_FORMAT),
911937
end: dayjs().hour(48).format(DATE_FORMAT),
938+
backgroundColor:"purple",
939+
color: "#079968",
940+
titleColor:"white",
912941
allDay: true,
913942
},
914943
];
@@ -1056,4 +1085,4 @@ export const viewClassNames = (info: ViewContentArg) => {
10561085
}
10571086
}
10581087
return className;
1059-
};
1088+
};

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -316,6 +316,10 @@ export const en = {
316316
editEvent: "Edit Event",
317317
eventName: "Event Name",
318318
eventColor: "Event Color",
319+
eventBackgroundColor:"Background",
320+
eventDescription:"Description",
321+
eventTitleColor:"Title Color",
322+
eventDescriptionColor:"Description Color",
319323
eventGroupId: "Group ID",
320324
groupIdTooltip: "Group ID groups events for drag and resize together.",
321325
more: "More",
@@ -328,3 +332,4 @@ export const en = {
328332
dragDropEventHandlers: "Drag/Drop Event Handlers",
329333
},
330334
};
335+

0 commit comments

Comments
 (0)