I'm currently working on implementing a calendar in VueJS and I have specific requirements:
- Need to display Month view
- Want to include Week view
- Clicking on a cell should show Day view
- Data needs to be displayed in each cell of the calendar
Unable to use Vuetify plugin due to Bootstrap integration, so opted for fullcalendar.js instead (https://fullcalendar.io/docs/vue).
Unfortunately, there seems to be an issue with the API behind the component,
<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>
No event is triggered when clicking on a date, and no errors are showing up in the console. Any idea what might be causing this issue?
Appreciate your assistance!