diff --git a/src/components/Shared/CalendarPicker.vue b/src/components/Shared/CalendarPicker.vue
index d8e96ef9f7..70bde4d8d0 100644
--- a/src/components/Shared/CalendarPicker.vue
+++ b/src/components/Shared/CalendarPicker.vue
@@ -2,11 +2,11 @@
 	<Select label="displayName"
 		input-id="url"
 		:disabled="isDisabled"
-		:options="calendars"
-		:value="value"
+		:options="options"
+		:value="removeCircularStructure(value)"
 		:multiple="multiple"
 		@input="change"
-		@remove="remove">
+		@option:deselected="remove">
 		<template #option="option">
 			<CalendarPickerOption :color="option.color"
 				:display-name="option.displayName"
@@ -55,6 +55,12 @@ export default {
 			// for calendars where only one calendar can be selected, disable if there are < 2
 			return this.multiple ? this.calendars.length < 1 : this.calendars.length < 2
 		},
+		options() {
+			return this.calendars.map(calendar => {
+   				const { dav, ...rest } = calendar;
+   		 		return rest;
+  			});
+		}	
 	},
 	methods: {
 		/**
@@ -80,6 +86,10 @@ export default {
 				this.$emit('remove-calendar', calendar)
 			}
 		},
+		removeCircularStructure(calendar) {
+			const { dav, ...rest } = calendar
+			return rest
+		},
 	},
 }
 </script>