FullCalendar
These docs are a work in progress. Learn about v7 updates
Latest:  v7.0.0-beta.7
Date Library
edit doc

Moment Formatting Plugin

FullCalendar’s Moment JS connector package lets you use moment formatting strings for all date-formatting settings. The plugin 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... 

let calendarEl = document.getElementById("calendar");
let 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:

let 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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- STANDARD JS -->
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@{latestReleases.v7}/all.global.js"></script>

+   <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/format-moment@{latestReleases.v7}/global.js"></script>

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

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

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        var calendarEl = document.getElementById("calendar");
        var 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>

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 is necessary due to how the moment package exposes itself in an ES6 environment.