@fullcalendar/vue3

esm cjs
The official Vue 3 component for FullCalendar
Version 6.1.17 License MIT
Keywords
calendareventfull-sizedfullcalendarvuevue3
INSTALL
Type:
Version:
- Static
- Latest Patch
- Latest Minor
- Latest Major
- 6.1.17
- 6.1.15
- 6.1.14
- 6.1.13
- 6.1.12
- 6.1.11
- 6.1.10
- 6.1.9
- 6.1.8
- 6.1.7
- 6.1.6
- 6.1.5
- 6.1.4
- 6.1.3
- 6.1.2
- 6.1.1
- 6.1.0
- 6.0.3
- 6.0.2
- 6.0.1
- 6.0.0
- 5.11.5
- 5.11.4
- 5.11.3
- 5.11.2
- 5.11.1
- 5.11.0
- 5.10.1
- 5.10.0
- 5.9.0
- 5.8.0
- 5.7.2
- 5.7.1
- 7.0.0-rc.0
- 7.0.0-beta.4
- 7.0.0-beta.3
- 7.0.0-beta.1
- 7.0.0-beta.0
- 6.0.0-beta.4
- 6.0.0-beta.3
- 6.0.0-beta.2
- 6.0.0-beta.1
<script src=" https://cdn.jsdelivr.net/npm/@fullcalendar/vue3@6.1.17/dist/index.global.min.js "></script>
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/daygrid
Usage
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