Change multiday fullDay Event behaviour (#3396)

Hey!

This PR should change the behaviour of starting fullDay events that last
several days. The goal was to change the behavior of the "Starting
today, ends T" (T=Tomorrow) event, so it should show how many days it
will occur from the first day on

Before situation:

a fullDay event that started 'today' and ends several days later showed
Today on the first day. The rest of the days it showed X days left.


![grafik](https://github.com/MagicMirrorOrg/MagicMirror/assets/6515818/da4e06cf-3122-44d9-b78a-88f9970c57d4)

Y => Yesterday
T => Tomorrow


Target situation with this commit:
a fullDay event that started 'today' shows 'X days left' from the first
day on and 'Today' on the last day.


![grafik](https://github.com/MagicMirrorOrg/MagicMirror/assets/6515818/c42b9a27-35cf-47b7-9a8f-937a6009f904)

---------

Co-authored-by: Veeck <github@veeck.de>

CHANGELOG.md

@@ -28,6 +28,7 @@ _This release is scheduled to be released on 2024-04-01._
 - [chore] Update dependencies including electron to v29 (#3357) and node-ical
 - Updated translations for estonian (#3371)
 - Update electron to v29 and update other dependencies
+- [calendar] fullDay events over several days now show the left days from the first day on and 'today' on the last day
 - Updated layout of current weather indoor values
 
 ### Fixed

modules/default/calendar/calendar.js

@@ -204,6 +204,11 @@ Module.register("calendar", {
 		this.updateDom(this.config.animationSpeed);
 	},
 
+	eventEndingWithinNextFullTimeUnit (event, ONE_DAY) {
+		const now = new Date();
+		return event.endDate - now <= ONE_DAY;
+	},
+
 	// Override dom generator.
 	getDom () {
 		const ONE_SECOND = 1000; // 1,000 milliseconds
@@ -438,7 +443,7 @@ Module.register("calendar", {
 					}
 				} else {
 					// Show relative times
-					if (event.startDate >= now || (event.fullDayEvent && event.today)) {
+					if (event.startDate >= now || (event.fullDayEvent && this.eventEndingWithinNextFullTimeUnit(event, ONE_DAY))) {
 						// Use relative time
 						if (!this.config.hideTime && !event.fullDayEvent) {
 							timeWrapper.innerHTML = CalendarUtils.capFirst(moment(event.startDate, "x").calendar(null, { sameElse: this.config.dateFormat }));
@@ -454,7 +459,7 @@ Module.register("calendar", {
 						}
 						if (event.fullDayEvent) {
 							// Full days events within the next two days
-							if (event.today) {
+							if (event.today || (event.fullDayEvent && this.eventEndingWithinNextFullTimeUnit(event, ONE_DAY))) {
 								timeWrapper.innerHTML = CalendarUtils.capFirst(this.translate("TODAY"));
 							} else if (event.dayBeforeYesterday) {
 								if (this.translate("DAYBEFOREYESTERDAY") !== "DAYBEFOREYESTERDAY") {

tests/configs/modules/calendar/long-fullday-event.js

@@ -0,0 +1,28 @@
+/* MagicMirror² Test config for fullday calendar entries over multiple days
+ *
+ * By Paranoid93 https://github.com/Paranoid93/
+ * MIT Licensed.
+ */
+let config = {
+	timeFormat: 12,
+
+	modules: [
+		{
+			module: "calendar",
+			position: "bottom_bar",
+			config: {
+				calendars: [
+					{
+						maximumNumberOfDays: 2,
+						url: "http://localhost:8080/tests/mocks/calendar_test_multi_day_starting_today.ics"
+					}
+				]
+			}
+		}
+	]
+};
+
+/*************** DO NOT EDIT THE LINE BELOW ***************/
+if (typeof module !== "undefined") {
+	module.exports = config;
+}

tests/configs/modules/calendar/single-fullday-event.js

@@ -0,0 +1,28 @@
+/* MagicMirror² Test config for fullday calendar entries over multiple days
+ *
+ * By Paranoid93 https://github.com/Paranoid93/
+ * MIT Licensed.
+ */
+let config = {
+	timeFormat: 12,
+
+	modules: [
+		{
+			module: "calendar",
+			position: "bottom_bar",
+			config: {
+				calendars: [
+					{
+						maximumNumberOfDays: 2,
+						url: "http://localhost:8080/tests/mocks/calendar_test_full_day_events.ics"
+					}
+				]
+			}
+		}
+	]
+};
+
+/*************** DO NOT EDIT THE LINE BELOW ***************/
+if (typeof module !== "undefined") {
+	module.exports = config;
+}

tests/e2e/modules/calendar_spec.js

@@ -99,6 +99,37 @@ describe("Calendar module", () => {
 		});
 	});
 
+	//Will contain everyday an fullDayEvent that starts today and ends tomorrow, and one starting tomorrow and ending the day after tomorrow
+	describe("FullDayEvent over several days should show how many days are left from the from the starting date on", () => {
+		beforeAll(async () => {
+			await helpers.startApplication("tests/configs/modules/calendar/long-fullday-event.js");
+			await helpers.getDocument();
+		});
+
+		it("should contain text 'Ends in' with the left days", async () => {
+			await expect(testTextContain(".calendar .today .time", "Ends in")).resolves.toBe(true);
+			await expect(testTextContain(".calendar .yesterday .time", "Today")).resolves.toBe(true);
+			await expect(testTextContain(".calendar .tomorrow .time", "Tomorrow")).resolves.toBe(true);
+		});
+		it("should contain in total three events", async () => {
+			await expect(testElementLength(".calendar .event", 3)).resolves.toBe(true);
+		});
+	});
+
+	describe("FullDayEvent Single day, should show Today", () => {
+		beforeAll(async () => {
+			await helpers.startApplication("tests/configs/modules/calendar/single-fullday-event.js");
+			await helpers.getDocument();
+		});
+
+		it("should contain text 'Today'", async () => {
+			await expect(testTextContain(".calendar .time", "Today")).resolves.toBe(true);
+		});
+		it("should contain in total two events", async () => {
+			await expect(testElementLength(".calendar .event", 2)).resolves.toBe(true);
+		});
+	});
+
 	process.setMaxListeners(0);
 	for (let i = -12; i < 12; i++) {
 		describe("Recurring event per timezone", () => {

tests/mocks/calendar_test_full_day_events.ics

@@ -0,0 +1,33 @@
+BEGIN:VCALENDAR
+VERSION:2.0
+PRODID:-//ical.marudot.com//iCal Event Maker
+CALSCALE:GREGORIAN
+BEGIN:VTIMEZONE
+TZID:Europe/Berlin
+LAST-MODIFIED:20231222T233358Z
+TZURL:https://www.tzurl.org/zoneinfo-outlook/Europe/Berlin
+X-LIC-LOCATION:Europe/Berlin
+BEGIN:DAYLIGHT
+TZNAME:CEST
+TZOFFSETFROM:+0100
+TZOFFSETTO:+0200
+DTSTART:19700329T020000
+RRULE:FREQ=YEARLY;BYMONTH=3;BYDAY=-1SU
+END:DAYLIGHT
+BEGIN:STANDARD
+TZNAME:CET
+TZOFFSETFROM:+0200
+TZOFFSETTO:+0100
+DTSTART:19701025T030000
+RRULE:FREQ=YEARLY;BYMONTH=10;BYDAY=-1SU
+END:STANDARD
+END:VTIMEZONE
+BEGIN:VEVENT
+DTSTAMP:20240306T225415Z
+UID:1709765647426-75770@ical.marudot.com
+DTSTART;VALUE=DATE:20240306
+RRULE:FREQ=DAILY
+DTEND;VALUE=DATE:20240307
+SUMMARY:daily full days
+END:VEVENT
+END:VCALENDAR

tests/mocks/calendar_test_multi_day_starting_today.ics

@@ -0,0 +1,33 @@
+BEGIN:VCALENDAR
+VERSION:2.0
+PRODID:-//ical.marudot.com//iCal Event Maker
+CALSCALE:GREGORIAN
+BEGIN:VTIMEZONE
+TZID:Europe/Berlin
+LAST-MODIFIED:20231222T233358Z
+TZURL:https://www.tzurl.org/zoneinfo-outlook/Europe/Berlin
+X-LIC-LOCATION:Europe/Berlin
+BEGIN:DAYLIGHT
+TZNAME:CEST
+TZOFFSETFROM:+0100
+TZOFFSETTO:+0200
+DTSTART:19700329T020000
+RRULE:FREQ=YEARLY;BYMONTH=3;BYDAY=-1SU
+END:DAYLIGHT
+BEGIN:STANDARD
+TZNAME:CET
+TZOFFSETFROM:+0200
+TZOFFSETTO:+0100
+DTSTART:19701025T030000
+RRULE:FREQ=YEARLY;BYMONTH=10;BYDAY=-1SU
+END:STANDARD
+END:VTIMEZONE
+BEGIN:VEVENT
+DTSTAMP:20240306T222634Z
+UID:1709763965312-82782@ical.marudot.com
+DTSTART;VALUE=DATE:20240301
+RRULE:FREQ=DAILY
+DTEND;VALUE=DATE:20240303
+SUMMARY:2 day events
+END:VEVENT
+END:VCALENDAR