FullCalendar Vue 2 Component
The official Vue 2 component for FullCalendar
For Vue 3, use the @fullcalendar/vue3 package
Installation
Install the Vue 2 connector, the core package, and any plugins (like daygrid):
npm install @fullcalendar/vue @fullcalendar/core @fullcalendar/daygridUsage
Render a FullCalendar component, supplying an options object:
<script>
import FullCalendar from '@fullcalendar/vue'
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>
<div>
<h1>Demo App</h1>
<FullCalendar :options='calendarOptions' />
</div>
</template>You can even supply named-slot templates:
<template>
<div>
<h1>Demo App</h1>
<FullCalendar :options='calendarOptions'>
<template v-slot:eventContent='arg'>
<b>{{ arg.timeText }}</b>
<i>{{ arg.event.title }}</i>
</template>
</FullCalendar>
</div>
</template>Links
Development
You must install this repo with PNPM:
pnpm install
Available scripts (via pnpm run <script>):
-
build- build production-ready dist files -
dev- build & watch development dist files -
test- test headlessly -
test:dev- test interactively clean