Fix weekend header mismatch and wrong date format in day headers

Header mismatch: Removed weekend tint from column headers — the white
overlay replaced the standard header bg (hsl 0 0% 8% / 0.65), creating
a non-flush look. Weekend differentiation now comes from body cells only.

Date format: dayHeaderFormat was applied globally, causing month view
headers to show dates like "Sat 10/1" instead of just "Sat". Moved to
per-view formats: month shows weekday only, week shows weekday + d/m,
day shows full weekday + day + month name.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kyle 2026-03-13 19:57:17 +08:00
parent d959803985
commit 29c91cd706
2 changed files with 5 additions and 6 deletions

View File

@ -699,9 +699,13 @@ export default function CalendarPage() {
datesSet={handleDatesSet}
height="100%"
locale={enAuLocale}
views={{
dayGridMonth: { dayHeaderFormat: { weekday: 'short' } },
timeGridWeek: { dayHeaderFormat: { weekday: 'short', day: 'numeric', month: 'numeric' } },
timeGridDay: { dayHeaderFormat: { weekday: 'long', day: 'numeric', month: 'long' } },
}}
eventTimeFormat={{ hour: 'numeric', minute: '2-digit', meridiem: 'short' }}
slotLabelFormat={{ hour: 'numeric', minute: '2-digit', meridiem: 'short' }}
dayHeaderFormat={{ weekday: 'short', day: 'numeric', month: 'numeric' }}
slotEventOverlap={false}
eventDidMount={handleEventDidMount}
eventClassNames={() => ['umbra-event']}

View File

@ -173,11 +173,6 @@
background-color: rgba(255, 255, 255, 0.05) !important;
}
/* Weekend tint: header cells */
.fc .fc-col-header-cell.fc-day-sat,
.fc .fc-col-header-cell.fc-day-sun {
background-color: rgba(255, 255, 255, 0.05) !important;
}
/* Weekend tint: timegrid column cells (week/day view) */
.fc .fc-timegrid-col.fc-day-sat,