Goodies

Full Calendar

Display a full calendar in your nuxt app.

Getting Started

Installation

To get started, you can install the package with the following command. Since v7, the core, the standard plugins (daygrid, timegrid, list, multimonth, interaction) and the themes all ship inside @fullcalendar/vue3, and temporal-polyfill is a required peer dependency.

Add Plugins

Plugins are now imported from @fullcalendar/vue3/* entrypoints, so there is nothing else to install:

import interactionPlugin from "@fullcalendar/vue3/interaction";
import dayGridPlugin from "@fullcalendar/vue3/daygrid";
import timeGridPlugin from "@fullcalendar/vue3/timegrid";
import listPlugin from "@fullcalendar/vue3/list";
import multiMonthPlugin from "@fullcalendar/vue3/multimonth";
import classicTheme from "@fullcalendar/vue3/themes/classic";

The theme is also a plugin, so remember to add it to the plugins option.

Update CSS

In order to make the calendar match the UI Thing theme, I had to create the full-calendar.css file and import it in the nuxt.config.ts file. FullCalendar v7 no longer ships default styles, so this file loads the skeleton and the classic theme, then maps the theme's palette variables to the UI Thing tokens.

css

Full Calendar

/*
FullCalendar v7 no longer bundles default styles or uses `.fc-*` class names.
Instead, we load the skeleton + a theme, and supply our own palette using the UI Thing tokens.
Light/dark mode follows the tokens automatically, so no `colorScheme` handling is needed.
*/
@import "@fullcalendar/vue3/skeleton.css";
@import "@fullcalendar/vue3/themes/classic/theme.css";

:root {
  /* buttons */
  --fc-classic-button: var(--color-background);
  --fc-classic-button-border: var(--color-input);
  --fc-classic-button-strong: var(--color-accent);
  --fc-classic-button-strong-border: var(--color-input);
  --fc-classic-button-outline: color-mix(in oklab, var(--color-ring) 50%, transparent);
  --fc-classic-button-foreground: var(--color-foreground);

  /* primary */
  --fc-classic-primary: var(--color-primary);
  --fc-classic-primary-foreground: var(--color-primary-foreground);

  /* calendar content */
  --fc-classic-event: var(--color-primary);
  --fc-classic-event-contrast: var(--color-primary-foreground);
  --fc-classic-background-event: var(--color-primary);
  --fc-classic-highlight: color-mix(in oklab, var(--color-primary) 10%, transparent);
  --fc-classic-today: color-mix(in oklab, var(--color-primary) 10%, transparent);
  --fc-classic-now: var(--color-destructive);

  /* neutral backgrounds */
  --fc-classic-background: var(--color-background);
  --fc-classic-faint: color-mix(in oklab, var(--color-muted) 50%, transparent);
  --fc-classic-muted: var(--color-muted);
  --fc-classic-strong: var(--color-accent);

  /* neutral foregrounds */
  --fc-classic-foreground: var(--color-foreground);
  --fc-classic-faint-foreground: color-mix(
    in oklab,
    var(--color-muted-foreground) 60%,
    transparent
  );
  --fc-classic-muted-foreground: var(--color-muted-foreground);

  /* neutral borders */
  --fc-classic-border: var(--color-border);
  --fc-classic-strong-border: var(--color-input);
}

/*
Toolbar tweaks to match the UI Thing buttons.
v7 generates hashed class names, so these selectors are tied to the classic theme
and may need updating if you switch themes or upgrade.
*/
button.fc-classic-1Wx {
  border-block: 1px solid var(--fc-classic-button-border);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: var(--font-weight-medium);
  text-transform: capitalize;

  & + button.fc-classic-1Wx {
    border-inline-start-width: 0;
  }

  &.fc-classic-uk6:first-child {
    border-start-start-radius: var(--radius-md);
    border-end-start-radius: var(--radius-md);
  }

  &.fc-classic-Tuc:last-child {
    border-start-end-radius: var(--radius-md);
    border-end-end-radius: var(--radius-md);
  }
}

.fc-classic-AVD.fc-classic-DIS {
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.025em;
}

Usage

Month View

List View

TimeGrid View

MultiMonth View

Select And Add Events

Enable selectable and use the select callback to open a dialog. Drag across the grid to create an event.

Business Hours And Background Events

Use businessHours to shade time outside working hours, and display: "background" events to highlight ranges.

Custom Event Content

Use the eventContent slot to render events with UI Thing components. Click an event to see a popover.

File Upload

Components used to allow users to upload files to your application.

Gooey Menu

Display a gooey menu that expands to display a list of items.