完整日历，防止用户选择多天事件

Fullcalendar, preventing user from selecting multiple day event

本文关键字：选择 事件 用户 日历      更新时间：2023-09-26

在我的完整日历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');
    },
  });
});

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

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

但不幸的是，这段代码不会自动取消当前选择…

您可以在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:

你可以这样做:

eventResize: function(eventResizeInfo) {
  console.log('eventResize is called');
  var event = eventResizeInfo.event;
  if (event.start.getDay() !== event.end.getDay()) {
    eventResizeInfo.revert();
  }
},

防止用户一次选择多个天数

selectAllow: function(selectedEvent) {
      let startDate = selectedEvent.start;
      let endDate = selectedEvent.end;
      endDate.setSeconds(endDate.getSeconds() - 1);
      if (startDate.getDate() === endDate.getDate()) {
        return true;
      } else {
        return false;
      }
    }

只需将以下选项添加到日历中:

selectAllow: (selectInfo) => { return selectInfo.start.getDay() === selectInfo.end.getDay() },
相关文章：