如果在selectAllow回调中不允许使用FullCalendar禁用选择日期

问题描述

在FullCalendar插件中，我需要允许选择直到一天或几天之间的日期.我举了一个例子来更好地解释.

In the FullCalendar plugin, I need allow selection of days until a day or between dates. I put an example to explain better.

https://codepen.io/stefanmalex/pen/Jjjjgmp

我有一个日期不允许的数组:

I have an array with disallowed days:

var disallowedDays = ['2019-10-17', '2019-10-23', '2019-10-26']

我添加了"selectAllow"回调:

I added the 'selectAllow' callback:

selectAllow: function (selectInfo) {
  if (disallowedDays.includes(selectInfo.startStr)) {
    return false;
  }
  return true;
}

如果您每天选择一天，这将非常有效，允许选择数组中所有天数少于不允许的天数.

This works perfectly if you select day per day, allows selection of all days less disallowed days in array.

问题:当您选择多天后，它允许选择不允许的天数. (例如:从"2019-10-15"到"2019-10-26"中选择).

PROBLEM: When you select multiple days, it allows select disallowed days. (Example: select from '2019-10-15' to '2019-10-26').

我需要的示例:如果选择从'2019-10-11'开始，则必须选择直到'2019-10-16'，因为不允许第二天('2019-10-17').

What I need, example:If the selection starts on '2019-10-11', it has to allows you to select until '2019-10-16' because next day ('2019-10-17') is disallowed.

我将示例放在Codepen上. https://codepen.io/stefanmalex/pen/Jjjjgmp

I let the example on codepen. https://codepen.io/stefanmalex/pen/Jjjjgmp

推荐答案

ADyson正确识别了它.程序逻辑需要更改.在selectAllow中，您正在使用startStr检查数组，因此基本上它将仅检查选择的开始日期，而不检查整个选择的开始日期.因此，如果您尝试选择14 oct到18 oct，则需要检查/比较此范围内的不允许日期.因此，需要遍历disallowedDays数组以检查尝试的选择中的每个日期，例如以下循环:

ADyson has recognized it correctly.The program logic needs to be changed.In the selectAllow you were checking the array with startStr, so basically it will be checking with start date of selection only, not the whole selection.So, if you tried to select 14 oct to 18 oct, you needed to check / compare the disallowed dates with in this range.So, it is needed to loop through the disallowedDays array to check each date within the tried selection, like the following loop:

for(var i=0;i<disallowedDays.length;i++)   {
    var dd = new Date(disallowedDays[i]);
    if(dd.getTime() >= startDate.getTime() && dd.getTime() <= endDate.getTime()){
        return true;
    }
  }

按照此逻辑，在此处检查您可能期望的解决方案

Following this logic, check here the solution you might be expecting

这篇关于如果在selectAllow回调中不允许使用FullCalendar禁用选择日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！