I'm trying to use fullcalendar.io. I'm following examples and documentation. However, when calling a function, it gives several errors and I'm not able to solve it because I don't understand the reason for the error.
Error 1:
[Vue warn]: Error in data(): "ReferenceError: handleDateSelect is not defined"
found in
---> <Calendary> at src/components/Calendary.vue
<Home> at src/views/Home.vue
<VMain>
<VApp>
<App> at src/App.vue
<Root>
Error 2:
vue.runtime.esm.js?2b0e:1897 ReferenceError: handleDateSelect is not defined
at VueComponent.data (Calendary.vue?87e1:77)
at getData (vue.runtime.esm.js?2b0e:4761)
at initData (vue.runtime.esm.js?2b0e:4718)
at initState (vue.runtime.esm.js?2b0e:4655)
at VueComponent.Vue._init (vue.runtime.esm.js?2b0e:5020)
at new VueComponent (vue.runtime.esm.js?2b0e:5168)
at createComponentInstanceForVnode (vue.runtime.esm.js?2b0e:3304)
at init (vue.runtime.esm.js?2b0e:3133)
at createComponent (vue.runtime.esm.js?2b0e:6022)
at createElm (vue.runtime.esm.js?2b0e:5969)
Error 3:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "calendarOptions" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <Calendary> at src/components/Calendary.vue
<Home> at src/views/Home.vue
<VMain>
<VApp>
<App> at src/App.vue
<Root>
Error 4:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'weekends')"
found in
---> <Calendary> at src/components/Calendary.vue
<Home> at src/views/Home.vue
<VMain>
<VApp>
<App> at src/App.vue
<Root>
Error 5:
[Vue warn]: Error in data(): "TypeError: Cannot read properties of undefined (reading 'handleDateSelect')"
found in
---> <Calendary>
<Home> at src/views/Home.vue
<VMain>
<VApp>
<App> at src/App.vue
<Root>
These are just a few and they only appear when I call the function. I'm using vue 3 with vuetify.
Code:
<template>
<div class='demo-app'>
<div class='demo-app-sidebar'>
<div class='demo-app-sidebar-section'>
<h2>Instructions</h2>
<ul>
<li>Select dates and you will be prompted to create a new event</li>
<li>Drag, drop, and resize events</li>
<li>Click an event to delete it</li>
</ul>
</div>
<div class='demo-app-sidebar-section'>
<label>
<input
type='checkbox'
:checked='calendarOptions.weekends'
@change='handleWeekendsToggle'
/>
toggle weekends
</label>
</div>
<div class='demo-app-sidebar-section'>
<h2>All Events ({{ currentEvents.length }})</h2>
<ul>
<li v-for='event in currentEvents' :key='event.id'>
<b>{{ event.startStr }}</b>
<i>{{ event.title }}</i>
</li>
</ul>
</div>
</div>
<div class='demo-app-main'>
<FullCalendar
class='demo-app-calendar'
:options='calendarOptions'
>
<template v-slot:eventContent='arg'>
<b>{{ arg.timeText }}</b>
<i>{{ arg.event.title }}</i>
</template>
</FullCalendar>
</div>
</div>
</template>
<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
export default {
components: {
FullCalendar
},
data: () => ({
calendarOptions: {
plugins: [
dayGridPlugin,
timeGridPlugin,
interactionPlugin
],
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
initialView: 'dayGridMonth',
// initialEvents: INITIAL_EVENTS,
editable: true,
selectable: true,
selectMirror: true,
dayMaxEvents: true,
weekends: true,
select: this.handleDateSelect
// eventClick: this.handleEventClick,
// eventsSet: this.handleEvents
},
currentEvents: []
}),
methods: {
handleWeekendsToggle() {
this.calendarOptions.weekends = !this.calendarOptions.weekends // update a property
},
handleDateSelect(selectInfo) {
let title = prompt('Please enter a new title for your event')
let calendarApi = selectInfo.view.calendar
calendarApi.unselect() // clear date selection
if (title) {
calendarApi.addEvent({
id: createEventId(),
title,
start: selectInfo.startStr,
end: selectInfo.endStr,
allDay: selectInfo.allDay
})
}
},
handleEventClick(clickInfo) {
if (confirm(`Are you sure you want to delete the event '${clickInfo.event.title}'`)) {
clickInfo.event.remove()
}
},
handleEvents(events) {
this.currentEvents = events
}
},
};
</script>
<style lang='css' scoped>
h2 {
margin: 0;
font-size: 16px;
}
ul {
margin: 0;
padding: 0 0 0 1.5em;
}
li {
margin: 1.5em 0;
padding: 0;
}
b { /* used for event dates/times */
margin-right: 3px;
}
.demo-app {
display: flex;
min-height: 100%;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
.demo-app-sidebar {
width: 300px;
line-height: 1.5;
background: #eaf9ff;
border-right: 1px solid #d3e2e8;
}
.demo-app-sidebar-section {
padding: 2em;
}
.demo-app-main {
flex-grow: 1;
padding: 3em;
}
.fc { /* the calendar root */
max-width: 1100px;
margin: 0 auto;
}
</style>
CodePudding user response：
The solution is the data structure:
data: function() {
return{
calendarOptions: {
...
}
}
},
CodePudding user response：
I'm trying to reproduce your code and throws an error here.
error 'createEventId' is not defined
Besides that, the main error that you are facing it's solved by writing data like so:
data() {
return {
calendarOptions: {
plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
initialView: 'dayGridMonth',
// initialEvents: INITIAL_EVENTS,
editable: true,
selectable: true,
selectMirror: true,
dayMaxEvents: true,
weekends: true,
select: this.handleDateSelect // THIS will throw an error!
If you see the last line you are using this but by making data() an arrow function you lose the this context.
example:
const person = {
firstName: 'John',
regularFunction() {
console.log(this.firstName)
},
arrowFunction: () => {
console.log(this.firstName)
}
}
person.regularFunction() // 'John'
person.arrowFunction() // undefined