From 5e01759061ca0d8a2d95d3d974bb80472d529198 Mon Sep 17 00:00:00 2001
From: Moritz Strohm <strohm@data-quest.de>
Date: Wed, 4 Dec 2024 09:14:06 +0000
Subject: [PATCH] lib/fullcalendar.js: improve the display of the year in date
column headers, fixes #3632
Closes #3632
Merge request studip/studip!2626
---
resources/assets/javascripts/lib/datetime.js | 30 +++++++++++++++++--
.../assets/javascripts/lib/fullcalendar.js | 7 +++++
.../assets/stylesheets/fullcalendar.scss | 7 +++++
3 files changed, 41 insertions(+), 3 deletions(-)
diff --git a/resources/assets/javascripts/lib/datetime.js b/resources/assets/javascripts/lib/datetime.js
index d58fac85b84..50f91f22e5b 100644
--- a/resources/assets/javascripts/lib/datetime.js
+++ b/resources/assets/javascripts/lib/datetime.js
@@ -32,9 +32,11 @@ const DateTime = {
* or an absolute one (false). Defaults to false.
* @param date_only Whether to return the date only (true) or date and time (false).
* Defaults to false. Only regarded when $relative_value is false.
+ * @param html Whether to format the date as HTML (true) or as plain text (false). Defaults to false.
+ *
* @returns {*|string} The date, formatted according to the Stud.IP format for dates.
*/
- getStudipDate(date, relative_value = false, date_only = false) {
+ getStudipDate(date, relative_value = false, date_only = false, html = false) {
if (relative_value) {
let now = Date.now();
if (now - date < 1 * 60 * 1000) {
@@ -50,10 +52,32 @@ const DateTime = {
}
if (date_only) {
- return this.pad(date.getDate()) + '.' + this.pad(date.getMonth() + 1) + '.' + date.getFullYear();
+ if (html) {
+ return '<span class="day">'
+ + this.pad(date.getDate())
+ + '.</span><span class="month">'
+ + this.pad(date.getMonth() + 1)
+ + '.</span><span class="year">'
+ + date.getFullYear()
+ + '</span>';
+ } else {
+ return this.pad(date.getDate()) + '.' + this.pad(date.getMonth() + 1) + '.' + date.getFullYear();
+ }
}
- return this.pad(date.getDate()) + '.' + this.pad(date.getMonth() + 1) + '.' + date.getFullYear() + ' ' + this.pad(date.getHours()) + ':' + this.pad(date.getMinutes());
+ if (html) {
+ return '<span class="day">'
+ + this.pad(date.getDate())
+ + '.</span><span class="month">'
+ + this.pad(date.getMonth() + 1)
+ + '.</span><span class="year">'
+ + date.getFullYear()
+ + '</span> <span class="time">'
+ + this.pad(date.getHours()) + ':' + this.pad(date.getMinutes())
+ + '</span>';
+ } else {
+ return this.pad(date.getDate()) + '.' + this.pad(date.getMonth() + 1) + '.' + date.getFullYear() + ' ' + this.pad(date.getHours()) + ':' + this.pad(date.getMinutes());
+ }
}
};
diff --git a/resources/assets/javascripts/lib/fullcalendar.js b/resources/assets/javascripts/lib/fullcalendar.js
index 17078929e8c..7eeb02ab07f 100644
--- a/resources/assets/javascripts/lib/fullcalendar.js
+++ b/resources/assets/javascripts/lib/fullcalendar.js
@@ -430,6 +430,7 @@ class Fullcalendar
minute: '2-digit',
omitZeroMinute: false
},
+ columnHeaderHtml: STUDIP.Fullcalendar.renderDateForColumn,
nowIndicator: true,
timeZone: 'local',
studip_functions: [],
@@ -801,6 +802,12 @@ class Fullcalendar
}
}
}
+
+ static renderDateForColumn(date) {
+ let format = new Intl.DateTimeFormat(String.locale, {weekday: 'short'});
+ let date_html = STUDIP.DateTime.getStudipDate(date, false, true, true);
+ return '<span class="dow">' + format.format(date) + '.</span> ' + date_html;
+ }
}
export default Fullcalendar;
diff --git a/resources/assets/stylesheets/fullcalendar.scss b/resources/assets/stylesheets/fullcalendar.scss
index d4295b4d1c4..75d35b705e4 100644
--- a/resources/assets/stylesheets/fullcalendar.scss
+++ b/resources/assets/stylesheets/fullcalendar.scss
@@ -38,6 +38,13 @@ a.fc-event, td.fc-event {
}
}
+/* Put the year in a new line in the mobile view: */
+html.responsive-display .fc .fc-view:not(.fc-timeGridDay-view) .fc-day-header {
+ span.dow, span.year {
+ display: block;
+ }
+}
+
.fc-button-primary:not(:disabled):active,
.fc-button-primary:not(:disabled).fc-button-active,
--
GitLab