huzoorbux's avatar

fullcalendar events extract from a url with pagination

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>
0 likes
2 replies
bobbybouwmann's avatar

I don't think you can, because fullcalender doesn't know how much pages there going to be right? Every API gives back a different response so there is no standard for this. You either have to build up this logic yourself and then fill the event sources will all links or use a different method. For example instead of using pagination you fetch everything for a certain month or week.

Fuhrn's avatar

calendar.addEventSource({ url: '/calendar/events', });

fullCalendar will automatically fetch events according to "start" field and view.

Please or to participate in this conversation.