diff --git a/resources/assets/javascripts/lib/datetime.js b/resources/assets/javascripts/lib/datetime.js index d58fac85b84434a549075409f5ac974d92c7f4c4..50f91f22e5b3c19002b74e93ce932016e401407f 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 17078929e8c8816e53fba6b1270607115eaf1ad7..7eeb02ab07fe48efd6aabadd9d2fcea19ceadc57 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 d4295b4d1c43134aa09fe67d5c85378c481720bc..75d35b705e4de31cda12ae0461178e28b198c9e6 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,