# Bootstrap 5 FullCalendar

Bootstrap 5 FullCalendar in AdminKit PRO: FullCalendar 7 with month, week and day views, drag and drop events and color-coded event categories.

> This plugin is only available in **AdminKit PRO**. [Learn more](/pricing/#bootstrap).

Use the calendar to show meetings, deadlines and time off in a month, week or day view. People can drag an event to another day or resize it. Colored categories help them tell a meeting from a deadline at a glance.

AdminKit PRO comes with [FullCalendar](https://fullcalendar.io/) 7 and its day grid, time grid and interaction plugins. The template uses FullCalendar's classic theme with Bootstrap buttons in the toolbar, and styles it for light and dark mode.

## Example

A month view with events, and buttons to switch to the week and day views. The events below fill the current month, so the example always has something to show.

```html
<div id="fullcalendar"></div>

<script type="module" src="js/fullcalendar.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    // day(2, 1, "10:00:00") is the Monday of the third row of the month view at 10 am
    var today = new Date();
    var first = new Date(today.getFullYear(), today.getMonth(), 1);
    var day = function(week, weekday, time) {
      var value = new Date(first.getFullYear(), first.getMonth(), 1 - first.getDay() + week * 7 + weekday);
      var text = [
        value.getFullYear(),
        String(value.getMonth() + 1).padStart(2, "0"),
        String(value.getDate()).padStart(2, "0")
      ].join("-");
      return time ? text + "T" + time : text;
    };

    var calendar = new FullCalendar.Calendar(document.getElementById("fullcalendar"), {
      plugins: FullCalendar.plugins,
      initialView: "dayGridMonth",
      todayHint: "Today",
      headerToolbar: {
        left: "prev,next today",
        center: "title",
        right: "dayGridMonth,timeGridWeek,timeGridDay"
      },
      editable: true,
      eventDisplay: "block",
      nowIndicator: true,
      scrollTime: "08:00:00",
      eventClass: "calendar-event",
      events: [
        { title: "Sprint planning", start: day(0, 1, "10:00:00"), end: day(0, 1, "11:30:00"), className: "calendar-event-primary" },
        { title: "Q4 roadmap due", start: day(1, 4), className: "calendar-event-danger" },
        { title: "Design review", start: day(1, 5, "15:00:00"), end: day(1, 5, "16:00:00"), className: "calendar-event-primary" },
        { title: "Web Summit, Lisbon", start: day(2, 2), end: day(2, 5), className: "calendar-event-success" },
        { title: "Fiona Green out", start: day(3, 4), className: "calendar-event-warning" }
      ]
    });

    calendar.render();
  });
</script>
```

Your own events have fixed dates instead, such as `start: "2026-11-12T10:00:00"`. An event with only a date, such as `start: "2026-11-12"`, lasts all day.

## Use it in your page

FullCalendar is not part of `js/app.js`. It is a large library, so it has a file of its own, `js/fullcalendar.js`, and only the calendar page of the template loads it. Load it on the pages that show a calendar, after `app.js`. Its styles are part of `css/app.css`.

```html
<script type="module" src="js/app.js"></script>
<script type="module" src="js/fullcalendar.js"></script>
```

`fullcalendar.js` sets `window.FullCalendar` to an object with two keys:

- `Calendar` is FullCalendar's calendar class.
- `plugins` holds the day grid, time grid and interaction plugins, and a Bootstrap theme on top of the classic theme.

Pass `FullCalendar.plugins` as the `plugins` option of every calendar, as in the example. The interaction plugin handles dragging, resizing and clicking dates. The Bootstrap theme gives the toolbar buttons the `btn btn-primary` classes, groups them in a `btn-group` and styles the title as an `h2`.

Both scripts are module scripts, and the browser runs them once the page has been parsed. Wrap your code in a `DOMContentLoaded` listener, so it runs after them. The calendar demo does the same.

## Options

These are the main options the [calendar demo](https://demo.adminkit.io/calendar.html) uses. See [FullCalendar's docs](https://fullcalendar.io/docs) for the full list.

| Option | What it does |
| --- | --- |
| `initialView` | The view the calendar opens with: `"dayGridMonth"`, `"timeGridWeek"` or `"timeGridDay"` |
| `headerToolbar` | The buttons and title of the toolbar, as `left`, `center` and `right` |
| `todayHint` | The accessible name of the today button |
| `editable` | Events can be dragged and resized |
| `eventDisplay: "block"` | Every event is a filled block, also the ones with a time |
| `nowIndicator` | A line at the current time in the week and day views |
| `scrollTime` | Where the week and day views start scrolled to, such as `"08:00:00"` |
| `height` | The demo sets `"auto"` on phones, so the month view shows every week without scrolling |
| `eventClass` | A class for every event, such as `"calendar-event"` |
| `dayCellClass`, `dayLaneClass` | A function that returns a class for a day cell in the month view or a day column in the week view |
| `dayCellTopInnerClass` | A function that returns a class for the day number |
| `events` | The events, each with a `title`, a `start`, an optional `end` and a `className` |

The demo makes its phone check once, when the page loads:

```js
height: window.matchMedia("(max-width: 575.98px)").matches ? "auto" : undefined,
```

## Event colors

Give every event the class `calendar-event` through `eventClass`, and a category class through its `className`:

- `calendar-event-primary`
- `calendar-event-success`
- `calendar-event-warning`
- `calendar-event-danger`
- `calendar-event-info`

The event becomes a tinted chip with a colored left edge. The text color is set for a contrast of 4.5:1 on the tint, in light and dark mode.

For a legend, `calendar-swatch` with the same category class draws a small square of that color. This is the legend of the calendar demo:

```html
<ul class="list-inline small text-body-secondary mb-0" aria-label="Event categories">
  <li class="list-inline-item me-3"><span class="calendar-swatch calendar-event-primary me-1"></span>Meetings</li>
  <li class="list-inline-item me-3"><span class="calendar-swatch calendar-event-success me-1"></span>Events</li>
  <li class="list-inline-item me-3"><span class="calendar-swatch calendar-event-danger me-1"></span>Deadlines</li>
  <li class="list-inline-item me-0"><span class="calendar-swatch calendar-event-warning me-1"></span>Time off</li>
</ul>
```

The demo also shades the weekends and marks today's date:

```js
// Weekend days get a faint fill, except today, which keeps its tint
var weekend = function(info) {
  return (info.dow === 0 || info.dow === 6) && !info.isToday ? "calendar-weekend" : "";
};

var calendar = new FullCalendar.Calendar(calendarEl, {
  // ...
  dayCellClass: weekend,
  dayLaneClass: weekend,
  dayCellTopInnerClass: function(info) {
    return info.isToday ? "calendar-today-number" : "";
  }
});
```

## Styling

The colors of the calendar come from the `--fc-classic-*` custom properties in `src/scss/5-vendor/_fullcalendar.scss`. AdminKit sets them from the theme colors: the buttons and today's tint use the primary color, the background and text follow the color mode. Change them there to restyle the calendar.

The category classes come from the `$calendar-event-colors` list in the same file: `primary`, `success`, `warning`, `danger` and `info`. Add the name of another theme color to the list to get a category class for it.

AdminKit 4.1 renamed the calendar classes. The old names, such as `.ak-fc-event` and `.ak-fc-event-primary`, still work in version 4 and will be removed in version 5.

## Accessibility

- `todayHint: "Today"` gives the today button an accessible name that matches its text.
- Do not let color be the only label of an event. Keep the category in the title or in a legend, and give the legend an `aria-label`, as above.
- The toolbar buttons are Bootstrap buttons, so they can be reached and pressed with the keyboard.
- The day numbers of the previous and next month have a contrast of 4.5:1, like other muted text.

## Related

- [React FullCalendar](/react/docs/plugins/calendar/): the same calendar in AdminKit for React
- [Next.js FullCalendar](/nextjs/docs/plugins/calendar/): the same calendar in AdminKit for Next.js
- [Buttons](/bootstrap/docs/components/buttons/): the Bootstrap buttons of the toolbar
- [Dark mode](/bootstrap/docs/getting-started/dark-mode/): the color modes the calendar follows
- [Calendar demo](https://demo.adminkit.io/calendar.html)

---

Canonical HTML page: https://adminkit.io/bootstrap/docs/plugins/calendar/

Site overview for agents: https://adminkit.io/llms.txt (expanded: https://adminkit.io/llms-full.txt) · Documentation: https://adminkit.io/bootstrap/docs/ · Questions: support@adminkit.io