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

Question

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

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

1. 禁用原生拖动事件（可能不正确）
2. 将可选日期的日期范围限制为一天（这感觉更明智）

This question 回答了如何通过在selectConstraint 选项中指定start 和end 来使用周视图 将日期选择限制为一天。但是，同样的解决方案不适用于 月视图。

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

我的代码：

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。如果小于或等于该数字，则仅选择一天。

工作代码：

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