我正在使用 fullcalendar创建一个日历，我的用户可以在其中指出他的职责。我已经设置了日历，因此所有 DaySlots 都可用。它们在日历上显示正确，但我无法选择它们。在选择回调中有什么特别需要指定的吗？

是否也可以设置 fullcalendar，以便当用户选择 allDaySlot 时，与该日期相关的整行都显示为选中状态？

$(document).ready(function() {

  // page is now ready, initialize the calendar...
  var array_dispo = [];


  $('#calendar').fullCalendar({
    defaultView:  'agendaWeek',
    lang:         "fr",
    header:       false,
    timezone:     'local',
    minTime:      "08:00:00",
    columnFormat: 'dddd',
    selectHelper: true,
    selectable:   true,
    allDaySlot: true,

    select: function(start, end, allDay) {

      var eventData = {
        // allDay: allDay,
        start: start,
        end: end,
        block:  true,
        editable: true,
        backgroundColor: "#469278"
      };

      var mEnd = $.fullCalendar.moment(end);
      var mStart = $.fullCalendar.moment(start);
      if (mEnd.isAfter(mStart, 'day')) {
          $('#calendar').fullCalendar('unselect');
      } else {
      $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
      console.log(eventData);
       var array_all_events = [];
       var all_events = $('#calendar').fullCalendar('clientEvents');
       $.each(all_events, function(index, value) {
           var day         = moment(value.start["_d"]).format('dddd');
           var start_time  = moment(value.start["_d"]).format("HH:mm");
           var end_time    = moment(value.end["_d"]).format("HH:mm");
           var slot        = {
              day: day,
              start_time: start_time,
              end_time: end_time,
            };
          array_all_events.push(slot);
          $("#dispo_array").val(JSON.stringify(array_all_events));
      });
      $('#calendar').fullCalendar('unselect');
    }
    },

    eventClick: function(event, element) {
      if(confirm('Voulez-vous supprimer cette dispo?')) {

        $('#calendar').fullCalendar('removeEvents', event._id);
        var array_all_events = [];
        var all_events = $('#calendar').fullCalendar('clientEvents');
        // console.log(all_events);
        $.each(all_events, function(index, value) {
          // console.log(value.start["_d"]);
          // console.log(index);
           var day         = moment(value.start["_d"]).format('dddd');
           var start_time  = moment(value.start["_d"]).format("HH:mm");
           var end_time    = moment(value.end["_d"]).format("HH:mm");
             // var id          = value.unique_id["_i"];
             var slot        = {
                day: day,
                start_time: start_time,
                end_time: end_time,
              };
            array_all_events.push(slot);
            console.log(array_all_events.length);
            if (array_all_events.length == 0) {
              $("#dispo_array").val("");
            }
            else {
              $("#dispo_array").val(JSON.stringify(array_all_events));
            }
        });



      }
    },
    eventDragStop: function( event, jsEvent, ui, view ) {
      // console.log(event);
      var all_events = $('#calendar').fullCalendar('clientEvents');

    },

    selectOverlap: function(event) {
      return ! event.block;
    }
  });
});

最佳答案

我做了一个 jsfiddle here

这里是这个片段:

...
 var mEnd = $.fullCalendar.moment(end);
      var mStart = $.fullCalendar.moment(start);
      if (mEnd.isAfter(mStart, 'day')) {
          $('#calendar').fullCalendar('unselect');
      } else {

...

导致立即取消选择全天事件，因为条件 mEnd > mStart 对于这些事件始终为真。

如果你改成

...

      var mEnd = $.fullCalendar.moment(end);
      var mStart = $.fullCalendar.moment(start);

      // just uncommented this:
      /*if (mEnd.isAfter(mStart, 'day')) {
          $('#calendar').fullCalendar('unselect');
      } else*/ 

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

全天事件得到正确呈现。 title 是强制性的，所以我添加了这个。

另一种方法是将默认事件持续时间设置为 0 但我还没有测试过，请参见此处 http://fullcalendar.io/docs/event_data/defaultAllDayEventDuration/

编辑

看看这个 fiddle :http://jsfiddle.net/xaLzo7g6/3/

多件事:

• 时刻事件是可变的，因此在修改它们之前需要克隆
• 时区设置为“本地”，而时刻是 UTC，这导致所有事件都将 2 小时转移到第二天。将其设置为“UTC”可将重叠固定在第二天
• 完全取消选择的逻辑，因为它没有必要

从我的 Angular 来看，它现在的行为符合预期:点击一个全天时段或选择任何时间范围总是“选择”一整天并阻止它

关于javascript - 无法使用 fullcalendar 选择 all_day_slots，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32993326/