Vuejs-Vue fullcalendar v2.4.0: vue-full-calendar fullcalendar.iovue-full-calendar - A complete fullcalendar.io wrapper for both Vue 1 and 2

icon
Latest Release: v2.4.0

Before this version we had locked the minor version of Fullcalendar to 3.4., this has been reverted back to the major version lock 3..*

Source code(tar.gz)
Source code(zip)

vue-fullcalendar

npm version Build Status

Installation

npm install --save vue-full-calendar

Or for Vue 1.x users

npm install --save [email protected]

Installing the plugin will globally add the full-calendar component to your project.

//main.js
import FullCalendar from 'vue-full-calendar'
Vue.use(FullCalendar)

But you can also import the standalone component to add locally or for more complex installations.

// foo.vue
import { FullCalendar } from 'vue-full-calendar'
export default {
  components: {
    FullCalendar,
  },
}

jQuery

Please note that fullcalendar depends on jQuery, but you won't need to add it to your project manually, fullcalendar will handle this for you automatically if jQuery is not detected.

CSS

As of version 2.0, we have removed the automatic import of the fullcalendar.css, you will need to explicitly import this css file in your project.

import 'fullcalendar/dist/fullcalendar.css'

Example App

I have created a simple Vue 2 webpack application as an example/playground https://github.com/BrockReece/vue-fullcalendar-example

or try out this Code Sandbox

Scheduler

For those wanting to use the scheduler plugin, this Code Sandbox shows you a full working example.

Basic Usage

You can pass an array of fullclendar objects through the props

<full-calendar :events="events"></full-calendar>
...
<script>
...
  data() {
    return {
      events: [
        {
            title  : 'event1',
            start  : '2010-01-01',
        },
        {
            title  : 'event2',
            start  : '2010-01-05',
            end    : '2010-01-07',
        },
        {
            title  : 'event3',
            start  : '2010-01-09T12:30:00',
            allDay : false,
        },
      ]
    }
  }
...
</script>

More event options can be found at http://fullcalendar.io/docs/event_data/Event_Object/

Using a JSON Feed

<full-calendar :event-sources="eventSources"></full-calendar>
...
<script>
...
  data() {
    return {
      eventSources: [
        {
          events(start, end, timezone, callback) {
            self.$http.get(`/myFeed`, {timezone: timezone}).then(response => {
              callback(response.data.data)
            })
          },
          color: 'yellow',
          textColor: 'black',
        },
        {
          events(start, end, timezone, callback) {
            self.$http.get(`/anotherFeed`, {timezone: self.timezone}).then(response => {
              callback(response.data.data)
            })
          },
          color: 'red',
        },
      ]
    }
  }
...
</script>

Custom Config

You can pass any custom options through to fullcalendar by using the config prop, this includes extra event handlers.

<full-calendar :events="events" :config="config" />
...
<script>
...
  data() {
    return {
      events: [],
      config: {
        weekends: false,
        drop(...args) {
          //handle drop logic in parent
        },
      },
    }
  },
...
</script>

Locale

You can set the language of your calendar by importing the corresponding locale file and setting the locale key in the config prop. For example, to set up the Calendar in French...

<full-calendar :events="events" :config="config" />
...
<script>
import 'fullcalendar/dist/locale/fr'
...
  data() {
    return {
      events: [],
      config: {
        locale: 'fr',
      },
    }
  },
...
</script>

Code Sandbox

Note: You won't need to set the locale config key if your app only imports a single locale file

Further Props

You can edit the look and feel of fullcalendar by passing through extra props. These all have sensible defaults

  • header - [obj] - docs
  • defaultView - ['agendaWeek'] - docs
  • editable - [true] - docs
  • selectable - [true] - docs
  • selectHelper - [true] - docs
  • config - [true] - Pass your own custom config straight through to fullcalendar

Methods

Sometimes you may need to manipulate the Calendar from your parent component, you can use fireMethod for this. This works with anything in the Fullcalendar docs suffixed with (method) and it will dynamically handle as many arguments as needed.

<full-calendar :events="events" ref="calendar" />
...
<script>
...
  data() {
    return {
      events: [],
    }
  },
  
  methods: {
    next() {
      this.$refs.calendar.fireMethod('next')
    },
    changeView(view) {
      this.$refs.calendar.fireMethod('changeView', view)
    },
  },
...
</script>

Events and Hooks

Emitted

  • event-selected(event, jsEvent, view) - Triggered on eventClick()
  • event-mouseover(event, jsEvent, view) - Triggered on eventMouseover()
  • event-mouseout(event, jsEvent, view) - Triggered on eventMouseout()
  • event-drop(event) - Triggered on eventDrop()
  • event-resize(event) - Triggered on eventResize()
  • event-created(event) - Triggered on select()
  • event-receive(event) - Triggered on eventReceive()
  • event-render(event) - Triggered on eventRender()
  • view-render(view, element) - Triggered on viewRender()
  • day-click(date, jsEvent, view) - Triggered on dayClick()

