connect settings to fullcalendar

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

.eslintrc.js

@@ -13,7 +13,11 @@ module.exports = {
 		OCA: true,
 		Vue: true,
 		VueRouter: true,
-		oca_calendar: true
+		oca_calendar: true,
+		dayNames: true,
+		dayNamesMin: true,
+		monthNames: true,
+		monthNamesShort: true,
 	},
 	parserOptions: {
 		parser: 'babel-eslint'

src/components/FullCalendar.vue

@@ -57,22 +57,17 @@ export default {
 	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',
+				timeZone: 'UTC',
 				timeZoneImpl: 'vtimezone-timezone',
 				eventClick: ({ event }) => {
 					const params = this.$route.params
@@ -96,7 +91,7 @@ export default {
 	watch: {
 		events: {
 			deep: true,
-			handler(newValue, oldValue) {
+			handler(newEvents, oldEvents) {
 
 			}
 		},
@@ -116,8 +111,19 @@ export default {
 		},
 		config: {
 			deep: true,
-			handler(newValue, oldValue) {
+			handler(newConfig, oldConfig) {
+				if (newConfig.timeZone !== oldConfig.timeZone) {
+					this.calendar.setOption('timeZoneParam', newConfig.timeZone)
+					this.calendar.refetchEvents()
+				}
 
+				if (newConfig.weekNumbers !== oldConfig.weekNumbers) {
+					this.calendar.setOption('weekNumbers', newConfig.weekNumbers)
+				}
+
+				if (newConfig.weekends !== oldConfig.weekends) {
+					this.calendar.setOption('weekends', newConfig.weekends)
+				}
 			}
 		},
 		'$route'({ params }) {

src/store/settings.js

@@ -73,7 +73,7 @@ const actions = {
 		})
 	},
 	async toggleWeekNumberEnabled(context) {
-		const newState = !context.state.showWeekends
+		const newState = !context.state.showWeekNumbers
 		await axios.post(configEndpoint, {
 			key: 'showWeekNr',
 			value: newState ? 'yes' : 'no'

src/views/Calendar.vue

@@ -18,6 +18,8 @@ import client from '../services/cdav.js'
 import { generateTextColorFromRGB } from '../services/colorService'
 import fullCalendarEventService from '../services/fullCalendarEventService'
 
+import moment from 'moment'
+
 export default {
 	name: 'Calendar',
 	components: {
@@ -53,7 +55,18 @@ export default {
 			}))
 		},
 		config() {
-			return {}
+			console.debug(this.$store)
+			return {
+				timeZone: 'America/New_York',
+				weekNumbers: this.$store.state.settings.showWeekNumbers,
+				weekends: this.$store.state.settings.showWeekends,
+				dayNames: dayNames,
+				dayNamesShort: dayNamesMin,
+				monthNames: monthNames,
+				monthNamesShort: monthNamesShort,
+				weekNumbersWithinDays: true,
+				firstDay: +moment().startOf('week').format('d')
+			}
 		}
 	},
 	beforeMount() {