拖动开始时向全日历添加更多事件答案

【问题标题】：Add more events to fullcalendar when dragging starts拖动开始时向全日历添加更多事件
【发布时间】：2017-09-25 19:37:20
【问题描述】：

我需要能够让用户在我的完整日历上移动一些事件。我想去服务器并获取交易对手的忙碌时间，并在拖动进行时将它们显示为日历上的背景事件。但是，当我在拖动过程中调用 .fullcalendar('renderEvents', [...]) 时，fullcalendar 中的拖动机制会中断并停止。

有没有办法在不中断拖动的情况下添加事件或以其他方式突出显示必须通过 ajax 调用检索的繁忙时间？

示例在这里：https://jsbin.com/qikiganelu/1/edit?js,output。尝试拖动“与 Bob 会面”。

$(function() { // document ready
  
  $('#calendar').fullCalendar({
    header: {
      left: '',
      center: '',
      right: ''
    },
    defaultView: 'agenda',
    duration: {days: 2},
    allDaySlot: false,
    defaultDate: '2017-04-27',
    minTime: '9:00',
    maxTime: '17:00',
    events: [
      {
        title: 'Keynote',
        start: '2017-04-27T09:00',
        end: '2017-04-27T11:00',
        editable: false,
        color: "gray",
      },
      {
        title: 'Meeting with Bob',
        start: '2017-04-27T12:30',
        end: '2017-04-27T13:00',
        editable: true,
      },
    ],
    eventDragStart: function(event, jsEvent, ui, view){
      // fetch Bob's busy times and add them as background events
      var busyTimes = [
        {
          start: '2017-04-27T14:00',
          end: '2017-04-27T16:00',
          rendering: 'background',
        },
        {
          start: '2017-04-28T9:00',
          end: '2017-04-28T12:00',
          rendering: 'background',
        }
      ];
      $('#calendar').fullCalendar('renderEvents', busyTimes);
    },
  });

});

body {
  margin: 40px 10px;
  padding: 0;
  font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
  font-size: 14px;
}

#calendar {
  max-width: 900px;
  margin: 0 auto;
}

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='https://fullcalendar.io/js/fullcalendar-3.4.0/fullcalendar.css' rel='stylesheet' />
<link href='https://fullcalendar.io/js/fullcalendar-3.4.0/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js'></script>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://fullcalendar.io/js/fullcalendar-3.4.0/fullcalendar.js'></script>

<!-- the code from the JavaScript tab will go here -->


<!-- the code from the CSS tab will go here -->

</head>
<body>

	<div id='calendar'></div>

</body>
</html>

【问题讨论】：

标签： javascript jquery fullcalendar

【解决方案1】：

作为一种解决方法，尝试预加载所有背景事件，但通过 CSS 隐藏它们，直到发生拖动操作。例如：

// hide all background events by default
.fc-bgevent {
  display: none;
}

// redisplay once "show-background-events" class toggled on
.fc-bgevent.show-background-events {
  display: block;
}

通过切换.show-background-events 类来显示/隐藏背景事件，如下所示：

eventDragStart: function(event, jsEvent, ui, view){
  $(".fc-bgevent").addClass("show-background-events");
},
eventDragStop: function(event, jsEvent, ui, view){
  $(".fc-bgevent").removeClass("show-background-events");
}

例如：https://jsbin.com/vuvacisibu/1/edit?css,js,output

【讨论】：

我想到了这个选项，但要在我的情况下实现它，我需要预先为每个事件的交易对手预加载繁忙时间。并为每个创建单独的类。这肯定不是理想的方法，但它是一些东西。谢谢！

【解决方案2】：

我的错，我现在看到了问题。您的错误是您放置$('#calendar').fullCalendar('renderEvents', busyTimes); 的位置以及您编写数组的方式，为了确定，我还稍微更改了ISO8601 时间字符串。例如，您可以从时间字符串中删除秒数并写入 2017-04-27T12:35Z 而不是 2017-04-27T12:35:02Z

<script>
$(function() { // document ready

      $('#calendar').fullCalendar({
        header: {
          left: '',
          center: '',
          right: ''
        },
        defaultView: 'agenda',
        duration: {days: 2},
        allDaySlot: false,
        defaultDate: '2017-04-27',
        minTime: '9:00',
        maxTime: '17:00',
        events: [
          {
            title: 'Keynote',
            start: '2017-04-27T09:00',
            end: '2017-04-27T10:00',
            editable: false,
            color: "gray",
          },
          {
            title: 'Meeting with Bob',
            start: '2017-04-27T10:35:02Z',
            end: '2017-04-27T11:35:02Z',
            editable: true,
          },
        ],
        eventDragStart: function(event, jsEvent, ui, view){

        }
      });

       //this is the new place for the fetching and calling renderEvents
       // fetch Bob's busy times and add them as background   

        var busyTimes = [
            {title: 'Event One', start: '2017-04-27T12:35:02Z', end: '2017-04-27T13:35:02Z'},
            {title: 'Event Two', start: '2017-04-27T14:35:02Z', end: '2017-04-27T15:35:02Z'}

        ];               


          $('#calendar').fullCalendar('renderEvents', busyTimes);
    });



</script>

【讨论】：

renderEvent 和 renderEvents 的工作方式是向现有的事件添加更多事件，这正是我感兴趣的功能。在我的真实场景中，我正在调用 @987654327 @ 方法每当我需要清理这些“临时”事件并使用提供给events 属性的原始函数从服务器重新加载原始事件时。（在我的例子中，它是一个数组，而不是一个函数，但想法是一样的）。
你说得对，一开始我没有理解这个问题，但我现在编辑了我的答案，上面的脚本对我有用。
就像我在问题中所说的，我需要从 eventDragStart 处理程序中添加这些事件。图书馆也需要时间以这种格式就好了。
你是对的，对不起，实际上我尝试了很多让它工作但也没有成功，它一直在打破
感谢您的尝试。我也被卡住了。我最终使用了柯南的解决方法：预先加载和创建所有可能的繁忙时间。