From 62322a722d4af5fb88ad4c651052c96d3603d22a Mon Sep 17 00:00:00 2001
From: Georg Ehrke <developer@georgehrke.com>
Date: Sat, 19 Oct 2019 13:51:18 +0200
Subject: [PATCH] use eslint-config-nextcloud

Signed-off-by: Georg Ehrke <developer@georgehrke.com>
---
 .eslintrc.js                                  |  77 +------------
 css/app-sidebar.scss                          |  36 +++---
 package-lock.json                             |  21 ++++
 package.json                                  |   2 +
 .../AppNavigationHeaderDatePicker.vue         |  14 +--
 .../AppNavigationHeaderTodayButton.vue        |   3 +-
 src/components/AppNavigation/CalendarList.vue |  46 ++++----
 .../CalendarList/CalendarListItem.vue         |  63 +++++-----
 .../CalendarListItemSharingPublishItem.vue    |  57 ++++-----
 .../CalendarListItemSharingSearch.vue         |  13 ++-
 .../CalendarListItemSharingShareItem.vue      |  13 +--
 .../CalendarList/CalendarListNew.vue          |   8 +-
 .../CalendarList/PublicCalendarListItem.vue   |  28 ++---
 .../CalendarList/SubscriptionListNew.vue      |   6 +-
 .../AppNavigation/EmbedTopNavigation.vue      |   8 +-
 src/components/AppNavigation/Settings.vue     |  18 ++-
 .../AppNavigation/Settings/ImportScreen.vue   |   8 +-
 .../Settings/ImportScreenRow.vue              |  18 ++-
 .../Settings/SettingsImportSection.vue        |  13 +--
 .../Settings/SettingsTimezoneSelect.vue       |   9 +-
 src/components/Editor/Alarm/AlarmList.vue     |  17 ++-
 src/components/Editor/Alarm/AlarmListItem.vue |  64 ++++-------
 src/components/Editor/Alarm/AlarmListNew.vue  |   3 +-
 .../Editor/Alarm/AlarmTimeUnitSelect.vue      |   3 +-
 .../Invitees/AvatarParticipationStatus.vue    |   3 +-
 .../Editor/Invitees/InviteesList.vue          |  22 ++--
 .../Editor/Invitees/InviteesListItem.vue      |  27 ++---
 .../Editor/Invitees/InviteesListSearch.vue    |   9 +-
 .../Editor/Invitees/OrganizerListItem.vue     |  11 +-
 .../Properties/PropertyCalendarPicker.vue     |  22 ++--
 .../Editor/Properties/PropertySelect.vue      |  20 ++--
 .../Editor/Properties/PropertyText.vue        |  14 +--
 .../Editor/Properties/PropertyTitle.vue       |  10 +-
 .../Properties/PropertyTitleTimePicker.vue    |  68 +++--------
 src/components/Editor/Repeat/Repeat.vue       |  39 +++----
 .../Editor/Repeat/RepeatEndRepeat.vue         |  14 +--
 .../Editor/Repeat/RepeatFirstLastSelect.vue   |   3 +-
 .../Editor/Repeat/RepeatFreqInterval.vue      |   8 +-
 .../Repeat/RepeatFreqMonthlyOptions.vue       |  21 ++--
 .../Editor/Repeat/RepeatFreqSelect.vue        |   3 +-
 .../Editor/Repeat/RepeatFreqWeeklyOptions.vue |   5 +-
 .../Editor/Repeat/RepeatFreqYearlyOptions.vue |  18 ++-
 .../Editor/Repeat/RepeatOnTheSelect.vue       |  23 ++--
 src/components/Editor/SaveButtons.vue         |  17 +--
 src/components/Shared/CalendarPicker.vue      |  13 +--
 .../Shared/CalendarPickerOption.vue           |   6 +-
 src/components/Shared/TimezoneSelect.vue      |   5 +-
 src/fullcalendar/duration.js                  |   2 +-
 src/fullcalendar/eventClick.js                |   2 +-
 src/fullcalendar/select.js                    |   2 +-
 src/main.js                                   |  21 +---
 src/mixins/PropertyMixin.js                   |   2 +-
 src/models/calendar.js                        |   2 +-
 src/models/calendarObjectInstance.js          |   2 +-
 src/models/principal.js                       |   2 +-
 src/models/rfcProps.js                        |  12 +-
 src/router.js                                 |  36 +++---
 src/store/calendarObjectInstance.js           |   2 +-
 src/store/calendarObjects.js                  |   2 +-
 src/store/calendars.js                        |   2 +-
 src/store/importFiles.js                      |   2 +-
 src/store/importState.js                      |   2 +-
 src/store/index.js                            |   2 +-
 src/store/principals.js                       |   2 +-
 src/utils/illustration.js                     | 108 +++++++++---------
 src/views/Calendar.vue                        |  14 +--
 src/views/EditSidebar.vue                     | 101 +++++++---------
 src/views/EditSimple.vue                      |  43 +++----
 68 files changed, 511 insertions(+), 781 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index d01b545ec..3a676f5dc 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,78 +1,5 @@
 module.exports = {
-	root: true,
-	env: {
-		browser: true,
-		es6: true,
-		node: true,
-		jest: true
-	},
-	globals: {
-		dayNames: true,
-		dayNamesMin: true,
-		monthNames: true,
-		monthNamesShort: true,
-	},
-	parserOptions: {
-		parser: 'babel-eslint'
-	},
 	extends: [
-		'eslint:recommended',
-		'plugin:node/recommended',
-		'plugin:vue/essential',
-		'plugin:vue/recommended',
-		'standard'
-	],
-	plugins: ['vue', 'node'],
-	rules: {
-		// space before function ()
-		'space-before-function-paren': ['error', 'never'],
-		// curly braces always space
-		'object-curly-spacing': ['error', 'always'],
-		// stay consistent with array brackets
-		'array-bracket-newline': ['error', 'consistent'],
-		// 1tbs brace style
-		'brace-style': 'error',
-		// tabs only
-		indent: ['error', 'tab'],
-		'no-tabs': 0,
-		'vue/html-indent': ['error', 'tab'],
-		// only debug console
-		'no-console': ['error', { allow: ['error', 'warn', 'debug'] }],
-		// classes blocks
-		'padded-blocks': ['error', { classes: 'always' }],
-		// always add a trailing comma, for diff readability
-		'comma-dangle': ["error", "only-multiline"],
-		// always have the operator in front
-		'operator-linebreak': ['error', 'before'],
-		// ternary on multiline
-		'multiline-ternary': ['error', 'always-multiline'],
-		// force proper JSDocs
-		'valid-jsdoc': [2, {
-			'prefer': {
-				'return': 'returns'
-			},
-			'requireReturn': false,
-			'requireReturnDescription': false
-		}],
-		// es6 import/export and require
-		'node/no-unpublished-require': ['off'],
-		'node/no-unsupported-features/es-syntax': ['off'],
-		'node/no-unsupported-features/es-builtins': ['off'],
-		// space before self-closing elements
-		'vue/html-closing-bracket-spacing': 'error',
-		// code spacing with attributes
-		'vue/max-attributes-per-line': [
-			'error',
-			{
-				singleline: 3,
-				multiline: {
-					max: 3,
-					allowFirstLine: true
-				}
-			}
-		],
-		"node/no-missing-import": ["error", {
-			"tryExtensions": [".js", ".vue"]
-		}]
-	}
+		'nextcloud'
+	]
 };
diff --git a/css/app-sidebar.scss b/css/app-sidebar.scss
index 3d6d8ce12..3dca86c13 100644
--- a/css/app-sidebar.scss
+++ b/css/app-sidebar.scss
@@ -491,24 +491,6 @@
 		}
 	}
 
-	.calendar-picker-option {
-		width: 100%;
-		display: flex;
-		align-items: center;
-
-		&__color-indicator {
-			width: 12px;
-			height: 12px;
-			border-radius: 50%;
-			border: none;
-			margin-right: 8px;
-		}
-
-		&__avatar {
-			margin-left: auto;
-		}
-	}
-
 	.illustration-header {
 		max-height: 150px;
 		height: 150px;
@@ -601,3 +583,21 @@
 		border-bottom-color: var(--color-background-dark);
 	}
 }
+
+.calendar-picker-option {
+	width: 100%;
+	display: flex;
+	align-items: center;
+
+	&__color-indicator {
+		width: 12px;
+		height: 12px;
+		border-radius: 50%;
+		border: none;
+		margin-right: 8px;
+	}
+
+	&__avatar {
+		margin-left: auto;
+	}
+}
diff --git a/package-lock.json b/package-lock.json
index ae8a9628b..aeccbdd48 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6400,6 +6400,12 @@
         }
       }
     },
+    "eslint-config-nextcloud": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/eslint-config-nextcloud/-/eslint-config-nextcloud-0.0.6.tgz",
+      "integrity": "sha512-ktCzXVA8GrqZVljutkBKOq2hgKvzKyLhNCAB5bCjdmMo7DIky2ZYeMtDmiEUZCPoXbSJY0kyvnZPbcN4VYzyCg==",
+      "dev": true
+    },
     "eslint-config-standard": {
       "version": "12.0.0",
       "resolved": "http://registry.npmjs.org/eslint-config-standard/-/eslint-config-standard-12.0.0.tgz",
@@ -6689,6 +6695,15 @@
         }
       }
     },
+    "eslint-plugin-nextcloud": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-nextcloud/-/eslint-plugin-nextcloud-0.3.0.tgz",
+      "integrity": "sha512-LUD2qdirGL0BRt4uaMDGxen17mWVq9JwuGDt7P7Celz7bzdu0X48RrS8mhXn9e0w78+nYN5kPoULG2Bw04r4HA==",
+      "dev": true,
+      "requires": {
+        "requireindex": "~1.2.0"
+      }
+    },
     "eslint-plugin-node": {
       "version": "10.0.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-node/-/eslint-plugin-node-10.0.0.tgz",
@@ -12392,6 +12407,12 @@
       "integrity": "sha1-eZlTn8ngR6N5KPoZb44VY9q9Nt4=",
       "dev": true
     },
+    "requireindex": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/requireindex/-/requireindex-1.2.0.tgz",
+      "integrity": "sha512-L9jEkOi3ASd9PYit2cwRfyppc9NoABujTP8/5gFcbERmo5jUoAKovIC3fsF17pkTnGsrByysqX+Kxd2OTNI1ww==",
+      "dev": true
+    },
     "resolve": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.8.1.tgz",
diff --git a/package.json b/package.json
index 659ded1a2..d326df69a 100644
--- a/package.json
+++ b/package.json
@@ -83,10 +83,12 @@
 		"browserslist-config-nextcloud": "0.0.1",
 		"css-loader": "^3.2.0",
 		"eslint": "^5.16.0",
+		"eslint-config-nextcloud": "0.0.6",
 		"eslint-config-standard": "^12.0.0",
 		"eslint-friendly-formatter": "^4.0.1",
 		"eslint-loader": "^3.0.2",
 		"eslint-plugin-import": "^2.18.2",
+		"eslint-plugin-nextcloud": "^0.3.0",
 		"eslint-plugin-node": "^10.0.0",
 		"eslint-plugin-promise": "^4.2.1",
 		"eslint-plugin-standard": "^4.0.1",
diff --git a/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderDatePicker.vue b/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderDatePicker.vue
index c75c2ff81..b2f00b9e8 100644
--- a/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderDatePicker.vue
+++ b/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderDatePicker.vue
@@ -27,17 +27,15 @@
 			class="datepicker-button-section__previous button icon icon-leftarrow"
 			:title="previousLabel"
 			type="button"
-			@click="navigateToPreviousTimeRange"
-		/>
+			@click="navigateToPreviousTimeRange" />
 		<button
 			class="datepicker-button-section__datepicker-label button datepicker-label"
 			@click.stop.prevent="toggleDatepicker"
 			@mousedown.stop.prevent="doNothing"
-			@mouseup.stop.prevent="doNothing"
-		>
+			@mouseup.stop.prevent="doNothing">
 			{{ selectedDate | formatDateRage(view) }}
 		</button>
-		<datetime-picker
+		<DatetimePicker
 			ref="datepicker"
 			class="datepicker-button-section__datepicker"
 			:first-day-of-week="firstDay"
@@ -48,15 +46,13 @@
 			:not-after="maximumDate"
 			:value="selectedDate"
 			:input-attr="inputItemAttributes"
-			@change="navigateToDate"
-		/>
+			@change="navigateToDate" />
 		<button
 			:aria-label="nextLabel"
 			class="datepicker-button-section__next button icon icon-rightarrow"
 			:title="nextLabel"
 			type="button"
-			@click="navigateToNextTimeRange"
-		/>
+			@click="navigateToNextTimeRange" />
 	</div>
 </template>
 
diff --git a/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderTodayButton.vue b/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderTodayButton.vue
index 8b31fdfa9..c8aa45030 100644
--- a/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderTodayButton.vue
+++ b/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderTodayButton.vue
@@ -26,8 +26,7 @@
 			:aria-label="title"
 			class="button"
 			:title="title"
-			@click="today()"
-		>
+			@click="today()">
 			{{ $t('calendar', 'Today') }}
 		</button>
 	</div>
diff --git a/src/components/AppNavigation/CalendarList.vue b/src/components/AppNavigation/CalendarList.vue
index 731e0b3d7..29ae22167 100644
--- a/src/components/AppNavigation/CalendarList.vue
+++ b/src/components/AppNavigation/CalendarList.vue
@@ -20,40 +20,38 @@
   -->
 
 <template>
-	<transition-group v-if="!isPublic" id="calendars-list" name="list"
-		tag="ul"
-	>
-		<calendar-list-new
-			:key="newCalendarKey" :disabled="loadingCalendars"
-		/>
-		<calendar-list-item-loading-placeholder v-if="loadingCalendars" :key="loadingKeyCalendars" />
-		<calendar-list-item
+	<transition-group v-if="!isPublic"
+		id="calendars-list"
+		name="list"
+		tag="ul">
+		<CalendarListNew
+			:key="newCalendarKey"
+			:disabled="loadingCalendars" />
+		<CalendarListItemLoadingPlaceholder v-if="loadingCalendars" :key="loadingKeyCalendars" />
+		<CalendarListItem
 			v-for="calendar in calendars"
 			:key="calendar.id"
-			:calendar="calendar"
-		/>
+			:calendar="calendar" />
 
 		<AppNavigationSpacer
-			:key="spacerKey"
-		/>
+			:key="spacerKey" />
 
-		<subscription-list-new :key="newSubscriptionKey" :disabled="loadingCalendars" />
-		<calendar-list-item-loading-placeholder v-if="loadingCalendars" :key="loadingKeySubscriptions" />
-		<calendar-list-item
+		<SubscriptionListNew :key="newSubscriptionKey" :disabled="loadingCalendars" />
+		<CalendarListItemLoadingPlaceholder v-if="loadingCalendars" :key="loadingKeySubscriptions" />
+		<CalendarListItem
 			v-for="calendar in subscriptions"
 			:key="calendar.id"
-			:calendar="calendar"
-		/>
+			:calendar="calendar" />
 	</transition-group>
-	<transition-group v-else id="calendars-list" name="list"
-		tag="ul"
-	>
-		<calendar-list-item-loading-placeholder v-if="loadingCalendars" :key="loadingKeySubscriptions" />
-		<public-calendar-list-item
+	<transition-group v-else
+		id="calendars-list"
+		name="list"
+		tag="ul">
+		<CalendarListItemLoadingPlaceholder v-if="loadingCalendars" :key="loadingKeySubscriptions" />
+		<PublicCalendarListItem
 			v-for="calendar in subscriptions"
 			:key="calendar.id"
-			:calendar="calendar"
-		/>
+			:calendar="calendar" />
 	</transition-group>
 </template>
 
diff --git a/src/components/AppNavigation/CalendarList/CalendarListItem.vue b/src/components/AppNavigation/CalendarList/CalendarListItem.vue
index b9ebcf592..471b73de0 100644
--- a/src/components/AppNavigation/CalendarList/CalendarListItem.vue
+++ b/src/components/AppNavigation/CalendarList/CalendarListItem.vue
@@ -25,19 +25,16 @@
 		:loading="calendar.loading"
 		:title="calendar.displayName || $t('calendar', 'Untitled calendar')"
 		:class="{deleted: !!deleteTimeout, disabled: !calendar.enabled, 'open-sharing': shareMenuOpen}"
-		@click.prevent.stop="toggleEnabled"
-	>
+		@click.prevent.stop="toggleEnabled">
 		<AppNavigationIconBullet
 			v-if="calendar.enabled"
 			slot="icon"
 			:color="calendar.color"
