logo

FullCalendar

These are the new v4 docs! More info

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, 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 '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:

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();
});

Read more about Moment JS formatting strings.

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() + '!!!';
  }
});