FullCalendar Vue 3 Component
The official Vue 3 component for FullCalendar
Installation
Install the Vue 3 connector, the core package, and any plugins (like daygrid):
npm install @fullcalendar/vue3 @fullcalendar/core @fullcalendar/daygridUsage
Render a FullCalendar component, supplying an options object:
<script>
import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from '@fullcalendar/daygrid'
export default {
components: {
FullCalendar // make the <FullCalendar> tag available
},
data: function() {
return {
calendarOptions: {
plugins: [dayGridPlugin],
initialView: 'dayGridMonth',
weekends: false,
events: [
{ title: 'Meeting', start: new Date() }
]
}
}
}
}
</script>
<template>
<h1>Demo App</h1>
<FullCalendar :options='calendarOptions' />
</template>You can even supply named-slot templates:
<template>
<h1>Demo App</h1>
<FullCalendar :options='calendarOptions'>
<template v-slot:eventContent='arg'>
<b>{{ arg.timeText }}</b>
<i>{{ arg.event.title }}</i>
</template>
</FullCalendar>
</template>Links
Development
You must install this repo with PNPM:
pnpm install
Available scripts (via pnpm run <script>):
build- build production-ready dist filesdev- build & watch development dist filestest- test headlesslytest:dev- test interactivelyclean