The <NuxtCalendar /> component is the main entry point for the UI. It provides a full-featured calendar interface with day, week, and month views.
<template>
<NuxtCalendar :events="events" />
</template>
<script setup lang="ts">
const events = ref([
{
id: 1,
title: 'Meeting',
start: new Date(),
end: new Date(Date.now() + 3600000)
}
])
</script>
| Prop | Type | Default | Description |
|---|---|---|---|
events | CalendarEvent[] | [] | Array of event objects to display. |
teams | Team[] | [] | Array of teams for filtering and color-coding. (Pro) |
slotHeight | number | 48 | Height of each 30-minute slot in pixels. |
view | `'day' | 'week' | 'month'` |
The component emits several events that you can listen to:
@event-clickFired when a user clicks on an event.
<NuxtCalendar @event-click="(event) => console.log('Clicked:', event)" />
@event-changeFired when an event is modified (e.g., dragged to a new time).
<NuxtCalendar @event-change="(event) => updateEventInDatabase(event)" />
@event-deleteFired when a user deletes an event from the UI.
<NuxtCalendar @event-delete="(event) => removeEventFromDatabase(event.id)" />
You can control the current date and view mode using v-model:
<template>
<NuxtCalendar
v-model:selected-date="currentDate"
v-model:view="currentView"
:events="events"
/>
</template>
<script setup lang="ts">
const currentDate = ref(new Date())
const currentView = ref('day')
</script>
The component is fully responsive. On mobile devices, it automatically switches to a list view or a simplified day view to ensure a great user experience on small screens.