Luxon Formatting Plugin

Use Luxon formatting strings in FullCalendar’s date-formatting settings. The Luxon connector package allows you to specify luxon formatting strings wherever a date formatting input is expected.

Usage with NPM#

First, install the necessary package:

npm install --save @fullcalendar/format-luxon3

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

import { Calendar } from "fullcalendar";
import luxonFormatPlugin from "@fullcalendar/format-luxon3";
// other plugins...

const calendarEl = document.getElementById("calendar");
const calendar = new Calendar(calendarEl, {
  plugins: [luxonFormatPlugin, /* other plugins... */],
  titleFormat: "LLLL d, yyyy", // you can now use Luxon format strings!
});

calendar.render();

Range Formatting#

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

const 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"
});

Usage with Script Tags#

The plugin is not part of FullCalendar’s all/global.js bundle. If you are using script tags, add the Luxon library and the plugin’s own global.js:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- LUXON LIB -->
+   <script src="https://cdn.jsdelivr.net/npm/luxon@3.7.2/build/global/luxon.min.js"></script>

    <!-- STANDARD JS -->
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@7.1.0/all/global.js"></script>

    <!-- LUXON PLUGIN. must go AFTER the luxon lib and the standard JS -->
+   <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/format-luxon3@7.1.0/global.js"></script>

    <!-- THEME JS -->
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@7.1.0/themes/monarch/global.js"></script>

    <!-- STYLESHEETS -->
    <link href='https://cdn.jsdelivr.net/npm/fullcalendar@7.1.0/skeleton.css' rel='stylesheet' />
    <link href='https://cdn.jsdelivr.net/npm/fullcalendar@7.1.0/themes/monarch/theme.css' rel='stylesheet' />
    <link href='https://cdn.jsdelivr.net/npm/fullcalendar@7.1.0/themes/monarch/palettes/purple.css' rel='stylesheet' />

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const calendarEl = document.getElementById("calendar");
        const calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: "dayGridMonth",
+         titleFormat: "LLLL d, yyyy", // you can now use Luxon format strings!
        });
        calendar.render();
      });
    </script>
  </head>
  <body>
    <div id="calendar"></div>
  </body>
</html>

The Luxon script defines the luxon browser global, which the plugin reads. The plugin’s global.js registers itself, so there is no plugins array to write. It works the same way alongside the Web Component’s all/global.js.