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, columnHeaderFormat, 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 8This 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/pfalse 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 Plugin (for the Luxon library)
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() + '!!!';
}
});