-			@click.prevent.stop="toggleEnabled"
-		/>
+			@click.prevent.stop="toggleEnabled" />
 		<AppNavigationDisabledCalendarIconBullet
 			v-if="!calendar.enabled"
 			slot="icon"
-			@click.prevent.stop="toggleEnabled"
-		/>
+			@click.prevent.stop="toggleEnabled" />
 
 		<template v-if="!deleteTimeout" slot="counter">
 			<Actions v-if="showSharingIcon">
@@ -54,27 +51,23 @@
 			<ActionButton
 				v-if="showRenameLabel"
 				icon="icon-rename"
-				@click.prevent.stop="openRenameInput"
-			>
+				@click.prevent.stop="openRenameInput">
 				{{ $t('calendar', 'Edit name') }}
 			</ActionButton>
 			<ActionInput
 				v-if="showRenameInput"
 				icon="icon-rename"
 				:value="calendar.displayName"
-				@submit.prevent.stop="saveRenameInput"
-			/>
+				@submit.prevent.stop="saveRenameInput" />
 			<ActionText
 				v-if="showRenameSaving"
-				icon="icon-loading-small"
-			>
+				icon="icon-loading-small">
 				{{ $t('calendar', 'Saving name ...') }}
 			</ActionText>
 			<ActionButton
 				v-if="showColorLabel"
 				icon="icon-rename"
-				@click.prevent.stop="openColorInput"
-			>
+				@click.prevent.stop="openColorInput">
 				{{ $t('calendar', 'Edit color') }}
 			</ActionButton>
 			<ActionInput
@@ -82,38 +75,32 @@
 				icon="icon-rename"
 				:value="calendar.color"
 				type="color"
-				@submit.prevent.stop="saveColorInput"
-			/>
+				@submit.prevent.stop="saveColorInput" />
 			<ActionText
 				v-if="showColorSaving"
-				icon="icon-loading-small"
-			>
+				icon="icon-loading-small">
 				{{ $t('calendar', 'Saving color ...') }}
 			</ActionText>
 			<ActionButton
 				icon="icon-clippy"
-				@click.stop.prevent="copyLink"
-			>
+				@click.stop.prevent="copyLink">
 				{{ $t('calendar', 'Copy private link') }}
 			</ActionButton>
 			<ActionLink
 				icon="icon-download"
 				target="_blank"
 				:href="downloadUrl"
-				:title="$t('calendar', 'Download')"
-			/>
+				:title="$t('calendar', 'Download')" />
 			<ActionButton
 				v-if="calendar.isSharedWithMe"
 				icon="icon-delete"
-				@click.prevent.stop="deleteCalendar"
-			>
+				@click.prevent.stop="deleteCalendar">
 				{{ $t('calendar', 'Unshare from me') }}
 			</ActionButton>
 			<ActionButton
 				v-if="!calendar.isSharedWithMe"
 				icon="icon-delete"
-				@click.prevent.stop="deleteCalendar"
-			>
+				@click.prevent.stop="deleteCalendar">
 				{{ $t('calendar', 'Delete') }}
 			</ActionButton>
 		</template>
@@ -122,26 +109,26 @@
 			<ActionButton
 				v-if="calendar.isSharedWithMe"
 				icon="icon-history"
-				@click.prevent.stop="cancelDeleteCalendar"
-			>
+				@click.prevent.stop="cancelDeleteCalendar">
 				{{ $n('calendar', 'Unsharing the calendar in {countdown} second', 'Unsharing the calendar in {countdown} seconds', countdown, { countdown }) }}
 			</ActionButton>
 			<ActionButton
 				v-if="!calendar.isSharedWithMe"
 				icon="icon-history"
-				@click.prevent.stop="cancelDeleteCalendar"
-			>
+				@click.prevent.stop="cancelDeleteCalendar">
 				{{ $n('calendar', 'Deleting the calendar in {countdown} second', 'Deleting the calendar in {countdown} seconds', countdown, { countdown }) }}
 			</ActionButton>
 		</template>
 
 		<template v-if="!deleteTimeout">
 			<div v-show="shareMenuOpen" class="sharing-section">
-				<calendar-list-item-sharing-search v-if="calendar.canBeShared" :calendar="calendar" />
-				<calendar-list-item-sharing-publish-item v-if="calendar.canBePublished" :calendar="calendar" />
-				<calendar-list-item-sharing-share-item v-for="sharee in calendar.shares" v-show="shareMenuOpen" :key="sharee.uri"
-					:sharee="sharee" :calendar="calendar"
-				/>
+				<CalendarListItemSharingSearch v-if="calendar.canBeShared" :calendar="calendar" />
+				<CalendarListItemSharingPublishItem v-if="calendar.canBePublished" :calendar="calendar" />
+				<CalendarListItemSharingShareItem v-for="sharee in calendar.shares"
+					v-show="shareMenuOpen"
+					:key="sharee.uri"
+					:sharee="sharee"
+					:calendar="calendar" />
 			</div>
 		</template>
 	</AppNavigationItem>
