Update to FullCalendar 5 (#1611)

Plan/common/src/main/resources/assets/plan/web/css/style.css

@@ -759,121 +759,126 @@ div.scrollbar {
     background: rgba(0, 0, 0, 0) linear-gradient(180deg, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.2) 100%);
 }
 
-.bg-red {
+.bg-red, body.theme-red .fc-toolbar-chunk .btn.btn-primary {
     background-color: #F44336;
     color: #fff;
 }
 
-.bg-pink {
+.bg-pink, body.theme-pink .fc-toolbar-chunk .btn.btn-primary {
     background-color: #E91E63;
     color: #fff;
 }
 
-.bg-purple {
+.bg-purple, body.theme-purple .fc-toolbar-chunk .btn.btn-primary {
     background-color: #9C27B0;
     color: #fff;
 }
 
-.bg-deep-purple {
+.bg-deep-purple, body.theme-deep-purple .fc-toolbar-chunk .btn.btn-primary {
     background-color: #673AB7;
     color: #fff;
 }
 
-.bg-indigo {
+.bg-indigo, body.theme-indigo .fc-toolbar-chunk .btn.btn-primary {
     background-color: #3F51B5;
     color: #fff;
 }
 
-.bg-blue {
+.bg-blue, body.theme-blue .fc-toolbar-chunk .btn.btn-primary {
     background-color: #2196F3;
     color: #fff;
 }
 
-.bg-light-blue {
+.bg-light-blue, body.theme-light-blue .fc-toolbar-chunk .btn.btn-primary {
     background-color: #03A9F4;
     color: #fff;
 }
 
-.bg-cyan {
+.bg-cyan, body.theme-cyan .fc-toolbar-chunk .btn.btn-primary {
     background-color: #00BCD4;
     color: #fff;
 }
 
-.bg-teal {
+.bg-teal, body.theme-teal .fc-toolbar-chunk .btn.btn-primary {
     background-color: #009688;
     color: #fff;
 }
 
-.bg-green {
+.bg-green, body.theme-green .fc-toolbar-chunk .btn.btn-primary {
     background-color: #4CAF50;
     color: #fff;
 }
 
-.bg-light-green {
+.bg-light-green, body.theme-light-green .fc-toolbar-chunk .btn.btn-primary {
     background-color: #8BC34A;
     color: #fff;
 }
 
-.bg-lime {
+.bg-lime , body.theme-lime .fc-toolbar-chunk .btn.btn-primary{
     background-color: #CDDC39;
     color: #fff;
 }
 
-.bg-yellow {
+.bg-yellow, body.theme-yellow .fc-toolbar-chunk .btn.btn-primary {
     background-color: #ffe821;
     color: #fff;
 }
 
-.bg-amber {
+.bg-amber, body.theme-amber .fc-toolbar-chunk .btn.btn-primary {
     background-color: #FFC107;
     color: #fff;
 }
 
-.bg-orange {
+.bg-orange, body.theme-orange .fc-toolbar-chunk .btn.btn-primary {
     background-color: #FF9800;
     color: #fff;
 }
 
-.bg-deep-orange {
+.bg-deep-orange, body.theme-deep-orange .fc-toolbar-chunk .btn.btn-primary {
     background-color: #FF5722;
     color: #fff;
 }
 
-.bg-brown {
+.bg-brown, body.theme-brown .fc-toolbar-chunk .btn.btn-primary {
     background-color: #795548;
     color: #fff;
 }
 
-.bg-grey {
+.bg-grey, body.theme-grey .fc-toolbar-chunk .btn.btn-primary {
     background-color: #9E9E9E;
     color: #fff;
 }
 
-.bg-blue-grey {
+.bg-blue-grey, body.theme-blue-grey .fc-toolbar-chunk .btn.btn-primary {
     background-color: #607D8B;
     color: #fff;
 }
 
-.bg-black {
+.bg-black, body.theme-black .fc-toolbar-chunk .btn.btn-primary {
     background-color: #555555;
     color: #fff;
 }
 
-.bg-white {
+.bg-white, body.theme-white .fc-toolbar-chunk .btn.btn-primary {
     background-color: #ffffff;
     color: #333;
 }
 
-.bg-plan {
+.bg-plan, body.theme-plan .fc-toolbar-chunk .btn.btn-primary {
     background-color: #368F17;
     color: #fff;
 }
 
-.bg-night {
+.bg-night, body.theme-night .fc-toolbar-chunk .btn.btn-primary {
     background-color: #44475a;
     color: #eee8d5;
 }
 
+.fc-toolbar-chunk .btn.btn-primary {
+    outline: none !important;
+    border: none !important;
+}
+
 .bg-red-outline {
     outline-color: #F44336;
     border-color: #F44336;
@@ -1195,4 +1200,37 @@ div.scrollbar {
 .white {
     color: #FFFFFF;
     text-shadow: 0 0 8px #000;
-}
+}
+
+/*
+Adding a translation, even though it doesn't visually
+impact the page, causes child elements with a
+position of "fixed" to be based on this element
+instead of any other parent elements. For example,
+if a child element to this element had `top: 0`
+and `left: 0`, then it would align with the top
+left of this element instead of another parent or the document body.
+See this StackOverflow answer: https://stackoverflow.com/a/20830413
+
+We use this to properly align the popover when there are more
+than 3 events in one day on the sessions calendar.
+ */
+#sessions-overview {
+    transform: translateX(0);
+}
+
+/*
+When the sidebar is visible, it offsets the popovers by its width.
+ The rules below fix that by applying a negative margin.
+ */
+body .fc-popover {
+    margin-left: -14rem;
+}
+
+body.sidebar-hidden .fc-popover {
+    margin-left: 0 !important;
+}
+
+body.sidebar-hidden .navbar-nav {
+    display: none;
+}

Plan/common/src/main/resources/assets/plan/web/js/color-selector.js

@@ -19,6 +19,7 @@
 
     // Function for changing color
     function setColor(nextColor) {
+        $('body').removeClass('theme-' + currentColor).addClass('theme-' + nextColor);
         if (!nextColor || nextColor == currentColor) {
             return;
         }
@@ -218,6 +219,7 @@
                 '.collapse-item:hover,.nav-link.active {background-color: #606270 !important;}' +
                 '.nav-tabs .nav-link.active {background-color: #44475a !important;border-color:#6272a4 #6272a4 #44475a !important;}' +
                 '.fc-today {background:#646e8c !important}' +
+                '.fc-popover-body,.fc-popover-header {background-color: #44475a;color: #eee8d5;}' +
                 nightModeColors +
                 '</style>');
             // Turn bright tables to dark

Plan/common/src/main/resources/assets/plan/web/js/graphs.js

@@ -20,6 +20,7 @@ var linegraphButtons = [{
 }];
 
 var graphs = [];
+window.calendars = {};
 
 function activityPie(id, activitySeries) {
     graphs.push(Highcharts.chart(id, {
@@ -148,32 +149,36 @@ function dayByDay(id, series) {
     }));
 }
 
-function onlineActivityCalendar(id, events, firstDay) {
+function onlineActivityCalendar(id, event_data, firstDay) {
-    $(id).fullCalendar({
+    window.calendars.online_activity = new FullCalendar.Calendar(document.querySelector(id), {
+        themeSystem: 'bootstrap',
         eventColor: '#2196F3',
         firstDay: firstDay,
+        initialView: 'dayGridMonth',
 
-        eventRender: function (eventObj, $el) {
+        eventDidMount: function (info) {
-            $el.popover({
+            $(info.el).popover({
-                content: eventObj.title,
+                content: info.event.title,
                 trigger: 'hover',
                 placement: 'top',
                 container: 'body'
             });
         },
 
-        events: events,
+        events: function (fetchInfo, successCallback, failureCallback) {
+            successCallback(event_data)
+        },
 
         height: 800,
         contentHeight: 795,
-        header: {
+        headerToolbar: {
             left: 'title',
             center: '',
-            right: 'month prev,next'
+            right: 'today prev,next'
         }
     });
 
-    $(id).fullCalendar('render')
+    window.calendars.online_activity.render();
 }
 
 function performanceChart(id, playersOnlineSeries, tpsSeries, cpuSeries, ramSeries, entitySeries, chunkSeries) {
@@ -401,36 +406,40 @@ function formatTimeAmount(ms) {
     return out;
 }
 
-function sessionCalendar(id, events, firstDay) {
+function sessionCalendar(id, event_data, firstDay) {
-    $(id).fullCalendar({
+    window.calendars.sessions = new FullCalendar.Calendar(document.querySelector(id), {
+        themeSystem: 'bootstrap',
         eventColor: '#009688',
-        eventLimit: 4,
+        dayMaxEventRows: 4,
         firstDay: firstDay,
+        initialView: 'dayGridMonth',
 
-        eventRender: function (eventObj, $el) {
+        eventDidMount: function (info) {
-            $el.popover({
+            $(info.el).popover({
-                content: eventObj.title,
+                content: info.event.title,
                 trigger: 'hover',
                 placement: 'top',
                 container: 'body'
             });
         },
 
-        events: events,
+        events: function (fetchInfo, successCallback, failureCallback) {
+            successCallback(event_data)
+        },
 
         navLinks: true,
         height: 450,
         contentHeight: 445,
-        header: {
+        headerToolbar: {
             left: 'title',
             center: '',
-            right: 'month agendaWeek agendaDay today prev,next'
+            right: 'dayGridMonth dayGridWeek dayGridDay today prev,next'
         }
     });
 
     setTimeout(function () {
-        $(id).fullCalendar('render')
+        window.calendars.sessions.render();
-    }, 1000);
+    }, 0);
 }
 
 function stackChart(id, categories, series, label) {

Plan/common/src/main/resources/assets/plan/web/js/sb-admin-2.js

@@ -56,7 +56,7 @@ $('.nav-tabs a.nav-link').click(event => {
     const uriHash = (window.location.hash).split("&");
     if (!uriHash) return;
     const currentTab = uriHash[0];
-    const originalTargetId = event.target.href.split('#')[1];
+    const originalTargetId = event.currentTarget.href.split('#')[1];
     window.location.hash = currentTab + '&' + originalTargetId;
 });
 
@@ -68,16 +68,16 @@ function reduceSidebar() {
         return;
     }
 
-    const $sidebar = $('.sidebar');
+    const $body = $('body')
     const closeModal = $('.sidebar-close-modal');
     if ($(window).width() < 1350) {
-        if (!$sidebar.hasClass('hidden')) $sidebar.addClass('hidden');
+        if (!$body.hasClass('sidebar-hidden')) $body.addClass('sidebar-hidden');
         if (!closeModal.hasClass('hidden')) closeModal.addClass('hidden');
 
         // Close any open menu accordions when window is resized
         $('.sidebar .collapse').collapse('hide');
-    } else if ($(window).width() > 1400 && $sidebar.hasClass('hidden')) {
+    } else if ($(window).width() > 1400 && $body.hasClass('sidebar-hidden')) {
-        $sidebar.removeClass('hidden');
+        $body.removeClass('sidebar-hidden');
         if (!closeModal.hasClass('hidden')) closeModal.addClass('hidden');
     }
     oldWidth = newWidth;
@@ -87,7 +87,7 @@ reduceSidebar();
 $(window).resize(reduceSidebar);
 
 function toggleSidebar() {
-    $('.sidebar').toggleClass('hidden');
+    $('body').toggleClass('sidebar-hidden');
     $('.sidebar .collapse').collapse('hide');
 
     const closeModal = $('.sidebar-close-modal');

Plan/common/src/main/resources/assets/plan/web/server.html

@@ -1539,7 +1539,12 @@
                 $('#calendar').text('');
                 onlineActivityCalendar('#calendar', json.data, json.firstDay);
                 $('#online-calendar-tab').click(function () {
-                    $('#calendar').fullCalendar('render');
+                    // Wrapping this in a 0ms setTimeout waits for all other event handlers
+                    // to finish. We need this because if the calendar is rendered
+                    // immediately, it renders for a width of 0.
+                    setTimeout(function() {
+                        window.calendars.online_activity.render();
+                    }, 0);
                 });
             } else if (error) {
                 $('#calendar').text("Failed to load calendar data: " + error)