diff --git a/components/calendar/calendar-month-view.tsx b/components/calendar/calendar-month-view.tsx index c91a71bd..1843352f 100644 --- a/components/calendar/calendar-month-view.tsx +++ b/components/calendar/calendar-month-view.tsx @@ -9,6 +9,7 @@ import { buildWeekSegments, getEventDayBounds, getPrimaryCalendarId } from "@/li import type { CalendarEvent, Calendar } from "@/lib/jmap/types"; import { useAuthStore } from "@/stores/auth-store"; import { useCalendarStore } from "@/stores/calendar-store"; +import { useSettingsStore } from "@/stores/settings-store"; import type { PendingEventPreview } from "./event-modal"; import { toast } from "@/stores/toast-store"; import { useCalendarLocale } from "@/hooks/use-calendar-locale"; @@ -45,6 +46,13 @@ export function CalendarMonthView({ pendingPreview, }: CalendarMonthViewProps) { const t = useTranslations("calendar"); + const showTimeInMonthView = useSettingsStore((state) => state.showTimeInMonthView); + // On mobile the month view collapses events to dots unless the user opted + // into full entries via "Show time in month view" (#666). + const showChips = !isMobile || showTimeInMonthView; + const overlayTop = isMobile ? 34 : 30; + const rowHeight = isMobile ? 18 : 22; + const chipHeight = rowHeight - 2; const { weekStartsOn, dayHeaderKeys, @@ -157,7 +165,7 @@ export function CalendarMonthView({
+ )} role="row" style={showChips ? { minHeight: Math.max(isMobile ? 52 : 100, overlayTop + 4 + rowCount * rowHeight + 8) } : undefined}>
{week.map((day) => { const inMonth = checkIsSameMonth(day, selectedDate); @@ -201,7 +209,7 @@ export function CalendarMonthView({ {formatDayNumber(day)}
- {isMobile ? ( + {isMobile && !showChips ? (
{dayEvents.slice(0, 3).map((ev) => { const calId = getPrimaryCalendarId(ev); @@ -231,25 +239,28 @@ export function CalendarMonthView({ })}
- {!isMobile && pendingPreview && (() => { + {showChips && pendingPreview && (() => { const previewDayIdx = week.findIndex(d => checkIsSameDay(d, pendingPreview.start)); if (previewDayIdx === -1) return null; const previewRow = rowCount; const cal = calendarMap.get(pendingPreview.calendarId); const color = cal?.color || "#3b82f6"; return ( -
+
{pendingPreview.title} @@ -259,8 +270,8 @@ export function CalendarMonthView({ ); })()} - {!isMobile && segments.length > 0 && ( -
+ {showChips && segments.length > 0 && ( +
{segments.map((segment) => { const calId = getPrimaryCalendarId(segment.event); return ( @@ -270,8 +281,8 @@ export function CalendarMonthView({ style={{ left: `calc(${(segment.startIndex / 7) * 100}% + 1px)`, width: `calc(${(segment.span / 7) * 100}% - 2px)`, - top: segment.row * 22, - height: 20, + top: segment.row * rowHeight, + height: chipHeight, }} >
); diff --git a/locales/en/common.json b/locales/en/common.json index 3bc5915d..a5c080cc 100644 --- a/locales/en/common.json +++ b/locales/en/common.json @@ -2703,7 +2703,7 @@ "invitation_parsing": "Parse email invitations", "invitation_parsing_desc": "Detect calendar invitations in email attachments and show calendar actions", "show_time_in_month_view": "Show time in month view", - "show_time_in_month_view_desc": "Display event times in the month calendar view", + "show_time_in_month_view_desc": "Display event times in the month calendar view. On small screens this shows full event entries instead of dots.", "show_week_numbers": "Show week numbers", "show_week_numbers_desc": "Display week numbers in the mini-calendar", "enable_tasks": "Enable tasks",