在不重新加载页面的情况下从数据库刷新Laravel整日历事件
我一直在为我是实习生的公司设计一个预订系统，而且我已经把一切都做好了。唯一的问题是，我必须刷新/重新加载整个页面才能更新对事件所做的更改，我正在使用以下函数进行此操作：
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");
});
}
},当我console.log我的存储数据时，没有数据丢失/空：
description: "jan" end: "2018-10-15 11:30:00" start: "2018-10-15 10:30:00" title: "Beamer"因此，要问这个问题:我需要一个函数来刷新/重新加载日历中的事件，或者日历本身。
非常感谢，提前！
回答 2
Stack Overflow用户
发布于 2018-10-19 09:45:23
不清楚您在哪里调用"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。
您将注意到，我简化了start_time和end_time变量的定义--您不需要将它们变成momentJS对象，因为当fullCalendar提供给您时，它们已经是momentJS对象了。
Stack Overflow用户
发布于 2018-10-19 10:15:01
要在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);不会在更新之前等待事件的创建。
https://stackoverflow.com/questions/52889433
复制相似问题
腾讯云开发者
