使用AJAX onMonthAdd

Question

类似的问题，但我相信仍然有着独特的不同：Framework7 datepicker modify events after initializing

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

例如：1月份的onMonthAdd我为1月11日添加了一个事件。然后当1月进入视图时，不显示该事件。但是，当我导航回到12月然后到11月时，1月份的日历将从DOM中删除。然后导航回到1月，在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重新加载DOM，并将持续时间设置为1毫秒，以便不会明显转换

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

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

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