@rozie-ui/fullcalendar-vue

@rozie-ui/fullcalendar-vue

Idiomatic vue FullCalendar — a cross-framework calendar/scheduler compiled from one Rozie source wrapping FullCalendar. This package is generated; do not edit src/ by hand.

Install

npm i @rozie-ui/fullcalendar-vue

Peer dependencies: the four @fullcalendar/* engine packages (@fullcalendar/core, @fullcalendar/daygrid, @fullcalendar/timegrid, @fullcalendar/interaction, all ^6.1) + vue. Install them alongside this package. FullCalendar v6 auto-injects its own stylesheet — there is no manual CSS import to add.

Usage

<script setup lang="ts">
import { ref } from 'vue';
import FullCalendar from '@rozie-ui/fullcalendar-vue';

const view = ref('dayGridMonth');
const events = ref([{ id: '1', title: 'Kickoff', start: '2026-06-04' }]);
</script>

<template>
  <FullCalendar v-model:view="view" :events="events" @eventClick="(e) => console.log(e.event, e.el)" />
</template>

Props

Events

Imperative handle

Beyond props/events, the component exposes imperative methods (declared once in the Rozie source via $expose). Grab a handle with the native ref mechanism and call them directly:

<script setup>
import { ref } from 'vue';
const cal = ref();          // template ref
</script>

<template>
  <FullCalendar ref="cal" />
  <button @click="cal.next()">Next</button>
</template>

Slots

Gotchas

Events are keyboard-focusable. Whenever an eventClick handler is registered, FullCalendar makes every event interactive (tabindex="0", Enter/Space activation). This wrapper always registers one, because it powers the eventClick event. FullCalendar checks the eventInteractive option before it checks for handlers, so opt out with :options="{ eventInteractive: false }". A per-event interactive: false also works when the global option is unset.

loading fires only for fetched sources. It reflects event sources FullCalendar fetches itself (a URL/JSON feed or a function source). The events prop is always an in-memory array reconciled synchronously, so with events alone loading never fires; track your own fetch state instead. For FullCalendar-managed fetching, pass sources through options as eventSources: :options="{ eventSources: [{ url: '/api/events' }] }".

noEventsContent needs a list view. The slot renders only in list views, and the baked-in daygrid/timegrid/interaction plugins provide none. Recipe: npm i @fullcalendar/list, import listPlugin from '@fullcalendar/list', pass :options="{ plugins: [listPlugin] }" (the plugins key merges with the baked-in defaults), and set view to listWeek, listDay or listMonth. The slot then renders when the list is empty.