使用AJAX onMonthAdd加载Framework7日历事件 [英] Framework7 Calendar Events load with AJAX onMonthAdd

问题描述

类似的问题，但我相信仍然是唯一不同的: Framework7 datepicker初始化后会修改事件

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

我有一个内联日历，其中包含从AJAX脚本加载的事件，我可以使它正常工作，但是将来有数百个事件会持续很多年.我需要的是一种仅加载当月事件并根据需要添加事件的方法.我当时以为可以用onMonthAdd做到这一点，但是我遇到的问题是，当我将新元素推送到p.events时，直到从该元素中删除月份并读取月份后，才会加载新事件.

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.

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

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.

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

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是非相关的，如果我能找到一种方法来简单地将事件(不添加AJAX)添加到添加的月份中，那么我就可以使它正常工作.

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.

以下是我尝试过的一些代码(AJAX除外)，但是它无法正常工作，因为它创建了日历，但是直到重新创建DOM中的月份后，才使用新日期进行更新:

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

    },
});
...

我发现了一种回旋的方式，可以通过使用当前年和月来执行setYearMonth来重新加载"日历，但这是一个问题，当更改年份时，它实际上会在此处创建一个无限循环该代码:

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

    },
    ...

推荐答案

我对Framework7和日历对象的一些发现:

Some of my findings about framework7 and calendar object:

• 每个月在开始时(上一个，当前和下一个)加载三个月
• 添加事件后，事件不会被删除，即使从DOM中删除了该月，事件仍保留在日历对象中
• 同一日期的多个事件除了减慢脚本速度之外，没有其他作用.
• 在每月之前没有回调，只能在之后添加
• 可以通过调用setYearMonth并将持续时间设置为1毫秒来重新加载DOM，以免明显过渡

这是解决方法，我不是在发布所有实际代码，而只是在发布过程

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

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

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.

这篇关于使用AJAX onMonthAdd加载Framework7日历事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！