Calendar pulling dB data but not refreshing

Event calendars & schedulers
1

The below code technically works just fine - when the month changes the onPageLoading event fires, however, as I state in the comment below, the calendar does not refresh. For example, when the webpage loads for the first time the entries show up from the dB but if I change the selected month/year nothing shows unless I click a day on the calendar or I resize the page. I have included a link to a short video showing this issue: https://youtu.be/gJFEaDh3NT8

mobiscroll.setOptions({
    locale: mobiscroll.localeEn,
    theme: 'ios',
    themeVariant: 'light',
    clickToCreate: false,
    dragToCreate: false,
    dragToMove: false,
    dragToResize: false,
    eventDelete: false
});
$(function () {
    var inst = $('#workoutCalendar').mobiscroll().eventcalendar({
        view: {
            calendar: {
                labels: true
            }
        },
        onEventClick: function (event, inst) {
            mobiscroll.toast({
                message: event.event.title
            });
        },
        onPageLoading: function (event, inst) {
            var year = event.month.getFullYear(),
                month = event.month.getMonth() + 1;
            api("Calendar_Events_Get", `{"selectedMonth" : "${month}", "selectedYear": "${year}"}`,
                function (data) {
                    inst.setEvents(data);   // This is working just fine but calendar doesn't refresh by itself 
                                            // unless I click a day in the calendar or resize the page
                },
                function (data) { }
            );
        }
    }).mobiscroll('getInst');

});
2

Hi Mike,

Is it possible that your api method is running synchronously? If yes, that might be the problem, because the setEvents method will not work if called directly from the onPageLoading.
If this is the case, and you cannot make it run async (this would be the preferred way), you can simply wrap the setEvents call in a setTimeout, without any time specified, just to defer the call:

api("Calendar_Events_Get", `{"selectedMonth" : "${month}", "selectedYear": "${year}"}`,
  function (data) {
    setTimeout(function () {
      inst.setEvents(data);
    });
  },
  function (data) { }
);

Let me know if it works for you!