basic fullcalendar integration

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

css/app/calendar.scss

@@ -1,66 +1,6 @@
-/**
- * Calendar App
- *
- * @author Raghu Nayyar
- * @author Georg Ehrke
- * @copyright 2016 Raghu Nayyar <hey@raghunayyar.com>
- * @copyright 2016 Georg Ehrke <oc.list@georgehrke.com>
- *
- * This library is free software; you can redistribute it and/or
- * modify it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or any later version.
- *
- * This library 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 library.  If not, see <http://www.gnu.org/licenses/>.
- *
- */
-
-.app {
-	height: 100%;
-	width: 100%;
-}
-
-.modal-content #app-sidebar {
-	position: fixed;
-}
-
-#fullcalendar table {
-	white-space: inherit !important;
-}
-
-.fc-state-highlight.fc-day-number,
-#fullcalendar tbody tr,
-#fullcalendar tbody tr:hover,
-#fullcalendar tbody tr:focus {
-	background: transparent !important;
-}
-
-#popover-container,
-#importpopover-container {
-	max-height: 0 !important;
-	max-width: 0 !important;
-	overflow: hidden !important;
-}
-
-#fullcalendar .fc-axis,
-#fullcalendar .fc-day-header {
-	font-size: 100%;
-	opacity: .5;
-}
-
-#fullcalendar td.fc-day.fc-sat,
-#fullcalendar td.fc-day.fc-sun {
-	background-color: nc-darken($color-main-background, 3%);
-}
-
 @import 'calendarlist.scss';
 @import 'confirmation.scss';
+
 @import 'datepicker.scss';
 @import 'eventdialog.scss';
 @import 'fullcalendar.scss';

css/app/calendarlist.scss

@@ -1,12 +1,14 @@
 /**
  * Calendar App
  *
- * @author Raghu Nayyar
- * @author Georg Ehrke
  * @copyright 2016 Raghu Nayyar <hey@raghunayyar.com>
- * @copyright 2016 Georg Ehrke <oc.list@georgehrke.com>
+ * @copyright 2018 Georg Ehrke <oc.list@georgehrke.com>
  * @copyright 2017 John Molakvoæ <skjnldsv@protonmail.com>
  *
+ * @author Raghu Nayyar
+ * @author Georg Ehrke
+ * @author John Molakvoæ
+ *
  * This library is free software; you can redistribute it and/or
  * modify it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE
  * License as published by the Free Software Foundation; either

css/app/eventdialog.scss

@@ -330,3 +330,16 @@ button.delete:focus {
 .dropdown-menu li a:hover {
 	background: #eee;
 }
+
+
+
+.modal-content #app-sidebar {
+	position: fixed;
+}
+
+#popover-container,
+#importpopover-container {
+	max-height: 0 !important;
+	max-width: 0 !important;
+	overflow: hidden !important;
+}

css/app/fullcalendar.scss

@@ -1,3 +1,32 @@
+/**
+ * Calendar App
+ *
+ * @copyright 2018 Georg Ehrke <oc.list@georgehrke.com>
+ *
+ * @author Georg Ehrke
+ *
+ * This library is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or any later version.
+ *
+ * This library 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 library.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+#app-content {
+
+	padding-top: 50px;
+
+}
+
+
 
 /* Fullcalendar modifications */
 
@@ -68,3 +97,29 @@
 .fc-unthemed td.fc-today {
 	background: #fcf8e3 !important;
 }
+
+
+
+#fullcalendar .fc-axis,
+#fullcalendar .fc-day-header {
+	font-size: 100%;
+	opacity: .5;
+}
+
+#fullcalendar td.fc-day.fc-sat,
+#fullcalendar td.fc-day.fc-sun {
+	background-color: nc-darken($color-main-background, 3%);
+}
+
+
+
+#fullcalendar table {
+	white-space: inherit !important;
+}
+
+.fc-state-highlight.fc-day-number,
+#fullcalendar tbody tr,
+#fullcalendar tbody tr:hover,
+#fullcalendar tbody tr:focus {
+	background: transparent !important;
+}

