Nuxt Calendar is designed to be highly customizable. You can replace or enhance almost every part of the UI using slots.
Use the this-event slot to change how events look in the calendar grid.
<template>
<NuxtCalendar :events="events">
<template #this-event="{ thisEvent }">
<div class="p-2 h-full bg-primary-500/20 border-l-4 border-primary-500 rounded">
<p class="font-bold text-xs">{{ thisEvent.title }}</p>
<p class="text-[10px] opacity-70">
{{ thisEvent.startTime }} - {{ thisEvent.endTime }}
</p>
</div>
</template>
</NuxtCalendar>
</template>
Replace the entire sidebar content with your own filters, team lists, or branding.
<template>
<NuxtCalendar :events="events">
<template #sidebar="{ teams, selectedDate }">
<div class="p-4">
<h2 class="text-lg font-bold mb-4">My Custom Sidebar</h2>
<p class="mb-4 text-sm">Selected: {{ selectedDate }}</p>
<!-- Custom team filters -->
<div v-for="team in teams" :key="team.id">
<UCheckbox v-model="team.visible" :label="team.name" />
</div>
</div>
</template>
</NuxtCalendar>
</template>
Customize the top navigation bar, including the date display and view switchers.
<template>
<NuxtCalendar :events="events">
<template #navigation="{ month, year, view }">
<div class="flex justify-between items-center p-4 border-b dark:border-gray-800">
<h1 class="text-xl font-bold">{{ month }} {{ year }}</h1>
<USelect v-model="view" :options="['day', 'week', 'month']" />
</div>
</template>
</NuxtCalendar>
</template>
Customize the popup panel used for creating and editing events.
<template>
<NuxtCalendar :events="events">
<template #event-panel="{ event, teams }">
<div class="p-6 bg-white dark:bg-gray-900 rounded-xl shadow-xl">
<h3 class="text-lg font-bold mb-4">
{{ event.id === -1 ? 'New Event' : 'Edit Event' }}
</h3>
<UFormGroup label="Title">
<UInput v-model="event.title" />
</UFormGroup>
<!-- Add your custom fields here -->
</div>
</template>
</NuxtCalendar>
</template>
| Slot Name | Scope | Description |
|---|---|---|
this-event | { thisEvent: CalendarEvent } | Individual event in the grid. |
sidebar | { teams: Team[], selectedDate: Date } | The left sidebar. |
navigation | { month: string, year: number, view: string } | The top navigation bar. |
event-panel | { event: CalendarEvent, teams: Team[] } | The event creation/edit modal. |
time-column-hour | { hour: number } | Individual hour labels in the time column. |
week-header-day | { day: Date } | Day headers in the week view. |
event-list-item | { event: CalendarEvent } | Events in the mobile list view. |