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 !!},, где $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");
                });
            }
        },

Когда я сохраняю данные моего магазина на консоль, данные не пропадают / null:

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

Итак, чтобы перейти к вопросу: мне нуженфункция обновления / перезагрузки событий в календаре или в самом календаре.
Огромное спасибо заранее!

Answer 1

Для повторного получения событий в 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); нене дождитесь создания события, прежде чем оно выполнит обновление

Answer 2

Непонятно, где вы вызываете метод "updateEvent", так как вы не показывали его в контексте в своем коде календаря.Но updateEvent только обновляет существующее событие.Чтобы создать новое событие (это то, что вы делаете, когда используете обратный вызов select), вам нужно вызвать renderEvent .Вам нужно позвонить после того, как пользователь выбрал область, и вы успешно сохранили эту информацию на сервере.Другими словами, он должен заменить ваш location.reload вызов.

Чтобы это работало, вам также необходимо определить переменную event для передачи в fullCalendar.

Это должно работать дляyou:

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, потому что они уже являются объектами momentJS, когдаfullCalendar дает их вам.