Fullcalendar - 可选择的限制为一天答案

【问题标题】：Fullcalendar - limit selectable to a single dayFullcalendar - 可选择的限制为一天
【发布时间】：2011-08-15 23:23:25
【问题描述】：

默认情况下，如果您启用“可选”属性，它将允许您单击并拖动并选择几天。我只想让用户选择一天，而不是拖过多个。有没有办法启用“可选”，但禁用随之而来的拖动功能？

【问题讨论】：

标签： fullcalendar

【解决方案1】：

如果您想在日程周视图中将突出显示限制为一天，您可以使用以下方法：

  selectConstraint:{
      start: '00:01', 
      end: '23:59', 
    },

如果你想限制你可以使用的事件

eventConstraint:{
      start: '00:00', 
      end: '24:00', 
    },

【讨论】：

你能举个例子，它只适用于周视图而不适用于月视图吗？
@saurabhgoyal795 在日历选项中将“defaultView”设置为“agendaWeek”，您只会看到一周
这对我不起作用，我现在无法选择任何日期。 selectable: true 已设置

【解决方案2】：

在选择回调中，添加以下内容即可： (fullcalendar 2 使用 moment.js)

if (start.add('days', 1).date() != end.date() )
  $scope.eventCal.fullCalendar('unselect');

资源：

http://arshaw.com/fullcalendar/docs/selection/select_callback/ http://arshaw.com/fullcalendar/docs/selection/unselect_method/

【讨论】：

【解决方案3】：

您可以通过将 fullcalendar 的 'select' 方法传递给 dayClick 事件侦听器来选择单个日期或时间：

$('#myCalendar').fullcalendar({
    dayClick: function(date,jsEvent,view) {
        $('#myCalendar').fullcalendar('select', date);
    }
});

请注意，您还需要在下一次回调（或 dayClick）时触发“取消选择”方法。

【讨论】：

当您还设置selectable: false时，这非常有用。
我不需要使用取消选择。也许他们改变了什么？

【解决方案4】：

为什么不使用selectAllow？

首先将start 和end 时间转换为秒。将其与一天中的秒数进行比较。

不使用 Moment.js 的工作解决方案：

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

【讨论】：

+1，即使你在某一天的上午 11 点开始，你仍然可以选择第二天直到上午 10 点，因为总时间将少于 24 小时，所以这种方法并不能真正解决OP 需要。

【解决方案5】：

简单地说：

selectAllow: function (selectInfo) {
    return selectInfo.end.diff(selectInfo.start, 'days') == 1;
}

【讨论】：

【解决方案6】：

此配置设置在 FullCalendar v5 上适用于我：

selectAllow: function(selectionInfo) {
    let startDate = selectionInfo.start;
    let endDate = selectionInfo.end;
    endDate.setSeconds(endDate.getSeconds() - 1);  // allow full day selection
    if (startDate.getDate() === endDate.getDate()) {
        return true;
    } else {
        return false;
    }
}

【讨论】：

【解决方案7】：

对我来说，使用这样的 selectAllow 选项很有效

selectAllow: function(selectionInfo) {
        // Don't allow creation of events over more than 1 day
        return moment(selectionInfo.start).utcOffset(false).isSame(moment(selectionInfo.end).subtract(1, 'second').utcOffset(false), 'day');
    },

我使用 utcOffset(false) 是因为无论出于何种原因，没有它它就不能可靠地工作，我使用了 subtract(1, 'second') 因为结束日期是包含在内的，所以没有它你不能选择结束那天

【讨论】：

【解决方案8】：

只有当用户选择一天时才会执行

// ...
select: function(start, end){
    if(moment(start._d).add(1, 'days').format('YYYY-MM-DD')==moment(end._d).format('YYYY-MM-DD')){
            //  just select one day
    }
},
// ...

【讨论】：

【解决方案9】：

我可以使用validRange：

https://fullcalendar.io/docs/validRange

【讨论】：

【解决方案10】：

暂时不行：不修改源无法自定义可选天数范围。

【讨论】：

有什么改变...意思是增加了只选择一天的功能？