Add better No Events Screen

Signed-off-by: Georg Ehrke <developer@georgehrke.com>

css/fullcalendar.scss

@@ -173,3 +173,13 @@
 		}
 	}
 }
+
+.fc-list-empty {
+	.fc-list-empty-cushion {
+		display: none;
+	}
+
+	.empty-content {
+		margin-top: 0 !important;
+	}
+}

src/components/CalendarGrid.vue

@@ -55,6 +55,7 @@ import MomentPlugin from '../fullcalendar/localization/momentPlugin.js'
 import dayHeaderDidMount from '../fullcalendar/rendering/dayHeaderDidMount.js'
 import eventDidMount from '../fullcalendar/rendering/eventDidMount.js'
 import eventOrder from '../fullcalendar/rendering/eventOrder.js'
+import noEventsDidMount from '../fullcalendar/rendering/noEventsDidMount.js'
 
 // Import timezone plugins
 import VTimezoneNamedTimezone from '../fullcalendar/timezones/vtimezoneNamedTimezoneImpl.js'
@@ -126,7 +127,9 @@ export default {
 				locale: getFullCalendarLocale(getLocale(), this.locale),
 				firstDay: getFirstDayOfWeekFromMomentLocale(this.locale),
 				// Rendering
+				dayHeaderDidMount,
 				eventDidMount,
+				noEventsDidMount,
 				eventOrder: ['start', '-duration', 'allDay', eventOrder],
 				forceEventDuration: false,
 				headerToolbar: false,
@@ -142,7 +145,6 @@ export default {
 				unselectAuto: true,
 				// Timezones:
 				timeZone: this.timezoneId,
-				dayHeaderDidMount,
 			}
 		},
 		eventSources() {

src/fullcalendar/rendering/dayHeaderDidMount.js

@@ -21,8 +21,7 @@
  */
 
 /**
- * Adds data to the html element representing the event in the fullcalendar grid.
- * This is used to later on position the popover
+ * Adjusts the colSpan attribute of day-headers in the list view
  *
  * @param {Object} data The destructuring object
  * @param {Node} el The HTML element

src/fullcalendar/rendering/noEventsDidMount.js

@@ -0,0 +1,43 @@
+/**
+ * @copyright Copyright (c) 2020 Georg Ehrke
+ *
+ * @author Georg Ehrke <oc.list@georgehrke.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+import Vue from 'vue'
+import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
+import { translate as t } from '@nextcloud/l10n'
+
+/**
+ * Adds our standardized emptyContent component if list view is empty
+ *
+ * @param {Object} data The destructuring object
+ * @param {Node} el The HTML element
+ */
+export default function({ el }) {
+	const EmptyContentClass = Vue.extend(EmptyContent)
+	const instance = new EmptyContentClass({
+		propsData: {
+			icon: 'icon-calendar-dark',
+		},
+	})
+	instance.$slots.default = [t('calendar', 'No events')]
+	instance.$slots.desc = [t('calendar', 'Create a new event or change the visible time-range')]
+	instance.$mount()
+	el.appendChild(instance.$el)
+}