You can listen for these events using the following markup

<full-calendar :event-sources="eventSources" @event-selected="eventSelected"></full-calendar>

Listens on

  • render-event(event) - Adds a new event to calendar
  • remove-event(event) - Removes event from calendar
  • rerender-events() - Rerenders events to reflect local changes
  • refetch-events() - Makes another JSON call to event sources
  • reload-events() - Removes all events and adds all events in this.events

You can trigger these events in the parent component like so...

<full-calendar ref="calendar" :event-sources="eventSources"></full-calendar>
...
<script>
...
  methods: {
    refreshEvents() {
      this.$refs.calendar.$emit('refetch-events')
    },
  }
...
</script>

Comments

  • Fix fullcalendar version
    Fix fullcalendar version

    Jun 21, 2020

    Fixes the fullcalendar and jquery version to fix issues in #215 #216 This has been released as a pre-patch version in [email protected]

    bug 
    Reply
  • Error in callback for watcher
    Error in callback for watcher "events": "TypeError: jquery__WEBPACK_IMPORTED_MODULE_2___default(...)(...).fullCalendar is not a function #21

    Jun 24, 2020

    Hi anyone encountered this? I am having issue with watcher inside of FullCalendar.vue, I dont know why this error is always showing up. Thank you!

    image

    Reply
  • Error in mounted hook:
    Error in mounted hook: "TypeError: cal.fullCalendar is not a function"

    Jun 29, 2020

    image

    Reply
  • Difference in package dependencies
    Difference in package dependencies

    Jul 11, 2020

    Node v14.5.0 Yarn v.1.22.4

    When i update package to 2.8.1-0 version, structure of node_modules directory changed Before: node_modules vue-full-calendar fullcalendar

    After: node_modules vue-full-calendar node_modules fullcalendar

    So, previous code with direct import of fullcalendar package will be incorrect. I think, need to pay attention

    Reply
  • Fix jquery 3.5.1 support
    Fix jquery 3.5.1 support

    Aug 14, 2020

    Fix problems encountered when using the new jQuery 3.5.1 as mentioned here : https://github.com/fullcalendar/fullcalendar/issues/5348#issuecomment-630563193

    Reply
  • Event not responding the correct way, it stacks on the second day
    Event not responding the correct way, it stacks on the second day

    Sep 2, 2020

    I have the latest version of the library "vue-full-calendar": "^2.8.0"

    Events were placed on the wrong dates

    events: [
        {
          title: 'event1',
          start: '2020-09-02',
          allDay: true
        },
        {
          title: 'event2',
          start: '2020-09-03',
          allDay: true
        },
        {
          title: 'event3',
          start: '2020-09-05',
          allDay: true
        },
        {
          title: 'event4',
          start: '2020-09-08',
          allDay: true
        }
      ]
    

    image

    Reply
  • Upgrade full calendar version ?
    Upgrade full calendar version ?

    Nov 13, 2017

    Hi,

    Could you upgrade your package.json file to use the new version of full calendar ? Or maybe there is some incompatibilities with your Vue component ?

    I need to use the new themeSystem option with bootstrap, wich has been included in 3.5.0, and I would like to keep your repository and not create a fork just for that.

    Thanks

    Reply
  • Problem with Router
    Problem with Router

    Jul 14, 2017

    Hello Guys! I have a problem when i redirect to another page and back to page with calendar.. all events stop working.. Im using vue-router It seems that the emit does not arrive until the event

    <router-link :to="{ name: 'home' }">Home</router-link>
    <router-link :to="{ name: 'calendar' }">Calendar</router-link>
    
    Reply
  • Drag Drop External Events Not working
    Drag Drop External Events Not working

    May 9, 2018

    I'm trying to have external events to add to the calendar but the calendar doesn't recognize the drag over of the event. It's almost the same as this one https://github.com/CroudTech/vue-fullcalendar/issues/72#issuecomment-387536660 but only with normal vue

    Reply
  • Events are duplicating after changing month
    Events are duplicating after changing month

    Jul 13, 2017

    Having some trouble after using your solution in issue #37

    After each site change, the events change (from JSON API) but clicking on next month makes the events duplicate based on the count of the site changes (times selected).

    Here's a GIF of what's happening: https://d.pr/i/7B1eT/4KXGH5Wh

    Reply
  • What's problem with my allDay setting?
    What's problem with my allDay setting?

    Jul 19, 2018

    I have ser allDay configuration in json, but it didn't work. Any criticle point I miss ?

    code: allDay: true,

    Result:

    default

    Reply
  • Error on the package
    Error on the package

    Oct 16, 2017

    VM2482:1 Uncaught SyntaxError: Unexpected token import import FullCalendar from './components/FullCalendar.vue';

    Reply