Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time
February 27, 2017 02:09
February 16, 2017 23:41
July 7, 2016 16:46
February 17, 2017 14:45
November 23, 2016 17:10


npm npm

Works for Vue2 now. This is a fullCalendar component based on vue.js . No Jquery or fullCalendar.js required. Currently, It only supports month view. It's inspired by but not cloned by it. So please read the docs here below to understand all features.

Simple Live Demo




@latest works for Vue2 0.1.11 works for Vue1.*

// for Vue2
npm install vue-fullcalendar@latest --save 

// for Vue1
npm install vue-fullcalendar@0.1.11 --save 

or download code and include it

<script src='dist/vue-fulcalendar.min.js'>


Register component globally

// Your entry index.js
import Vue from 'vue'
import App from './App'

import fullCalendar from 'vue-fullcalendar'

Vue.component('full-calendar', fullCalendar)

// Vue2
new Vue({
  el : '#app',
  render: h => h(App),
  template : '<App/>',
  components : {


new Vue({
	el : 'body',
	components : {

or register locally in your .vue file


<full-calendar :events="fcEvents" locale="en"></full-calendar>
var demoEvents = [
      title : 'Sunny Out of Office',
      start : '2016-08-25',
      end : '2017-07-27'
export default {
  data () {
	return {
	  fcEvents : demoEvents
  components : {
	'full-calendar': require('vue-fullcalendar')	

A sample screenshot is here, Yeah you see the calendar



  1. events : Events will be displayed on the calendar

    events = [
        title     :  'event1',
        start     : '2016-07-01'
        cssClass  : 'family',
        YOUR_DATA : {}
        title     : 'event2',
        start     : '2016-07-02',
        end       : '2016-07-03',
        cssClass  : ['family', 'career']
        YOUR_DATA : {}
    • title is the title of this event, will be displayed on calendar

    • start is the start day of this event

    • end is the end day of this event

    • cssClass is css class of each event label, such that, you will be able to set different colors, style ..

    • YOUR_DATA You can define as many data you want as possible

  2. locale : langague of things like monthNames weekNames and titleFormat. Support same locales than moment.js

    • default : en
  3. firstDay : first day of the week, Number, default: 0 (Sunday) Sunday=0, Monday=1, Tuesday=2, etc. Any number smaller than 0 or larger than 6 will be set to 0.

    • default : 0


fc will dispatch some events out.

  1. changeMonth : Every time you click arrow to next/last month, fc will dispatch changeMonth

    this.$dispatch('changeMonth', start, end, current)
    • start is the first day of current monthView (moment object)

    • end is the last day of current monthView (moment object)

    • current is the first day of current month (moment object)

  2. eventClick : Every time you click a event, fc will dispatch eventClick

    this.$dispatch('eventClick', event, jsEvent, pos)
    • event is an Event object hold the event's information

    • jsEvent holds the native javascript event

    • pos is the relative coordinates of fc

  3. dayClick : fc dispatch it when you click a day slot.

    this.$dispatch('eventClick', day, jsEvent)
    • date is a Date Object of the day you click (moment object)

    • jsEvent holds the native javascript event

  4. moreClick : fc dispatch it when you click a more button

    • date is the date corresponding to the "more" clicked (moment object)

    • events is the list of events that will be in the box

    • jsEvent holds the native javascript event


You will be able to register your own stuff by using slots

  1. fc-header-left : top left area

  2. fc-header-right : top right area. In my case, I added a filter menu there

  3. fc-body-card : inside the body area, usually working with EventClick, to display a event detail



vue calendar fullCalendar. no jquery required. Schedule events management






No packages published