Vue FullCalendar, setting click event

Question

I'm using the FullCalendar library for Vue https://fullcalendar.io/docs/vue and I have a perfectly working calendar, but I can't get clicking on date/calendar events to work.

I have the calendar in the template:

<full-calendar @dateClick="handleDateClick" :config="config" :events="events"/></full-calendar>

and my vue code:

export default {
    data () {
        return {
            events: [
              title: 'My Event',
              start: '2010-01-01'
            ],
            config: {
                defaultView: 'month',
                editable:true,
                eventRender: function(event, element) {
                    console.log(event)
                }
            },
        }
    },
    methods: {
      handleDateClick(arg) {
        alert(arg.date)
      },
    },
}

This seems to match the docs but I'm not getting the alert. I'm just trying to make it so that I have the functionality in place so that I can tie each event click to a modal with that event's details.

What exactly am I doing wrong here?

Answer 1

I have the following setup and it allows me to click and click and drag. Your code is only missing @select="" .

<template>
  <FullCalendar 
    defaultView="dayGridMonth" 
    :plugins="calendarPlugins" 
    :events="events"
    :selectable="true"
    @select="handleSelect"
    @clickDate="handleDateClick"
  />
</template>


<script>
/* eslint-disable */
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction';


export default {
  name: 'Home',
  components: {
    FullCalendar
  },
  mounted(){

  },
  data () {
    return {
      events: [{title:'Something', start:'2019-09-12'}],
      calendarPlugins:[dayGridPlugin, interactionPlugin]
    }
  },
  methods:{
    handleDateClick(e){
      console.log(e);
    },
    handleSelect(e){
      console.log(e);
    }
  }
}
</script>

<style lang='scss'>

  @import '~@fullcalendar/core/main.css';
  @import '~@fullcalendar/daygrid/main.css';
  @import '~@fullcalendar/timegrid/main.css';
  @import '~@fullcalendar/list/main.css';

</style>

Answer 2

You need to add selectable:true as the default is false. And you need the interactionPlugin as well.

https://fullcalendar.io/docs/selectable https://fullcalendar.io/docs/plugin-index

import interactionPlugin from '@fullcalendar/interaction'
config:{
...
selectable:true,
plugins:[interactionPlugin]
}