---
title: Moment Formatting Plugin
---
FullCalendar's [Moment JS](https://momentjs.com/) connector package lets you use moment formatting strings for all date-formatting settings. The plugin allows you to specify [moment formatting strings](https://momentjs.com/docs/#/displaying/format/) wherever a [date formatting input](date-formatting) 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:
```js
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:
```js
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](initialize-globals). This example leverages CDN links:
```diff
+
```
## 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`:
```json
{
"compilerOptions": {
"allowSyntheticDefaultImports": true
}
}
```
This is necessary due to how the `moment` package exposes itself in an ES6 environment.