ICS Integration

Nuxt Calendar makes it easy to sync your events with external calendar applications like Google Calendar, Outlook, or Apple Calendar.

Pro Feature: ICS Integration requires a NuxtCalendar Pro license.

Setup

Enable ICS features in your nuxt.config.ts:

export default defineNuxtConfig({
  NuxtCalendar: {
    licenseKey: process.env.NUXT_CALENDAR_LICENSE_KEY,
    enableIcsExport: true,
    enableIcsImport: true
  }
})

ICS Export

Client-Side Export

The easiest way to export events is using the exportToIcs method from the useCalendarIcs composable. This will generate the ICS file and trigger a download in the user's browser.

<script setup lang="ts">
const { exportToIcs } = useCalendarIcs()

async function handleDownload() {
  await exportToIcs(events.value, 'my-calendar.ics')
}
</script>

<template>
  <UButton @click="handleDownload">Download .ics</UButton>
</template>

Server-Side Export

If you need to generate the ICS data on the server (e.g., for an email attachment or a public URL), use exportToIcsServer.

<script setup lang="ts">
const { exportToIcsServer } = useCalendarIcs()

async function getIcsData() {
  const { data, success } = await exportToIcsServer(events.value)
  if (success) {
    console.log('ICS Content:', data)
  }
}
</script>

ICS Import

Nuxt Calendar also supports importing events from .ics files or URLs.

Client-Side Import

Use the importFromIcs method to parse an ICS file and convert it into Nuxt Calendar events.

<script setup lang="ts">
const { importFromIcs } = useCalendarIcs()

async function handleFileUpload(event: Event) {
  const file = (event.target as HTMLInputElement).files?.[0]
  if (file) {
    const { events, success } = await importFromIcs(file)
    if (success) {
      // Add imported events to your calendar
      myEvents.value.push(...events)
    }
  }
}
</script>

<template>
  <input type="file" accept=".ics" @change="handleFileUpload" />
</template>

API Endpoints

When enabled, the module provides the following endpoints:

• POST /api/nuxt-calendar/export/ics: Accepts an array of events and returns an ICS file.
• POST /api/nuxt-calendar/import/ics: Accepts an ICS file and returns an array of events.

Supported Fields

The integration includes the following fields for each event:

• Title
• Start & End Time
• Description
• Location
• Organizer (Name & Email)
• Attendees (Name, Email, RSVP status)