edit doc

Luxon Plugin (v1)

Luxon is a JavaScript date library that cleverly leverages the browser’s native APIs for many things such as time zones, locales, and formatting.

The FullCalendar plugin provides you the following functionality:

Usage with NPM

First, install the @fullcalendar/luxon package along with any other packages you plan to use:

npm install --save \
  @fullcalendar/luxon \
  @fullcalendar/core \
  @fullcalendar/daygrid

Then, create a new calendar and pass in the plugins:

import { Calendar } from '@fullcalendar/core'
import luxonPlugin from '@fullcalendar/luxon'
import dayGridPlugin from '@fullcalendar/daygrid'

let calendar = document.getElementById('calendar')
let calendar = new Calendar(calendarEl, {
  plugins: [ luxonPlugin, dayGridPlugin ],
  titleFormat: 'LLLL d, yyyy' // you can now use Luxon format strings!
})

calendar.render()

Usage with Script Tags

You can also configure the Luxon plugin with script tags. This example leverages CDN links:

<!-- luxon lib -->
<script src='https://cdn.jsdelivr.net/npm/luxon@1.24.1/build/global/luxon.min.js'></script>

<!-- fullcalendar bundle -->
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/index.global.min.js'></script>

<!-- the luxon-to-fullcalendar connector. must go AFTER the luxon lib -->
<script src='https://cdn.jsdelivr.net/npm/@fullcalendar/luxon@6.1.11/index.global.min.js'></script>

<script>
  var calendarEl = document.getElementById('calendar')
  var calendar = new FullCalendar.Calendar(calendarEl, {
    titleFormat: 'LLLL d, yyyy' // you can now use Luxon format strings!
  })

  calendar.render()
</script>

Formatting

The plugin allows you to specify luxon formatting strings wherever a date formatting input is expected:

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

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

var calendar = new FullCalendar.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"
});

Luxon Objects

Using the provided utility methods, you can convert dates and durations supplied by FullCalendar’s API into Luxon objects and durations:

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

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

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

When using script tags, these utility functions are available as FullCalendarLuxon.toLuxonDateTime and FullCalendarLuxon.toLuxonDuration.