I recently set up fullcalendar in vuejs but encountered an issue with handling fullcalendar events. Whenever I attempt to trigger the dateClick and eventClick events, I receive the following warning in the console:
Event "dateclick" is emitted in component but the handler is registered for "dateClick". Note that HTML attributes are case-insensitive and you cannot use v-on to listen to camelCase events when using in-DOM templates. You should probably use "date-click" instead of "dateClick".
I have also attempted switching to date-click without success.
Here's my HTML:
<script src="~/Scripts/vue/vue.js"></script>
<link href='https://unpkg.com/@fullcalendar/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="680b071a0d285c46594658">[email protected]</a>/main.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6307021a04110a0723574d524d53">[email protected]</a>/main.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ffbe6e2eae8fde6ebcfbba1bea1bf">[email protected]</a>/main.css' rel='stylesheet' />
<script src='https://unpkg.com/@fullcalendar/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f4979b8691b4c0dac5dac4">[email protected]</a>/main.js'></script>
<script src='https://unpkg.com/@fullcalendar/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="acc8cdd5cbdec5c8ec98829d829c">[email protected]</a>/main.js'></script>
<script src='https://unpkg.com/@fullcalendar/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="03776a6e6664716a6743372d322d33">[email protected]</a>/main.js'></script>
<script src='https://unpkg.com/@fullcalendar/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d3babda7b6a1b2b0a7babcbd93e7fde2fde3">[email protected]</a>/main.js'></script>
<script src="https://unpkg.com/@fullcalendar/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3046455570041e011e00">[email protected]</a>/main.umd.js"></script>
<div id="app-el">
<full-calendar class="app-calendar"
default-view="dayGridMonth"
ref="fullCalendar"
:header="{
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
}"
:plugins="plugins"
:weekends="true"
:events="events"
@@eventClick="eventClick"
@@dateClick="handleDateClick" />
</div>
My JavaScript file:
var fullcalendar = Vue.component('FullCalendar', window['FullCalendarVue'].default);
document.addEventListener('DOMContentLoaded', function () {
new Vue({
el: '#app-el',
components: {
fullcalendar: fullcalendar
},
data: function () {
return {
showModal: false,
plugins: [
window.FullCalendarDayGrid.default,
window.FullCalendarTimeGrid.default,
window.FullCalendarInteraction.default,
],
events: [
]
}
},
methods: {
eventClick(args) {
// this.$emit("event-click", this);
this.showModal = true;
},
handleDateClick(arg) {
console.log('handleDateClick');
}
}
});
});