2

I am trying to display a calendar in VueJS. I need the following things :

  • Month view
  • Week view
  • Day view when I click on a cell
  • To display data in each cell of my calendar

I can't use Vuetify plugin because I am already using Bootstrap, that's why I am using fullcalendar.js plugin (https://fullcalendar.io/docs/vue).

However, it doesn't seem the API behind the component is working properly,

<template>
<div>
    <FullCalendar :plugins="calendarPlugins"
                  :weekends="false"
                  @dateClick="handleDateClick"
    />
</div>
</template>

<script>
    import FullCalendar from '@fullcalendar/vue'
    import dayGridPlugin from '@fullcalendar/daygrid'

    export default {
        name: "Calendar",

        components: {
            FullCalendar // make the <FullCalendar> tag available
        },

        data() {
            return {
                calendarPlugins: [ dayGridPlugin ]
            }
        },
        methods: {
            handleDateClick(arg) {
                alert(arg.date)
            }
        }
    }
</script>

<style lang='scss' scoped>
    @import '~@fullcalendar/core/main.css';
    @import '~@fullcalendar/daygrid/main.css';
</style>

When I click on a date no event if fired, and I don't have any error that appears in the console.. What I am doing wrong here ?

Thanks for your help !

enter image description here

ADyson
  • 57,178
  • 14
  • 51
  • 63
Louis Charles
  • 330
  • 4
  • 18

1 Answers1

2

According to the FullCalender documentation:

In order for this callback to fire, you must load the interaction plugin.

varontron
  • 1,120
  • 7
  • 21
  • Thanks for the reply, do you know how can I do that with vueJS ? This is what I've tried so far : data() { return { calendarPlugins: [ dayGridPlugin ], plugins: [ interactionPlugin ], } }, – Louis Charles Jan 16 '20 at 03:29
  • Solved it by adding the plugin to the calendarPlugins list.. Sorry for the stupid question and thanks for your help man ! – Louis Charles Jan 16 '20 at 03:33