Date Formatting

The term “date formatting” means taking a Date object and converting it into a string. The string can either be a standard string format like ISO8601 (ex: '2018-05-01') or it can be something more custom that you can display to users.

There are settings that define how a date is displayed, such as eventTimeFormat, titleFormat, dayHeaderFormat, and others. These settings accept “date formatting configs”. These are objects that define what information will outputted into the resulting string. Example:

var calendar = new Calendar(calendarEl, {
  titleFormat: { // will produce something like "Tuesday, September 18, 2018"
    month: 'long',
    year: 'numeric',
    day: 'numeric',
    weekday: 'long'
  }
})

Date formatting configs have the same properties as the native DateTimeFormat like:

year	`'numeric'` will produce something like `2018` `'2-digit'` will produce something like `18`
month	`'long'` will produce something like `September` `'short'` will produce something like `Sep` `'narrow'` will produce something like `S` `'numeric'` will produce something like `1` `'2-digit'` will produce something like `01`
day	The day of the month. If the date were Jun 3, 2018 `'numeric'` will produce something like `3` `'2-digit'` will produce something like `03`
weekday	The day of the week. `'long'` will produce something like `Wednesday` `'short'` will produce something like `Wed` `'narrow'` will produce something like `W`
hour	If the time were 6:05 `'numeric'` would produce something like `6` `'2-digit'` would produce something like `06`
minute	If the time were 6:05 `'numeric'` would produce something like `5` `'2-digit'` would produce something like `05`
second	`'numeric'` or `'2-digit'`
hour12	`true` for a 12-hour clock, `false` for a 24-hour clock
timeZoneName	`'short'` (`'long'` is not supported by FullCalendar)

There are additional properties you may use that are not part of the native DateTimeFormat’s API:

week	`'long'` will produce something like `Week 8` `'short'` will produce something like `Wk 8` `'narrow'` will produce something like `Wk8` `'numeric'` will produce something like `8` This flag cannot be combined with any other flags!
meridiem	Normally with a 12-hour clock the meridiem displays as `A.M./P.M.` `'lowercase'` will force it to display like `a.m./p.m.` `'short'` will force it to display like `am/pm` `'narrow'` will force it to display like `a/p` `false` will prevent it from displaying altogether
omitZeroMinute	if `true`, times like `6:00` will display as `6`
omitCommas	if `true`, all commas will be stripped from the outputted string

None of the above properties are required. You may provide an assortment of these properties and the browser will do the best job it can to produce a string with all this information.

The biggest benefit of using this technique over others is that it is very international-friendly. It provides the flexibility to display localized formats in different locales/languages.

Formatting Strings

Date formatting configs are great for internationalization, but if you want more control over the produced string, they are going to disappoint you. “Date formatting string” are essentially command strings that have placeholders for where date-related words and numbers should go. They are a concept present in many other date libraries.

Date formatting strings are only available if you include a plugin that provides the functionality. The two available connector plugins are:

Moment Plugin (for the Moment library)
Luxon 2 Plugin (for the Luxon library)
Luxon 1 Plugin

Example using the Moment plugin:

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import momentPlugin from '@fullcalendar/moment';

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new Calendar(calendarEl, {
    plugins: [ dayGridPlugin, momentPlugin ],

    // because the plugin is present, you can now use formatting strings.
    // will produce something like "Tuesday, September 18, 2018"
    titleFormat: 'dddd, MMMM D, YYYY'
  });

  calendar.render();
});

Formatting Functions

If you want complete programmatic control over how a string is produced, or you simply want to use date-formatting from a third-party date library that doesn’t have a connector plugin, you can use a “formatting function”. This function will receive a date instance and must return a string.

Example:

var calendar = new Calendar(calendarEl, {
  // will produce something like "Tue Sep 18 2018 18:48:41 GMT-0400 (Eastern Daylight Time) !!!"
  titleFormat: function(date) {
    return date.toString() + '!!!';
  }
});

Util Methods

Plugins

See Also

Date Formatting

Formatting Strings

Formatting Functions