diff --git a/docs/pages/ui/components/fullcalendar.mdx b/docs/pages/ui/components/fullcalendar.mdx
new file mode 100644
index 000000000..b0d8e4409
--- /dev/null
+++ b/docs/pages/ui/components/fullcalendar.mdx
@@ -0,0 +1,210 @@
+---
+title: FullCalendar
+summary: A calendar shows events in a month, week, day, or list view. Use it for schedules, bookings, and team plans.
+docs-libs: [fullcalendar]
+description: Show events in a calendar.
+layout: '@layouts/DocsMdxLayout.astro'
+---
+import Example from '@components/Example.astro';
+import CdnImportPlugin from '@components/CdnImportPlugin.astro';
+import { Code } from 'astro:components';
+import { site } from '@shared/lib/site.ts';
+
+## Overview
+
+The calendar is built with [FullCalendar](https://fullcalendar.io/). 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.
+
+<Example>
+<div id="calendar-overview" style="width: 100%;"></div>
+</Example>
+
+## Installation
+
+Install FullCalendar with npm:
+
+```shell
+npm install fullcalendar
+```
+
+Or include the global bundle from a CDN. One file contains all the standard views:
+
+<Code
+	lang="html"
+	code={`<script src="${site.cdnUrl}/dist/libs/fullcalendar/index.global.min.js"></script>`}
+/>
+
+The Tabler look comes from the vendors plugin. Include `tabler-vendors.css` next to `tabler.css`:
+
+<CdnImportPlugin plugins={['vendors']} />
+
+## Usage
+
+### Markup
+
+Add an empty element with an id. Do not put anything inside it, because FullCalendar replaces its content.
+
+<Example codeOnly>
+<div id="calendar"></div>
+</Example>
+
+### Init the calendar
+
+Create the calendar and call `render()`. `initialView` decides which view opens first.
+
+```js
+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.
+
+<Example>
+<div id="calendar-week" style="width: 100%;"></div>
+</Example>
+
+### Toolbar
+
+Use `headerToolbar` to set what appears in the three toolbar slots. Pass the view names as buttons, so users can switch views.
+
+```js
+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.
+
+<Example>
+<div id="calendar-toolbar" style="width: 100%;"></div>
+</Example>
+
+### Events
+
+Pass events as an array. Each event needs a `title` and a `start`. Use real `Date` objects or ISO strings.
+
+```js
+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.
+
+```js
+{
+  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.
+
+<Example bg="surface-secondary" column>
+<div class="card"> <div class="card-body"> <div id="calendar-card" style="width: 100%;"></div> </div> </div>
+</Example>
+
+## 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.
+
+<script>{`
+document.addEventListener('DOMContentLoaded', function () {
+	if (typeof FullCalendar === 'undefined') return;
+
+	const year = new Date().getFullYear();
+	const month = new Date().getMonth();
+	const at = (day, hour, minute) => new Date(year, month, day, hour, minute);
+
+	const events = [
+		{
+			title: 'Offsite Retreat',
+			start: at(2, 9, 0),
+			end: at(4, 17, 0),
+			color: 'var(--tblr-red)',
+			backgroundColor: 'var(--tblr-red-lt)',
+			borderColor: 'var(--tblr-red-200)',
+		},
+		{ title: 'Monthly Planning', start: at(1, 10, 0), end: at(1, 11, 30) },
+		{ title: 'Design Sprint', start: at(7, 9, 0), end: at(7, 12, 0) },
+		{ title: 'Dev Team Check-in', start: at(10, 11, 0), end: at(10, 11, 30) },
+		{ title: 'Mid-Month Review', start: at(15, 10, 30), end: at(15, 11, 30) },
+		{ title: 'Company All-Hands', start: at(25, 15, 0), end: at(25, 16, 0) },
+	];
+
+	const calendars = [
+		{ id: 'calendar-overview', options: { initialView: 'dayGridMonth', events: events } },
+		{ id: 'calendar-week', options: { initialView: 'timeGridWeek', events: events } },
+		{
+			id: 'calendar-toolbar',
+			options: {
+				initialView: 'listWeek',
+				headerToolbar: { left: 'prev,next today', center: 'title', right: 'dayGridMonth,timeGridWeek,listWeek' },
+				events: events,
+			},
+		},
+		{ id: 'calendar-card', options: { initialView: 'dayGridMonth', events: events } },
+	];
+
+	calendars.forEach(function (item) {
+		const el = document.getElementById(item.id);
+		if (!el) return;
+
+		new FullCalendar.Calendar(el, item.options).render();
+	});
+});
+`}</script>
diff --git a/shared/data/docs.json b/shared/data/docs.json
index 95c80ac81..9f09f047b 100644
--- a/shared/data/docs.json
+++ b/shared/data/docs.json
@@ -220,6 +220,10 @@
 							"title": "Empty state",
 							"url": "/ui/components/empty"
 						},
+						{
+							"title": "FullCalendar",
+							"url": "/ui/components/fullcalendar/"
+						},
 						{
 							"title": "Icon",
 							"url": "/ui/components/icon"