Question

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

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

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

＆＃13;

$(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);
    },
  });

});

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

Answer 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

Answer 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>

拖动开始时向fullcalendar添加更多事件

2 个答案: