Skip to content

Commit a8ad381

Browse files
gjulivangjulivan
committed
chore: update calendar based on feedbacks, allow custom view selection
1 parent c4ccb3b commit a8ad381

File tree

6 files changed

+136
-79
lines changed

6 files changed

+136
-79
lines changed

‎packages/modules/calendar/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@mendix/calendar",
33
"moduleName": "Calendar module",
4-
"version": "1.0.0",
4+
"version": "2.0.0",
55
"copyright": "© Mendix Technology BV 2025. All rights reserved.",
66
"license": "Apache-2.0",
77
"private": true,
@@ -20,7 +20,8 @@
2020
"moduleFolderNameInModeler": "calendar",
2121
"marketplace": {
2222
"minimumMXVersion": "10.22.0.68245",
23-
"appName": "Calendar"
23+
"appName": "Calendar",
24+
"appNumber": 107954
2425
},
2526
"testProject": {
2627
"githubUrl": "https://github.com/mendix/testProjects",

‎packages/pluggableWidgets/calendar-web/src/Calendar.editorConfig.ts‎

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,26 @@ import { CalendarPreviewProps } from "../typings/CalendarProps";
1010
import IconSVGDark from "./assets/StructureCalendarDark.svg";
1111
import IconSVG from "./assets/StructureCalendarLight.svg";
1212

13+
const CUSTOM_VIEW_CONFIG: Array<keyof CalendarPreviewProps> = [
14+
"customViewShowDay",
15+
"customViewShowWeek",
16+
"customViewShowMonth",
17+
"customViewShowAgenda",
18+
"customViewShowCustomWeek",
19+
"customViewCaption",
20+
"defaultViewCustom"
21+
];
22+
23+
const CUSTOM_VIEW_DAYS_CONFIG: Array<keyof CalendarPreviewProps> = [
24+
"customViewShowMonday",
25+
"customViewShowTuesday",
26+
"customViewShowWednesday",
27+
"customViewShowThursday",
28+
"customViewShowFriday",
29+
"customViewShowSaturday",
30+
"customViewShowSunday"
31+
];
32+
1333
export function getProperties(values: CalendarPreviewProps, defaultProperties: Properties): Properties {
1434
if (values.heightUnit === "percentageOfWidth") {
1535
hidePropertyIn(defaultProperties, values, "height");
@@ -33,19 +53,13 @@ export function getProperties(values: CalendarPreviewProps, defaultProperties: P
3353

3454
// Hide custom week range properties when the view is set to 'standard'
3555
if (values.view === "standard") {
36-
hidePropertiesIn(defaultProperties, values, [
37-
"defaultViewCustom",
38-
"customViewShowSunday",
39-
"customViewShowMonday",
40-
"customViewShowTuesday",
41-
"customViewShowWednesday",
42-
"customViewShowThursday",
43-
"customViewShowFriday",
44-
"customViewShowSaturday",
45-
"customViewCaption"
46-
]);
56+
hidePropertiesIn(defaultProperties, values, [...CUSTOM_VIEW_CONFIG, ...CUSTOM_VIEW_DAYS_CONFIG]);
4757
} else {
4858
hidePropertyIn(defaultProperties, values, "defaultViewStandard");
59+
60+
if (values.customViewShowCustomWeek === false) {
61+
hidePropertiesIn(defaultProperties, values, ["customViewCaption", ...CUSTOM_VIEW_DAYS_CONFIG]);
62+
}
4963
}
5064

5165
// Show/hide title properties based on selection

‎packages/pluggableWidgets/calendar-web/src/Calendar.xml‎

Lines changed: 57 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -61,58 +61,54 @@
6161
<attributeType name="String" />
6262
</attributeTypes>
6363
</property>
64+
<property key="startDateAttribute" type="attribute" dataSource="databaseDataSource" required="false">
65+
<caption>Start date attribute</caption>
66+
<description>The start date that should be shown in the view</description>
67+
<attributeTypes>
68+
<attributeType name="DateTime" />
69+
</attributeTypes>
70+
</property>
6471
</propertyGroup>
6572
</propertyGroup>
66-
<propertyGroup caption="Customization">
73+
<propertyGroup caption="View">
6774
<propertyGroup caption="Options">
75+
<property key="editable" type="expression" defaultValue="true">
76+
<caption>Editable</caption>
77+
<description />
78+
<returnType type="Boolean" />
79+
</property>
6880
<property key="view" type="enumeration" defaultValue="standard">
6981
<caption>View</caption>
7082
<description>Standard has day, week and month</description>
7183
<enumerationValues>
7284
<enumerationValue key="standard">Standard</enumerationValue>
73-
<enumerationValue key="custom">Custom work-week</enumerationValue>
85+
<enumerationValue key="custom">Custom</enumerationValue>
7486
</enumerationValues>
7587
</property>
76-
<property key="editable" type="expression" defaultValue="true">
77-
<caption>Editable</caption>
78-
<description />
79-
<returnType type="Boolean" />
80-
</property>
81-
<property key="enableCreate" type="expression" defaultValue="true">
82-
<caption>Enable create</caption>
83-
<description />
84-
<returnType type="Boolean" />
85-
</property>
86-
<property key="showEventDate" type="boolean" defaultValue="true">
87-
<caption>Show event date range</caption>
88-
<description>Show the start and end date of the event</description>
89-
</property>
90-
<property key="defaultViewCustom" type="enumeration" defaultValue="month">
88+
<property key="defaultViewStandard" type="enumeration" defaultValue="month">
9189
<caption>Initial selected view</caption>
9290
<description>The default view showed when the calendar is loaded</description>
9391
<enumerationValues>
9492
<enumerationValue key="day">Day</enumerationValue>
9593
<enumerationValue key="week">Week</enumerationValue>
9694
<enumerationValue key="month">Month</enumerationValue>
97-
<enumerationValue key="work_week">Custom</enumerationValue>
98-
<enumerationValue key="agenda">Agenda</enumerationValue>
9995
</enumerationValues>
10096
</property>
101-
<property key="defaultViewStandard" type="enumeration" defaultValue="month">
97+
<property key="defaultViewCustom" type="enumeration" defaultValue="month">
10298
<caption>Initial selected view</caption>
10399
<description>The default view showed when the calendar is loaded</description>
104100
<enumerationValues>
105101
<enumerationValue key="day">Day</enumerationValue>
106102
<enumerationValue key="week">Week</enumerationValue>
107103
<enumerationValue key="month">Month</enumerationValue>
104+
<enumerationValue key="work_week">Custom</enumerationValue>
105+
<enumerationValue key="agenda">Agenda</enumerationValue>
108106
</enumerationValues>
109107
</property>
110-
<property key="startDateAttribute" type="attribute" required="false">
111-
<caption>Start date attribute</caption>
112-
<description>The start date that should be shown in the view</description>
113-
<attributeTypes>
114-
<attributeType name="DateTime" />
115-
</attributeTypes>
108+
<property key="showEventDate" type="expression" defaultValue="true">
109+
<caption>Show event date range</caption>
110+
<description>Show the start and end date of the event</description>
111+
<returnType type="Boolean" />
116112
</property>
117113
<property key="timeFormat" type="textTemplate" required="false">
118114
<caption>Time format</caption>
@@ -126,6 +122,26 @@
126122
<caption>Day end hour</caption>
127123
<description>The hour at which the day view ends (1–24)</description>
128124
</property>
125+
<property key="showAllEvents" type="boolean" defaultValue="true">
126+
<caption>Show all events</caption>
127+
<description>Auto-adjust calendar height to display all events without "more" links</description>
128+
</property>
129+
</propertyGroup>
130+
</propertyGroup>
131+
<propertyGroup caption="Custom view">
132+
<propertyGroup caption="Visible views">
133+
<property key="customViewShowDay" type="boolean" defaultValue="true">
134+
<caption>Day</caption>
135+
<description>Show day view in the toolbar</description>
136+
</property>
137+
<property key="customViewShowWeek" type="boolean" defaultValue="true">
138+
<caption>Week</caption>
139+
<description>Show week view in the toolbar</description>
140+
</property>
141+
<property key="customViewShowCustomWeek" type="boolean" defaultValue="false">
142+
<caption>Custom Work Week</caption>
143+
<description>Show custom week view in the toolbar</description>
144+
</property>
129145
<!-- Custom week caption -->
130146
<property key="customViewCaption" type="textTemplate" required="false">
131147
<caption>Custom view caption</caption>
@@ -134,39 +150,43 @@
134150
<translation lang="en_US">Custom</translation>
135151
</translations>
136152
</property>
137-
<property key="showAllEvents" type="boolean" defaultValue="true">
138-
<caption>Show all events</caption>
139-
<description>Auto-adjust calendar height to display all events without "more" links</description>
153+
<property key="customViewShowMonth" type="boolean" defaultValue="true">
154+
<caption>Month</caption>
155+
<description>Show month view in the toolbar</description>
156+
</property>
157+
<property key="customViewShowAgenda" type="boolean" defaultValue="false">
158+
<caption>Agenda</caption>
159+
<description>Show agenda view in the toolbar</description>
140160
</property>
141161
</propertyGroup>
142-
<propertyGroup caption="Visible days">
162+
<propertyGroup caption="Custom view visible days">
143163
<property key="customViewShowMonday" type="boolean" defaultValue="true">
144164
<caption>Monday</caption>
145-
<description>Show Monday in the custom work-week view</description>
165+
<description>Show Monday in the custom week view</description>
146166
</property>
147167
<property key="customViewShowTuesday" type="boolean" defaultValue="true">
148168
<caption>Tuesday</caption>
149-
<description>Show Tuesday in the custom work-week view</description>
169+
<description>Show Tuesday in the custom week view</description>
150170
</property>
151171
<property key="customViewShowWednesday" type="boolean" defaultValue="true">
152172
<caption>Wednesday</caption>
153-
<description>Show Wednesday in the custom work-week view</description>
173+
<description>Show Wednesday in the custom week view</description>
154174
</property>
155175
<property key="customViewShowThursday" type="boolean" defaultValue="true">
156176
<caption>Thursday</caption>
157-
<description>Show Thursday in the custom work-week view</description>
177+
<description>Show Thursday in the custom week view</description>
158178
</property>
159179
<property key="customViewShowFriday" type="boolean" defaultValue="true">
160180
<caption>Friday</caption>
161-
<description>Show Friday in the custom work-week view</description>
181+
<description>Show Friday in the custom week view</description>
162182
</property>
163183
<property key="customViewShowSaturday" type="boolean" defaultValue="false">
164184
<caption>Saturday</caption>
165-
<description>Show Saturday in the custom work-week view</description>
185+
<description>Show Saturday in the custom week view</description>
166186
</property>
167187
<property key="customViewShowSunday" type="boolean" defaultValue="false">
168188
<caption>Sunday</caption>
169-
<description>Show Sunday in the custom work-week view</description>
189+
<description>Show Sunday in the custom week view</description>
170190
</property>
171191
</propertyGroup>
172192
</propertyGroup>

‎packages/pluggableWidgets/calendar-web/src/helpers/CalendarPropsBuilder.ts‎

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -26,22 +26,15 @@ export class CalendarPropsBuilder {
2626
}
2727

2828
updateProps(props: CalendarContainerProps): void {
29+
// Update the props object, skipping props that are static (on construction only)
2930
this.props = props;
30-
this.isCustomView = props.view === "custom";
31-
this.defaultView = this.isCustomView ? props.defaultViewCustom : props.defaultViewStandard;
3231
this.customCaption = props.customViewCaption?.value ?? "Custom";
33-
this.visibleDays = this.buildVisibleDays();
3432
this.events = this.buildEvents(props.databaseDataSource?.items ?? []);
35-
this.minTime = this.buildTime(props.minHour ?? 0);
36-
this.maxTime = this.buildTime(props.maxHour ?? 24);
3733
}
3834

3935
build(): DragAndDropCalendarProps<CalendarEvent> {
40-
const CustomWeek = CustomWeekController.getComponent(this.visibleDays);
4136
const formats = this.buildFormats();
42-
const views: ViewsProps<CalendarEvent> = this.isCustomView
43-
? { day: true, week: true, month: true, work_week: CustomWeek, agenda: true }
44-
: { day: true, week: true, month: true };
37+
const views = this.buildVisibleViews();
4538

4639
return {
4740
components: {
@@ -55,7 +48,7 @@ export class CalendarPropsBuilder {
5548
formats,
5649
localizer,
5750
resizable: this.props.editable.value ?? true,
58-
selectable: this.props.enableCreate.value ?? true,
51+
selectable: this.props.editable.value ?? true,
5952
views,
6053
allDayAccessor: (event: CalendarEvent) => event.allDay,
6154
endAccessor: (event: CalendarEvent) => event.end,
@@ -99,7 +92,7 @@ export class CalendarPropsBuilder {
9992
private buildFormats(): Formats {
10093
const formats: Formats = {};
10194

102-
if (this.props.showEventDate === false) {
95+
if (this.props.showEventDate?.value === false) {
10396
formats.eventTimeRangeFormat = () => "";
10497
}
10598

@@ -152,4 +145,25 @@ export class CalendarPropsBuilder {
152145

153146
return new Set(visibleDays);
154147
}
148+
149+
private buildVisibleViews(): ViewsProps<CalendarEvent> {
150+
if (this.isCustomView) {
151+
const {
152+
customViewShowDay,
153+
customViewShowWeek,
154+
customViewShowMonth,
155+
customViewShowAgenda,
156+
customViewShowCustomWeek
157+
} = this.props;
158+
return {
159+
day: customViewShowDay,
160+
week: customViewShowWeek,
161+
work_week: customViewShowCustomWeek ? CustomWeekController.getComponent(this.visibleDays) : false,
162+
month: customViewShowMonth,
163+
agenda: customViewShowAgenda
164+
};
165+
} else {
166+
return { day: true, week: true, month: true };
167+
}
168+
}
155169
}

‎packages/pluggableWidgets/calendar-web/src/helpers/useCalendarEvents.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ type CalendarEventHandlers = Pick<
1313
};
1414

1515
export function useCalendarEvents(props: CalendarContainerProps): CalendarEventHandlers {
16-
const { onEditEvent, onCreateEvent, enableCreate, onDragDropResize, onViewRangeChange } = props;
16+
const { onEditEvent, onCreateEvent, onDragDropResize, onViewRangeChange, editable } = props;
1717
const clickRef = useRef<NodeJS.Timeout | null>(null);
1818
const [selected, setSelected] = useState<CalendarEvent | null>(null);
1919

@@ -73,7 +73,7 @@ export function useCalendarEvents(props: CalendarContainerProps): CalendarEventH
7373
(slotInfo: { start: Date; end: Date; action: string }) => {
7474
const action = onCreateEvent;
7575

76-
if (action?.canExecute && enableCreate) {
76+
if (action?.canExecute && editable?.value === true) {
7777
// is all day : if the difference between start and end is a multiple of 24 hours
7878
const isAllday =
7979
((slotInfo.end.getTime() - slotInfo.start.getTime()) / (24 * 60 * 60 * 1000)) % 1 === 0;
@@ -84,7 +84,7 @@ export function useCalendarEvents(props: CalendarContainerProps): CalendarEventH
8484
});
8585
}
8686
},
87-
[onCreateEvent, enableCreate]
87+
[onCreateEvent, editable]
8888
);
8989

9090
const handleEventDropOrResize = useCallback(

0 commit comments

Comments
 (0)