logo

FullCalendar

This release is in alpha and the docs are incomplete. 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:

import { Calendar } from 'fullcalendar';
import 'fullcalendar/plugins/luxon'; // need this! or include <script> tag instead

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

  var calendar = new Calendar(calendarEl, {
    titleFormat: 'LLLL d, yyyy' // you can now use format strings
  });

  calendar.render();
});

If you are using <script> tags and browser globals, you must ensure the original non-plugin luxon.js dist file from the Luxon site is included on your page first.

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

...
var 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';
import { toDateTime, toDuration } from 'fullcalendar/plugins/luxon';

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

  var calendar = new Calendar(calendarEl, {

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

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

  calendar.render();
});

If you are using <script> tags and browser globals, you can access FullCalendar.Luxon.toDateTime and FullCalendar.Luxon.toDuration.

Example using timeZoneImpl:

import { Calendar } from 'fullcalendar';
import 'fullcalendar/plugins/luxon'; // need this! or include <script> tag instead

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

  var calendar = new Calendar(calendarEl, {
    timeZone: 'Europe/Moscow',
    timeZoneImpl: 'luxon'
  });

  calendar.render();
});