---
title: Luxon Formatting Plugin
---
FullCalendar's [Luxon](https://moment.github.io/luxon/index.html) connector package lets you use Luxon formatting strings for all date-formatting settings. The plugin allows you to specify [luxon formatting strings](https://moment.github.io/luxon/#/formatting?id=table-of-tokens) wherever a [date formatting input](date-formatting) 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:
```js
import { Calendar } from "fullcalendar";
import luxonFormatPlugin from "@fullcalendar/luxon3-moment";
// other plugins...
let calendarEl = document.getElementById("calendar");
let 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:
```js
let 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
You can also configure the Luxon plugin with [script tags](initialize-globals). This example leverages CDN links:
```diff
+
```