Framework7 Calendar Events load with AJAX onMonthAdd

问题

Similiar question but I believe still uniquely different: Framework7 datepicker modify events after initializing

I have an inline calendar with events that load from an AJAX script and I can get that to work, however there are hundreds of events that go many years in the future. What I need is a way to load just the events for the month and add them as needed. I was thinking that this could be done with onMonthAdd but the problem I am running into is that when I push a new element to p.events that the new event is not loaded until the month is removed from the element and readded.

For instance: onMonthAdd for January I add an event for January 11. Then when January is brought into view the event is not displayed. But, when I navigate back to December and then to November the calendar for the month of January is removed from the DOM. And then navigating back to January which recreates the month in the DOM and then it will display the event.

Main question is, how is it possible to add events right before the element is created in DOM if onMonthAdd appears to be fired after the month is added to the DOM. I could not find any reference to a beforeMonthAdd function.

AJAX is non-relevent and I can get it working, if I could find a way to simply just add an event (without AJAX) to a Month that is added.

Here is some code that I tried (excludes AJAX) but it does not work as it created the calendar but does not update with the new dates until the month in DOM is recreated:

...
var calendarInline = myApp.calendar({
    container: '#calendar-inline-container',
    weekHeader: true,
    firstDay: 0,
    events: [
      new Date(2017,7,1),
      new Date(2017,7,31),
      new Date(2017,8,1),
      new Date(2017,8,30),
      new Date(2017,9,1),
      new Date(2017,9,31),
      new Date(2017,10,1),
      new Date(2017,10,30),
      new Date(2017,11,1),
      new Date(2017,11,31)
    ],
    onMonthAdd: function(p,monthContainer){
        var thisYear = $(monthContainer).find('picker-calendar-month').context.attributes['data-year'].value;
        var thisMonth = $(monthContainer).find('picker-calendar-month').context.attributes['data-month'].value;
        if(thisMonth==0){
            p.params.events.push(new Date(thisYear,thisMonth,11));
        }

    },
});
...

I have found a roundabout way to sort of accomplishing this by executing setYearMonth using the current year and month to 'reload' the calendar, but the problem with this is that when changing the year it will actually create an endless loop here is the code for that:

    ...
    onMonthAdd: function(p,monthContainer){
        var thisYear = $(monthContainer).find('picker-calendar-month').context.attributes['data-year'].value;
        var thisMonth = $(monthContainer).find('picker-calendar-month').context.attributes['data-month'].value;
        if(thisMonth==0){
            p.params.events.push(new Date(thisYear,thisMonth,11));
            p.setYearMonth(p.currentYear, p.currentMonth, 1);
        }

    },
    ...

回答1:

Some of my findings about framework7 and calendar object:

• Months are loaded three on start (previous,current, and next)
• Events are not deleted after being added and remain in the calendar object even after that month is removed from the DOM
• Multiple events for the same date have no effect besides slowing down the script.
• There is no callback for before on month add only after
• The DOM can be reloaded by calling setYearMonth and setting the duration to 1 millisecond to not visibly transition

Here is the fix, I am not posting all of the actual code but just the process

1. Create an array variable to store dates that have been processed and events retrieved from AJAX to prevent extra work and endless loops
2. Before processing ajax call check to see if month+year is already in processed months array
3. If not in array add to array and retrieve events with AJAX
4. After AJAX completes and data is valid add to p.param.events and reload the calendar in DOM using setYearMonth

This works very well for my project and the user interaction is smooth and fast.

来源：https://stackoverflow.com/questions/47126743/framework7-calendar-events-load-with-ajax-onmonthadd