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); 在更新之前不等待事件創建