Schedule: let the built-in agenda (withAgenda) use a custom time format or renderEvent

[TMShumway]

With withAgenda, DayView, WeekView and MonthView render their own AgendaView, and pass it only rangeStart, rangeEnd, events, locale, labels, mode, onEventClick, recurrenceExpansionLimit and the Styles API props (checked in 9.7.4).

Inside AgendaView the event time is fixed: dayjs(event.start).format("HH:mm"). An app that shows 12-hour times everywhere else can't make the agenda match. The standalone AgendaView accepts renderEvent, but the views don't forward it to the agenda they mount.

Either of these would solve it:

1. A time-format prop on AgendaView (for example eventTimeFormat, in the spirit of slotLabelFormat), settable from Schedule and the views and forwarded to the built-in agenda.
2. Forward renderEvent, or an agendaViewProps object like Schedule's dayViewProps, from the views to the agenda they render.

[rtivital]

Thanks for the detailed request! This is implemented and will be available in the next patch release.

A new eventTimeFormat prop controls the start and end time of events in AgendaView and in the events list of MobileMonthView. It is also available on DayView, WeekView and MonthView, which forward it to the agenda displayed with withAgenda, and on Schedule, which forwards it to all of them. The prop accepts a dayjs format string or a function, the default is 'HH:mm'.

import dayjs from 'dayjs';
import { AgendaView, DayView, Schedule } from '@mantine/schedule';

// Schedule: agenda of day/week/month views and MobileMonthView in responsive layout
<Schedule events={events} withAgenda layout="responsive" eventTimeFormat="h:mm A" />;

// Individual views
<DayView date={date} events={events} withAgenda eventTimeFormat="h:mm A" />;

// Standalone AgendaView
<AgendaView rangeStart="2025-11-01" rangeEnd="2025-11-30" events={events} eventTimeFormat="h:mm A" />;

// Function format, receives the date as a 'YYYY-MM-DD HH:mm:ss' string
<Schedule
  events={events}
  withAgenda
  eventTimeFormat={(date) => dayjs(date).format(dayjs(date).minute() === 0 ? 'h A' : 'h:mm A')}
/>;