From d94e7cc8655835a302230b2c3aa2d435efb31031 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Mon, 24 Aug 2026 09:51:54 +0100
Subject: [PATCH] fix calendar view for date fields using a format without time

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01VBYozYY2819GBNn5eMc67y
---
 .../components/entries/calendar/Calendar.vue  |  5 ++---
 .../js/components/entries/calendar/Month.vue  |  6 ++----
 .../entries/calendar/MonthEntry.vue           |  7 ++++++-
 .../js/components/entries/calendar/Week.vue   |  7 +++----
 .../components/entries/calendar/calendar.js   |  9 ++++++++-
 .../tests/components/entries/calendar.test.js | 19 +++++++++++++++++++
 6 files changed, 40 insertions(+), 13 deletions(-)
 create mode 100644 resources/js/tests/components/entries/calendar.test.js

diff --git a/resources/js/components/entries/calendar/Calendar.vue b/resources/js/components/entries/calendar/Calendar.vue
index 29ab17b08e9..82da82e55ab 100644
--- a/resources/js/components/entries/calendar/Calendar.vue
+++ b/resources/js/components/entries/calendar/Calendar.vue
@@ -7,7 +7,7 @@ import Month from './Month.vue';
 import Week from './Week.vue';
 import { Listing, StatusIndicator } from '@/components/ui';
 import DateFormatter from '@/components/DateFormatter.js';
-import { getWeekDates, getCurrentDateRange } from './calendar.js';
+import { getWeekDates, getCurrentDateRange, getEntryDate } from './calendar.js';
 import { Link } from '@inertiajs/vue3';
 import { ToggleGroup, ToggleItem, Button, Popover, Label, Select, Heading } from '@ui';
 import { preferences } from '@api';
@@ -122,8 +122,7 @@ const selectedDateEntries = computed(() => {
     const dateStr = selectedDate.value.toString();
 
     return entries.value.filter(entry => {
-        const entryDate = new Date(entry.date?.date || entry.date);
-        return entryDate.toISOString().split('T')[0] === dateStr;
+        return getEntryDate(entry).toString().split('T')[0] === dateStr;
     });
 });
 
diff --git a/resources/js/components/entries/calendar/Month.vue b/resources/js/components/entries/calendar/Month.vue
index dbcc167fc39..46e4bd45fdb 100644
--- a/resources/js/components/entries/calendar/Month.vue
+++ b/resources/js/components/entries/calendar/Month.vue
@@ -3,9 +3,8 @@ import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, Cale
 import CalendarEntry from './MonthEntry.vue';
 import CreateEntryButton from '../CreateEntryButton.vue';
 import { Button } from '@ui';
-import { isToday, getCreateUrlDateParam } from './calendar.js';
+import { isToday, getCreateUrlDateParam, getEntryDate } from './calendar.js';
 import DateFormatter from '@/components/DateFormatter.js';
