javascript - FullCalendar.js 如何将月 View 上的日期选择限制为一天

Question

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

我想将完整日历小部件上的可选日期范围限制为仅限一天(默认设置是拖动多个日期，或单击单个日期)。我想有效地禁用用于选择多个日期的拖动功能，方法是:

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

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

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

我的代码:

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