Quick Start

To add a calendar to your page, use the <NuxtCalendar /> component. It works out of the box with sensible defaults.

Basic Example

Copy and paste this snippet into any Vue component to see the calendar in action:

<template>
  <div class="h-[600px]">
    <NuxtCalendar :events="events" />
  </div>
</template>

<script setup lang="ts">
// Events are automatically typed and reactive
const events = ref([
  {
    id: 1,
    title: 'Project Kickoff',
    start: new Date(),
    end: new Date(Date.now() + 3600000), // 1 hour from now
    description: 'Initial meeting with the client'
  }
])
</script>

How it works

1. Auto-imports: The NuxtCalendar component and all related composables are automatically imported by Nuxt.
2. Responsive: The calendar automatically adjusts its layout for mobile and desktop views.
3. Interactive: Users can click events to view details or drag to reschedule (when enabled).

Common Tasks

How do I change the time format?

You can switch between 12h and 24h formats in your nuxt.config.ts:

export default defineNuxtConfig({
  NuxtCalendar: {
    timeFormat: '12h'
  }
})

How do I set the starting day of the week?

Configure the weekStartsOn option (0 for Sunday, 1 for Monday):

export default defineNuxtConfig({
  NuxtCalendar: {
    i18n: {
      weekStartsOn: 1
    }
  }
})

What's next?

• Learn about Configuration options.
• Explore Customizing with Slots to change the UI.
• Set up Teams for multi-user calendars.
• Enable ICS Integration to sync with external apps.
• Set up Database Sync for persistent storage.