Here's a screenshot as to what I had in v4 with the config below:

<FullCalendar
allDaySlot={false}
businessHours={this.businessHours}
columnHeaderHtml={this.formatColumnHeaderHtml}
dateClick={onDayClicked}
defaultDate={this.props.initialDate}
defaultView='timeGridWeek'
displayEventEnd
eventClick={onEventClicked}
eventLimit={2}
eventRender={this.renderEvent}
events={this.eventsFormatted.slice()}
eventTimeFormat={{
hour: 'numeric',
meridiem: 'short',
minute: '2-digit',
omitZeroMinute: true
}}
firstDay={1}
fixedWeekCount={false}
header={{
center: '',
left: '',
right: ''
}}
plugins={[dayGridPlugin, interactionPlugin, timeGridPlugin]}
ref={this.calendarRef}
timeFormat='h(:mm)t'
views={{
timeGrid: {
hour: 'numeric',
meridiem: 'short',
minute: '2-digit'
}
}}
/>
With v5, the short events don't get formatted correctly; the hour/meridiem/minute options are invalid for the views.timeGrid parameter. Is there a different way to achieve what I had before without using the custom event renderer?
v5 version is below.
<FullCalendar
allDaySlot={false}
businessHours={this.businessHours}
dateClick={onDayClicked}
dayHeaderContent={this.formatColumnHeaderHtml}
dayMaxEvents={2}
displayEventEnd
eventClick={onEventClicked}
events={this.eventsFormatted.slice()}
eventTimeFormat={{
hour: 'numeric',
meridiem: 'short',
minute: '2-digit',
omitZeroMinute: true
}}
firstDay={1}
fixedWeekCount={false}
headerToolbar={{
center: '',
left: '',
right: ''
}}
initialDate={this.props.initialDate}
initialView='timeGridWeek'
plugins={[dayGridPlugin, interactionPlugin, timeGridPlugin]}
ref={this.calendarRef}
/>
