Fullcalendar,阻止用户选择多日活动

Question

在我的fullcalendar http://fullcalendar.io/ 我想阻止用户能够在多天内创建一个事件

$('#calendar').fullCalendar({
    defaultView:  'agendaWeek',
    lang:         "fr",
    header:       false,
    timezone:     'local',
    minTime:      "08:00:00",
    columnFormat: 'dddd',
    selectHelper: true,
    selectable:   true,
    select: function(start, end, id, allDay) {
      var eventData = {
        start: start,
        end: end,
        id: 1,
        block:  true,
        editable: true,
        backgroundColor: "#469278"
      };

      // console.log(moment(eventData.start["_d"]).format("dddd"));
      // console.log(moment(eventData.end["_d"]).format("dddd"));


      $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true

      // console.log(eventData);
      if (moment(eventData.start["_d"]).format("dddd") != moment(eventData.end["_d"]).format("dddd")) {
        $('#calendar').fullCalendar('unselect');
      };
      var day         = moment(eventData.start["_d"]).format("dddd");
      var start_time  = moment(eventData.start["_d"]).format("HH:mm");
      var end_time    = moment(eventData.end["_d"]).format("HH:mm");
      var id          = moment(eventData.end["_id"]);

      var slot        = {
        day: day,
        start_time: start_time,
        end_time: end_time
      };
      array_dispo.push(slot);

      $("#dispo_array").val(JSON.stringify(array_dispo));
      $('#calendar').fullCalendar('unselect');
    },
  });
});

当用户选择的开始日期与其事件的结束日期不同时,我尝试使用文档http://fullcalendar.io/docs/selection/unselect_method/中的取消选择方法,如下所示:

  if (moment(eventData.start["_d"]).format("dddd") != moment(eventData.end["_d"]).format("dddd")) {
            $('#calendar').fullCalendar('unselect');
          };

但遗憾的是,此代码不会自动取消选择当前选择...

Answer 1

您可以检查select方法,然后决定是否要参加render活动.

我还Moment.js用来计算日期和持续时间,这个库包含在FullCalendar中(http://fullcalendar.io/docs/utilities/Moment/)

所以我玩了一下,想出了这个:

select: function (start, end) {
    var mEnd = $.fullCalendar.moment(end);
    var mStart = $.fullCalendar.moment(start);

    if (mEnd.isAfter(mStart, 'day')) {
        $('#calendar').fullCalendar('unselect');
    } else {
        $('#calendar').fullCalendar('renderEvent', {
            start: mStart,
            end: mEnd,
            allDay: false
        },
        true // stick the event
        );
        $('#calendar').fullCalendar('unselect');
    }
}

如果你想看到它在行动,这里是jsfiddle:这里