lib/fullcalendar.js: improve the display of the year in date column headers, fixes #3632

Closes #3632

Merge request studip/studip!2626

3 files changed, 41 insertions, 3 deletions

diff --git a/resources/assets/javascripts/lib/datetime.js b/resources/assets/javascripts/lib/datetime.js
index d58fac8..50f91f2 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 1707892..7eeb02a 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 d4295b4..75d35b7 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,