Question

在我的完整日历中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：here

Answer 2

只需将以下选项添加到您的日历：

selectAllow: (selectInfo) => { return selectInfo.start.getDay() === selectInfo.end.getDay() },

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

2 个答案: