FullCalendar

Question

我想知道是否有替代方法 select 月视图中的一系列日期，无需单击 + 拖动？

我的想法是：

第一。单击：设置开始日期。
在 mousemove 上，日期范围突出显示（直到鼠标指针悬停的日期）。
第二。点击：设置结束日期。

我应该在 dayClick 回调中手动触发 dragstart 吗？我无法在文档中找到一种方法来挂钩那里的事件。我缺少什么？

我想添加一些相关但不同的行为，是 "highlight" 日期范围（在 fiddle 中是 4 天），从 selected 开始日期。我试过通过 dayClick 回调调用 select 方法，但是如果我以编程方式调用 select 方法，只有开始和结束日期突出显示（我也想突出显示中间的那些).

（参见 Fiddle：https://jsfiddle.net/xeezawaki/qrjpv7w5/）

Answer 1

执行类似下面的操作将为您提供一个起点，单击一个日期，然后单击另一个日期以突出显示第一个、最后一个以及其间的所有单元格。鼠标悬停在 viewRender 中设置，以确保您要附加的元素位于 DOM 中。

查看文档，我唯一能看到的 dragstart 是 eventDragStart，这是没有用的，因为此时您还没有事件。

var startDate, endDate

viewRender: function( view, element ) {
  $( ".fc-row .fc-bg .fc-day" ).mouseover(function() {
    if (startDate != null && endDate == null){
      var hoverDate = moment($(this).data("date"));
      bookingCalendarSelector.fullCalendar('select', startDate, hoverDate.add(1, 'd'));
    }
  });
},
dayClick: function(date, jsEvent, view) {
  if (startDate == null) {
      startDate = date;
      bookingCalendarSelector.fullCalendar('select', startDate);
  } else if (endDate == null) {
      endDate = date;
      bookingCalendarSelector.fullCalendar('select', startDate, endDate.add(1, 'd'));
  } else {
      startDate = endDate = null;
      bookingCalendarSelector.fullCalendar('unselect');
  }
}

https://jsfiddle.net/ally_murray/2b7s3dj1/

FullCalendar - 月视图：选择日期范围的不同行为（无点击和拖动）

FullCalendar - Month view : Different behavior for selecting date ranges (no click and drag)

range

selection

drag