I have integrated fullcalendar and extracting all events in one go but how can i give a source url to fullcalendar and it manage pagination itself with eventSources
My code:
<template>
<full-calendar
ref="calendar"
:config="config"
:events="events"
></full-calendar>
</template>
<script>
export default {
name: "Calendar",
data() {
const vm = this;
return {
events: [],
config: {
defaultView: 'month',
editable: false,
timeFormat: 'h(:mm) a',
eventLimit: 4,
eventTextColor: 'white',
eventRender(event, element) {
return vm.eventFilter(event, element);
},
eventClick(event, jsEvent, view) {
return vm.onPreviewEventClick(event);
}
},
eventFilter: (evt, el) => true
};
},
mounted: function() {
this.getReminders();
},
methods: {
getReminders: function() {
axios.get(route('calendar.reminders'))
.then((response) => {
//console.log(response.data);
$(response.data).each((i,data) => {
this.events.push({
eventID : data.id,
type : data.reminder_type.name,
start : data.deadline,
end : data.endEvent,
description : data.description,
title : data.notes,
});
});
});
},
},
watch: {
eventFilter() {
this.$refs.calendar.fireMethod("rerenderEvents");
}
},
};
</script>