FullCalendar

A calendar shows events in a month, week, day, or list view. Use it for schedules, bookings, and team plans.

Overview

The calendar is built with FullCalendar. Tabler adds a style layer on top of it, so the calendar matches the rest of the interface: the same borders, the same button style, and event colors from the theme.

You only need an empty element. FullCalendar builds the whole calendar inside it.

<div id="calendar-overview" style="width: 100%;"></div>

Installation

Install FullCalendar with npm:

npm install fullcalendar

Or include the global bundle from a CDN. One file contains all the standard views:

<script src="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/libs/fullcalendar/index.global.min.js"></script>

The Tabler look comes from the vendors plugin. Include tabler-vendors.css next to tabler.css:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/css/tabler-vendors.min.css" />

Usage

Markup

Add an empty element with an id. Do not put anything inside it, because FullCalendar replaces its content.

<div id="calendar"></div>

Init the calendar

Create the calendar and call render(). initialView decides which view opens first.

document.addEventListener('DOMContentLoaded', function () {
  const calendarEl = document.getElementById('calendar')

  const calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
  })

  calendar.render()
})

Views

The global bundle ships with these views. Set one as initialView, or let users switch between them from the toolbar.

View	Result
`dayGridMonth`	One month, days in a grid.
`timeGridWeek`	One week with hours.
`timeGridDay`	One day with hours.
`listWeek`	A plain list of events for the week.
`multiMonthYear`	A whole year, month by month.

The example below opens in the week view.

<div id="calendar-week" style="width: 100%;"></div>

Use headerToolbar to set what appears in the three toolbar slots. Pass the view names as buttons, so users can switch views.

const calendar = new FullCalendar.Calendar(calendarEl, {
  initialView: 'dayGridMonth',
  headerToolbar: {
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,listWeek',
  },
})

The list view is a good second option, because it stays readable on a phone.

<div id="calendar-toolbar" style="width: 100%;"></div>

Events

Pass events as an array. Each event needs a title and a start. Use real Date objects or ISO strings.

const calendar = new FullCalendar.Calendar(calendarEl, {
  initialView: 'dayGridMonth',
  events: [
    { title: 'Monthly Planning', start: '2026-08-03T10:00', end: '2026-08-03T11:30' },
    { title: 'Design Sprint', start: '2026-08-07T09:00', end: '2026-08-07T12:00' },
  ],
})

Event colors

Set the colors per event to group them by type. backgroundColor fills the event, borderColor draws its border, and color sets the dot in the month view. Tabler color variables work here.

{
  title: 'Offsite Retreat',
  start: '2026-08-02T09:00',
  end: '2026-08-04T17:00',
  color: 'var(--tblr-red)',
  backgroundColor: 'var(--tblr-red-lt)',
  borderColor: 'var(--tblr-red-200)',
}

Theming

Tabler sets the FullCalendar variables on :root. Override them to change all calendars at once, or set them on one calendar element.

Variable	Used for
`--fc-border-color`	Grid lines.
`--fc-event-bg-color`	Event background.
`--fc-event-border-color`	Event border.
`--fc-event-text-color`	Event text.
`--fc-daygrid-event-dot-width`	Dot size in the month view.

Examples

Calendar in a card

Put the calendar in a card body. This is the usual layout for a full page calendar.

<div class="card">
  <div class="card-body">
    <div id="calendar-card" style="width: 100%;"></div>
  </div>
</div>

Accessibility

Give the calendar a heading, for example a card title, so its purpose is clear.
Offer the listWeek view as well. It reads as a normal list, which works better with a screen reader and on small screens.
Do not use color alone to mark a type of event. Repeat the type in the event title.
Keep the toolbar buttons visible. They are real buttons, so they work with the keyboard.

Menu