I'm trying in vue to assign an event object to events but it doesn't show up to me, what am I doing wrong? Data displays correctly in the console but does not appear in the calendar.
import axios from "axios";
import "@fullcalendar/core/vdom";
import FullCalendar from "@fullcalendar/vue3";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
export default {
name: "calendar",
components: {
FullCalendar,
},
data() {
return {
allevents: [],
calendarOptions: {
plugins: [dayGridPlugin, interactionPlugin],
initialView: "dayGridMonth",
dateClick: this.handleDateClick,
events: this.allevents,
},
};
},
mounted() {
axios
.get("url_json")
.then((response) => {
this.listDataString = JSON.stringify(response.data, null, "\t");
this.allevents = response.data.result.map(eventnew => ({title: eventnew.subject, start: eventnew.start.dateTime, end: eventnew.end.dateTime, allDay: 'true'}));
console.log(this.allevents);
return response;
});
},
};
the solution is to assign events in mounted this.calendarOptions.events = response.data.result.map(eventnew => ({title: eventnew.subject, start: eventnew.start.dateTime, end: eventnew.end.dateTime, allDay: 'true'}));