# Initialize with Script Tags

> FullCalendar v5 documentation, for an old release. Web version: https://legacy.fullcalendar.io/v5/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. You will leverage one of FullCalendar's prebuilt bundles to do this.


## Standard Bundle

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

- **Download**: <a href='https://github.com/fullcalendar/fullcalendar/releases/download/v5.11.5/fullcalendar-5.11.5.zip'>fullcalendar-5.11.5.zip</a>
- **CDN:** [jsdelivr](https://www.jsdelivr.com/package/npm/fullcalendar)
- **NPM:** `npm install fullcalendar`

Then, write the following initialization code:

```html
<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <link href='fullcalendar/main.css' rel='stylesheet' />
    <script src='fullcalendar/main.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/v5/initialize-globals-demo)

The `fullcalendar` bundle's `main.js` and `main.css` files include the following packages:

- `@fullcalendar/core`
- `@fullcalendar/interaction` (for [date selecting](https://legacy.fullcalendar.io/v5/date-clicking-selecting.md), [event dragging & resizing](https://legacy.fullcalendar.io/v5/event-dragging-resizing.md))
- `@fullcalendar/daygrid` (for [month](https://legacy.fullcalendar.io/v5/month-view.md) and [dayGrid](https://legacy.fullcalendar.io/v5/daygrid-view.md) views)
- `@fullcalendar/timegrid` (for [timeGrid](https://legacy.fullcalendar.io/v5/timegrid-view.md) views)
- `@fullcalendar/list` (for [list views](https://legacy.fullcalendar.io/v5/list-view.md))
- `@fullcalendar/bootstrap5` (requires 3rd-party Bootstrap 5 and Bootstrap-Font packages. [more info](https://legacy.fullcalendar.io/v5/bootstrap5.md))
- `@fullcalendar/bootstrap` (requires 3rd-party Bootstrap 4 and FontAwesome packages. [more info](https://legacy.fullcalendar.io/v5/bootstrap4.md))
- `@fullcalendar/google-calendar` ([more info](https://legacy.fullcalendar.io/v5/google-calendar.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/v5.11.5/fullcalendar-scheduler-5.11.5.zip'>fullcalendar-scheduler-5.11.5.zip</a>
- **CDN:** [jsdelivr](https://www.jsdelivr.com/package/npm/fullcalendar-scheduler)
- **NPM:** `npm install fullcalendar-scheduler`

Then, write the following initialization code:

```html
<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <link href='fullcalendar-scheduler/main.css' rel='stylesheet' />
    <script src='fullcalendar-scheduler/main.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/v5/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 `main.js` and `main.css` files include the following packages:

- `@fullcalendar/core`
- `@fullcalendar/interaction` (for [date selecting](https://legacy.fullcalendar.io/v5/date-clicking-selecting.md), [event dragging & resizing](https://legacy.fullcalendar.io/v5/event-dragging-resizing.md))
- `@fullcalendar/daygrid` (for [month](https://legacy.fullcalendar.io/v5/month-view.md) and [dayGrid](https://legacy.fullcalendar.io/v5/daygrid-view.md) views)
- `@fullcalendar/timegrid` (for [timeGrid](https://legacy.fullcalendar.io/v5/timegrid-view.md) views)
- `@fullcalendar/list` (for [list views](https://legacy.fullcalendar.io/v5/list-view.md))
- `@fullcalendar/bootstrap5` (requires 3rd-party Bootstrap 5 and Bootstrap Icons packages. [more info](https://legacy.fullcalendar.io/v5/bootstrap5.md))
- `@fullcalendar/bootstrap` (requires 3rd-party Bootstrap 4 and FontAwesome packages. [more info](https://legacy.fullcalendar.io/v5/bootstrap4.md))
- `@fullcalendar/google-calendar` ([more info](https://legacy.fullcalendar.io/v5/google-calendar.md))
- `@fullcalendar/adaptive` (for [print optimization](https://legacy.fullcalendar.io/v5/print.md))
- `@fullcalendar/scrollgrid`
- `@fullcalendar/timeline` ([more info](https://legacy.fullcalendar.io/v5/timeline-view-no-resources.md))
- `@fullcalendar/resource-common`
- `@fullcalendar/resource-daygrid` ([more info](https://legacy.fullcalendar.io/v5/resource-daygrid-view.md))
- `@fullcalendar/resource-timegrid` ([more info](https://legacy.fullcalendar.io/v5/vertical-resource-view.md))
- `@fullcalendar/resource-timeline` ([more info](https://legacy.fullcalendar.io/v5/timeline-view.md))
