I'd like to preface this by I'm not a javascript developer and know just enough to make do. So what's the reason I'm writing this? First I ran into a problem where I was led on a wild goose chase as far solutions go. Nothing seemed to work outside of grabbing every event from the DB on load. Well being that this app is new, this actually is reasonable for foreseeable future, but at some point down the line we are going to have way too many events and it'll slow the app down, which at that point will I still even be with the company? Should I just let it be a future developers problem? Ehhhh normally I'd actually debate this but as of late I've been determined to really become better and it's the small things like this that will push me to the next level.

So most google searches / stack posts led me to the datesRender method. Well I did that and call the calendarApi on mount and after checking in the console it came back undefined. I checked multiple times and in all the solutions I'm using the same V4 yet nothing worked. I'm not sure how I stumbled across the next "solution" but one thing led to another and I came across dateSet. So I set this in the calendarOptions as per the docs:

  data() {
    return {
      selectedCharter: null,
      availableCharters: [],
      calendarStart: "",
      calendarEnd: "",
      calendarOptions: {
        plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
        events: [],
        editable: true,
        eventDurationEditable: true,
        eventDrop: this.handleEventDrop,
        dateClick: this.handleDateClick,
        eventResize: this.handleEventResize,
        datesSet: this.handleMonthChange,
        headerToolbar: {
          right: "today,prev,next",
          left: "title",
        },
      },
    };
  },

and here is the start of the handleMonthChange method:

    async handleMonthChange(payload) {
      console.log('handleMonth change has been been');
      console.log(paypload.startStr);
    },

I just wanted to make sure this logged and based on the documentation I wanted to verify what startStr is.
In the console I got:

handleMonth change has been been
2021-04-25T00:00:00-04:00
handleMonth change has been been
2021-04-25T00:00:00-04:00
handleMonth change has been been
2021-04-25T00:00:00-04:00
handleMonth change has been been
2021-04-25T00:00:00-04:00

Success!!!!!!!!! Sort of. So not sure why this gets called the 4 separate times and to be perfectly honest I really didn't care to completely dig through the less than spectacular documentation.

Looking above at my data object in vue I know there will always be a start / end date to the calendar and you can see them as calendarStart and calendarEnd. So obviously I can set them in the handleMonthChange method but decided a little conditional as to not run unnecessary code.

    async handleMonthChange(payload) {
      if (this.calendarStart != payload.startStr) {
        this.calendarStart = payload.startStr;
        this.calendarEnd = payload.endStr;
        await this.fetchAll();
      }
    },

So what does fetchAll() do? Well it hits the API with specific data now!!!!! a calendarStart and calendarEnd so in the backend (laravel) I can now query with a nice little whereBetween and guess what. Instead of an infinite amount events I now get a small number from a specific date range. Thank you all for coming to my Ted talk.

For next week I need to come up with a "loading" state because there is unfortunately a small delay (1/4 second or so) but enough to be noticeable. So does fullCalendar have a loading state or will I have to bind the fullCalendar ref to the window? Tune in to find out.

One final update. So after I wrote this I came across V5 Release Notes, which clearly say that datesRender is now named datesSet. Very strange since I am using the V4 version. So I guess this write up is somewhat irrelevant but since I took the time to write it, it's staying.