feat(caldav): Add calendar timezone picker

src/components/AppNavigation/EditCalendarModal.vue

@@ -43,6 +43,12 @@
 					:placeholder="$t('calendar', 'Calendar name …')">
 			</div>
 
+			<h2>{{ $t('calendar', 'Timezone') }}</h2>
+			<div class="edit-calendar-modal__timezone">
+				<NcTimezonePicker v-model="calendarTimezone"
+					@input="saveTimezone" />
+			</div>
+
 			<template v-if="canBeShared">
 				<h2 class="edit-calendar-modal__sharing-header">
 					{{ $t('calendar', 'Share calendar') }}
@@ -88,9 +94,13 @@
 </template>
 
 <script>
+import ICAL from 'ical.js'
 import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import NcColorPicker from '@nextcloud/vue/dist/Components/NcColorPicker.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcTimezonePicker from '@nextcloud/vue/dist/Components/NcTimezonePicker.js'
+import { TimezoneComponent } from '@nextcloud/calendar-js'
+
 import PublishCalendar from './EditCalendarModal/PublishCalendar.vue'
 import SharingSearch from './EditCalendarModal/SharingSearch.vue'
 import ShareItem from './EditCalendarModal/ShareItem.vue'
@@ -110,6 +120,7 @@
 		NcModal,
 		NcColorPicker,
 		NcButton,
+	  NcTimezonePicker,
 		PublishCalendar,
 		SharingSearch,
 		ShareItem,
@@ -127,6 +138,7 @@
 			calendarColorChanged: false,
 			calendarName: undefined,
 			calendarNameChanged: false,
+			calendarTimezone: undefined,
 		}
 	},
 	computed: {
@@ -172,6 +184,23 @@
 
 			this.calendarName = this.calendar.displayName
 			this.calendarColor = this.calendar.color
+			if (this.calendar.timezone) {
+				try {
+					const jCal = ICAL.parse(this.calendar.timezone)
+					const iCalComp = new ICAL.Component(jCal)
+					const tzComp = TimezoneComponent.fromICALJs(iCalComp)
+					this.calendarTimezone = tzComp.getFirstComponent('VTIMEZONE').getFirstProperty('TZID').value
+				} catch (error) {
+					logger.error('Could not load calendar timezone', {
+						error,
+						calendar: this.calendar,
+						timezone: this.calendar.timezone,
+					})
+					this.calendarTimezone = 'floating'
+				}
+			} else {
+		  	this.calendarTimezone = 'floating'
+			}
 		},
 	},
 	created() {
@@ -229,6 +258,25 @@
 			}
 		},
 
+	  async saveTimezone() {
+			this.loading = true
+
+			try {
+				await this.$store.dispatch('setCalendarTimezone', {
+					calendar: this.calendar,
+					timezone: this.calendarTimezone,
+				})
+			} catch (error) {
+				logger.error('Failed to save calendar timezone', {
+					calendar: this.calendar,
+					timezone: this.calendarTimezone,
+					error,
+				})
+			} finally {
+				this.loading = false
+			}
+		},
+
 		/**
 		 * Save unsaved changes and close the modal.
 		 *

src/store/calendars.js

@@ -174,6 +174,18 @@
 		state.calendarsById[calendar.id].displayName = newName
 	},
 
+	/**
+	 * Set a calendar's timezone
+	 *
+	 * @param {object} state the store mutations
+	 * @param {object} data destructuring object
+	 * @param {object} data.calendar the calendar to modify
+	 * @param {string} data.timezone the new timezone of the calendar
+	 */
+	setCalendarTimezone(state, { calendar, timezone }) {
+		state.calendarsById[calendar.id].timezone = timezone
+	},
+
 	/**
 	 * Changes calendar's color
 	 *
@@ -868,6 +880,28 @@
 		context.commit('renameCalendar', { calendar, newName })
 	},
 
+	/**
+	 * Set a calendar's timezone
+	 *
+	 * @param {object} context the store mutations Current context
+	 * @param {object} data destructuring object
+	 * @param {object} data.calendar the calendar to modify
+	 * @param {string} data.timezone the new timezone of the calendar
+	 * @return {Promise}
+	 */
+	async setCalendarTimezone(context, { calendar, timezone }) {
+		let timezoneIcs = null
+		const timezoneObject = getTimezoneManager().getTimezoneForId(timezone)
+		if (timezoneObject !== Timezone.utc && timezoneObject !== Timezone.floating) {
+			const calendar = CalendarComponent.fromEmpty()
+			calendar.addComponent(TimezoneComponent.fromICALJs(timezoneObject.toICALJs()))
+			timezoneIcs = calendar.toICS(false)
+		}
+		calendar.dav.timezone = timezoneIcs
+		await calendar.dav.update()
+		context.commit('setCalendarTimezone', { calendar, timezone: timezoneIcs })
+	},
+
 	/**
 	 * Change a calendar's color
 	 *