<Calendar
  :events="events"
  :day-start-hour="7"
  :day-end-hour="20"
/>

const events = [
  {
    id: 'sync',
    title: 'Weekly Sync',
    start: new Date('2026-07-22T14:00'),
    end: new Date('2026-07-22T15:00'),
    severity: 'primary',
    // Hand-rolled RRULE subset — no extra dependency.
    recurrence: {
      freq: 'weekly',
      interval: 1,
      byWeekday: ['mo', 'we', 'fr'],
      count: 12
    }
  }
]

<script setup>
import { useCalendar } from '@midnight-owl/ui'

// Zero rendering — build your own layout on top of the engine.
const cal = useCalendar({
  view: 'month',
  events: myEvents,          // ref, getter, or array
  firstDayOfWeek: 1,
  timeZone: 'Europe/London'
})
// cal.monthWeeks, cal.dayColumns, cal.agendaDays, cal.title,
// cal.next(), cal.prev(), cal.today(), cal.setView('week'), ...
</script>

<template>
  <button @click="cal.prev()">Back</button>
  <h2>{{ cal.title.value }}</h2>
  <button @click="cal.next()">Next</button>

  <div v-for="week in cal.monthWeeks.value" :key="week.key" class="grid grid-cols-7">
    <div v-for="cell in week.days" :key="cell.key">
      {{ cell.date.getDate() }} — {{ cell.events.length }} events
    </div>
  </div>
</template>

import { createIcsAdapter, createGoogleAdapter } from '@midnight-owl/ui'

// 1. ICS — a subscription feed or a pasted .ics file. No OAuth, no SDK.
const ics = createIcsAdapter({
  name: 'Holidays',
  source: () => fetch('/calendars/holidays.ics').then((r) => r.text())
})

// 2. Google Calendar — same interface; you supply the access token.
const google = createGoogleAdapter({
  getAccessToken: () => getMyOAuthToken(),   // your flow
  calendarId: 'primary'
})

// Drop either into the component (or useCalendar) as the source:
// <Calendar :provider="ics" />

import { parseIcs, generateIcs } from '@midnight-owl/ui'

// Import: .ics text -> CalendarEvent[]
const events = parseIcs(icsFileContents)

// Export: CalendarEvent[] -> downloadable .ics text
const icsText = generateIcs(events, { calName: 'My Calendar' })

<Calendar
  :events="events"
  editable
  @range-select="openCreate"       // drag empty space -> create modal
  @event-edit="openEdit"           // popover "Edit" -> edit modal
  @event-delete="onDelete"         // popover "Delete"
  @event-drag="persist"            // drag to move
  @event-resize="persist"          // drag edge to resize
/>

// Every mutation flows through the CalendarProvider interface — the same
// contract the ICS and Google adapters implement. This demo's provider is an
// in-memory store; swap it for Google and nothing above changes.
const provider = {
  name: 'In-memory',
  fetchEvents: () => events.value,
  createEvent: (e) => (events.value = [...events.value, e]),
  updateEvent: (e) => (events.value = events.value.map(x => x.id === e.id ? e : x)),
  deleteEvent: (id) => (events.value = events.value.filter(x => x.id !== id))
}

<Calendar :events="events">
  <!-- Swap just the event pill; keep the default month/week/day layout -->
  <template #event="{ event, timeLabel }">
    <div class="flex items-center gap-1 rounded bg-primary/10 px-1 text-primary">
      <span class="font-semibold">{{ timeLabel }}</span>
      <span class="truncate">{{ event.title }}</span>
    </div>
  </template>

  <!-- Or replace a whole month day cell -->
  <template #dayCell="{ cell }">
    <span :class="cell.isToday ? 'font-bold text-primary' : ''">
      {{ cell.date.getDate() }}
    </span>
  </template>
</Calendar>