---
title: Initialize with ES6 Build System
excerpt_separator: <!--more-->
---

<script>
import { variables } from '../../src/lib/utils/variable-injection.js';

const { site } = variables
</script>

For non-trivial projects, it is recommended to use an ES6-compatible build system like [Webpack](https://webpack.js.org/) or [Rollup](https://rollupjs.org) along with a package manager like [NPM](https://www.npmjs.com/) or [Yarn](https://yarnpkg.com).<!--more--> A setup like this will ensure all necessary files are compiled together into a unified bundle. You won't need to worry about manually including `<script>` tags on the page.

Example repos:

- [View the **Webpack** example repo &raquo;]({site.fullcalendar_examples_tree}/webpack)
- [View the **Rollup** example repo &raquo;]({site.fullcalendar_examples_tree}/rollup)


## Initialize a Calendar with Plugins

FullCalendar's functionality is broken up into "plugins" ([see a full list](plugin-index)). You only include a plugin if you need the features it provides, otherwise, you can omit the plugin and prevent it from being compiled into your bundle, saving space. By default, the bare core of FullCalendar does not do *anything*. You'll *need* to use a plugin to display a calendar view at the very least.

First, use NPM or Yarn to install the necessary packages:

```
npm install --save fullcalendar temporal-polyfill
```

The `temporal-polyfill` package is small and tree-shakable, and can be used as a global polyfill if you explicitly opt-in ([more info](temporal-polyfill)).

Next, choose one of the standard themes from [themes.fullcalendar.io](https://themes.fullcalendar.io), along with a [color palette](color-palettes). The examples below show a simplified way of importing the color palette (ex: `purple.css`), but please be aware, there are better ways to integrated with [dark mode](color-palettes#dark-mode).

Then, import your plugins and supply them to a new `Calendar` instance:

```js
import { Calendar } from 'fullcalendar';
import themePlugin from 'fullcalendar/themes/monarch'; // YOUR THEME
import dayGridPlugin from 'fullcalendar/daygrid';
import timeGridPlugin from 'fullcalendar/timegrid';
import listPlugin from 'fullcalendar/list';

// stylesheets
import 'fullcalendar/skeleton.css'; // ALWAYS NEED SKELETON
import 'fullcalendar/themes/monarch/theme.css'; // YOUR THEME
import 'fullcalendar/themes/monarch/palettes/purple.css'; // YOUR THEME'S PALETTE

let calendarEl = document.getElementById('calendar');
let calendar = new Calendar(calendarEl, {
  plugins: [ themePlugin, dayGridPlugin, timeGridPlugin, listPlugin ],
  initialView: 'dayGridMonth',
  headerToolbar: {
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,listWeek'
  }
});
calendar.render();
```


## Premium Plugins

To get the [premium plugins](premium) working, install an additional package:

```
npm install --save fullcalendar-scheduler
```

Then, import your plugins and supply them to a new `Calendar` instance:

```js
import { Calendar } from 'fullcalendar';
import themePlugin from 'fullcalendar/themes/monarch';
import resourceTimelinePlugin from 'fullcalendar-scheduler/resource-timeline';

// stylesheets
import 'fullcalendar/skeleton.css';
import 'fullcalendar/themes/monarch/theme.css';
import 'fullcalendar/themes/monarch/palettes/purple.css';

let calendarEl = document.getElementById('calendar');
let calendar = new Calendar(calendarEl, {
  plugins: [ themePlugin, resourceTimelinePlugin ],
  initialView: 'resourceTimeline',
  resources: [
    // your resource list
  ]
});
calendar.render();
```

Example repos:

- [View the **Webpack** + **Scheduler** example repo &raquo;]({site.fullcalendar_examples_tree}/webpack-scheduler)
- [View the **Rollup** + **Scheduler** example repo &raquo;]({site.fullcalendar_examples_tree}/rollup-scheduler)