From dee8160f184af4f041580d76ce88da5dc3eb0d12 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Mon, 24 May 2021 14:07:36 -0400
Subject: [PATCH] Fix calendar layout dateTime timezone save issue

Fixes #5651
---
 .changeset/neat-seahorses-reflect.md  |  6 ++++++
 app/src/layouts/calendar/calendar.vue | 26 +++++++++++++++++++-------
 2 files changed, 25 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/neat-seahorses-reflect.md

diff --git a/.changeset/neat-seahorses-reflect.md b/.changeset/neat-seahorses-reflect.md
new file mode 100644
index 0000000000..c629088f4b
--- /dev/null
+++ b/.changeset/neat-seahorses-reflect.md
@@ -0,0 +1,6 @@
+---
+'@directus/app': patch
+---
+
+Fixed issue on the calendar layout that would attempt to save drag-and-drop time changes with a timezone to datetime
+type fields
diff --git a/app/src/layouts/calendar/calendar.vue b/app/src/layouts/calendar/calendar.vue
index a5f4451f5b..f01d99b056 100644
--- a/app/src/layouts/calendar/calendar.vue
+++ b/app/src/layouts/calendar/calendar.vue
@@ -178,6 +178,10 @@ export default defineComponent({
 			},
 		});
 
+		const startDateFieldInfo = computed<Field>(() => {
+			return fieldsInCollection.value.find((field: Field) => field.field === startDateField.value);
+		});
+
 		const endDateField = computed({
 			get() {
 				return _layoutOptions.value?.endDateField;
@@ -190,6 +194,10 @@ export default defineComponent({
 			},
 		});
 
+		const endDateFieldInfo = computed<Field>(() => {
+			return fieldsInCollection.value.find((field: Field) => field.field === endDateField.value);
+		});
+
 		const { items, loading, error, totalPages, itemCount, totalCount, changeManualSort, getItems } = useItems(
 			collection,
 			{
@@ -242,11 +250,11 @@ export default defineComponent({
 					if (!startDateField.value) return;
 
 					const itemChanges: Partial<Item> = {
-						[startDateField.value]: info.event.startStr,
+						[startDateField.value]: adjustForType(info.event.startStr, startDateFieldInfo.value.type),
 					};
 
 					if (endDateField.value && info.event.endStr) {
-						itemChanges[endDateField.value] = info.event.endStr;
+						itemChanges[endDateField.value] = adjustForType(info.event.endStr, endDateFieldInfo.value.type);
 					}
 
 					const endpoint = collection.value.startsWith('directus')
@@ -261,11 +269,7 @@ export default defineComponent({
 				},
 			};
 
-			const startDateFieldInfo: Field | undefined = fieldsInCollection.value.find(
-				(field: Field) => field.field === startDateField.value
-			);
-
-			if (startDateFieldInfo?.type === 'dateTime' || startDateFieldInfo?.type === 'timestamp') {
+			if (startDateFieldInfo.value?.type === 'dateTime' || startDateFieldInfo.value?.type === 'timestamp') {
 				options.headerToolbar = {
 					...options.headerToolbar,
 					right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek',
@@ -344,6 +348,14 @@ export default defineComponent({
 				end: endDateField.value ? item[endDateField.value] : null,
 			};
 		}
+
+		function adjustForType(dateString: string, type: string) {
+			if (type === 'dateTime') {
+				return dateString.substring(0, 19);
+			}
+
+			return dateString;
+		}
 	},
 });
 </script>