# Initialize with Script Tags

> FullCalendar v6 documentation, for an old release. Web version: https://legacy.fullcalendar.io/v6/initialize-globals
>
> Latest version (v7): https://fullcalendar.io/docs/vanilla-js.md#via-script-tags

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='https://github.com/fullcalendar/fullcalendar/releases/download/v6.1.21/fullcalendar-6.1.21.zip'>fullcalendar-6.1.21.zip</a>
- **CDN:** [jsdelivr](https://www.jsdelivr.com/package/npm/fullcalendar?version=6.1.21)
- **NPM:** `npm install fullcalendar`

Then, write the following initialization code:

```html
<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.21/index.global.min.js'></script>
    <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;](https://legacy.fullcalendar.io/v6/initialize-globals-demo)

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

- `@fullcalendar/core`
- `@fullcalendar/interaction` (for [date selecting](https://legacy.fullcalendar.io/v6/date-clicking-selecting.md), [event dragging & resizing](https://legacy.fullcalendar.io/v6/event-dragging-resizing.md))
- `@fullcalendar/daygrid` (for [month](https://legacy.fullcalendar.io/v6/month-view.md) and [dayGrid](https://legacy.fullcalendar.io/v6/daygrid-view.md) views)
- `@fullcalendar/timegrid` (for [timeGrid](https://legacy.fullcalendar.io/v6/timegrid-view.md) views)
- `@fullcalendar/list` (for [list views](https://legacy.fullcalendar.io/v6/list-view.md))
- `@fullcalendar/multimonth` (for [multi-month views](https://legacy.fullcalendar.io/v6/multimonth-grid.md))


## Premium Bundle

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

- **Download**: <a href='https://github.com/fullcalendar/fullcalendar-workspace/releases/download/v6.1.21/fullcalendar-scheduler-6.1.21.zip'>fullcalendar-scheduler-6.1.21.zip</a>
- **CDN:** [jsdelivr](https://www.jsdelivr.com/package/npm/fullcalendar-scheduler?version=6.1.21)
- **NPM:** `npm install fullcalendar-scheduler`

Then, write the following initialization code:

```html
<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@6.1.21/index.global.min.js'></script>
    <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;](https://legacy.fullcalendar.io/v6/timeline-standard-view-demo)

You won't need to include the `fullcalendar-scheduler` bundle AND the `fullcalendar` bundle. The `fullcalendar-scheduler` bundle includes everything.

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

- `@fullcalendar/core`
- `@fullcalendar/interaction` (for [date selecting](https://legacy.fullcalendar.io/v6/date-clicking-selecting.md), [event dragging & resizing](https://legacy.fullcalendar.io/v6/event-dragging-resizing.md))
- `@fullcalendar/daygrid` (for [month](https://legacy.fullcalendar.io/v6/month-view.md) and [dayGrid](https://legacy.fullcalendar.io/v6/daygrid-view.md) views)
- `@fullcalendar/timegrid` (for [timeGrid](https://legacy.fullcalendar.io/v6/timegrid-view.md) views)
- `@fullcalendar/list` (for [list views](https://legacy.fullcalendar.io/v6/list-view.md))
- `@fullcalendar/multimonth` (for [multi-month views](https://legacy.fullcalendar.io/v6/multimonth-grid.md))
- `@fullcalendar/adaptive` (for [print optimization](https://legacy.fullcalendar.io/v6/print.md))
- `@fullcalendar/scrollgrid`
- `@fullcalendar/timeline` ([more info](https://legacy.fullcalendar.io/v6/timeline-view-no-resources.md))
- `@fullcalendar/resource`
- `@fullcalendar/resource-daygrid` ([more info](https://legacy.fullcalendar.io/v6/resource-daygrid-view.md))
- `@fullcalendar/resource-timegrid` ([more info](https://legacy.fullcalendar.io/v6/vertical-resource-view.md))
- `@fullcalendar/resource-timeline` ([more info](https://legacy.fullcalendar.io/v6/timeline-view.md))


## Individual Plugins

You can also include `<script>` tags for individual plugins. Example:

```html
<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <script src='https://cdn.jsdelivr.net/npm/@fullcalendar/core@6.1.21/index.global.min.js'></script>
    <script src='https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@6.1.21/index.global.min.js'></script>
    <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>
```
