From 7447de1d66ec3224200cfa7fdc62ae3ee27e0511 Mon Sep 17 00:00:00 2001 From: Bartek Date: Tue, 4 Aug 2026 17:13:55 +0200 Subject: [PATCH] Add FullCalendar component documentation to JSON data --- docs/pages/ui/components/fullcalendar.mdx | 210 ++++++++++++++++++++++ shared/data/docs.json | 4 + 2 files changed, 214 insertions(+) create mode 100644 docs/pages/ui/components/fullcalendar.mdx 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. + + +
+ + +## Installation + +Install FullCalendar with npm: + +```shell +npm install fullcalendar +``` + +Or include the global bundle from a CDN. One file contains all the standard views: + +`} +/> + +The Tabler look comes from the vendors plugin. Include `tabler-vendors.css` next to `tabler.css`: + + + +## Usage + +### Markup + +Add an empty element with an id. Do not put anything inside it, because FullCalendar replaces its content. + + +
+ + +### 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. + + +
+ + +### 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. + + +
+ + +### 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. + + +
+ + +## 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. + + diff --git a/shared/data/docs.json b/shared/data/docs.json index 8aea168af..d9cd729fc 100644 --- a/shared/data/docs.json +++ b/shared/data/docs.json @@ -224,6 +224,10 @@ "title": "Empty State", "url": "/ui/components/empty/" }, + { + "title": "FullCalendar", + "url": "/ui/components/fullcalendar/" + }, { "title": "Icon", "url": "/ui/components/icon/"