edit doc

Moment Timezone Plugin

Moment Timezone is a library for dealing with time zones. FullCalendar has a connector plugin that gives your calendar support for arbitrary named time zones. It provides a “named timezone implementation” for the timeZone setting.

Usage with NPM

First, install the @fullcalendar/moment-timezone package along with any other packages you plan to use:

npm install --save \
  @fullcalendar/moment-timezone \
  @fullcalendar/core \
  @fullcalendar/daygrid

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

import { Calendar } from '@fullcalendar/core'
import momentTimezonePlugin from '@fullcalendar/moment-timezone'
import dayGridPlugin from '@fullcalendar/daygrid'

let calendarEl = document.getElementById('calendar')
let calendar = new Calendar(calendarEl, {
  plugins: [ momentTimezonePlugin, dayGridPlugin ],
  timeZone: 'Europe/Moscow' // arbitrary timezones are now honored!
});

calendar.render()

Usage with Webpack

When used with Webpack, whenever the moment-timezone package is imported into your project, it imports ALL timezone data. This is a known issue with moment-timezone. It applies to @fullcalendar/moment-timezone as well. Luckily there is a workaround. Use moment-timezone-data-webpack-plugin to strip away this unused data.

View an example moment-timezone project

Usage with Script Tags

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

<!-- include moment and one of the moment-timezone builds -->
<script src='https://cdn.jsdelivr.net/npm/moment@2.29.4/min/moment.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/moment-timezone@0.5.40/builds/moment-timezone-with-data.min.js'></script>

<!-- fullcalendar bundle -->
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js'></script>

<!-- the connector. must go AFTER moment-timezone -->
<script src='https://cdn.jsdelivr.net/npm/@fullcalendar/moment-timezone@6.1.15/index.global.min.js'></script>

<script>
  var calendarEl = document.getElementById('calendar')
  var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'Europe/Moscow' // arbitrary timezones are now honored!
  });

  calendar.render()
</script>

Usage with TypeScript

If you’re using the @fullcalendar/moment-timezone plugin in a TypeScript project, you’ll need to configure your tsconfig.json. See Moment Plugin :: Usage with TypeScript

Util Methods