---
title: Initialize with Script Tags
description: Use pre-built bundles and HTML script tags
---

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

const {site, latestReleases} = variables
</script>

It's possible to manually include the necessary `<script>` tags in the head of your HTML page and then initialize a calendar via browser globals. Leverage one of FullCalendar's prebuilt bundles or include individual plugins

## Standard Bundle

First, obtain the standard `fullcalendar` bundle in one of the following ways:

- **Download**: <a href='{site.fullcalendar_premium_repo}/releases/download/v{latestReleases.v7}/fullcalendar-{latestReleases.v7}.zip'>fullcalendar-{latestReleases.v7}.zip</a>
- **CDN:** [jsdelivr](https://www.jsdelivr.com/package/npm/fullcalendar?version={latestReleases.v7})
- **NPM:** `npm install fullcalendar`

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, write the following initialization code:

```html
<!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>

    <!-- 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",
        });
        calendar.render();
      });
    </script>
  </head>
  <body>
    <div id="calendar"></div>
  </body>
</html>
```

[View a runnable example &raquo;](initialize-globals-demo)

The `fullcalendar` bundle's `all.global(.min).js` file includes the following plugins:

- `interaction` (for [date selecting](date-clicking-selecting), [event dragging & resizing](event-dragging-resizing))
- `daygrid` (for [month](month-view) and [dayGrid](daygrid-view) views)
- `timegrid` (for [timeGrid](timegrid-view) views)
- `list` (for [list views](list-view))
- `multimonth` (for [multi-month views](multimonth-grid))

## Premium Bundle

First, follow the standard instructions above to install the `fullcalendar` package.

Next, obtain the premium `fullcalendar-scheduler` bundle in one of the following ways:

- **Download**: <a href='{site.fullcalendar_premium_repo}/releases/download/v{latestReleases.v7}/fullcalendar-scheduler-{latestReleases.v7}.zip'>fullcalendar-scheduler-{latestReleases.v7}.zip</a>
- **CDN:** [jsdelivr](https://www.jsdelivr.com/package/npm/fullcalendar-scheduler?version={latestReleases.v7})
- **NPM:** `npm install fullcalendar-scheduler`

Then, write the following initialization code:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />

    <!-- STANDARD + SCHEDULER JS -->
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@{latestReleases.v7}/all.global.js'></script>
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@{latestReleases.v7}/all.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: "resourceTimelineWeek",
        });
        calendar.render();
      });
    </script>
  </head>
  <body>
    <div id="calendar"></div>
  </body>
</html>
```

[View a runnable example &raquo;](timeline-standard-view-demo)

The `fullcalendar-scheduler` bundle's `all.global(.min).js` file includes the following packages:

- `adaptive` (for [print optimization](print))
- `scrollgrid`
- `timeline` ([more info](timeline-view-no-resources))
- `resource-daygrid` ([more info](resource-daygrid-view))
- `resource-timegrid` ([more info](vertical-resource-view))
- `resource-timeline` ([more info](timeline-view))
