Nuxt Calendar Template

August 18, 2026 ยท View on GitHub

Nuxt UI

Apple Calendar-inspired application with day, week and month views, drag and drop, optimistic updates, offline support, keyboard shortcuts, light & dark mode and more. Built using Nuxt UI components on top of Nuxt's payload caching, route validation and view transitions.

Nuxt Calendar Template

Features

  • Day, week and month views - Date-based routing (/day/2026-08-11, /week/2026-08-11, /month/2026-08-11) with definePageMeta({ validate }) turning invalid views or dates into a 404
  • Infinite month scrolling - Virtualized with the ScrollArea component, streaming events in aligned 6-week chunks while the URL and title follow as you scroll
  • Drag and drop - Move events across days, drag the bottom edge to resize, snapped to 15 minutes
  • Inline event editing - Double-click or drag the grid to draw an event where you point, across days for an all-day one, then fill it in from a popover anchored to it, the same form an existing event opens into
  • Optimistic mutations - Creations, edits and deletions apply instantly to a client overlay re-applied over every server response, with rollback and a toast on failure
  • Offline support - Mutations queue while offline and replay on reconnect thanks to upsert and idempotent server semantics, with an indicator in the header
  • Payload caching - Each visible range is a keyed useFetch with getCachedData, adjacent ranges are warmed in the background so a prev/next click never waits on the network
  • View transitions - experimental.viewTransition slides the grid left or right on prev/next navigation
  • Multiple calendars - Color coding with cookie-persisted visibility toggles, plus a mini calendar with hover prefetching
  • Shared contract - The event types, the zod schema the Nitro routes validate against and the floating local datetime helper both sides write with all live in shared/, so client and server never disagree on what a date string means
  • Keyboard shortcuts - t for today, d/w/m to switch views, n for a new event, arrow keys to navigate
  • Responsive layout - Small screens show a 3-day window and the sidebar becomes a slideover

Quick Start

npm create nuxt@latest -- -t ui/calendar

Deploy your own

Deploy with Vercel

Setup

Make sure to install the dependencies:

pnpm install

Note

The demo API stores events in memory and server/utils/store.ts seeds them relative to the current date, so the demo never goes stale. Swap it for a database and the client overlay keeps working, or can be removed.

Development Server

Start the development server on http://localhost:3000:

pnpm dev

Production

Build the application for production:

pnpm build

Locally preview production build:

pnpm preview

Check out the deployment documentation for more information.

Renovate integration

Install Renovate GitHub app on your repository and you are good to go.