Is it possible to format short event times with only the start time in v5?

Viewed 40

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

<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.

enter image description here

<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}
/>
0 Answers
Related