Back to Fullcalendar

eventTimeFormat

_docs-v5/event-display/eventTimeFormat.md

latest1.4 KB
Original Source

Determines the time-text that will be displayed on each event.

<div class='spec' markdown='1'> [Date Formatter](date-formatting), *defaults*:
js
// TimeGrid views. '7:00'
{
  hour: 'numeric',
  minute: '2-digit',
  meridiem: false
}

// DayGrid views. '7p'
{
  hour: 'numeric',
  minute: '2-digit',
  omitZeroMinute: true,
  meridiem: 'narrow'
}

// List views. '7pm'
{
  hour: 'numeric',
  minute: '2-digit',
  meridiem: 'short'
}
</div>

As noted above, each view has a specific default. Get fine-tuned control with View-Specific Options. A single setting alone will set the value for all views.

Time-text will only be displayed for Event Objects that have allDay equal to false.

Here is an example of displaying all events in a 24-hour format without meridiem, i.e. AM or PM::

js
var calendar = new Calendar(calendarEl, {
  events: [
    {
      title:  'My Event',
      start:  '2010-01-01T14:30:00',
      allDay: false
    }
    // other events here...
  ],
  eventTimeFormat: { // like '14:30:00'
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    meridiem: false
  }
});

The eventTimeFormat object also accepts an hour12 property, a boolean like meridiem:

js
var calendar = new Calendar(calendarEl, {
  // other options ...
  eventTimeFormat: { // like '14:30:00'
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  }
});