Bootstrap 5 FullCalendar

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 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.

ExampleCopy Anchor Link

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.

<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 pageCopy Anchor Link

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.

<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.

OptionsCopy Anchor Link

These are the main options the calendar demo uses. See FullCalendar's docs for the full list.

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

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

Event colorsCopy Anchor Link

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:

<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:

// 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" : "";
  }
});

StylingCopy Anchor Link

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.

AccessibilityCopy Anchor Link

• 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.

RelatedCopy Anchor Link

• React FullCalendar: the same calendar in AdminKit for React
• Next.js FullCalendar: the same calendar in AdminKit for Next.js
• Buttons: the Bootstrap buttons of the toolbar
• Dark mode: the color modes the calendar follows
• Calendar demo