logo

FullCalendar

This version is in beta. Read the release notes

Luxon Plugin

Luxon is an up-and-coming JavaScript date library that cleverly leverages the browser’s native APIs for many things such as time zones, locales, and formatting. However, it requires IE11 and above, and if you want to use named time zones, it does not support IE at all, only Microsoft Edge. If these browser requirements are okay for your project, then all is good!

The plugin provides you the following functionality:

Example using formatting strings with an ES6 build system:

import { Calendar } from '@fullcalendar/core';
import luxonPlugin from '@fullcalendar/luxon';
...
let calendar = new Calendar(calendarEl, {
  plugins: [ luxonPlugin ],
  titleFormat: 'LLLL d, yyyy' // you can now use format strings
});
...

If you want to format a date range, you can group related date parts with curly brackets:

let calendar = new Calendar(calendarEl, {
  titleFormat: '{LLLL {d}}, yyyy'
  // could produce "January 5 - 7, 2018"
  // could produce "January 5 - February 31, 2018"
  // could produce "January 5, 2018 - June 9, 2019"
});

Example using date/duration conversion:

import { Calendar } from '@fullcalendar/core';
import { toDateTime, toDuration } from '@fullcalendar/luxon';
...
let calendar = new Calendar(calendarEl, {

  dateClick: function(arg) {
    let dt = toDateTime(arg.date, calendar); // calendar is required
    console.log('clicked on ' + dt.toISO());
  },

  eventDrop: function(arg) {
    let dur = toDuration(arg.delta, calendar); // calendar is required
    console.log('event moved ' + dur.toISO());
  }
});
...