css/app/icons.scss

@@ -0,0 +1,21 @@
+/**
+ * Calendar App
+ *
+ * @copyright 2018 Georg Ehrke <oc.list@georgehrke.com>
+ *
+ * @author Georg Ehrke
+ *
+ * This library is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or any later version.
+ *
+ * This library 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 library.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */

package.json

@@ -41,6 +41,7 @@
 		"debounce": "^1.2.0",
 		"fullcalendar": "^4.0.0-alpha.2",
 		"ical.js": "^1.2.2",
+		"jstz": "^2.1.1",
 		"moment": "^2.22.2",
 		"nextcloud-axios": "^0.1.2",
 		"nextcloud-vue": "^0.4.3",

src/components/FullCalendar.vue

@@ -25,10 +25,114 @@
 </template>
 
 <script>
+import { Calendar } from 'fullcalendar'
+import '../../node_modules/fullcalendar/dist/fullcalendar.css'
+import debounce from 'debounce'
+
+import '../fullcalendar/timeZoneImpl'
+
 export default {
 	name: 'FullCalendar',
-	mounted: () => {
+	props: {
+		// single events used for new event, etc.
+		events: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		// event sources for calendars
+		eventSources: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		// config options
+		config: {
+			type: Object,
+			required: true
+		}
+	},
+	data() {
+		return {
+			defaultConfig: {
+				// dayNames: [],
+				// dayNamesShort: [],
+				defaultView: 'month',
+				editable: true,
+				firstDay: null,
+				forceEventDuration: true,
+				header: false,
+				// locale: null,
+				// monthNames: [],
+				// monthNamesShort: [],
+				slotDuration: '00:15:00',
+				nowIndicator: true,
+				weekNumbers: false, // TODO is this the default in view controller?
+				weekends: true,
+				eventSources: this.eventSources,
+				timeZone: 'America/New_York',
+				timeZoneImpl: 'vtimezone-timezone',
+			},
+			calendar: null,
+			currentDate: null
+		}
+	},
+	watch: {
+		events: {
+			deep: true,
+			handler(newValue, oldValue) {
+
+			}
+		},
+		eventSources: {
+			deep: true,
+			handler(newEventSources, oldEventSources) {
+				const toAdd = newEventSources.filter((es) => oldEventSources.find((oes) => es.id === oes.id) === undefined)
+				const toRemove = oldEventSources.filter((oes) => newEventSources.find((es) => es.id === oes.id) === undefined)
+
+				toAdd.forEach((es) => {
+					this.calendar.addEventSource(es)
+				})
+				toRemove.forEach((es) => {
+					this.calendar.getEventSourceById(es.id).remove()
+				})
+			}
+		},
+		config: {
+			deep: true,
+			handler(newValue, oldValue) {
+
+			}
+		},
+		'$route'({ params }) {
+			if (params.view !== this.calendar.getView().type) {
+				this.calendar.changeView(params.view)
+
+			}
+
+			if (params.firstday !== this.currentDate) {
+				this.calendar.gotoDate(params.firstday)
+				this.currentDate = params.firstday
+			}
+		}
+	},
+	mounted: function() {
+		window.addEventListener('resize', debounce(() => {
+			const windowHeight = window.innerHeight
+			const headerHeight = document.getElementById('header').clientHeight
+
+			this.calendar.setOption('height', windowHeight - headerHeight)
+		}, 500))
+
+		const windowHeight = window.innerHeight
+		const headerHeight = document.getElementById('header').clientHeight
+		const height = windowHeight - headerHeight
 
+		this.calendar = new Calendar(this.$el,
+			Object.assign({}, { height }, this.defaultConfig, this.config))
+		this.calendar.render()
 	},
 	beforeDestroy: () => {