@@ -150,6 +137,7 @@
 <script>
 import {
 	Avatar,
+	Actions,
 	ActionButton,
 	ActionInput,
 	ActionLink,
@@ -171,6 +159,7 @@ export default {
 	name: 'CalendarListItem',
 	components: {
 		Avatar,
+		Actions,
 		ActionButton,
 		ActionInput,
 		ActionLink,
@@ -317,7 +306,7 @@ export default {
 			}
 
 			return ''
-		},
+		}
 	},
 	methods: {
 		/**
@@ -490,7 +479,7 @@ export default {
 					this.showColorInput = true
 					this.showColorSaving = false
 				})
-		},
+		}
 	}
 }
 </script>
diff --git a/src/components/AppNavigation/CalendarList/CalendarListItemSharingPublishItem.vue b/src/components/AppNavigation/CalendarList/CalendarListItemSharingPublishItem.vue
index e1173828c..fb6518712 100644
--- a/src/components/AppNavigation/CalendarList/CalendarListItemSharingPublishItem.vue
+++ b/src/components/AppNavigation/CalendarList/CalendarListItemSharingPublishItem.vue
@@ -22,8 +22,7 @@
 <template>
 	<AppNavigationItem
 		:title="$t('calendar', 'Share link')"
-		:menu-open.sync="menuOpen"
-	>
+		:menu-open.sync="menuOpen">
 		<template slot="icon">
 			<div :class="{published: isPublished, 'icon-public': !isPublished, 'icon-public-white': isPublished}" class="avatar" />
 		</template>
@@ -32,15 +31,13 @@
 			<ActionButton
 				v-if="!publishingCalendar"
 				icon="icon-add"
-				@click.prevent.stop="publishCalendar"
-			>
+				@click.prevent.stop="publishCalendar">
 				{{ $t('calendar', 'Publish calendar') }}
 			</ActionButton>
 			<ActionButton
 				v-if="publishingCalendar"
 				icon="icon-loading-small"
-				:disabled="true"
-			>
+				:disabled="true">
 				{{ $t('calendar', 'Publishing calendar') }}
 			</ActionButton>
 		</template>
@@ -49,8 +46,7 @@
 			<Actions>
 				<ActionButton
 					icon="icon-clippy"
-					@click.prevent.stop="copyPublicLink"
-				>
+					@click.prevent.stop="copyPublicLink">
 					{{ $t('calendar', 'Copy public link') }}
 				</ActionButton>
 			</Actions>
@@ -59,85 +55,72 @@
 			<ActionButton
 				v-if="showEMailLabel"
 				icon="icon-mail"
-				@click.prevent.stop="openEMailLinkInput"
-			>
+				@click.prevent.stop="openEMailLinkInput">
 				{{ $t('calendar', 'Send link to calendar via email') }}
 			</ActionButton>
 			<ActionInput
 				v-if="showEMailInput"
 				icon="icon-mail"
-				@submit.prevent.stop="sendLinkViaEMail"
-			/>
+				@submit.prevent.stop="sendLinkViaEMail" />
 			<ActionText
 				v-if="showEMailSending"
-				icon="icon-loading-small"
-			>
+				icon="icon-loading-small">
 				{{ $t('calendar', 'Sending email ...') }}
 			</ActionText>
 
 			<ActionButton
 				v-if="showCopySubscriptionLinkLabel"
 				icon="icon-calendar-dark"
-				@click.prevent.stop="copySubscriptionLink"
-			>
+				@click.prevent.stop="copySubscriptionLink">
 				{{ $t('calendar', 'Copy subscription link') }}
 			</ActionButton>
 			<ActionText
 				v-if="showCopySubscriptionLinkSpinner"
-				icon="icon-loading-small"
-			>
+				icon="icon-loading-small">
 				{{ $t('calendar', 'Copying link ...') }}
 			</ActionText>
 			<ActionText
 				v-if="showCopySubscriptionLinkSuccess"
-				icon="icon-calendar-dark"
-			>
+				icon="icon-calendar-dark">
 				{{ $t('calendar', 'Copied link') }}
 			</ActionText>
 			<ActionText
 				v-if="showCopySubscriptionLinkError"
-				icon="icon-calendar-dark"
-			>
+				icon="icon-calendar-dark">
 				{{ $t('calendar', 'Could not copy link') }}
 			</ActionText>
 
 			<ActionButton
 				v-if="showCopyEmbedCodeLinkLabel"
 				icon="icon-embed"
-				@click.prevent.stop="copyEmbedCode"
-			>
+				@click.prevent.stop="copyEmbedCode">
 				{{ $t('calendar', 'Copy embedding code') }}
 			</ActionButton>
 			<ActionText
 				v-if="showCopyEmbedCodeLinkSpinner"
-				icon="icon-loading-small"
-			>
+				icon="icon-loading-small">
 				{{ $t('calendar', 'Copying code ...') }}
 			</ActionText>
 			<ActionText
 				v-if="showCopyEmbedCodeLinkSuccess"
-				icon="icon-embed"
-			>
+				icon="icon-embed">
 				{{ $t('calendar', 'Copied code') }}
 			</ActionText>
 			<ActionText
 				v-if="showCopyEmbedCodeLinkError"
-				icon="icon-embed"
-			>
+				icon="icon-embed">
 				{{ $t('calendar', 'Could not copy code') }}
 			</ActionText>
 
 			<ActionButton
 				v-if="!unpublishingCalendar"
 				icon="icon-delete"
-				@click.prevent.stop="unpublishCalendar"
-			>
+				@click.prevent.stop="unpublishCalendar">
 				{{ $t('calendar', 'Delete share link') }}
 			</ActionButton>
 			<ActionText
 				v-if="unpublishingCalendar"
-				icon="icon-loading-small"
-			>
+				icon="icon-loading-small">
 				{{ $t('calendar', 'Deleting share link ...') }}
 			</ActionText>
 		</template>
@@ -146,6 +129,7 @@
 
 <script>
 import {
+	Actions,
 	ActionButton,
 	ActionInput,
 	ActionText,
@@ -160,6 +144,7 @@ import {
 export default {
 	name: 'CalendarListItemSharingPublishItem',
 	components: {
+		Actions,
 		ActionButton,
 		ActionInput,
 		ActionText,
@@ -198,13 +183,13 @@ export default {
 			// delete public link
 			unpublishingCalendar: false,
 			// Status of actions menu:
-			menuOpen: false,
+			menuOpen: false
 		}
 	},
 	computed: {
 		isPublished() {
 			return this.calendar.publishURL !== null
-		},
+		}
 	},
 	methods: {
 		publishCalendar() {
diff --git a/src/components/AppNavigation/CalendarList/CalendarListItemSharingSearch.vue b/src/components/AppNavigation/CalendarList/CalendarListItemSharingSearch.vue
index 19c0777fb..56f442e9e 100644
--- a/src/components/AppNavigation/CalendarList/CalendarListItemSharingSearch.vue
+++ b/src/components/AppNavigation/CalendarList/CalendarListItemSharingSearch.vue
@@ -24,7 +24,7 @@
 
 <template>
 	<li class="app-navigation-entry__multiselect">
-		<multiselect
+		<Multiselect
 			id="users-groups-search"
 			:options="usersOrGroups"
 			:searchable="true"
@@ -38,10 +38,9 @@
 			track-by="user"
 			label="user"
 			@search-change="findSharee"
-			@change="shareCalendar"
-		>
+			@change="shareCalendar">
 			<span slot="noResult">{{ $t('calendar', 'No users or groups') }}</span>
-		</multiselect>
+		</Multiselect>
 	</li>
 </template>
 
@@ -50,14 +49,18 @@ import client from '../../../services/caldavService.js'
 import HttpClient from '@nextcloud/axios'
 import debounce from 'debounce'
 import { generateOcsUrl } from '@nextcloud/router'
+import { Multiselect } from '@nextcloud/vue'
 
 export default {
 	name: 'CalendarListItemSharingSearch',
+	components: {
+		Multiselect
+	},
 	props: {
 		calendar: {
 			type: Object,
 			required: true
-		},
+		}
 	},
 	data() {
 		return {
diff --git a/src/components/AppNavigation/CalendarList/CalendarListItemSharingShareItem.vue b/src/components/AppNavigation/CalendarList/CalendarListItemSharingShareItem.vue
index 5677129ce..3e034781c 100644
--- a/src/components/AppNavigation/CalendarList/CalendarListItemSharingShareItem.vue
+++ b/src/components/AppNavigation/CalendarList/CalendarListItemSharingShareItem.vue
@@ -21,8 +21,7 @@
 
 <template>
 	<AppNavigationItem
-		:title="sharee.displayName"
-	>
+		:title="sharee.displayName">
 		<template slot="icon">
 			<div v-if="sharee.isGroup" class="avatar icon-group" />
 			<div v-else-if="sharee.isCircle" class="avatar icon-circle" />
@@ -33,8 +32,7 @@
 			<ActionCheckbox
 				:disabled="updatingSharee"
 				:checked="sharee.writeable"
-				@update:checked="updatePermission"
-			>
+				@update:checked="updatePermission">
 				{{ $t('calendar', 'can edit') }}
 			</ActionCheckbox>
 		</template>
@@ -43,8 +41,7 @@
 			<ActionButton
 				icon="icon-delete"
 				:disabled="updatingSharee"
-				@click.prevent.stop="unshare"
-			>
+				@click.prevent.stop="unshare">
 				{{ $t('calendar', 'Unshare with {displayName}', { displayName: sharee.displayName }) }}
 			</ActionButton>
 		</template>
@@ -60,7 +57,7 @@ import {
 } from '@nextcloud/vue'
 
 export default {
-	name: 'CalendarLisItemSharingShareItem',
+	name: 'CalendarListItemSharingShareItem',
 	components: {
 		ActionButton,
 		ActionCheckbox,
@@ -79,7 +76,7 @@ export default {
 	},
 	data() {
 		return {
-			updatingSharee: false,
+			updatingSharee: false
 		}
 	},
 	computed: {
diff --git a/src/components/AppNavigation/CalendarList/CalendarListNew.vue b/src/components/AppNavigation/CalendarList/CalendarListNew.vue
index 35fea50a4..f7afdaad7 100644
--- a/src/components/AppNavigation/CalendarList/CalendarListNew.vue
+++ b/src/components/AppNavigation/CalendarList/CalendarListNew.vue
@@ -25,8 +25,7 @@
 		icon="icon-add"
 		:class="{disabled: disabled}"
 		:title="$t('calendar', 'New calendar')"
-		@click.prevent.stop="openDialog"
-	/>
+		@click.prevent.stop="openDialog" />
 
 	<ActionInput
 		v-else
@@ -34,8 +33,7 @@
 		:icon="inputIcon"
 		:value="name"
 		:disabled="isCreating"
-		@submit.prevent.stop="addCalendar"
-	>
+		@submit.prevent.stop="addCalendar">
 		{{ $t('calendar', 'Name of calendar') }}
 	</ActionInput>
 </template>
@@ -67,7 +65,7 @@ export default {
 		return {
 			isCreating: false,
 			showForm: false,
-			name: '',
+			name: ''
 		}
 	},
 	computed: {
diff --git a/src/components/AppNavigation/CalendarList/PublicCalendarListItem.vue b/src/components/AppNavigation/CalendarList/PublicCalendarListItem.vue
index 9c17a6915..69b702712 100644
--- a/src/components/AppNavigation/CalendarList/PublicCalendarListItem.vue
+++ b/src/components/AppNavigation/CalendarList/PublicCalendarListItem.vue
@@ -24,48 +24,41 @@
 		:loading="calendar.loading"
 		:title="calendar.displayName || $t('calendar', 'Untitled calendar')"
 		:menu-open.sync="menuOpen"
-		@click.prevent.stop="toggleEnabled"
-	>
+		@click.prevent.stop="toggleEnabled">
 		<AppNavigationIconBullet
 			v-if="calendar.enabled"
 			slot="icon"
 			:color="calendar.color"
-			@click.prevent.stop="toggleEnabled"
-		/>
+			@click.prevent.stop="toggleEnabled" />
 
 		<template slot="counter">
 			<Avatar
 				:user="owner"
 				:is-guest="true"
 				:disable-tooltip="true"
-				:disable-menu="true"
-			/>
+				:disable-menu="true" />
 		</template>
 
 		<template slot="actions">
 			<ActionButton
 				v-if="showCopySubscriptionLinkLabel"
 				icon="icon-calendar-dark"
-				@click.prevent.stop="copySubscriptionLink"
-			>
+				@click.prevent.stop="copySubscriptionLink">
 				{{ $t('calendar', 'Copy subscription link') }}
 			</ActionButton>
 			<ActionText
 				v-if="showCopySubscriptionLinkSpinner"
-				icon="icon-loading-small"
-			>
+				icon="icon-loading-small">
 				{{ $t('calendar', 'Copying link ...') }}
 			</ActionText>
 			<ActionText
 				v-if="showCopySubscriptionLinkSuccess"
-				icon="icon-calendar-dark"
-			>
+				icon="icon-calendar-dark">
 				{{ $t('calendar', 'Copied link') }}
 			</ActionText>
 			<ActionText
 				v-if="showCopySubscriptionLinkError"
-				icon="icon-calendar-dark"
-			>
+				icon="icon-calendar-dark">
 				{{ $t('calendar', 'Could not copy link') }}
 			</ActionText>
 
@@ -73,8 +66,7 @@
 				icon="icon-download"
 				target="_blank"
 				:href="downloadUrl"
-				:title="$t('calendar', 'Download')"
-			/>
+				:title="$t('calendar', 'Download')" />
 		</template>
 	</AppNavigationItem>
 </template>
@@ -100,7 +92,7 @@ export default {
 		ActionLink,
 		ActionText,
 		AppNavigationIconBullet,
-		AppNavigationItem,
+		AppNavigationItem
 	},
 	props: {
 		calendar: {
@@ -146,7 +138,7 @@ export default {
 			}
 
 			return userId
-		},
+		}
 	},
 	methods: {
 		copySubscriptionLink() {
diff --git a/src/components/AppNavigation/CalendarList/SubscriptionListNew.vue b/src/components/AppNavigation/CalendarList/SubscriptionListNew.vue
index 359694600..ee9a4054f 100644
--- a/src/components/AppNavigation/CalendarList/SubscriptionListNew.vue
+++ b/src/components/AppNavigation/CalendarList/SubscriptionListNew.vue
@@ -25,8 +25,7 @@
 		icon="icon-add"
 		:class="{disabled: disabled}"
 		:title="$t('calendar', 'New subscription')"
-		@click.prevent.stop="openDialog"
-	/>
+		@click.prevent.stop="openDialog" />
 
 	<ActionInput
 		v-else
@@ -34,8 +33,7 @@
 		:icon="inputIcon"
 		:value="link"
 		:disabled="isCreating"
-		@submit.prevent.stop="addCalendar"
-	>
+		@submit.prevent.stop="addCalendar">
 		{{ $t('calendar', 'Link to iCal') }}
 	</ActionInput>
 </template>
diff --git a/src/components/AppNavigation/EmbedTopNavigation.vue b/src/components/AppNavigation/EmbedTopNavigation.vue
index 6c962c236..d91e744f2 100644
--- a/src/components/AppNavigation/EmbedTopNavigation.vue
+++ b/src/components/AppNavigation/EmbedTopNavigation.vue
@@ -16,16 +16,14 @@
 					icon="icon-download"
 					target="_blank"
 					:href="calendar.url + '?export'"
-					:title="$t('calendar', 'Download {name}', { name: calendar.displayName || $t('calendar', 'Untitled calendar') })"
-				/>
+					:title="$t('calendar', 'Download {name}', { name: calendar.displayName || $t('calendar', 'Untitled calendar') })" />
 			</Actions>
 			<Actions default-icon="icon-calendar-dark">
 				<ActionButton
 					v-for="calendar in subscriptions"
 					:key="calendar.id"
 					icon="icon-calendar-dark"
-					@click.prevent.stop="copySubscriptionLink(calendar)"
-				>
+					@click.prevent.stop="copySubscriptionLink(calendar)">
 					{{ $t('calendar', 'Subscribe to {name}', { name: calendar.displayName || $t('calendar', 'Untitled calendar') }) }}
 				</ActionButton>
 			</Actions>
@@ -61,7 +59,7 @@ export default {
 	computed: {
 		...mapGetters({
 			subscriptions: 'sortedSubscriptions'
-		}),
+		})
 	},
 	methods: {
 		copySubscriptionLink(calendar) {
diff --git a/src/components/AppNavigation/Settings.vue b/src/components/AppNavigation/Settings.vue
index 3ef8cf008..1ad295521 100644
--- a/src/components/AppNavigation/Settings.vue
+++ b/src/components/AppNavigation/Settings.vue
@@ -27,32 +27,28 @@
 				class="settings-fieldset-interior-item"
 				:checked="birthdayCalendar"
 				:disabled="isBirthdayCalendarDisabled"
-				@update:checked="toggleBirthdayEnabled"
-			>
+				@update:checked="toggleBirthdayEnabled">
 				{{ $t('calendar', 'Enable birthday calendar') }}
 			</ActionCheckbox>
 			<ActionCheckbox
 				class="settings-fieldset-interior-item"
 				:checked="showPopover"
 				:disabled="savingPopover"
-				@update:checked="togglePopoverEnabled"
-			>
+				@update:checked="togglePopoverEnabled">
 				{{ $t('calendar', 'Enable simplified editor') }}
 			</ActionCheckbox>
 			<ActionCheckbox
 				class="settings-fieldset-interior-item"
 				:checked="showWeekends"
 				:disabled="savingWeekend"
-				@update:checked="toggleWeekendsEnabled"
-			>
+				@update:checked="toggleWeekendsEnabled">
 				{{ $t('calendar', 'Show weekends') }}
 			</ActionCheckbox>
 			<ActionCheckbox
 				class="settings-fieldset-interior-item"
 				:checked="showWeekNumbers"
 				:disabled="savingWeekNumber"
-				@update:checked="toggleWeekNumberEnabled"
-			>
+				@update:checked="toggleWeekNumberEnabled">
 				{{ $t('calendar', 'Show week numbers') }}
 			</ActionCheckbox>
 			<SettingsTimezoneSelect :is-disabled="loadingCalendars" />
@@ -105,7 +101,7 @@ export default {
 			savingBirthdayCalendar: false,
 			savingPopover: false,
 			savingWeekend: false,
-			savingWeekNumber: false,
+			savingWeekNumber: false
 		}
 	},
 	computed: {
@@ -116,7 +112,7 @@ export default {
 			showPopover: state => !state.settings.skipPopover,
 			showWeekends: state => state.settings.showWeekends,
 			showWeekNumbers: state => state.settings.showWeekNumbers,
-			timezone: state => state.settings.timezone,
+			timezone: state => state.settings.timezone
 		}),
 		isBirthdayCalendarDisabled() {
 			return this.savingBirthdayCalendar || this.loadingCalendars
@@ -202,7 +198,7 @@ export default {
 			this.$copyText(url)
 				.then(e => this.$toast.success(this.$t('calendar', 'CalDAV link copied to clipboard.')))
 				.catch(e => this.$toast.error(this.$t('calendar', 'CalDAV link could not be copied to clipboard.')))
-		},
+		}
 	}
 }
 </script>
diff --git a/src/components/AppNavigation/Settings/ImportScreen.vue b/src/components/AppNavigation/Settings/ImportScreen.vue
index 8b782f37a..2a862555a 100644
--- a/src/components/AppNavigation/Settings/ImportScreen.vue
+++ b/src/components/AppNavigation/Settings/ImportScreen.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<modal class="import-modal" size="large" @close="cancelImport">
+	<Modal class="import-modal" size="large" @close="cancelImport">
 		<h2 class="import-modal__title">
 			{{ $t('calendar', 'Import calendars') }}
 		</h2>
@@ -38,7 +38,7 @@
 					{{ $t('calendar', 'Calendar to import into') }}
 				</div>
 			</li>
-			<import-screen-row v-for="(file, index) in files" :key="`import-file-${index}`" :file="file" />
+			<ImportScreenRow v-for="(file, index) in files" :key="`import-file-${index}`" :file="file" />
 		</transition-group>
 
 		<div class="import-modal__actions">
@@ -49,7 +49,7 @@
 				{{ $n('calendar', 'Import calendar', 'Import calendars', files.length) }}
 			</button>
 		</div>
-	</modal>
+	</Modal>
 </template>
 
 <script>
@@ -68,7 +68,7 @@ export default {
 		files: {
 			type: Array,
 			required: true
-		},
+		}
 	},
 	computed: {
 		headerRowKey() {
diff --git a/src/components/AppNavigation/Settings/ImportScreenRow.vue b/src/components/AppNavigation/Settings/ImportScreenRow.vue
index f5fa06678..8946b200a 100644
--- a/src/components/AppNavigation/Settings/ImportScreenRow.vue
+++ b/src/components/AppNavigation/Settings/ImportScreenRow.vue
@@ -25,14 +25,16 @@
 		<div class="import-modal-file-item__filename">
 			{{ file.name }}
 		</div>
-		<calendar-picker class="import-modal-file-item__calendar-select" :calendar="calendar"
-			:calendars="calendars" @selectCalendar="selectCalendar"
-		/>
+		<CalendarPicker class="import-modal-file-item__calendar-select"
+			:calendar="calendar"
+			:calendars="calendars"
+			@selectCalendar="selectCalendar" />
 	</li>
 </template>
 
 <script>
 import CalendarPicker from '../../Shared/CalendarPicker.vue'
+import { getDefaultColor } from '../../../utils/color.js'
 
 export default {
 	name: 'ImportScreenRow',
@@ -56,7 +58,10 @@ export default {
 			if (calendarId === 'new') {
 				return {
 					id: 'new',
-					displayName: this.$t('calendar', 'New calendar')
+					displayName: this.$t('calendar', 'New calendar'),
+					isSharedWithMe: false,
+					color: getDefaultColor(), // TODO - use uid2color instead
+					owner: this.$store.getters.getCurrentUserPrincipal.url
 				}
 			}
 
@@ -71,7 +76,10 @@ export default {
 
 			calendars.push({
 				id: 'new',
-				displayName: this.$t('calendar', 'New calendar')
+				displayName: this.$t('calendar', 'New calendar'),
+				isSharedWithMe: false,
+				color: getDefaultColor(), // TODO - use uid2color instead
+				owner: this.$store.getters.getCurrentUserPrincipal.url
 			})
 
 			return calendars
diff --git a/src/components/AppNavigation/Settings/SettingsImportSection.vue b/src/components/AppNavigation/Settings/SettingsImportSection.vue
index e5bc77d68..88262378e 100644
--- a/src/components/AppNavigation/Settings/SettingsImportSection.vue
+++ b/src/components/AppNavigation/Settings/SettingsImportSection.vue
@@ -24,8 +24,7 @@
 		<progress
 			class="settings-fieldset-interior-item__progressbar"
 			:value="imported"
-			:max="total"
-		/>
+			:max="total" />
 	</li>
 	<li v-else class="settings-fieldset-interior-item">
 		<label class="settings-fieldset-interior-item__import-button button icon icon-upload" :for="inputUid">
@@ -38,15 +37,13 @@
 			:accept="supportedFileTypes"
 			:disabled="disableImport"
 			multiple
-			@change="processFiles"
-		>
+			@change="processFiles">
 
-		<import-screen
+		<ImportScreen
 			v-if="showImportModal"
 			:files="files"
 			@cancel-import="cancelImport"
-			@import-calendar="importCalendar"
-		/>
+			@import-calendar="importCalendar" />
 	</li>
 </template>
 
@@ -75,7 +72,7 @@ export default {
 			stage: state => state.importState.stage,
 			total: state => state.importState.total,
 			accepted: state => state.importState.accepted,
-			denied: state => state.importState.denied,
+			denied: state => state.importState.denied
 		}),
 		/**
 		 * Total amount of processed calendar-objects, either accepted or failed
diff --git a/src/components/AppNavigation/Settings/SettingsTimezoneSelect.vue b/src/components/AppNavigation/Settings/SettingsTimezoneSelect.vue
index 010ec720a..a9b576f7d 100644
--- a/src/components/AppNavigation/Settings/SettingsTimezoneSelect.vue
+++ b/src/components/AppNavigation/Settings/SettingsTimezoneSelect.vue
@@ -21,11 +21,10 @@
 
 <template>
 	<li class="settings-fieldset-interior-item settings-fieldset-interior-item--timezone">
-		<timezone-select
+		<TimezoneSelect
 			:additional-timezones="additionalTimezones"
 			:value="timezone"
-			@change="setTimezoneValue"
-		/>
+			@change="setTimezoneValue" />
 	</li>
 </template>
 
@@ -65,7 +64,7 @@ export default {
 					detected: detectTimezone()
 				})
 			}]
-		},
+		}
 	},
 	methods: {
 		/**
@@ -79,7 +78,7 @@ export default {
 					console.error(error)
 					this.$toast(this.$t('calendar', 'New setting was not saved successfully.'))
 				})
-		},
+		}
 	}
 }
 </script>
diff --git a/src/components/Editor/Alarm/AlarmList.vue b/src/components/Editor/Alarm/AlarmList.vue
index 754184e58..19f6e4be3 100644
--- a/src/components/Editor/Alarm/AlarmList.vue
+++ b/src/components/Editor/Alarm/AlarmList.vue
@@ -22,21 +22,18 @@
 
 <template>
 	<div class="property-alarm-list">
-		<alarm-list-item
+		<AlarmListItem
 			v-for="(alarm, index) in alarms"
 			:key="index"
 			:alarm="alarm"
 			:calendar-object-instance="calendarObjectInstance"
 			:is-read-only="isReadOnly"
-			@removeAlarm="removeAlarm"
-		/>
-		<alarm-list-new
+			@removeAlarm="removeAlarm" />
+		<AlarmListNew
 			v-if="!isReadOnly"
-			@addAlarm="addAlarm"
-		/>
-		<no-alarm-view
-			v-if="isListEmpty"
-		/>
+			@addAlarm="addAlarm" />
+		<NoAlarmView
+			v-if="isListEmpty" />
 	</div>
 </template>
 
@@ -61,7 +58,7 @@ export default {
 		calendarObjectInstance: {
 			type: Object,
 			required: true
-		},
+		}
 	},
 	computed: {
 		alarms() {
diff --git a/src/components/Editor/Alarm/AlarmListItem.vue b/src/components/Editor/Alarm/AlarmListItem.vue
index f57f0839a..8e8ecc69f 100644
--- a/src/components/Editor/Alarm/AlarmListItem.vue
+++ b/src/components/Editor/Alarm/AlarmListItem.vue
@@ -24,55 +24,47 @@
 	<!-- Yes, technically an alarm is a component, not a property, but for the matter of CSS names it really doesn't matter -->
 	<div
 		v-click-outside="closeAlarmEditor"
-		class="property-alarm-item"
-	>
+		class="property-alarm-item">
 		<div class="property-alarm-item__icon">
 			<div class="icon" :class="icon" />
 		</div>
 		<div
 			v-if="!isEditing"
-			class="property-alarm-item__label"
-		>
+			class="property-alarm-item__label">
 			{{ alarm | formatAlarm(isAllDay, currentUserTimezone) }}
 		</div>
 		<div
 			v-if="isEditing && isRelativeAlarm && !isAllDay"
-			class="property-alarm-item__edit property-alarm-item__edit--timed"
-		>
+			class="property-alarm-item__edit property-alarm-item__edit--timed">
 			<input
 				type="number"
 				min="0"
 				max="3600"
 				:value="alarm.relativeAmountTimed"
-				@input="changeRelativeAmountTimed"
-			>
-			<alarm-time-unit-select
+				@input="changeRelativeAmountTimed">
+			<AlarmTimeUnitSelect
 				:is-all-day="isAllDay"
 				:count="alarm.relativeAmountTimed"
 				:unit="alarm.relativeUnitTimed"
 				:disabled="false"
-				@change="changeRelativeUnitTimed"
-			/>
+				@change="changeRelativeUnitTimed" />
 		</div>
 		<div
 			v-if="isEditing && isRelativeAlarm && isAllDay"
-			class="property-alarm-item__edit property-alarm-item__edit--all-day"
-		>
+			class="property-alarm-item__edit property-alarm-item__edit--all-day">
 			<div>
 				<input
 					type="number"
 					min="0"
 					max="3600"
 					:value="alarm.relativeAmountAllDay"
-					@input="changeRelativeAmountAllDay"
-				>
-				<alarm-time-unit-select
+					@input="changeRelativeAmountAllDay">
+				<AlarmTimeUnitSelect
 					:is-all-day="isAllDay"
 					:count="alarm.relativeAmountAllDay"
 					:unit="alarm.relativeUnitAllDay"
 					:disabled="false"
-					@change="changeRelativeUnitAllDay"
-				/>
+					@change="changeRelativeUnitAllDay" />
 			</div>
 			<span>
 				{{ $t('calendar', 'before at') }}
@@ -82,31 +74,26 @@
 				:format="timeFormat"
 				type="time"
 				:value="relativeAllDayDate"
-				@change="changeRelativeHourMinuteAllDay"
-			/>
+				@change="changeRelativeHourMinuteAllDay" />
 		</div>
 		<div
 			v-if="isEditing && isAbsoluteAlarm"
-			class="property-alarm-item__edit property-alarm-item__edit--absolute"
-		>
+			class="property-alarm-item__edit property-alarm-item__edit--absolute">
 			<DatetimePicker
 				lang="en"
 				:format="absoluteDateFormat"
 				type="datetime"
 				:value="alarm.absoluteDate"
-				@change="changeAbsoluteDate"
-			/>
+				@change="changeAbsoluteDate" />
 		</div>
 		<div
 			v-if="!isReadOnly"
-			class="property-alarm-item__options"
-		>
+			class="property-alarm-item__options">
 			<Actions>
 				<ActionButton
 					v-if="canEdit"
 					icon="icon-edit"
-					@click="editAlarm"
-				>
+					@click="editAlarm">
 					{{ $t('calendar', 'Edit reminder') }}
 				</ActionButton>
 
@@ -114,32 +101,28 @@
 					v-if="isEditing"
 					:name="alarmTypeName"
 					:checked="isAlarmTypeDisplay"
-					@change="changeType('DISPLAY')"
-				>
+					@change="changeType('DISPLAY')">
 					{{ $t('calendar', 'Notification') }}
 				</ActionRadio>
 				<ActionRadio
 					v-if="isEditing"
 					:name="alarmTypeName"
 					:checked="isAlarmTypeEmail"
-					@change="changeType('EMAIL')"
-				>
+					@change="changeType('EMAIL')">
 					{{ $t('calendar', 'Email') }}
 				</ActionRadio>
 				<ActionRadio
 					v-if="isEditing && isAlarmTypeAudio"
 					:name="alarmTypeName"
 					:checked="isAlarmTypeAudio"
-					@change="changeType('AUDIO')"
-				>
+					@change="changeType('AUDIO')">
 					{{ $t('calendar', 'Audio notification') }}
 				</ActionRadio>
 				<ActionRadio
 					v-if="isEditing && isAlarmTypeOther"
 					:name="alarmTypeName"
 					:checked="isAlarmTypeOther"
-					@change="changeType(alarm.type)"
-				>
+					@change="changeType(alarm.type)">
 					{{ $t('calendar', 'Other notification') }}
 				</ActionRadio>
 
@@ -147,23 +130,20 @@
 					v-if="isEditing && !isRecurring"
 					:name="alarmTriggerName"
 					:checked="isRelativeAlarm"
-					@change="switchToRelativeAlarm"
-				>
+					@change="switchToRelativeAlarm">
 					{{ $t('calendar', 'Relative to event') }}
 				</ActionRadio>
 				<ActionRadio
 					v-if="isEditing && !isRecurring"
 					:name="alarmTriggerName"
 					:checked="isAbsoluteAlarm"
-					@change="switchToAbsoluteAlarm"
-				>
+					@change="switchToAbsoluteAlarm">
 					{{ $t('calendar', 'On date') }}
 				</ActionRadio>
 
 				<ActionButton
 					icon="icon-delete"
-					@click="removeAlarm"
-				>
+					@click="removeAlarm">
 					{{ $t('calendar', 'Remove reminder') }}
 				</ActionButton>
 			</Actions>
diff --git a/src/components/Editor/Alarm/AlarmListNew.vue b/src/components/Editor/Alarm/AlarmListNew.vue
index 415ed0f77..f66f8f308 100644
--- a/src/components/Editor/Alarm/AlarmListNew.vue
+++ b/src/components/Editor/Alarm/AlarmListNew.vue
@@ -23,8 +23,7 @@
 <template>
 	<button
 		class="editor-reminders-list-new-button icon-add"
-		@click="addReminder"
-	>
+		@click="addReminder">
 		{{ $t('calendar', 'Add reminder') }}
 	</button>
 </template>
diff --git a/src/components/Editor/Alarm/AlarmTimeUnitSelect.vue b/src/components/Editor/Alarm/AlarmTimeUnitSelect.vue
index d9287fc32..80bb83060 100644
--- a/src/components/Editor/Alarm/AlarmTimeUnitSelect.vue
+++ b/src/components/Editor/Alarm/AlarmTimeUnitSelect.vue
@@ -28,8 +28,7 @@
 		:disabled="disabled"
 		track-by="unit"
 		label="label"
-		@select="select"
-	/>
+		@select="select" />
 </template>
 
 <script>
diff --git a/src/components/Editor/Invitees/AvatarParticipationStatus.vue b/src/components/Editor/Invitees/AvatarParticipationStatus.vue
index 9f148583e..1a77dd771 100644
--- a/src/components/Editor/Invitees/AvatarParticipationStatus.vue
+++ b/src/components/Editor/Invitees/AvatarParticipationStatus.vue
@@ -24,8 +24,7 @@
 	<div v-tooltip="tooltip" class="avatar-participation-status">
 		<Avatar
 			:disable-tooltip="true"
-			:user="avatarLink"
-		/>
+			:user="avatarLink" />
 		<div class="avatar-participation-status__indicator" :class="className" />
 	</div>
 </template>
diff --git a/src/components/Editor/Invitees/InviteesList.vue b/src/components/Editor/Invitees/InviteesList.vue
index 84b8b5ca8..4b944ca9b 100644
--- a/src/components/Editor/Invitees/InviteesList.vue
+++ b/src/components/Editor/Invitees/InviteesList.vue
@@ -22,27 +22,23 @@
 
 <template>
 	<div>
-		<invitees-list-search
+		<InviteesListSearch
 			v-if="!isReadOnly"
 			:already-invited-emails="alreadyInvitedEmails"
-			@addAttendee="addAttendee"
-		/>
-		<organizer-list-item
+			@addAttendee="addAttendee" />
+		<OrganizerListItem
 			v-if="hasOrganizer"
 			:is-read-only="isReadOnly"
-			:organizer="calendarObjectInstance.organizer"
-		/>
-		<invitees-list-item
+			:organizer="calendarObjectInstance.organizer" />
+		<InviteesListItem
 			v-for="invitee in inviteesWithoutOrganizer"
 			:key="invitee.email"
 			:attendee="invitee"
 			:is-read-only="isReadOnly"
 			:organizer-display-name="organizerDisplayName"
-			@removeAttendee="removeAttendee"
-		/>
-		<no-invitees-view
-			v-if="isListEmpty"
-		/>
+			@removeAttendee="removeAttendee" />
+		<NoInviteesView
+			v-if="isListEmpty" />
 	</div>
 </template>
 
@@ -68,7 +64,7 @@ export default {
 		calendarObjectInstance: {
 			type: Object,
 			required: true
-		},
+		}
 	},
 	computed: {
 		inviteesWithoutOrganizer() {
diff --git a/src/components/Editor/Invitees/InviteesListItem.vue b/src/components/Editor/Invitees/InviteesListItem.vue
index 6705d9899..6ae015065 100644
--- a/src/components/Editor/Invitees/InviteesListItem.vue
+++ b/src/components/Editor/Invitees/InviteesListItem.vue
@@ -22,14 +22,13 @@
 
 <template>
 	<div class="invitees-list-item">
-		<avatar-participation-status
+		<AvatarParticipationStatus
 			:attendee-is-organizer="false"
 			:is-viewed-by-organizer="isViewedByOrganizer"
 			:avatar-link="avatarLink"
 			:participation-status="attendee.participationStatus"
 			:organizer-display-name="organizerDisplayName"
-			:common-name="commonName"
-		/>
+			:common-name="commonName" />
 		<div class="invitees-list-item__displayname">
 			{{ commonName }}
 		</div>
@@ -37,44 +36,38 @@
 			<Actions v-if="isViewedByOrganizer">
 				<ActionCheckbox
 					:checked="attendee.rsvp"
-					@change="toggleRSVP"
-				>
+					@change="toggleRSVP">
 					{{ $t('calendar', 'Send e-mail') }}
 				</ActionCheckbox>
 
 				<ActionRadio
 					:name="radioName"
 					:checked="isChair"
-					@change="changeRole('CHAIR')"
-				>
+					@change="changeRole('CHAIR')">
 					{{ $t('calendar', 'Chairperson') }}
 				</ActionRadio>
 				<ActionRadio
 					:name="radioName"
 					:checked="isRequiredParticipant"
-					@change="changeRole('REQ-PARTICIPANT')"
-				>
+					@change="changeRole('REQ-PARTICIPANT')">
 					{{ $t('calendar', 'Required participant') }}
 				</ActionRadio>
 				<ActionRadio
 					:name="radioName"
 					:checked="isOptionalParticipant"
-					@change="changeRole('OPT-PARTICIPANT')"
-				>
+					@change="changeRole('OPT-PARTICIPANT')">
 					{{ $t('calendar', 'Optional participant') }}
 				</ActionRadio>
 				<ActionRadio
 					:name="radioName"
 					:checked="isNonParticipant"
-					@change="changeRole('NON-PARTICIPANT')"
-				>
+					@change="changeRole('NON-PARTICIPANT')">
 					{{ $t('calendar', 'Non-participant') }}
 				</ActionRadio>
 
 				<ActionButton
 					icon="icon-delete"
-					@click="removeAttendee"
-				>
+					@click="removeAttendee">
 					{{ $t('calendar', 'Remove attendee') }}
 				</ActionButton>
 			</Actions>
@@ -112,7 +105,7 @@ export default {
 		isReadOnly: {
 			type: Boolean,
 			required: true
-		},
+		}
 	},
 	computed: {
 		avatarLink() {
@@ -148,7 +141,7 @@ export default {
 		isViewedByOrganizer() {
 			// TODO: check if also viewed by organizer
 			return !this.isReadOnly
-		},
+		}
 	},
 	methods: {
 		/**
diff --git a/src/components/Editor/Invitees/InviteesListSearch.vue b/src/components/Editor/Invitees/InviteesListSearch.vue
index 3fba9fd1e..a37b0a84c 100644
--- a/src/components/Editor/Invitees/InviteesListSearch.vue
+++ b/src/components/Editor/Invitees/InviteesListSearch.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<multiselect
+	<Multiselect
 		class="invitees-search"
 		:options="matches"
 		:searchable="true"
@@ -34,8 +34,7 @@
 		track-by="email"
 		label="dropdownName"
 		@search-change="findAttendees"
-		@select="addAttendee"
-	>
+		@select="addAttendee">
 		<!--		<template slot="singleLabel" slot-scope="props"><img class="option__image" :src="props.option.img" alt="No Man’s Sky"><span class="option__desc"><span class="option__title">{{ props.option.title }}</span></span></template>-->
 		<template slot="singleLabel" slot-scope="props">
 			<div class="invitees-search-list-item">
@@ -75,7 +74,7 @@
 				</div>
 			</div>
 		</template>
-	</multiselect>
+	</Multiselect>
 </template>
 
 <script>
@@ -123,7 +122,7 @@ export default {
 			if (query.length > 0) {
 				const promises = [
 					this.findAttendeesFromContactsAPI(query),
-					this.findAttendeesFromDAV(query),
+					this.findAttendeesFromDAV(query)
 				]
 
 				const [contactsResults, davResults] = await Promise.all(promises)
diff --git a/src/components/Editor/Invitees/OrganizerListItem.vue b/src/components/Editor/Invitees/OrganizerListItem.vue
index 7d03e25ef..c6f64e5ce 100644
--- a/src/components/Editor/Invitees/OrganizerListItem.vue
+++ b/src/components/Editor/Invitees/OrganizerListItem.vue
@@ -22,14 +22,13 @@
 
 <template>
 	<div class="invitees-list-item">
-		<avatar-participation-status
+		<AvatarParticipationStatus
 			:attendee-is-organizer="true"
 			:avatar-link="avatarLink"
 			:is-viewed-by-organizer="isViewedByOrganizer"
 			:common-name="commonName"
 			:organizer-display-name="commonName"
-			participation-status="ACCEPTED"
-		/>
+			participation-status="ACCEPTED" />
 		<div class="invitees-list-item__displayname">
 			{{ commonName }}
 		</div>
@@ -50,12 +49,12 @@ export default {
 	props: {
 		organizer: {
 			type: Object,
-			required: true,
+			required: true
 		},
 		isReadOnly: {
 			type: Boolean,
 			required: true
-		},
+		}
 	},
 	computed: {
 		avatarLink() {
@@ -75,7 +74,7 @@ export default {
 		},
 		isViewedByOrganizer() {
 			return true
-		},
+		}
 	}
 }
 </script>
diff --git a/src/components/Editor/Properties/PropertyCalendarPicker.vue b/src/components/Editor/Properties/PropertyCalendarPicker.vue
index 28d8e4263..b4efdcf93 100644
--- a/src/components/Editor/Properties/PropertyCalendarPicker.vue
+++ b/src/components/Editor/Properties/PropertyCalendarPicker.vue
@@ -24,28 +24,24 @@
 	<div v-if="display" class="property-select">
 		<div
 			class="property-select__icon icon-calendar-dark"
-			:title="$t('calendar', 'Calendar')"
-		/>
+			:title="$t('calendar', 'Calendar')" />
 
 		<div
 			class="property-select__input"
-			:class="{ 'property-select__input--readonly-calendar-picker': isReadOnly }"
-		>
-			<calendar-picker
+			:class="{ 'property-select__input--readonly-calendar-picker': isReadOnly }">
+			<CalendarPicker
 				v-if="!isReadOnly"
 				:calendar="calendar"
 				:calendars="calendars"
 				:show-calendar-on-select="true"
-				@selectCalendar="selectCalendar"
-			/>
+				@selectCalendar="selectCalendar" />
 
-			<calendar-picker-option
+			<CalendarPickerOption
 				v-else
 				:color="calendar.color"
 				:display-name="calendar.displayName"
 				:is-shared-with-me="calendar.isSharedWithMe"
-				:owner="calendar.owner"
-			/>
+				:owner="calendar.owner" />
 		</div>
 	</div>
 </template>
@@ -67,17 +63,17 @@ export default {
 		},
 		calendars: {
 			type: Array,
-			required: true,
+			required: true
 		},
 		isReadOnly: {
 			type: Boolean,
 			required: true
-		},
+		}
 	},
 	computed: {
 		display() {
 			return this.calendar !== undefined
-		},
+		}
 	},
 	methods: {
 		selectCalendar(value) {
diff --git a/src/components/Editor/Properties/PropertySelect.vue b/src/components/Editor/Properties/PropertySelect.vue
index a3f7004fc..c38495cca 100644
--- a/src/components/Editor/Properties/PropertySelect.vue
+++ b/src/components/Editor/Properties/PropertySelect.vue
@@ -25,14 +25,12 @@
 		<div
 			class="property-select__icon"
 			:class="icon"
-			:title="readableName"
-		/>
+			:title="readableName" />
 
 		<div
 			class="property-select__input"
-			:class="{ 'property-select__input--readonly': isReadOnly }"
-		>
-			<multiselect
+			:class="{ 'property-select__input--readonly': isReadOnly }">
+			<Multiselect
 				v-if="!isReadOnly"
 				:options="options"
 				:searchable="false"
@@ -41,8 +39,7 @@
 				:value="selectedValue"
 				track-by="value"
 				label="label"
-				@select="changeValue"
-			/>
+				@select="changeValue" />
 			<!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
 			<div v-else>{{ selectedValue.label }}</div>
 		</div>
@@ -50,16 +47,19 @@
 		<div
 			v-if="hasInfo"
 			v-tooltip="info"
-			class="property-select__info icon-details"
-		/>
+			class="property-select__info icon-details" />
 	</div>
 </template>
 
 <script>
 import PropertyMixin from '../../../mixins/PropertyMixin'
+import { Multiselect } from '@nextcloud/vue'
 
 export default {
 	name: 'PropertySelect',
+	components: {
+		Multiselect
+	},
 	mixins: [
 		PropertyMixin
 	],
@@ -85,6 +85,6 @@ export default {
 
 			this.$emit('update:value', selectedOption)
 		}
-	},
+	}
 }
 </script>
diff --git a/src/components/Editor/Properties/PropertyText.vue b/src/components/Editor/Properties/PropertyText.vue
index e61d1b75b..29538bded 100644
--- a/src/components/Editor/Properties/PropertyText.vue
+++ b/src/components/Editor/Properties/PropertyText.vue
@@ -25,13 +25,11 @@
 		<div
 			class="property-text__icon"
 			:class="icon"
-			:title="readableName"
-		/>
+			:title="readableName" />
 
 		<div
 			class="property-text__input"
-			:class="{ 'property-text__input--readonly': isReadOnly }"
-		>
+			:class="{ 'property-text__input--readonly': isReadOnly }">
 			<textarea
 				v-if="!isReadOnly"
 				v-autosize
@@ -39,8 +37,7 @@
 				rows="1"
 				:title="readableName"
 				:value="value"
-				@input.prevent.stop="changeValue"
-			/>
+				@input.prevent.stop="changeValue" />
 			<!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
 			<div v-else>{{ value }}</div>
 		</div>
@@ -48,8 +45,7 @@
 		<div
 			v-if="hasInfo"
 			v-tooltip="info"
-			class="property-text__info icon-details"
-		/>
+			class="property-text__info icon-details" />
 	</div>
 </template>
 
@@ -86,7 +82,7 @@ export default {
 			} else {
 				this.$emit('update:value', event.target.value)
 			}
-		},
+		}
 	}
 }
 </script>
diff --git a/src/components/Editor/Properties/PropertyTitle.vue b/src/components/Editor/Properties/PropertyTitle.vue
index 9a034485c..8a857b55b 100644
--- a/src/components/Editor/Properties/PropertyTitle.vue
+++ b/src/components/Editor/Properties/PropertyTitle.vue
@@ -24,15 +24,13 @@
 	<div class="property-title">
 		<div
 			class="property-title__input"
-			:class="{ 'property-title__input--readonly': isReadOnly }"
-		>
+			:class="{ 'property-title__input--readonly': isReadOnly }">
 			<input
 				v-if="!isReadOnly"
 				type="text"
 				:placeholder="$t('calendar', 'Untitled event')"
 				:value="value"
-				@input.prevent.stop="changeValue"
-			>
+				@input.prevent.stop="changeValue">
 			<!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
 			<div v-else>{{ value }}</div>
 		</div>
@@ -50,12 +48,12 @@ export default {
 		value: {
 			type: String,
 			default: ''
-		},
+		}
 	},
 	methods: {
 		changeValue(event) {
 			this.$emit('update:value', event.target.value)
-		},
+		}
 	}
 }
 </script>
diff --git a/src/components/Editor/Properties/PropertyTitleTimePicker.vue b/src/components/Editor/Properties/PropertyTitleTimePicker.vue
index 202d1f8cc..c450fc858 100644
--- a/src/components/Editor/Properties/PropertyTitleTimePicker.vue
+++ b/src/components/Editor/Properties/PropertyTitleTimePicker.vue
@@ -26,37 +26,32 @@
 	<div class="property-title-time-picker">
 		<div
 			v-if="!isReadOnly"
-			class="property-title-time-picker__time-pickers"
-		>
+			class="property-title-time-picker__time-pickers">
 			<DatetimePicker
 				v-if="!isReadOnly"
 				lang="en"
 				:format="startDateFormat"
 				:value="startDate"
 				:type="timeType"
-				@change="changeStart"
-			>
+				@change="changeStart">
 				<template v-if="!isAllDay" slot="calendar-icon">
 					<button
 						class="datetime-picker-inline-icon icon icon-timezone"
 						:class="{ 'datetime-picker-inline-icon--highlighted': highlightStartTimezone }"
-						@click.stop.prevent="showTimezonePickerForStartDate"
-					/>
+						@click.stop.prevent="showTimezonePickerForStartDate" />
 					<Popover
 						:open.sync="showStartTimezone"
-						open-class="timezone-popover-wrapper"
-					>
+						open-class="timezone-popover-wrapper">
 						<div class="timezone-popover-wrapper__title">
 							<strong>
 								{{ $t('calendar', 'Please select a timezone for the start-date:') }}
 							</strong>
 						</div>
-						<timezone-select
+						<TimezoneSelect
 							v-if="!isReadOnly"
 							class="timezone-popover-wrapper__timezone-select"
 							:value="startTimezone"
-							@change="changeStartTimezone"
-						/>
+							@change="changeStartTimezone" />
 					</Popover>
 				</template>
 			</DatetimePicker>
@@ -67,37 +62,32 @@
 				:format="endDateFormat"
 				:value="endDate"
 				:type="timeType"
-				@change="changeEnd"
-			>
+				@change="changeEnd">
 				<template v-if="!isAllDay" slot="calendar-icon">
 					<button
 						class="datetime-picker-inline-icon icon icon-timezone"
 						:class="{ 'datetime-picker-inline-icon--highlighted': highlightEndTimezone }"
-						@click.stop.prevent="showTimezonePickerForEndDate"
-					/>
+						@click.stop.prevent="showTimezonePickerForEndDate" />
 					<Popover
 						:open.sync="showEndTimezone"
-						open-class="timezone-popover-wrapper"
-					>
+						open-class="timezone-popover-wrapper">
 						<div class="timezone-popover-wrapper__title">
 							<strong>
 								{{ $t('calendar', 'Please select a timezone for the end-date:') }}
 							</strong>
 						</div>
-						<timezone-select
+						<TimezoneSelect
 							v-if="!isReadOnly"
 							class="timezone-popover-wrapper__timezone-select"
 							:value="endTimezone"
-							@change="changeEndTimezone"
-						/>
+							@change="changeEndTimezone" />
 					</Popover>
 				</template>
 			</DatetimePicker>
 		</div>
 		<div
 			v-if="isReadOnly"
-			class="property-title-time-picker__time-pickers property-title-time-picker__time-pickers--readonly"
-		>
+			class="property-title-time-picker__time-pickers property-title-time-picker__time-pickers--readonly">
 			<div class="property-title-time-picker-read-only-wrapper">
 				<div class="property-title-time-picker-read-only-wrapper__label">
 					{{ formattedStart }}
@@ -106,8 +96,7 @@
 					v-if="!isAllDay"
 					v-tooltip="startTimezone"
 					class="property-title-time-picker-read-only-wrapper__icon icon icon-timezone"
-					:class="{ 'property-title-time-picker-read-only-wrapper__icon--highlighted': highlightStartTimezone } "
-				/>
+					:class="{ 'property-title-time-picker-read-only-wrapper__icon--highlighted': highlightStartTimezone } " />
 			</div>
 			<div class="property-title-time-picker-read-only-wrapper">
 				<div class="property-title-time-picker-read-only-wrapper__label">
@@ -117,8 +106,7 @@
 					v-if="!isAllDay"
 					v-tooltip="endTimezone"
 					class="property-title-time-picker-read-only-wrapper__icon icon icon-timezone"
-					:class="{ 'property-title-time-picker-read-only-wrapper__icon--highlighted': highlightEndTimezone }"
-				/>
+					:class="{ 'property-title-time-picker-read-only-wrapper__icon--highlighted': highlightEndTimezone }" />
 			</div>
 		</div>
 
@@ -129,12 +117,10 @@
 				type="checkbox"
 				class="checkbox"
 				:disabled="!canModifyAllDay || isReadOnly"
-				@change="toggleAllDay"
-			>
+				@change="toggleAllDay">
 			<label
 				v-tooltip="allDayTooltip"
-				for="allDay"
-			>
+				for="allDay">
 				{{ $t('calendar', 'All day') }}
 			</label>
 		</div>
@@ -144,9 +130,6 @@
 <script>
 import { DatetimePicker, Popover } from '@nextcloud/vue'
 import TimezoneSelect from '../../Shared/TimezoneSelect'
-import {
-	getReadableTimezoneName,
-} from '../../../utils/timezone.js'
 import moment from '@nextcloud/moment'
 
 export default {
@@ -156,25 +139,6 @@ export default {
 		TimezoneSelect,
 		Popover
 	},
-	filters: {
-		formatDate(value, isAllDay) {
-			if (!value) {
-				return ''
-			}
-			if (isAllDay) {
-				return moment(value).format('ll')
-			} else {
-				return moment(value).format('lll')
-			}
-		},
-		formatTimezone(value) {
-			if (!value) {
-				return ''
-			}
-
-			return getReadableTimezoneName(value)
-		}
-	},
 	props: {
 		/**
 		 * Whether or not the editor is viewed in read-only
diff --git a/src/components/Editor/Repeat/Repeat.vue b/src/components/Editor/Repeat/Repeat.vue
index 82b7a7a27..8ed279ce1 100644
--- a/src/components/Editor/Repeat/Repeat.vue
+++ b/src/components/Editor/Repeat/Repeat.vue
@@ -22,20 +22,18 @@
 
 <template>
 	<div>
-		<repeat-freq-interval
+		<RepeatFreqInterval
 			v-if="!isRecurrenceException"
 			:frequency="recurrenceRule.frequency"
 			:interval="recurrenceRule.interval"
 			@changeInterval="changeInterval"
-			@changeFrequency="changeFrequency"
-		/>
-		<repeat-freq-weekly-options
+			@changeFrequency="changeFrequency" />
+		<RepeatFreqWeeklyOptions
 			v-if="isFreqWeekly && !isRecurrenceException"
 			:by-day="recurrenceRule.byDay"
 			@addByDay="addByDay"
-			@removeByDay="removeByDay"
-		/>
-		<repeat-freq-monthly-options
+			@removeByDay="removeByDay" />
+		<RepeatFreqMonthlyOptions
 			v-if="isFreqMonthly && !isRecurrenceException"
 			:by-day="recurrenceRule.byDay"
 			:by-month-day="recurrenceRule.byMonthDay"
@@ -45,9 +43,8 @@
 			@changeByDay="setByDay"
 			@changeBySetPosition="setBySetPosition"
 			@changeToBySetPosition="changeToBySetPositionMonthly"
-			@changeToByDay="changeToByDayMonthly"
-		/>
-		<repeat-freq-yearly-options
+			@changeToByDay="changeToByDayMonthly" />
+		<RepeatFreqYearlyOptions
 			v-if="isFreqYearly && !isRecurrenceException"
 			:by-day="recurrenceRule.byDay"
 			:by-month="recurrenceRule.byMonth"
@@ -57,9 +54,8 @@
 			@addByMonth="addByMonth"
 			@removeByMonth="removeByMonth"
 			@enableBySetPosition="enableBySetPositionYearly"
-			@disableBySetPosition="disableBySetPositionYearly"
-		/>
-		<repeat-end-repeat
+			@disableBySetPosition="disableBySetPositionYearly" />
+		<RepeatEndRepeat
 			v-if="isRepeating && !isRecurrenceException"
 			:calendar-object-instance="calendarObjectInstance"
 			:until="recurrenceRule.until"
@@ -68,8 +64,7 @@
 			@setUntil="setUntil"
 			@setCount="setCount"
 			@changeToCount="changeToCount"
-			@changeToUntil="changeToUntil"
-		/>
+			@changeToUntil="changeToUntil" />
 		<!-- The repeat summary is definitely something I want in the future, but let's implement it later -->
 		<!--<repeat-summary-->
 		<!--	v-if="true"-->
@@ -82,12 +77,10 @@
 		<!--	:until="repeatUntil"-->
 		<!--	:count="repeatCount"-->
 		<!--/>-->
-		<repeat-unsupported-warning
-			v-if="recurrenceRule.isUnsupported && !isRecurrenceException"
-		/>
-		<repeat-exception-warning
-			v-if="isRecurrenceException"
-		/>
+		<RepeatUnsupportedWarning
+			v-if="recurrenceRule.isUnsupported && !isRecurrenceException" />
+		<RepeatExceptionWarning
+			v-if="isRecurrenceException" />
 	</div>
 </template>
 
@@ -124,7 +117,7 @@ export default {
 		 */
 		recurrenceRule: {
 			type: Object,
-			required: true,
+			required: true
 		},
 		/**
 		 * Whether or not the event is read-only
@@ -425,7 +418,7 @@ export default {
 			if (this.recurrenceRule.isUnsupported) {
 				this.$store.commit('markRecurrenceRuleAsSupported', {
 					calendarObjectInstance: this.calendarObjectInstance,
-					recurrenceRule: this.recurrenceRule,
+					recurrenceRule: this.recurrenceRule
 				})
 			}
 
diff --git a/src/components/Editor/Repeat/RepeatEndRepeat.vue b/src/components/Editor/Repeat/RepeatEndRepeat.vue
index bed18db5e..26384c26b 100644
--- a/src/components/Editor/Repeat/RepeatEndRepeat.vue
+++ b/src/components/Editor/Repeat/RepeatEndRepeat.vue
@@ -23,7 +23,7 @@
 <template>
 	<div class="repeat-option-set repeat-option-set--end">
 		<span class="repeat-option-end__label">{{ $t('calendar', 'End repeat') }}</span>
-		<multiselect
+		<Multiselect
 			class="repeat-option-end__end-type-select"
 			:options="options"
 			:searchable="false"
@@ -32,8 +32,7 @@
 			:value="selectedOption"
 			track-by="value"
 			label="label"
-			@select="changeEndType"
-		/>
+			@select="changeEndType" />
 		<DatetimePicker
 			v-if="isUntil"
 			class="repeat-option-end__until"
@@ -41,8 +40,7 @@
 			:not-after="maximumDate"
 			:value="until"
 			type="date"
-			@change="changeUntil"
-		/>
+			@change="changeUntil" />
 		<input
 			v-if="isCount"
 			class="repeat-option-end__count"
@@ -50,12 +48,10 @@
 			min="1"
 			max="3500"
 			:value="count"
-			@input="changeCount"
-		>
+			@input="changeCount">
 		<span
 			v-if="isCount"
-			class="repeat-option-end__count"
-		>
+			class="repeat-option-end__count">
 			{{ occurrencesLabel }}
 		</span>
 	</div>
diff --git a/src/components/Editor/Repeat/RepeatFirstLastSelect.vue b/src/components/Editor/Repeat/RepeatFirstLastSelect.vue
index 643994293..13380019b 100644
--- a/src/components/Editor/Repeat/RepeatFirstLastSelect.vue
+++ b/src/components/Editor/Repeat/RepeatFirstLastSelect.vue
@@ -29,8 +29,7 @@
 		:placeholder="$t('calendar', 'first')"
 		track-by="value"
 		label="label"
-		@select="select"
-	/>
+		@select="select" />
 </template>
 
 <script>
diff --git a/src/components/Editor/Repeat/RepeatFreqInterval.vue b/src/components/Editor/Repeat/RepeatFreqInterval.vue
index d90e727cb..1fbc29309 100644
--- a/src/components/Editor/Repeat/RepeatFreqInterval.vue
+++ b/src/components/Editor/Repeat/RepeatFreqInterval.vue
@@ -32,13 +32,11 @@
 			min="1"
 			max="366"
 			:value="interval"
-			@input="changeInterval"
-		>
-		<repeat-freq-select
+			@input="changeInterval">
+		<RepeatFreqSelect
 			:freq="frequency"
 			:count="interval"
-			@change="changeFrequency"
-		/>
+			@change="changeFrequency" />
 	</div>
 </template>
 
diff --git a/src/components/Editor/Repeat/RepeatFreqMonthlyOptions.vue b/src/components/Editor/Repeat/RepeatFreqMonthlyOptions.vue
index 84720e3cb..a0f10f044 100644
--- a/src/components/Editor/Repeat/RepeatFreqMonthlyOptions.vue
+++ b/src/components/Editor/Repeat/RepeatFreqMonthlyOptions.vue
@@ -27,8 +27,7 @@
 				class="repeat-option-set-section__title"
 				:name="radioInputId"
 				:checked="byMonthDayEnabled"
-				@change="enableByMonthDay"
-			>
+				@change="enableByMonthDay">
 				{{ $t('calendar', 'By day of the month') }}
 			</ActionRadio>
 			<div class="repeat-option-set-section__grid">
@@ -38,8 +37,7 @@
 					class="repeat-option-set-section-grid-item"
 					:class="{ primary: option.selected }"
 					:disabled="!byMonthDayEnabled"
-					@click="toggleByMonthDay(option.value)"
-				>
+					@click="toggleByMonthDay(option.value)">
 					{{ option.label }}
 				</button>
 			</div>
@@ -49,20 +47,17 @@
 				class="repeat-option-set-section__title"
 				:name="radioInputId"
 				:checked="!byMonthDayEnabled"
-				@change="enableBySetPosition"
-			>
+				@change="enableBySetPosition">
 				{{ $t('calendar', 'On the') }}
 			</ActionRadio>
-			<repeat-first-last-select
+			<RepeatFirstLastSelect
 				:by-set-position="bySetPosition"
 				:disabled="byMonthDayEnabled"
-				@change="changeBySetPosition"
-			/>
-			<repeat-on-the-select
+				@change="changeBySetPosition" />
+			<RepeatOnTheSelect
 				:by-day="byDay"
 				:disabled="byMonthDayEnabled"
-				@change="changeByDay"
-			/>
+				@change="changeByDay" />
 		</div>
 	</div>
 </template>
@@ -92,7 +87,7 @@ export default {
 		 */
 		byMonthDay: {
 			type: Array,
-			required: true,
+			required: true
 		},
 		/**
 		 *
diff --git a/src/components/Editor/Repeat/RepeatFreqSelect.vue b/src/components/Editor/Repeat/RepeatFreqSelect.vue
index bd7090fbb..6c0481fc0 100644
--- a/src/components/Editor/Repeat/RepeatFreqSelect.vue
+++ b/src/components/Editor/Repeat/RepeatFreqSelect.vue
@@ -27,8 +27,7 @@
 		:value="selected"
 		track-by="freq"
 		label="label"
-		@select="select"
-	/>
+		@select="select" />
 </template>
 
 <script>
diff --git a/src/components/Editor/Repeat/RepeatFreqWeeklyOptions.vue b/src/components/Editor/Repeat/RepeatFreqWeeklyOptions.vue
index 3f71f41ae..30ccd37a8 100644
--- a/src/components/Editor/Repeat/RepeatFreqWeeklyOptions.vue
+++ b/src/components/Editor/Repeat/RepeatFreqWeeklyOptions.vue
@@ -31,8 +31,7 @@
 				:key="option.value"
 				class="repeat-option-set-section-grid-item"
 				:class="{ primary: option.selected }"
-				@click="toggleByDay(option.value)"
-			>
+				@click="toggleByDay(option.value)">
 				{{ option.label }}
 			</button>
 		</div>
@@ -94,7 +93,7 @@ export default {
 					this.$emit('removeByDay', day)
 				}
 			}
-		},
+		}
 	}
 }
 </script>
diff --git a/src/components/Editor/Repeat/RepeatFreqYearlyOptions.vue b/src/components/Editor/Repeat/RepeatFreqYearlyOptions.vue
index 8396bbc18..47200dcfd 100644
--- a/src/components/Editor/Repeat/RepeatFreqYearlyOptions.vue
+++ b/src/components/Editor/Repeat/RepeatFreqYearlyOptions.vue
@@ -29,8 +29,7 @@
 					:key="option.value"
 					class="repeat-option-set-section-grid-item"
 					:class="{ primary: option.selected }"
-					@click="toggleByMonth(option.value)"
-				>
+					@click="toggleByMonth(option.value)">
 					{{ option.label }}
 				</button>
 			</div>
@@ -39,20 +38,17 @@
 			<ActionCheckbox
 				class="repeat-option-set-section__title"
 				:checked="isBySetPositionEnabled"
-				@change="toggleBySetPosition"
-			>
+				@change="toggleBySetPosition">
 				{{ $t('calendar', 'On the') }}
 			</ActionCheckbox>
-			<repeat-first-last-select
+			<RepeatFirstLastSelect
 				:by-set-position="bySetPosition"
 				:disabled="!isBySetPositionEnabled"
-				@change="changeBySetPosition"
-			/>
-			<repeat-on-the-select
+				@change="changeBySetPosition" />
+			<RepeatOnTheSelect
 				:by-day="byDay"
 				:disabled="!isBySetPositionEnabled"
-				@change="changeByDay"
-			/>
+				@change="changeByDay" />
 		</div>
 	</div>
 </template>
@@ -84,7 +80,7 @@ export default {
 		 */
 		byMonth: {
 			type: Array,
-			required: true,
+			required: true
 		},
 		/**
 		 *
diff --git a/src/components/Editor/Repeat/RepeatOnTheSelect.vue b/src/components/Editor/Repeat/RepeatOnTheSelect.vue
index 139c16c04..a87372670 100644
--- a/src/components/Editor/Repeat/RepeatOnTheSelect.vue
+++ b/src/components/Editor/Repeat/RepeatOnTheSelect.vue
@@ -29,8 +29,7 @@
 		:placeholder="$t('calendar', 'Monday')"
 		track-by="value"
 		label="label"
-		@select="select"
-	/>
+		@select="select" />
 </template>
 
 <script>
@@ -61,34 +60,34 @@ export default {
 
 			return [{
 				label: dayNames[1],
-				value: ['MO'],
+				value: ['MO']
 			}, {
 				label: dayNames[2],
-				value: ['TU'],
+				value: ['TU']
 			}, {
 				label: dayNames[3],
-				value: ['WE'],
+				value: ['WE']
 			}, {
 				label: dayNames[4],
-				value: ['TH'],
+				value: ['TH']
 			}, {
 				label: dayNames[5],
-				value: ['FR'],
+				value: ['FR']
 			}, {
 				label: dayNames[6],
-				value: ['SA'],
+				value: ['SA']
 			}, {
 				label: dayNames[0],
-				value: ['SU'],
+				value: ['SU']
 			}, {
 				label: this.$t('calendar', 'day'),
-				value: ['SU', 'MO', 'TU', 'WE', 'TH', 'FR', 'SA'],
+				value: ['SU', 'MO', 'TU', 'WE', 'TH', 'FR', 'SA']
 			}, {
 				label: this.$t('calendar', 'weekday'),
-				value: ['MO', 'TU', 'WE', 'TH', 'FR'],
+				value: ['MO', 'TU', 'WE', 'TH', 'FR']
 			}, {
 				label: this.$t('calendar', 'weekend day'),
-				value: ['SU', 'SA'],
+				value: ['SU', 'SA']
 			}]
 		},
 		selected() {
diff --git a/src/components/Editor/SaveButtons.vue b/src/components/Editor/SaveButtons.vue
index 4a10f0ec7..79d8c404c 100644
--- a/src/components/Editor/SaveButtons.vue
+++ b/src/components/Editor/SaveButtons.vue
@@ -24,36 +24,31 @@
 	<div>
 		<button
 			v-if="showMoreButton"
-			@click="showMore"
-		>
+			@click="showMore">
 			{{ $t('calendar', 'More') }}
 		</button>
 		<button
 			v-if="showSaveButton"
 			class="primary"
-			@click="saveThisOnly"
-		>
+			@click="saveThisOnly">
 			{{ $t('calendar', 'Save') }}
 		</button>
 		<button
 			v-if="shoUpdateButton"
 			class="primary"
-			@click="saveThisOnly"
-		>
+			@click="saveThisOnly">
 			{{ $t('calendar', 'Update') }}
 		</button>
 		<button
 			v-if="showUpdateOnlyThisButton"
 			class="primary"
-			@click="saveThisOnly"
-		>
+			@click="saveThisOnly">
 			{{ $t('calendar', 'Update this occurrence') }}
 		</button>
 		<button
 			v-if="showUpdateThisAndFutureButton"
 			:class="{ primary: forceThisAndAllFuture}"
-			@click="saveThisAndAllFuture"
-		>
+			@click="saveThisAndAllFuture">
 			{{ $t('calendar', 'Update this and all future') }}
 		</button>
 	</div>
@@ -92,7 +87,7 @@ export default {
 		},
 		showUpdateThisAndFutureButton() {
 			return this.canCreateRecurrenceException
-		},
+		}
 	},
 	methods: {
 		saveThisOnly() {
diff --git a/src/components/Shared/CalendarPicker.vue b/src/components/Shared/CalendarPicker.vue
index 246989b37..bb69d6234 100644
--- a/src/components/Shared/CalendarPicker.vue
+++ b/src/components/Shared/CalendarPicker.vue
@@ -1,19 +1,18 @@
 <template>
-	<multiselect
+	<Multiselect
 		label="displayName"
 		track-by="displayName"
 		:disabled="isDisabled"
 		:options="calendars"
 		:value="calendar"
-		@select="change"
-	>
+		@select="change">
 		<template slot="singleLabel" slot-scope="scope">
 			<CalendarPickerOption v-bind="scope.option" />
 		</template>
 		<template slot="option" slot-scope="scope">
 			<CalendarPickerOption v-bind="scope.option" />
 		</template>
-	</multiselect>
+	</Multiselect>
 </template>
 <script>
 import {
@@ -34,17 +33,17 @@ export default {
 		},
 		calendars: {
 			type: Array,
-			required: true,
+			required: true
 		},
 		showCalendarOnSelect: {
 			type: Boolean,
 			default: false
-		},
+		}
 	},
 	computed: {
 		isDisabled() {
 			return this.calendars.length < 2
-		},
+		}
 	},
 	methods: {
 		change(newCalendar) {
diff --git a/src/components/Shared/CalendarPickerOption.vue b/src/components/Shared/CalendarPickerOption.vue
index 8e9ac92f7..2d27ac3d7 100644
--- a/src/components/Shared/CalendarPickerOption.vue
+++ b/src/components/Shared/CalendarPickerOption.vue
@@ -24,8 +24,7 @@
 	<div class="calendar-picker-option">
 		<div
 			class="calendar-picker-option__color-indicator"
-			:style="{ backgroundColor: color }"
-		/>
+			:style="{ backgroundColor: color }" />
 
 		<span>
 			{{ displayName }}
@@ -38,8 +37,7 @@
 			:disable-tooltip="true"
 			:user="userId"
 			:display-name="userDisplayName"
-			:size="18"
-		/>
+			:size="18" />
 	</div>
 </template>
 
diff --git a/src/components/Shared/TimezoneSelect.vue b/src/components/Shared/TimezoneSelect.vue
index 4e4c11755..b1a357fe1 100644
--- a/src/components/Shared/TimezoneSelect.vue
+++ b/src/components/Shared/TimezoneSelect.vue
@@ -1,5 +1,5 @@
 <template>
-	<multiselect
+	<Multiselect
 		:value="selectedTimezone"
 		:options="options"
 		:multiple="false"
@@ -10,8 +10,7 @@
 		track-by="timezoneId"
 		label="label"
 		open-direction="above"
-		@input="change"
-	/>
+		@input="change" />
 </template>
 
 <script>
diff --git a/src/fullcalendar/duration.js b/src/fullcalendar/duration.js
index 6cdf8f397..217291a7e 100644
--- a/src/fullcalendar/duration.js
+++ b/src/fullcalendar/duration.js
@@ -156,7 +156,7 @@ function getDurationValueFromFullCalendarDurationEncodedAsString(fcDuration) {
 
 		return DurationValue.fromData({
 			hours: parseInt(hours, 10),
-			minutes: parseInt(minutes, 10),
+			minutes: parseInt(minutes, 10)
 		})
 	}
 
diff --git a/src/fullcalendar/eventClick.js b/src/fullcalendar/eventClick.js
index af88ddd54..c91caf1d1 100644
--- a/src/fullcalendar/eventClick.js
+++ b/src/fullcalendar/eventClick.js
@@ -39,7 +39,7 @@ export default function(store, router, route) {
 		const name = getPrefixedRoute(route.name, desiredRoute)
 		const params = Object.assign({}, store.state.route.params, {
 			object: event.extendedProps.objectId,
-			recurrenceId: String(event.extendedProps.recurrenceId),
+			recurrenceId: String(event.extendedProps.recurrenceId)
 		})
 
 		// Don't push new route when day didn't change
diff --git a/src/fullcalendar/select.js b/src/fullcalendar/select.js
index ebd28c0ac..6f7db79ac 100644
--- a/src/fullcalendar/select.js
+++ b/src/fullcalendar/select.js
@@ -37,7 +37,7 @@ export default function(store, router) {
 		const params = Object.assign({}, store.state.route.params, {
 			allDay: allDay ? '1' : '0',
 			dtstart: String(Math.floor(start.getTime() / 1000)),
-			dtend: String(Math.floor(end.getTime() / 1000)),
+			dtend: String(Math.floor(end.getTime() / 1000))
 		})
 
 		// Don't push new route when day didn't change
diff --git a/src/main.js b/src/main.js
index e6865a223..61148fd33 100644
--- a/src/main.js
+++ b/src/main.js
@@ -23,38 +23,19 @@
  */
 import '@babel/polyfill'
 
-/* eslint-disable import/first */
 import Vue from 'vue'
-Vue.config.devtools = true
 import App from './App'
 import router from './router'
 import store from './store'
 import { sync } from 'vuex-router-sync'
 import { getRequestToken } from '@nextcloud/auth'
 import { linkTo } from '@nextcloud/router'
-import {
-	Actions,
-	DatetimePicker,
-	Multiselect,
-	PopoverMenu,
-	Modal
-} from '@nextcloud/vue'
-import {
-	translate,
-	translatePlural
-} from '@nextcloud/l10n'
+import { translate, translatePlural } from '@nextcloud/l10n'
 import ClickOutside from 'vue-click-outside'
 import VueClipboard from 'vue-clipboard2'
 import VTooltip from 'v-tooltip'
 
-VueClipboard.config.autoSetContainer = true
-
 // register global components
-Vue.component('Actions', Actions)
-Vue.component('DatetimePicker', DatetimePicker)
-Vue.component('Modal', Modal)
-Vue.component('Multiselect', Multiselect)
-Vue.component('PopoverMenu', PopoverMenu)
 Vue.directive('ClickOutside', ClickOutside)
 Vue.use(VTooltip)
 Vue.use(VueClipboard)
diff --git a/src/mixins/PropertyMixin.js b/src/mixins/PropertyMixin.js
index 418d817ae..d223a12f9 100644
--- a/src/mixins/PropertyMixin.js
+++ b/src/mixins/PropertyMixin.js
@@ -39,7 +39,7 @@ export default {
 		},
 		value: {
 			required: true
-		},
+		}
 	},
 	computed: {
 		icon() {
diff --git a/src/models/calendar.js b/src/models/calendar.js
index acfe1fc47..48ed493a2 100644
--- a/src/models/calendar.js
+++ b/src/models/calendar.js
@@ -68,7 +68,7 @@ export const getDefaultCalendarObject = (props = {}) => Object.assign({}, {
 	// All calendar-objects from this calendar that have already been fetched
 	calendarObjects: [],
 	// Time-ranges that have already been fetched for this calendar
-	fetchedTimeRanges: [],
+	fetchedTimeRanges: []
 }, props)
 
 /**
diff --git a/src/models/calendarObjectInstance.js b/src/models/calendarObjectInstance.js
index 51b9edfef..2e1402cec 100644
--- a/src/models/calendarObjectInstance.js
+++ b/src/models/calendarObjectInstance.js
@@ -84,7 +84,7 @@ export const getDefaultCalendarObjectInstanceObject = (props = {}) => Object.ass
 	// Wether or not the user is allowed to toggle the all-day checkbox
 	canModifyAllDay: true,
 	// The real event-component coming from calendar-js
-	eventComponent: null,
+	eventComponent: null
 }, props)
 
 /**
diff --git a/src/models/principal.js b/src/models/principal.js
index 81d10e90f..b5165837c 100644
--- a/src/models/principal.js
+++ b/src/models/principal.js
@@ -40,7 +40,7 @@ export const getDefaultPrincipalObject = (props) => Object.assign({}, {
 	// url to the DAV-principal-resource
 	url: '',
 	// The cdav-library object
-	dav: false,
+	dav: false
 }, props)
 
 /**
diff --git a/src/models/rfcProps.js b/src/models/rfcProps.js
index 08de8d1fc..b5c37a979 100644
--- a/src/models/rfcProps.js
+++ b/src/models/rfcProps.js
@@ -30,7 +30,7 @@ export default {
 		options: [
 			{ value: 'PUBLIC', label: translate('calendar', 'When shared show full event') },
 			{ value: 'CONFIDENTIAL', label: translate('calendar', 'When shared show only busy') },
-			{ value: 'PRIVATE', label: translate('calendar', 'When shared hide this event') },
+			{ value: 'PRIVATE', label: translate('calendar', 'When shared hide this event') }
 		],
 		multiple: false,
 		info: translate('calendar', 'The visibility of this event in shared calendars.'),
@@ -51,7 +51,7 @@ export default {
 		name: 'description',
 		readableName: translate('calendar', 'Description'),
 		placeholder: translate('calendar', 'Add a description'),
-		icon: 'icon-menu',
+		icon: 'icon-menu'
 	},
 	geo: {
 		name: 'geo',
@@ -70,7 +70,7 @@ export default {
 		options: [
 			{ value: 7, label: translate('calendar', 'Low') },
 			{ value: 5, label: translate('calendar', 'Medium') },
-			{ value: 3, label: translate('calendar', 'High') },
+			{ value: 3, label: translate('calendar', 'High') }
 		]
 
 	},
@@ -81,7 +81,7 @@ export default {
 		options: [
 			{ value: 'CONFIRMED', label: translate('calendar', 'Confirmed') },
 			{ value: 'TENTATIVE', label: translate('calendar', 'Tentative') },
-			{ value: 'CANCELLED', label: translate('calendar', 'Cancelled') },
+			{ value: 'CANCELLED', label: translate('calendar', 'Cancelled') }
 		],
 		multiple: false,
 		default: true,
@@ -97,7 +97,7 @@ export default {
 		info: translate('calendar', 'Take this event into account when calculating free-busy information'),
 		options: [
 			{ value: 'TRANSPARENT', label: translate('calendar', 'Free') },
-			{ value: 'OPAQUE', label: translate('calendar', 'Busy') },
+			{ value: 'OPAQUE', label: translate('calendar', 'Busy') }
 		],
 		defaultValue: 'TRANSPARENT'
 	},
@@ -137,7 +137,7 @@ export default {
 		multiple: false,
 		default: false,
 		info: translate('calendar', 'Special color of this event. Overrides the calendar-color.')
-	},
+	}
 	// To be implemented later:
 	// conference: {
 	// 	readableName: translate('calendar', 'Conference system'),
diff --git a/src/router.js b/src/router.js
index 5dfa1b505..8fe7d55c1 100644
--- a/src/router.js
+++ b/src/router.js
@@ -43,13 +43,13 @@ const router = new Router({
 				{
 					path: '/p/:tokens/:view/:firstDay/view/popover/:object/:recurrenceId',
 					name: 'PublicEditPopoverView',
-					component: EditSimple,
+					component: EditSimple
 				},
 				{
 					path: '/p/:tokens/:view/:firstDay/view/sidebar/:object/:recurrenceId',
 					name: 'PublicEditSidebarView',
-					component: EditSidebar,
-				},
+					component: EditSidebar
+				}
 			]
 		},
 		{
@@ -60,13 +60,13 @@ const router = new Router({
 				{
 					path: '/embed/:tokens/:view/:firstDay/view/popover/:object/:recurrenceId',
 					name: 'EmbedEditPopoverView',
-					component: EditSimple,
+					component: EditSimple
 				},
 				{
 					path: '/embed/:tokens/:view/:firstDay/view/sidebar/:object/:recurrenceId',
 					name: 'EmbedEditSidebarView',
-					component: EditSidebar,
-				},
+					component: EditSidebar
+				}
 			]
 		},
 		/**
@@ -78,19 +78,19 @@ const router = new Router({
 		 */
 		{
 			path: '/',
-			redirect: `/${getInitialView()}/now`,
+			redirect: `/${getInitialView()}/now`
 		},
 		{
 			path: '/p/:tokens/:fancyName?',
-			redirect: `/p/:tokens/${getInitialView()}/now`,
+			redirect: `/p/:tokens/${getInitialView()}/now`
 		},
 		{
 			path: '/public/:tokens/:fancyName?',
-			redirect: `/p/:tokens/${getInitialView()}/now`,
+			redirect: `/p/:tokens/${getInitialView()}/now`
 		},
 		{
 			path: '/embed/:tokens',
-			redirect: `/embed/:tokens/${getInitialView()}/now`,
+			redirect: `/embed/:tokens/${getInitialView()}/now`
 		},
 		/**
 		 * This is the main route that contains the current view and viewed day
@@ -107,26 +107,26 @@ const router = new Router({
 				{
 					path: '/:view/:firstDay/edit/popover/:object/:recurrenceId',
 					name: 'EditPopoverView',
-					component: EditSimple,
+					component: EditSimple
 				},
 				{
 					path: '/:view/:firstDay/edit/sidebar/:object/:recurrenceId',
 					name: 'EditSidebarView',
-					component: EditSidebar,
+					component: EditSidebar
 				},
 				{
 					path: '/:view/:firstDay/new/popover/:allDay/:dtstart/:dtend',
 					name: 'NewPopoverView',
-					component: EditSimple,
+					component: EditSimple
 				},
 				{
 					path: '/:view/:firstDay/new/sidebar/:allDay/:dtstart/:dtend',
 					name: 'NewSidebarView',
-					component: EditSidebar,
-				},
-			],
-		},
-	],
+					component: EditSidebar
+				}
+			]
+		}
+	]
 })
 
 windowTitleService(router)
diff --git a/src/store/calendarObjectInstance.js b/src/store/calendarObjectInstance.js
index 3b1227d9c..1f2b20752 100644
--- a/src/store/calendarObjectInstance.js
+++ b/src/store/calendarObjectInstance.js
@@ -1302,7 +1302,7 @@ const actions = {
 			})
 			commit('changeRecurrenceToInfinite', {
 				calendarObjectInstance,
-				recurrenceRule: calendarObjectInstance.recurrenceRule,
+				recurrenceRule: calendarObjectInstance.recurrenceRule
 			})
 			dispatch('setDefaultRecurrenceByParts', { calendarObjectInstance, recurrenceRule, frequency })
 
diff --git a/src/store/calendarObjects.js b/src/store/calendarObjects.js
index a061c710c..d15ff3403 100644
--- a/src/store/calendarObjects.js
+++ b/src/store/calendarObjects.js
@@ -29,7 +29,7 @@ import { createEvent, getTimezoneManager } from 'calendar-js'
 
 const state = {
 	calendarObjects: {},
-	modificationCount: 0,
+	modificationCount: 0
 }
 
 const mutations = {
diff --git a/src/store/calendars.js b/src/store/calendars.js
index ecd08acbc..19aee2af2 100644
--- a/src/store/calendars.js
+++ b/src/store/calendars.js
@@ -852,7 +852,7 @@ const actions = {
 		return Promise.all(requests).then(() => {
 			context.commit('changeStage', 'default')
 		})
-	},
+	}
 }
 
 export default { state, mutations, getters, actions }
diff --git a/src/store/importFiles.js b/src/store/importFiles.js
index afe30fecb..8671e4af3 100644
--- a/src/store/importFiles.js
+++ b/src/store/importFiles.js
@@ -97,7 +97,7 @@ const mutations = {
 		Vue.set(state, 'importFiles', [])
 		Vue.set(state, 'importFilesById', {})
 		Vue.set(state, 'importCalendarRelation', {})
-	},
+	}
 }
 
 const getters = {}
diff --git a/src/store/importState.js b/src/store/importState.js
index d60864a60..d9323520f 100644
--- a/src/store/importState.js
+++ b/src/store/importState.js
@@ -26,7 +26,7 @@ const state = {
 	total: 0,
 	accepted: 0,
 	denied: 0,
-	stage: 'default',
+	stage: 'default'
 }
 
 const mutations = {
diff --git a/src/store/index.js b/src/store/index.js
index 50160bc31..0f8d44fb7 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -51,7 +51,7 @@ export default new Vuex.Store({
 		importState,
 		principals,
 		settings
-	},
+	}
 	// // Throw errors when the state is edited outside of mutations
 	// strict: true
 })
diff --git a/src/store/principals.js b/src/store/principals.js
index cd47b62ac..921c4f062 100644
--- a/src/store/principals.js
+++ b/src/store/principals.js
@@ -94,7 +94,7 @@ const getters = {
 	 * @param {Object} state the store data
 	 * @returns {String}
 	 */
-	getCurrentUserPrincipalEmail: (state) => state.principalsById[state.currentUserPrincipal].emailAddress,
+	getCurrentUserPrincipalEmail: (state) => state.principalsById[state.currentUserPrincipal].emailAddress
 }
 
 const actions = {
diff --git a/src/utils/illustration.js b/src/utils/illustration.js
index 5e51b50c2..8005b6467 100644
--- a/src/utils/illustration.js
+++ b/src/utils/illustration.js
@@ -51,13 +51,13 @@ const data = [{
 		// TRANSLATORS This string is used for matching the event title to an illustration
 		translate('calendar', 'Relaxing'),
 		// TRANSLATORS This string is used for matching the event title to an illustration
-		translate('calendar', 'Relax'),
+		translate('calendar', 'Relax')
 	],
 	illustrationNames: [
 		'relaxation',
 		'meditation',
 		'a_moment_to_relax'
-	],
+	]
 }, {
 	strings: [
 		'Presentation',
@@ -65,12 +65,12 @@ const data = [{
 		// TRANSLATORS This string is used for matching the event title to an illustration
 		translate('calendar', 'Presentation'),
 		// TRANSLATORS This string is used for matching the event title to an illustration
-		translate('calendar', 'Present'),
+		translate('calendar', 'Present')
 	],
 	illustrationNames: [
 		'presentation',
 		'business_plan'
-	],
+	]
 }, {
 	strings: [
 		'Camping',
@@ -78,12 +78,12 @@ const data = [{
 		// TRANSLATORS This string is used for matching the event title to an illustration
 		translate('calendar', 'Camping'),
 		// TRANSLATORS This string is used for matching the event title to an illustration
-		translate('calendar', 'Camp'),
+		translate('calendar', 'Camp')
 	],
 	illustrationNames: [
 		'camping',
 		'into_the_night'
-	],
+	]
 }, {
 	strings: [
 		'Movie',
@@ -91,20 +91,20 @@ const data = [{
 		// TRANSLATORS This string is used for matching the event title to an illustration
 		translate('calendar', 'Movie'),
 		// TRANSLATORS This string is used for matching the event title to an illustration
-		translate('calendar', 'Cinema'),
+		translate('calendar', 'Cinema')
 	],
 	illustrationNames: [
 		'movie_night'
-	],
+	]
 }, {
 	strings: [
 		'Graduation',
 		// TRANSLATORS This string is used for matching the event title to an illustration
-		translate('calendar', 'Graduation'),
+		translate('calendar', 'Graduation')
 	],
 	illustrationNames: [
 		'graduation'
-	],
+	]
 }, {
 	strings: [
 		'Brainstorm',
@@ -113,7 +113,7 @@ const data = [{
 	],
 	illustrationNames: [
 		'creation_process'
-	],
+	]
 }, {
 	strings: [
 		'Baseball',
@@ -123,7 +123,7 @@ const data = [{
 	illustrationNames: [
 		'home_run',
 		'greek_freak'
-	],
+	]
 }, {
 	strings: [
 		'Meeting',
@@ -135,7 +135,7 @@ const data = [{
 	],
 	illustrationNames: [
 		'meeting'
-	],
+	]
 }, {
 	strings: [
 		'Office',
@@ -144,7 +144,7 @@ const data = [{
 	],
 	illustrationNames: [
 		'in_the_office'
-	],
+	]
 }, {
 	strings: [
 		'Party',
@@ -156,7 +156,7 @@ const data = [{
 	],
 	illustrationNames: [
 		'celebration'
-	],
+	]
 }, {
 	strings: [
 		'Mail',
@@ -165,7 +165,7 @@ const data = [{
 	],
 	illustrationNames: [
 		'newsletter'
-	],
+	]
 }, {
 	strings: [
 		'Soccer',
@@ -177,7 +177,7 @@ const data = [{
 	],
 	illustrationNames: [
 		'goal'
-	],
+	]
 }, {
 	strings: [
 		'Gaming',
@@ -188,12 +188,12 @@ const data = [{
 		// TRANSLATORS This string is used for matching the event title to an illustration
 		translate('calendar', 'Play'),
 		// TRANSLATORS This string is used for matching the event title to an illustration
-		translate('calendar', 'Game'),
+		translate('calendar', 'Game')
 	],
 	illustrationNames: [
 		'gaming',
 		'old_day'
-	],
+	]
 }, {
 	strings: [
 		'Drive',
@@ -202,7 +202,7 @@ const data = [{
 	],
 	illustrationNames: [
 		'electric_car'
-	],
+	]
 }, {
 	strings: [
 		'Bicycle',
@@ -213,12 +213,12 @@ const data = [{
 		// TRANSLATORS This string is used for matching the event title to an illustration
 		translate('calendar', 'Cycle'),
 		// TRANSLATORS This string is used for matching the event title to an illustration
-		translate('calendar', 'Biking'),
+		translate('calendar', 'Biking')
 	],
 	illustrationNames: [
 		'bicycle',
 		'biking'
-	],
+	]
 }, {
 	strings: [
 		'Podcast',
@@ -227,7 +227,7 @@ const data = [{
 	],
 	illustrationNames: [
 		'podcast'
-	],
+	]
 }, {
 	strings: [
 		'Basketball',
@@ -236,7 +236,7 @@ const data = [{
 	],
 	illustrationNames: [
 		'basketball'
-	],
+	]
 }, {
 	strings: [
 		'Fishing',
@@ -245,7 +245,7 @@ const data = [{
 	],
 	illustrationNames: [
 		'fishing'
-	],
+	]
 }, {
 	strings: [
 		'Hiking',
@@ -258,7 +258,7 @@ const data = [{
 	illustrationNames: [
 		'exploring',
 		'hiking'
-	],
+	]
 }, {
 	strings: [
 		'Art',
@@ -273,7 +273,7 @@ const data = [{
 	],
 	illustrationNames: [
 		'art_lover'
-	],
+	]
 }, {
 	strings: [
 		'Pilates',
@@ -282,7 +282,7 @@ const data = [{
 	],
 	illustrationNames: [
 		'pilates'
-	],
+	]
 }, {
 	strings: [
 		'Park',
@@ -291,7 +291,7 @@ const data = [{
 	],
 	illustrationNames: [
 		'a_day_at_the_park'
-	],
+	]
 }, {
 	strings: [
 		'Studying',
@@ -300,7 +300,7 @@ const data = [{
 	],
 	illustrationNames: [
 		'studying'
-	],
+	]
 }, {
 	strings: [
 		'Doctor',
@@ -313,7 +313,7 @@ const data = [{
 	illustrationNames: [
 		'doctors',
 		'medicine'
-	],
+	]
 }, {
 	strings: [
 		'Interview',
@@ -322,7 +322,7 @@ const data = [{
 	],
 	illustrationNames: [
 		'interview'
-	],
+	]
 }, {
 	strings: [
 		'Training',
@@ -344,7 +344,7 @@ const data = [{
 	illustrationNames: [
 		'personal_trainer',
 		'working_out'
-	],
+	]
 }, {
 	strings: [
 		'Barber',
@@ -356,7 +356,7 @@ const data = [{
 	],
 	illustrationNames: [
 		'barber'
-	],
+	]
 }, {
 	strings: [
 		'Exam',
@@ -365,7 +365,7 @@ const data = [{
 	],
 	illustrationNames: [
 		'exams'
-	],
+	]
 }, {
 	strings: [
 		'Working',
@@ -374,7 +374,7 @@ const data = [{
 	],
 	illustrationNames: [
 		'working_remotely'
-	],
+	]
 }, {
 	strings: [
 		'New Years Eve',
@@ -389,7 +389,7 @@ const data = [{
 	],
 	illustrationNames: [
 		'fireworks'
-	],
+	]
 }, {
 	strings: [
 		'Running',
@@ -404,7 +404,7 @@ const data = [{
 	],
 	illustrationNames: [
 		'finish_line_katerina_limpitsouni'
-	],
+	]
 }, {
 	strings: [
 		'Call',
@@ -416,7 +416,7 @@ const data = [{
 	],
 	illustrationNames: [
 		'calling'
-	],
+	]
 }, {
 	strings: [
 		'Christmas',
@@ -425,7 +425,7 @@ const data = [{
 	],
 	illustrationNames: [
 		'christmas_tree'
-	],
+	]
 }, {
 	strings: [
 		'Conference',
@@ -434,7 +434,7 @@ const data = [{
 	],
 	illustrationNames: [
 		'conference_speaker'
-	],
+	]
 }, {
 	strings: [
 		'Pizza',
@@ -443,7 +443,7 @@ const data = [{
 	],
 	illustrationNames: [
 		'pizza_sharing'
-	],
+	]
 }, {
 	strings: [
 		'Travelling',
@@ -457,7 +457,7 @@ const data = [{
 		'travelers',
 		'adventure',
 		'travel_plans'
-	],
+	]
 }, {
 	strings: [
 		'Journey',
@@ -466,7 +466,7 @@ const data = [{
 	],
 	illustrationNames: [
 		'journey'
-	],
+	]
 }, {
 	strings: [
 		'Collaborate',
@@ -475,7 +475,7 @@ const data = [{
 	],
 	illustrationNames: [
 		'collab'
-	],
+	]
 }, {
 	strings: [
 		'Lecture',
@@ -487,7 +487,7 @@ const data = [{
 	],
 	illustrationNames: [
 		'professor'
-	],
+	]
 }, {
 	strings: [
 		'Photograph',
@@ -497,7 +497,7 @@ const data = [{
 	illustrationNames: [
 		'camera',
 		'photo_session'
-	],
+	]
 }, {
 	strings: [
 		'Party',
@@ -508,11 +508,11 @@ const data = [{
 		// TRANSLATORS This string is used for matching the event title to an illustration
 		translate('calendar', 'Celebration'),
 		// TRANSLATORS This string is used for matching the event title to an illustration
-		translate('calendar', 'Celebrate'),
+		translate('calendar', 'Celebrate')
 	],
 	illustrationNames: [
 		'party'
-	],
+	]
 }, {
 	strings: [
 		'Shopping',
@@ -522,7 +522,7 @@ const data = [{
 	illustrationNames: [
 		'empty_cart',
 		'window_shopping'
-	],
+	]
 }, {
 	strings: [
 		'Skate',
@@ -534,7 +534,7 @@ const data = [{
 	],
 	illustrationNames: [
 		'skateboard'
-	],
+	]
 }, {
 	strings: [
 		'Wine tasting',
@@ -543,7 +543,7 @@ const data = [{
 	],
 	illustrationNames: [
 		'wine_tasting'
-	],
+	]
 }, {
 	strings: [
 		'Golf',
@@ -552,7 +552,7 @@ const data = [{
 	],
 	illustrationNames: [
 		'golf'
-	],
+	]
 }, {
 	strings: [
 		'Dinner',
@@ -561,5 +561,5 @@ const data = [{
 	],
 	illustrationNames: [
 		'dinner'
-	],
+	]
 }]
diff --git a/src/views/Calendar.vue b/src/views/Calendar.vue
index 20504eee9..1b7826c28 100644
--- a/src/views/Calendar.vue
+++ b/src/views/Calendar.vue
@@ -27,13 +27,11 @@
 			<!-- Calendar / Subscription List -->
 			<CalendarList
 				:is-public="!isAuthenticatedUser"
-				:loading-calendars="loadingCalendars"
-			/>
+				:loading-calendars="loadingCalendars" />
 			<!-- Settings and import -->
 			<Settings
 				v-if="isAuthenticatedUser"
-				:loading-calendars="loadingCalendars"
-			/>
+				:loading-calendars="loadingCalendars" />
 		</AppNavigation>
 		<EmbedTopNavigation v-if="isEmbedded" />
 		<AppContent>
@@ -64,12 +62,10 @@
 				@eventDrop="eventDrop"
 				@eventResize="eventResize"
 				@eventRender="eventRender"
-				@select="select"
-			/>
+				@select="select" />
 
 			<EmptyCalendar
-				v-if="showEmptyCalendarScreen"
-			/>
+				v-if="showEmptyCalendarScreen" />
 		</AppContent>
 		<!-- Edit modal -->
 		<router-view v-if="!loadingCalendars" />
@@ -211,7 +207,7 @@ export default {
 			}
 
 			return null
-		},
+		}
 	},
 	beforeRouteUpdate(to, from, next) {
 		if (to.params.firstDay !== from.params.firstDay) {
diff --git a/src/views/EditSidebar.vue b/src/views/EditSidebar.vue
index 22d96b969..d7d5af30f 100644
--- a/src/views/EditSidebar.vue
+++ b/src/views/EditSidebar.vue
@@ -29,10 +29,9 @@
 		:title-placeholder="$t('calendar', 'Untitled event')"
 		:subtitle="subTitle"
 		@close="cancel"
-		@update:title="updateTitle"
-	>
+		@update:title="updateTitle">
 		<template v-slot:primary-actions style="max-height: none !important">
-			<property-title-time-picker
+			<PropertyTitleTimePicker
 				v-if="!isLoading"
 				:start-date="startDate"
 				:start-timezone="startTimezone"
@@ -46,11 +45,9 @@
 				@updateStartTimezone="updateStartTimezone"
 				@updateEndDate="updateEndDate"
 				@updateEndTimezone="updateEndTimezone"
-				@toggleAllDay="toggleAllDay"
-			/>
-			<property-title-time-picker-loading-placeholder
-				v-if="isLoading"
-			/>
+				@toggleAllDay="toggleAllDay" />
+			<PropertyTitleTimePickerLoadingPlaceholder
+				v-if="isLoading" />
 		</template>
 
 		<template v-slot:header>
@@ -58,9 +55,10 @@
 		</template>
 
 		<template v-slot:secondary-actions>
-			<ActionLink v-if="hasDownloadURL" icon="icon-download" :title="$t('calendar', 'Download')"
-				:href="downloadURL"
-			/>
+			<ActionLink v-if="hasDownloadURL"
+				icon="icon-download"
+				:title="$t('calendar', 'Download')"
+				:href="downloadURL" />
 			<ActionButton v-if="canDelete && !canCreateRecurrenceException" icon="icon-delete" @click="deleteAndLeave(false)">
 				{{ $t('calendar', 'Delete') }}
 			</ActionButton>
@@ -76,124 +74,109 @@
 			class="app-sidebar-tab"
 			icon="icon-details"
 			:name="$t('calendar', 'Details')"
-			:order="0"
-		>
+			:order="0">
 			<div v-if="isLoading" class="app-sidebar-tab__loading">
 				<div class="app-sidebar-tab-loading-indicator">
 					<div class="icon icon-loading app-sidebar-tab-loading-indicator__icon" />
 				</div>
 			</div>
 			<div v-if="!isLoading" class="app-sidebar-tab__content">
-				<property-calendar-picker
+				<PropertyCalendarPicker
 					:calendars="calendars"
 					:calendar="selectedCalendar"
 					:is-read-only="isReadOnly"
-					@selectCalendar="changeCalendar"
-				/>
+					@selectCalendar="changeCalendar" />
 
-				<property-text
+				<PropertyText
 					:is-read-only="isReadOnly"
 					:prop-model="rfcProps.location"
 					:value="location"
-					@update:value="updateLocation"
-				/>
-				<property-text
+					@update:value="updateLocation" />
+				<PropertyText
 					:is-read-only="isReadOnly"
 					:prop-model="rfcProps.description"
 					:value="description"
-					@update:value="updateDescription"
-				/>
+					@update:value="updateDescription" />
 
-				<property-select
+				<PropertySelect
 					:is-read-only="isReadOnly"
 					:prop-model="rfcProps.status"
 					:value="status"
-					@update:value="updateStatus"
-				/>
-				<property-select
+					@update:value="updateStatus" />
+				<PropertySelect
 					:is-read-only="isReadOnly"
 					:prop-model="rfcProps.class"
 					:value="accessClass"
-					@update:value="updateAccessClass"
-				/>
-				<property-select
+					@update:value="updateAccessClass" />
+				<PropertySelect
 					:is-read-only="isReadOnly"
 					:prop-model="rfcProps.timeTransparency"
 					:value="timeTransparency"
-					@update:value="updateTimeTransparency"
-				/>
+					@update:value="updateTimeTransparency" />
 			</div>
-			<save-buttons
+			<SaveButtons
 				v-if="!isReadOnly"
 				class="app-sidebar-tab__buttons"
 				:can-create-recurrence-exception="canCreateRecurrenceException"
 				:is-new="isNew"
 				:force-this-and-all-future="forceThisAndAllFuture"
 				@saveThisOnly="saveAndLeave(false)"
-				@saveThisAndAllFuture="saveAndLeave(true)"
-			/>
+				@saveThisAndAllFuture="saveAndLeave(true)" />
 		</AppSidebarTab>
 		<AppSidebarTab
 			class="app-sidebar-tab"
 			icon="icon-group"
 			:name="$t('calendar', 'Attendees')"
-			:order="1"
-		>
+			:order="1">
 			<div v-if="isLoading" class="app-sidebar-tab__loading">
 				<div class="app-sidebar-tab-loading-indicator">
 					<div class="icon icon-loading app-sidebar-tab-loading-indicator__icon" />
 				</div>
 			</div>
 			<div v-if="!isLoading" class="app-sidebar-tab__content">
-				<invitees-list
+				<InviteesList
 					v-if="!isLoading"
 					:calendar-object-instance="calendarObjectInstance"
-					:is-read-only="isReadOnly"
-				/>
+					:is-read-only="isReadOnly" />
 			</div>
-			<save-buttons
+			<SaveButtons
 				v-if="!isReadOnly"
 				class="app-sidebar-tab__buttons"
 				:can-create-recurrence-exception="canCreateRecurrenceException"
 				:is-new="isNew"
 				:force-this-and-all-future="forceThisAndAllFuture"
 				@saveThisOnly="saveAndLeave(false)"
-				@saveThisAndAllFuture="saveAndLeave(true)"
-			/>
+				@saveThisAndAllFuture="saveAndLeave(true)" />
 		</AppSidebarTab>
 		<AppSidebarTab
 			class="app-sidebar-tab"
 			icon="icon-reminder"
 			:name="$t('calendar', 'Reminders')"
-			:order="2"
-		>
+			:order="2">
 			<div v-if="isLoading" class="app-sidebar-tab__loading">
 				<div class="app-sidebar-tab-loading-indicator">
 					<div class="icon icon-loading app-sidebar-tab-loading-indicator__icon" />
 				</div>
 			</div>
 			<div v-if="!isLoading" class="app-sidebar-tab__content">
-				<alarm-list
+				<AlarmList
 					:calendar-object-instance="calendarObjectInstance"
-					:is-read-only="isReadOnly"
-				/>
+					:is-read-only="isReadOnly" />
 			</div>
-			<save-buttons
+			<SaveButtons
 				v-if="!isReadOnly"
 				class="app-sidebar-tab__buttons"
 				:can-create-recurrence-exception="canCreateRecurrenceException"
 				:is-new="isNew"
 				:force-this-and-all-future="forceThisAndAllFuture"
 				@saveThisOnly="saveAndLeave(false)"
-				@saveThisAndAllFuture="saveAndLeave(true)"
-			/>
+				@saveThisAndAllFuture="saveAndLeave(true)" />
 		</AppSidebarTab>
 		<AppSidebarTab
 			class="app-sidebar-tab"
 			icon="icon-repeat"
 			:name="$t('calendar', 'Repeat')"
-			:order="3"
-		>
+			:order="3">
 			<div v-if="isLoading" class="app-sidebar-tab__loading">
 				<div class="app-sidebar-tab-loading-indicator">
 					<div class="icon icon-loading app-sidebar-tab-loading-indicator__icon" />
@@ -202,24 +185,22 @@
 			<div v-if="!isLoading" class="app-sidebar-tab__content">
 				<!-- TODO: If not editing the master item, force updating this and all future   -->
 				<!-- TODO: You can't edit recurrence-rule of no-range recurrence-exception -->
-				<repeat
+				<Repeat
 					:calendar-object-instance="calendarObjectInstance"
 					:recurrence-rule="calendarObjectInstance.recurrenceRule"
 					:is-read-only="isReadOnly"
 					:is-editing-master-item="isEditingMasterItem"
 					:is-recurrence-exception="isRecurrenceException"
-					@forceThisAndAllFuture="forceModifyingFuture"
-				/>
+					@forceThisAndAllFuture="forceModifyingFuture" />
 			</div>
-			<save-buttons
+			<SaveButtons
 				v-if="!isReadOnly"
 				class="app-sidebar-tab__buttons"
 				:can-create-recurrence-exception="canCreateRecurrenceException"
 				:is-new="isNew"
 				:force-this-and-all-future="forceThisAndAllFuture"
 				@saveThisOnly="saveAndLeave(false)"
-				@saveThisAndAllFuture="saveAndLeave(true)"
-			/>
+				@saveThisAndAllFuture="saveAndLeave(true)" />
 		</AppSidebarTab>
 		<!--<AppSidebarTab :name="$t('calendar', 'Activity')" icon="icon-history" :order="4">-->
 		<!--	This is the activity tab-->
@@ -269,7 +250,7 @@ export default {
 		PropertySelect,
 		PropertyText,
 		PropertyTitleTimePicker,
-		Repeat,
+		Repeat
 	},
 	mixins: [
 		EditorMixin
@@ -339,7 +320,7 @@ export default {
 				calendarObjectInstance: this.calendarObjectInstance,
 				timeTransparency
 			})
-		},
+		}
 	}
 }
 </script>
diff --git a/src/views/EditSimple.vue b/src/views/EditSimple.vue
index 4aaa666e3..4a7271c49 100644
--- a/src/views/EditSimple.vue
+++ b/src/views/EditSimple.vue
@@ -27,20 +27,16 @@
 		:placement="placement"
 		boundaries-element="#app-content"
 		open-class="event-popover"
-		trigger="manual"
-	>
+		trigger="manual">
 		<PopoverLoadingIndicator
-			v-if="isLoading"
-		/>
+			v-if="isLoading" />
 
 		<Actions
 			v-if="!isLoading"
-			class="event-popover__close-action"
-		>
+			class="event-popover__close-action">
 			<ActionButton
 				icon="icon-close"
-				@click="cancel"
-			>
+				@click="cancel">
 				{{ $t('calendar', 'Close') }}
 			</ActionButton>
 		</Actions>
@@ -48,17 +44,15 @@
 		<IllustrationHeader
 			v-if="!isLoading"
 			:color="selectedCalendarColor"
-			:illustration-url="backgroundImage"
-		/>
+			:illustration-url="backgroundImage" />
 
 		<PropertyTitle
 			v-if="!isLoading"
 			:value="title"
 			:is-read-only="isReadOnly"
-			@update:value="updateTitle"
-		/>
+			@update:value="updateTitle" />
 
-		<property-title-time-picker
+		<PropertyTitleTimePicker
 			v-if="!isLoading"
 			:start-date="startDate"
 			:start-timezone="startTimezone"
@@ -72,33 +66,29 @@
 			@updateStartTimezone="updateStartTimezone"
 			@updateEndDate="updateEndDate"
 			@updateEndTimezone="updateEndTimezone"
-			@toggleAllDay="toggleAllDay"
-		/>
+			@toggleAllDay="toggleAllDay" />
 
-		<property-calendar-picker
+		<PropertyCalendarPicker
 			v-if="!isLoading"
 			:calendars="calendars"
 			:calendar="selectedCalendar"
 			:is-read-only="isReadOnly"
-			@selectCalendar="changeCalendar"
-		/>
+			@selectCalendar="changeCalendar" />
 
-		<property-text
+		<PropertyText
 			v-if="!isLoading && hasLocation"
 			:is-read-only="isReadOnly"
 			:prop-model="rfcProps.location"
 			:value="location"
-			@update:value="updateLocation"
-		/>
-		<property-text
+			@update:value="updateLocation" />
+		<PropertyText
 			v-if="!isLoading && hasDescription"
 			:is-read-only="isReadOnly"
 			:prop-model="rfcProps.description"
 			:value="description"
-			@update:value="updateDescription"
-		/>
+			@update:value="updateDescription" />
 
-		<save-buttons
+		<SaveButtons
 			v-if="!isReadOnly"
 			class="event-popover__buttons"
 			:can-create-recurrence-exception="canCreateRecurrenceException"
@@ -107,8 +97,7 @@
 			:show-more-button="true"
 			@saveThisOnly="saveAndLeave(false)"
 			@saveThisAndAllFuture="saveAndLeave(true)"
-			@showMore="showMore"
-		/>
+			@showMore="showMore" />
 	</Popover>
 </template>
 <script>