使用 AJAX onMonthAdd 加载 Framework7 日历事件

Question

类似的问题，但我相信仍然与众不同：Framework7 datepicker modify events after initializing

我有一个内联日历，其中包含从 AJAX 脚本加载的事件，我可以让它工作，但是有数百个事件在未来很多年。我需要的是一种仅加载本月事件并根据需要添加它们的方法。我在想这可以用 onMonthAdd 来完成，但我遇到的问题是，当我将一个新元素推送到 p.events 时，新事件不会加载，直到从元素中删除月份并重新加载。

例如：onMonthAdd 为 1 月我添加了 1 月 11 日的事件。然后当 1 月进入视图时，该事件不会显示。但是，当我导航回到 12 月，然后再导航到 11 月时，1 月份的日历会从 DOM 中删除。然后导航回到一月，它在 DOM 中重新创建月份，然后它将显示该事件。

主要问题是，如何在 DOM 中创建元素之前添加事件 如果 onMonthAdd 似乎在月份添加到 DOM 之后被触发 .我找不到任何对 beforeMonthAdd 函数的引用。

AJAX 是无关紧要的，我可以让它工作，如果我能找到一种方法来简单地将一个事件（没有 AJAX）添加到添加的月份。

这是我尝试过的一些代码（不包括 AJAX），但它在创建日历时不起作用，但在重新创建 DOM 中的月份之前不会使用新日期更新：

...
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));
        }

    },
});
...

我找到了一种迂回的方法，通过使用当前年份和月份执行 setYearMonth 来“重新加载”日历，但这样做的问题是，当更改年份时，它实际上会在这里创建一个无限循环代码：

    ...
    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);
        }

    },
    ...

Answer 1

我对 framework7 和日历对象的一些发现：

• 在开始时加载三个月份（上一个、当前和下一个）
• 事件在添加后不会被删除，即使在从 DOM 中删除该月份后仍保留在日历对象中
• 同一日期的多个事件除了减慢脚本速度之外没有任何影响。
• 月前无回调，仅后添加
• 可以通过调用 setYearMonth 并将持续时间设置为 1 毫秒来重新加载 DOM，以使过渡不可见

这里是修复，我没有发布所有实际代码，而只是发布过程

1. 创建一个数组变量来存储已处理的日期和 从 AJAX 检索的事件以防止额外的工作和无限循环
2. 在处理 ajax 调用之前检查月+年是否已经在 处理月份数组
3. 如果不在数组中，则添加到数组并使用 AJAX 检索事件
4. 在 AJAX 完成并且数据有效后，添加到 p.param.events 并重新加载 DOM 中使用 setYearMonth 的日历

这对我的项目非常有效，用户交互流畅快速。