Moment Formatting Plugin

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

Usage with NPM#

First, install the necessary package:

npm install --save @fullcalendar/format-moment

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

import { Calendar } from "fullcalendar";
import momentFormatPlugin from "@fullcalendar/format-moment";
// other plugins...

const calendarEl = document.getElementById("calendar");
const calendar = new Calendar(calendarEl, {
  plugins: [momentFormatPlugin, /* other plugins... */],
  titleFormat: "MMMM D, YYYY", // you can now use moment 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: "{MMMM {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 Moment library and the plugin’s own global.js:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- MOMENT LIB -->
+   <script src="https://cdn.jsdelivr.net/npm/moment@2.30.1/min/moment.min.js"></script>

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

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

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

    <!-- STYLESHEETS -->
    <link href='https://cdn.jsdelivr.net/npm/fullcalendar@7.1.1/skeleton.css' rel='stylesheet' />
    <link href='https://cdn.jsdelivr.net/npm/fullcalendar@7.1.1/themes/monarch/theme.css' rel='stylesheet' />
    <link href='https://cdn.jsdelivr.net/npm/fullcalendar@7.1.1/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: "MMMM D, YYYY" // you can now use moment format strings!
        });
        calendar.render();
      });
    </script>
  </head>
  <body>
    <div id="calendar"></div>
  </body>
</html>

The Moment script defines the moment 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.

Usage with TypeScript#

If you’re using the @fullcalendar/format-moment plugin in a TypeScript project, you’ll need to configure your tsconfig.json to have the allowSyntheticDefaultImports compiler option set to true:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true
  }
}

This setting allows TypeScript to accept a default import from the moment package.