Plan events with the fullCalendar component based on Vue.js
vue-fullcalendar
Grab the Vue fullCalendar component to display an event calendar & navigate between months, inspired by fullCalendar.io but not cloned by it. No Jquery or fullCalendar.js is required, though currently, It only supports month view.
Example
To add vue-fullcalendar to your project start by installing it via yarn
yarn add vue-fullcalendar@latest
Register the component globally
import fullCalendar from 'vue-fullcalendar'
Vue.component('full-calendar', fullCalendar)
and use it in your templates
<full-calendar :events="fcEvents" locale="en"></full-calendar>
Here events
will be displayed on the calendar. You can create an array and bind it to your data through props
let calendarEvents = [
{
title: 'Perfect Day for Rain',
start: '2016-08-25',
end: '2017-05-25'
},
{
title: 'Wait another month for VueConf',
start: '2017-05-21',
end: '2017-05-22',
cssClass: 'vueconf'
},
{
title: 'A single sunny day',
start: '2017-05-29',
end: '2017-05-29'
}
]
export default {
data () {
return {
fcEvents : calendarEvents
}
}
}
The cssClass
is the css class of each event label, you can use it to add your CSS
.vueconf {
background-color: #00a65a !important;
}
Like so
To take a further look at the docs & understand how things work, visit its GitHub repository.