Luxon Formatting Plugin
FullCalendar’s Luxon connector package lets you use Luxon formatting strings for all date-formatting settings. The plugin 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-luxon3Then, create a new calendar and pass in the plugins:
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:
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. 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-luxon3@{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: "LLLL d, yyyy", // you can now use Luxon format strings!
});
calendar.render();
});
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>