From b99eeb90e2d76145df7bb89a9fc5fa36617714c7 Mon Sep 17 00:00:00 2001 From: Brainslug Date: Thu, 12 Oct 2023 15:03:02 +0200 Subject: [PATCH] Calendar view one day added (end date) when an event is moved (#20010) --- .changeset/nine-bikes-wonder.md | 5 +++++ app/src/layouts/calendar/index.ts | 17 ++++++++++++++--- 2 files changed, 19 insertions(+), 3 deletions(-) create mode 100644 .changeset/nine-bikes-wonder.md diff --git a/.changeset/nine-bikes-wonder.md b/.changeset/nine-bikes-wonder.md new file mode 100644 index 0000000000..e4abca83bf --- /dev/null +++ b/.changeset/nine-bikes-wonder.md @@ -0,0 +1,5 @@ +--- +"@directus/app": patch +--- + +Fixed date type fields adding an extra day in the calendar layout diff --git a/app/src/layouts/calendar/index.ts b/app/src/layouts/calendar/index.ts index 78794536f9..8e1218fb8c 100644 --- a/app/src/layouts/calendar/index.ts +++ b/app/src/layouts/calendar/index.ts @@ -24,6 +24,7 @@ import CalendarActions from './actions.vue'; import CalendarLayout from './calendar.vue'; import CalendarOptions from './options.vue'; import { LayoutOptions } from './types'; +import { EventImpl } from '@fullcalendar/core/internal'; export default defineLayout({ id: 'calendar', @@ -185,11 +186,12 @@ export default defineLayout({ if (!collection.value || !startDateField.value || !startDateFieldInfo.value) return; const itemChanges: Partial = { - [startDateField.value]: adjustForType(info.event.startStr, startDateFieldInfo.value.type), + [startDateField.value]: adjustDateTimeType(info.event.startStr, startDateFieldInfo.value.type), }; if (endDateField.value && endDateFieldInfo.value && info.event.endStr) { - itemChanges[endDateField.value] = adjustForType(info.event.endStr, endDateFieldInfo.value.type); + const endDateStr = info.event.allDay ? adjustDateType(info.event) : info.event.endStr; + itemChanges[endDateField.value] = adjustDateTimeType(endDateStr, endDateFieldInfo.value.type); } const endpoint = getEndpoint(collection.value); @@ -332,12 +334,21 @@ export default defineLayout({ }; } - function adjustForType(dateString: string, type: string) { + function adjustDateTimeType(dateString: string, type: string) { if (type === 'dateTime') { return dateString.substring(0, 19); } return dateString; } + + function adjustDateType(event: EventImpl) { + if (!event.end) return event.endStr; + // because we add a day for the "Date" type rendering we need to + // remove that extra day here before saving the updated value + const date = event.end; + date.setDate(date.getDate() - 1); + return format(date, 'yyyy-MM-dd'); + } }, });