0

我正在尝试通过flatpickr构建一个日历，该日历显示月视图中的占用情况。这个日期选择器中的小点：

在此处输入图像描述

flatpickr 的文档说明了一种与日单元交互的相当简单的方法，并在创建日单元时添加一些元素或操作单元：

...
onDayCreate: function(dObj, dStr, fp, dayElem){
    // Utilize dayElem.dateObj, which is the corresponding Date

    // dummy logic
    if (Math.random() < 0.15)
        dayElem.innerHTML += "<span class='event'></span>";

    else if (Math.random() > 0.85)
        dayElem.innerHTML += "<span class='event busy'></span>";
}
...

非常酷：每次创建单元格时都会调用此回调，因此每次视图 30|31 次。

占用率通过一个 API 公开，该 API 采用单个或一组日期，并返回一个包含占用信息的数组：

{
  '2018-04-19': 60,
  '2018-04-30': 21,
  ....
}

在onDayCreate-event 中，我可以调用 API 并根据返回的结果采取行动。虽然这会创建 30/31 请求，但它是可行的，但效率不高。

到现在为止还挺好; 但问题在于，如果您滚动浏览月份，每个月都会向 API 生成 30/31 的请求。即使月份只显示了几分之一秒。本质上我是在 DDOSsing 我自己的服务器。

我的下一个方法是在 1 个请求中预加载“第一”月，并使用onDayCreate-event 从预加载的数组中挑选。

随后几个月的占用情况将在onMonthChange-event 中异步加载。但是，flatpickr 似乎触发了onMonthChange-event 并继续进行白天创建：

在此处输入图像描述
红线上方：初始月份；下面我点击下个月。

所以我不能在onMonthChange中使用新加载的数据...

关于如何将占用信息动态加载到 flatpickr 而不用（不必要的）请求重载 API 的任何帮助

4

1 回答 1

0

使用 Day-created 事件创建元素，例如

`<span data-date="${yourDate}" class='loading event'></span>`

然后在 MonthChanged 事件中处理所有正在加载的元素和事件类，从属性 data-date 的数组中查询所有日期。

于 2018-04-19T14:53:41.247 回答