Replace fc locales with our own moment adapter

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

src/components/Editor/FreeBusy/FreeBusy.vue

@@ -70,7 +70,6 @@ import {
 	mapGetters,
 	mapState,
 } from 'vuex'
-import { getLocale } from '@nextcloud/l10n'
 import Modal from '@nextcloud/vue/dist/Components/Modal'
 import VTimezoneNamedTimezone from '../../../fullcalendar/timezones/vtimezoneNamedTimezoneImpl.js'
 import freeBusyEventSource from '../../../fullcalendar/eventSources/freeBusyEventSource.js'
@@ -168,37 +167,7 @@ export default {
 			}]
 		},
 	},
-	async mounted() {
-		this.loadFullCalendarLocale()
-	},
 	methods: {
-		/**
-		 * Loads the locale data for full-calendar
-		 *
-		 * @returns {Promise<void>}
-		 */
-		async loadFullCalendarLocale() {
-			let locale = getLocale().replace('_', '-').toLowerCase()
-			try {
-				// try to load the default locale first
-				const fcLocale = await import('@fullcalendar/core/locales/' + locale)
-				this.locales.push(fcLocale)
-				// We have to update firstDay manually till https://github.com/fullcalendar/fullcalendar-vue/issues/36 is fixed
-				this.firstDay = fcLocale.week.dow
-				this.fullCalendarLocale = locale
-			} catch (e) {
-				try {
-					locale = locale.split('-')[0]
-					const fcLocale = await import('@fullcalendar/core/locales/' + locale)
-					this.locales.push(fcLocale)
-					// We have to update firstDay manually till https://github.com/fullcalendar/fullcalendar-vue/issues/36 is fixed
-					this.firstDay = fcLocale.week.dow
-					this.fullCalendarLocale = locale
-				} catch (e) {
-					console.debug('falling back to english locale')
-				}
-			}
-		},
 		loading(isLoading) {
 			this.loadingIndicator = isLoading
 		},
@@ -207,10 +176,6 @@ export default {
 </script>
 
 <style lang='scss' scoped>
-@import '~@fullcalendar/core/main.css';
-@import '~@fullcalendar/timeline/main.css';
-@import '~@fullcalendar/resource-timeline/main.css';
-
 .modal__content {
 	padding: 50px;
 }

src/fullcalendar/eventSources/eventSourceFunction.js

@@ -125,6 +125,8 @@ export function eventSourceFunction(calendarObjects, calendar, start, end, timez
 				allDay: object.isAllDay(),
 				start: jsStart,
 				end: jsEnd,
+				// start: formatLocal(jsStart, object.isAllDay()),
+				// end: formatLocal(jsEnd, object.isAllDay()),
 				classNames,
 				extendedProps: {
 					objectId: calendarObject.id,

src/fullcalendar/localization/dateFormattingConfig.js

@@ -0,0 +1,49 @@
+/**
+ * @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/>.
+ *
+ */
+
+/**
+ * Returns the date-formatting config for FullCalendar
+ *
+ * @returns {Object}
+ */
+const getDateFormattingConfig = () => {
+	return {
+		// Date formatting:
+		eventTimeFormat: 'LT',
+		views: {
+			dayGridMonth: {
+				dayHeaderFormat: 'ddd',
+				titleFormat: 'll',
+			},
+			timeGridDay: {
+				dayHeaderFormat: 'ddd l',
+				titleFormat: 'll',
+			},
+			timeGridWeek: {
+				dayHeaderFormat: 'ddd l',
+				titleFormat: 'll',
+			},
+		},
+	}
+}
+
+export { getDateFormattingConfig }

src/fullcalendar/localization/localeProvider.js

@@ -0,0 +1,64 @@
+/**
+ * @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 { translate as t } from '@nextcloud/l10n'
+import {
+	getFirstDayOfWeekFromMomentLocale,
+	getFirstDayOfYearFromMomentLocale,
+} from '../../utils/moment.js'
+
+/**
+ *
+ * @param {String} userLocale The user-selected locale
+ * @param {String} momentLocale Our merged locale-language based moment locale
+ * @returns {Object}
+ */
+const getFullCalendarLocale = (userLocale, momentLocale) => {
+	return {
+		code: userLocale.replace('_', '-').toLowerCase(),
+		week: {
+			dow: getFirstDayOfWeekFromMomentLocale(momentLocale),
+			doy: getFirstDayOfYearFromMomentLocale(momentLocale),
+		},
+		direction: 'ltr', // TODO - fix me
+		buttonText: {
+			prev: t('calendar', 'prev'),
+			next: t('calendar', 'next'),
+			prevYear: t('calendar', 'prev year'),
+			nextYear: t('calendar', 'next year'),
+			year: t('calendar', 'year'),
+			today: t('calendar', 'today'),
+			month: t('calendar', 'month'),
+			week: t('calendar', 'week'),
+			day: t('calendar', 'day'),
+			list: t('calendar', 'list'),
+		},
+		// TRANSLATORS W is an abbreviation for Week
+		weekText: t('calendar', 'W'),
+		allDayText: t('calendar', 'all-day'),
+		moreLinkText: (n) => t('calendar', '%n more', {}, n),
+		noEventsText: t('calendar', 'No events to display'),
+	}
+}
+
+export {
+	getFullCalendarLocale,
+}

src/fullcalendar/localization/momentPlugin.js

@@ -0,0 +1,71 @@
+/**
+ * @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 moment from '@nextcloud/moment'
+import { createPlugin } from '@fullcalendar/core'
+import store from './../../store'
+
+/**
+ * Creates a new moment object
+ *
+ * @param {Object} data The fullcalendar data
+ * @param {Number[]} data.array Input data to initialize moment
+ * @returns {moment}
+ */
+const momentFactory = ({ array }) => {
+	return moment(array).locale(store.state.settings.momentLocale)
+}
+
+/**
+ * Formats a date with given cmdStr
+ *
+ * @param {String} cmdStr The formatting string
+ * @param {Object} arg An Object containing the date, etc.
+ * @returns {String}
+ */
+const cmdFormatter = (cmdStr, arg) => {
+	// With our specific DateFormattingConfig,
+	// cmdStr will always be a moment parsable string
+	// like LT, etc.
+	//
+	// No need to manually parse it.
+	//
+	// This is not the case, if you use the standard FC
+	// formatting config.
+
+	// If arg.end is defined, this is a time-range
+	if (arg.end) {
+		const start = momentFactory(arg.start).format(cmdStr)
+		const end = momentFactory(arg.end).format(cmdStr)
+
+		if (start === end) {
+			return start
+		}
+
+		return start + arg.defaultSeparator + end
+	}
+
+	return momentFactory(arg.start).format(cmdStr)
+}
+
+export default createPlugin({
+	cmdFormatter,
+})

src/utils/moment.js

@@ -86,3 +86,23 @@ async function getLocaleFor(locale) {
 
 	return 'en'
 }
+
+/**
+ * Get's the first day of a week based on a moment locale
+ *
+ * @param {String} momentLocale Id of moment locale
+ * @returns {number}
+ */
+export function getFirstDayOfWeekFromMomentLocale(momentLocale) {
+	return moment.localeData(momentLocale).firstDayOfWeek()
+}
+
+/**
+ * Get's the first day of a year based on a moment locale
+ *
+ * @param {String} momentLocale Id of moment locale
+ * @returns {number}
+ */
+export function getFirstDayOfYearFromMomentLocale(momentLocale) {
+	return moment.localeData(momentLocale).firstDayOfYear()
+}

webpack.common.js

@@ -53,7 +53,7 @@ module.exports = {
 	plugins: [
 		new VueLoaderPlugin(),
 		new StyleLintPlugin(),
-		new webpack.IgnorePlugin(/^\.\/locale(s)?$/, /(@fullcalendar\/core)$|(moment)$/),
+		new webpack.IgnorePlugin(/^\.\/locale(s)?$/, /(moment)$/),
 		new webpack.DefinePlugin({
 			appVersion: JSON.stringify(require('./package.json').version)
 		})