FullCalendar.js 如何在月视图中将日期 select 限制为一天

Question

我在我的网页上使用 FullCalendar.js 作为日期选择器。

我想将我的完整日历小部件上的可选日期范围限制为 one day only（默认为拖动多个日期，或单击单个日期）。我想通过以下方式有效地禁用选择多个日期的拖动功能：

禁用本机拖动事件（可能不正确）
限制可选日期的日期范围为一天（感觉比较合理）

This question 提供了有关如何使用 周视图 将日期选择限制为一天的答案，方法是在selectConstraint 选项。但是，相同的解决方案不适用于 月视图 。

如何将月视图的日期选择范围限制为一天？

我的代码：

var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
    selectable: true,
    header: {
      left: 'prev,next ',
      center: 'title',
      right: ''
    },
    validRange: {
      start: today
    },
    selectConstraint:{
      start: '00:01', 
      end: '23:59', 
    },
    dateClick: function(info) {
      custom_date = true;
      $("#start_date").val(info.dateStr);
      $("#end_date").val(info.dateStr);
    }
});

Answer 1

原来你可以使用 selectAllow 函数。

首先使用getTime() / 1000将日期字符串转换为秒数。

将开始时间和结束时间与一天中的秒数进行比较86400。如果小于或等于该数字，则仅选择了 1 天。

工作代码：

selectAllow: function (e) {
   if (e.end.getTime() / 1000 - e.start.getTime() / 1000 <= 86400) {
       return true;
   }
}

FullCalendar.js 如何在月视图中将日期 select 限制为一天

FullCalendar.js how to restrict date select to one day on Month View

javascript

jquery

fullcalendar