Добавление дополнительных событий в fullcalendar при запуске перетаскивания

Мне нужно, чтобы пользователи могли перемещать некоторые события вокруг моего fullcalendar. И я хочу перейти на сервер и выбрать время работы контрагентов и отобразить их в качестве фоновых событий в календаре, когда происходит перетаскивание. Однако, когда я вызываю .fullcalendar('renderEvents', [...]), в то время как перетаскивание происходит, механизм перетаскивания в fullcalendar прерывается и останавливается.

Есть ли способ либо добавить события, не нарушая перетаскивание, а другой способ выделить время занятости, которое нужно получить с помощью ajax-вызова?

Пример здесь: https://jsbin.com/qikiganelu/1/edit?js,output. Попробуйте перетащить "Встреча с Бобом".

$(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 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>

Ответ 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 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>