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.