Calendar & maps

Calendar and world-map integrations are real libraries loaded only when their mount points exist.

FullCalendar 7

calendar.js looks for <div data-fc></div> and lazily imports vendor-fullcalendar.js. FullCalendar 7 uses one fullcalendar package with subpath exports for daygrid, timegrid, list, interaction, and themes/classic. The old @fullcalendar/* package layout does not apply.

The vendor entry loads skeleton.css and classic theme.css, while _fullcalendar.scss supplies the token-driven palette instead of importing the library’s palette CSS.

Toolbar and views

Keep the mount inside .cal-main. The first two .cal-nav-btn elements navigate backward/forward, .cal-today-btn selects today, .cal-month displays the title, and .cal-view-tab labels select views:

Label	View
Month	dayGridMonth
Week	timeGridWeek
Day	timeGridDay
Agenda	listWeek

The initial demo date and its 24 sample events are in April 2026. Replace SEED_EVENTS and initialDate for your application; the calendar’s Today action uses the current date.

Events and category colors

FullCalendar 7 uses a singular className string for these category classes:

{ title: 'Design review', start: '2026-04-02T11:00', className: 'fc-cat-team' }

Use fc-cat-work, fc-cat-team, fc-cat-personal, fc-cat-travel, fc-cat-finance, or fc-cat-birthday. Category styles set classic theme variables, for example:

.fc-cat-team {
  --fc-classic-event: var(--success-soft);
  --fc-classic-event-contrast: var(--success);
}

Do not style FullCalendar’s generated hashed class names. Set its theme variables or supply a content callback that emits a stable class, as Adminator does with .fc-dow day headers. Inline event colors reference --fc-classic-event; overriding --fc-event-color in a class does not override that inline mapping. eventDisplay: 'block' creates the filled month-view pills.

Theme changes trigger a redraw; CSS tokens supply the colors. Real event data can replace the sample array through FullCalendar’s event-source API.

World map

maps.js looks for a [data-vmap] container and imports vendor-jsvectormap.js, which groups the library, world-map data, and CSS in one async chunk:

<div data-vmap style="height: 360px"></div>

The default map uses ten city markers. Edit MARKERS with { name, coords: [latitude, longitude] } entries to customize them. tokens() reads current background, border, primary, and hover colors. A theme change destroys the previous map and rebuilds it with the new palette.

Verification

npm run test:browser checks calendar views and rendered world-map paths in light/dark mode at desktop/mobile widths. It also asserts that pages without these mount points do not download the libraries. No calendar or map bundle is part of the initial dashboard payload.