Laravel Fullcalendar从数据库刷新事件，而无需重新加载页面

Question

我一直在为我所在的实习公司的订票系统编程，现在一切正常。 唯一的问题是我必须刷新/重新加载整个页面以更新对事件所做的更改，我使用以下功能来做到这一点：
location.reload(false);

我对日历的调用：

<div class="panel-body body">
   <p>You can create a reservation by dragging in the calendar.</p>
   <p style="margin-top: -20px;">You can edit it by dragging the reservation. And deleting it by clicking on it.</p>
   <div id='calendar' class="calendar"></div>
</div>

我使用此功能加载事件：
events: {!! $bookings !!}, events: {!! $bookings !!},其中$bookings是：

$columns = [
        'id AS id',
        'start_time AS start',
        'end_time AS end',
        'description AS description',
        'title AS title',
        'user_id AS user_id',
    ];
    $book = Bookings::where('assetId', $assetId);
    $allBookings = $book->get($columns);
    $bookings = $allBookings->toJson();

这是我在日历中创建事件的功能（从ADyson的答案更新）：

select: function (start, end, jsEvent, view) {
            var title = "{{$assets}}";
            var description = prompt();

            if (title && description) {
                var start_time = moment(start, 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss');
                var end_time = moment(end, 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss');
                var event = {
                    title: title,
                    description: description,
                    start: start_time,
                    end: end_time
                };
                console.log(event);
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: "{{url('book/' . $assetId . '/store')}}", //placeholder URL for test
                    type: "POST",
                    data: event,
                    dataType: "json"
                }).done(function(response) { //successful response from the server
                    $('#calendar').fullCalendar('renderEvent', event, true); //add the newly created event into fullCalendar
                    $('#calendar').fullCalendar("unselect");
                });
            }
        },

当我console.log我的商店数据时，没有数据丢失/为空：

description: "jan" end: "2018-10-15 11:30:00" start: "2018-10-15 10:30:00" title: "Beamer"

所以要问一个问题：我需要一个函数来刷新/重新加载日历或日历本身中的事件。
提前非常感谢！

Answer 1

目前尚不清楚您在何处调用“ updateEvent”方法，因为尚未在日历代码的上下文中显示该方法。 但是updateEvent仅更新现有事件。 要创建一个新事件（使用select回调时要做的事情），您需要调用renderEvent 。 用户选择区域后，需要将其调用，然后将该信息成功保存到服务器。 换句话说，它应该替换您的location.reload调用。

为此，您还需要定义一个event变量以传递给fullCalendar。

这应该为您工作：

select: function (start, end, jsEvent, view) {
  var title = '{{$assets}}';
  var description = prompt();

  if (title && description) {
    var start_time = start.format('YYYY-MM-DD HH:mm:ss');
    var end_time = end.format('YYYY-MM-DD HH:mm:ss');
    var event = {
      title: title,
      description: description,
      start: start_time,
      end: end_time
    };
    console.log("{{$assets}}");

    $.ajax({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      url: "{{url('book/' . $assetId . '/store')}}",
      type: "POST",
      data: event,
      dataType: "json"
    }).done(function(response) { //successful response from the server
      $('#calendar').fullCalendar('renderEvent', event, true); //add the newly created event into fullCalendar
      $('#calendar').fullCalendar("unselect"); //clear the selection
    });
  }
},

请注意，我已经更改了事件对象的结构，以使start_time和end_time属性现在分别为start和end ，以便使同一对象与fullCalendar一起使用。 您将需要更改服务器代码以在传入数据中查找这些属性名称，而不是start_time和end_time。 如果您不能这样做，那么您将不得不使用一个单独的对象将数据发送到服务器-在$ .ajax（）调用中，您必须编写：

data: {
  title: title,
  description: description,
  start_time: start_time,
  end_time: end_time
}

而不是data: event 。

PS：您会注意到，我简化了start_time和end_time变量的定义-您不需要将它们变成momentJS对象，因为当fullCalendar将它们提供给您时，它们已经是momentJS对象。

Answer 2

要重新获取FullCalendar中的事件，只需调用以下命令即可：

$('#calendar').fullCalendar('refetchEvents');

请参阅： https ： //fullcalendar.io/docs/refetchEvents

虽然，我只会在收到来自ajax调用的响应时重新获取事件，因此您的调用的修改后的版本将如下所示：

...
$.ajax({
     headers: {
     'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
     },
     url: "{{url('book/' . $assetId . '/store')}}",
     type: "POST",
     data: {
         title: title,
         description: description,
         start_time: start_time,
         end_time: end_time
     },
     dataType: "json",
 }).done((function(response){
     $('#calendar').fullCalendar('refetchEvents');
 });
 ...

我什至怀疑这就是为什么您的日历没有更新的原因，因为（可能是） $('#calendar').fullCalendar('updateEvent', event); 在更新之前不等待事件创建