-import { parseAbsoluteToLocal } from '@internationalized/date';
 
 const props = defineProps({
     weekDays: { type: Array, required: true },
@@ -32,8 +31,7 @@ const isCurrentDay = (dayIndex) => {
 const getEntriesForDate = (date) => {
     const dateStr = date.toString();
     return props.entries.filter(entry => {
-        const entryDate = parseAbsoluteToLocal(entry.date?.date || entry.date);
-        return entryDate.toString().split('T')[0] === dateStr;
+        return getEntryDate(entry).toString().split('T')[0] === dateStr;
     });
 };
 
diff --git a/resources/js/components/entries/calendar/MonthEntry.vue b/resources/js/components/entries/calendar/MonthEntry.vue
index 93519ec3154..3fc2db08f48 100644
--- a/resources/js/components/entries/calendar/MonthEntry.vue
+++ b/resources/js/components/entries/calendar/MonthEntry.vue
@@ -13,7 +13,11 @@ const entryClasses = computed(() => ({
     'border-purple-500 hover:bg-purple-50 dark:hover:bg-purple-900': props.entry.status === 'scheduled'
 }));
 
-const time = computed(() => DateFormatter.format(props.entry.date?.date || props.entry.date, 'time'))
+const time = computed(() => {
+    if (props.entry.date?.format_has_time === false) return null;
+
+    return DateFormatter.format(props.entry.date?.date || props.entry.date, 'time');
+});
 </script>
 
 <template>
@@ -25,6 +29,7 @@ const time = computed(() => DateFormatter.format(props.entry.date?.date || props
     >
         <span class="line-clamp-2" v-text="entry.title" />
         <span
+            v-if="time"
             class="hidden @4xl:block text-2xs text-gray-400 dark:text-gray-400 group-hover/entry:dark:text-gray-300"
             v-text="time"
         />
diff --git a/resources/js/components/entries/calendar/Week.vue b/resources/js/components/entries/calendar/Week.vue
index 07079b2413b..12df86c6cf6 100644
--- a/resources/js/components/entries/calendar/Week.vue
+++ b/resources/js/components/entries/calendar/Week.vue
@@ -6,9 +6,9 @@ import { Button } from '@ui';
 import {
     isToday,
     getCreateUrlDateParam,
+    getEntryDate,
 } from './calendar.js';
 import DateFormatter from '@/components/DateFormatter.js';
-import { parseAbsoluteToLocal } from '@internationalized/date';
 
 const props = defineProps({
     weekDates: { type: Array, required: true },
@@ -27,12 +27,11 @@ const visibleHours = Array.from({ length: 24 }, (_, i) => i);
 function getEntriesForHour(date, hour) {
     const dateStr = date.toString();
     return props.entries.filter(entry => {
-        const entryDate = parseAbsoluteToLocal(entry.date?.date || entry.date);
+        const entryDate = getEntryDate(entry);
         const entryDateStr = entryDate.toString().split('T')[0];
         if (entryDateStr !== dateStr) return false;
 
-        const entryHour = entryDate.hour;
-        return entryHour === hour;
+        return (entryDate.hour ?? 0) === hour;
     });
 }
 
diff --git a/resources/js/components/entries/calendar/calendar.js b/resources/js/components/entries/calendar/calendar.js
index f134f457f12..8137214ed63 100644
--- a/resources/js/components/entries/calendar/calendar.js
+++ b/resources/js/components/entries/calendar/calendar.js
@@ -1,6 +1,13 @@
-import { CalendarDate, CalendarDateTime, fromDate, getLocalTimeZone, startOfWeek, endOfWeek } from '@internationalized/date';
+import { CalendarDate, CalendarDateTime, fromDate, getLocalTimeZone, parseAbsoluteToLocal, parseDate, startOfWeek, endOfWeek } from '@internationalized/date';
 import DateFormatter from '@/components/DateFormatter.js';
 
+export function getEntryDate(entry) {
+    const date = entry.date?.date || entry.date;
+
+    // Fields using a format without a time save a plain date string, which can't be parsed as an absolute datetime.
+    return date.includes('T') ? parseAbsoluteToLocal(date) : parseDate(date);
+}
+
 export function getWeekDates(currentDate) {
     if (!currentDate) {
         throw new Error('getWeekDates called with undefined currentDate');
diff --git a/resources/js/tests/components/entries/calendar.test.js b/resources/js/tests/components/entries/calendar.test.js
new file mode 100644
index 00000000000..00bcc08e03f
--- /dev/null
+++ b/resources/js/tests/components/entries/calendar.test.js
@@ -0,0 +1,19 @@
+import { expect, test } from 'vitest';
+import { getEntryDate } from '@/components/entries/calendar/calendar.js';
+
+test('it parses datetime values', () => {
+    const date = getEntryDate({ date: { date: '2026-08-24T12:30:00.000Z', format_has_time: true } });
+
+    expect(date.toString().split('T')[0]).toBe('2026-08-24');
+});
+
+test('it parses date-only values', () => {
+    const date = getEntryDate({ date: { date: '2026-08-24', format_has_time: false } });
+
+    expect(date.toString()).toBe('2026-08-24');
+});
+
+test('it parses values that are plain strings', () => {
+    expect(getEntryDate({ date: '2026-08-24T12:30:00.000Z' }).toString().split('T')[0]).toBe('2026-08-24');
+    expect(getEntryDate({ date: '2026-08-24' }).toString()).toBe('2026-08-24');
+});