FullCalendar事件ID -如何在Laravel中删除事件?

Question

所以，我正在制作一个日历应用程序，我正在使用Laravel和FullCalendar。

我希望能够删除一个事件-一旦我在日历中单击事件，一个模态弹出显示与删除按钮。为了删除事件，我必须知道它的ID，但是我无法得到。

我可以通过JS选择器获得它并将其显示为文本，但我不知道如何将其作为PHP变量，以便我可以在表单的动作参数中使用它。我这样做的原因是:如果我得到所有事件和foreach;他们进入了"事件"。我的源代码，当日历渲染将是一团乱，充满了事件和他们的细节。通过使用这种方法，我发现事件没有显示在源中，并且页面呈现得更快(但我可能搞错了)。

我从数据库中显示事件的方式如下:

EventsController

public function getEvents() 
{
return Event::where('event_date', '>', '2022-01-01') 
->join('hospitals', 'events.hospital_id', '=', 'hospitals.hospital_id')
->select('hospitals.hospital_color', 'hospitals.hospital_max_people', 'event_id', 'event_content', 'event_date', 'user_id')
->get()
->map(fn ($events) => [
'id' => $events->event_id,
'title' => $events->event_content,
'start' => $events->event_date,
'allDay' => true,
'editable' => false,
'backgroundColor' => $events->hospital_color,
'borderColor' => $events->hospital_color,
'hospital_max_people' => $events->hospital_max_people,
'volunteer' => User::find($events->user_id)->first_name .' '. User::find($events->user_id)->last_name
]);
}

Events刀片模板- FullCalendar设置:

<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
editable: false,
droppable: true,
selectable: true,
initialView: 'dayGridWeek',
views: {
dayGridWeek: {
type: 'dayGridWeek',
duration: { weeks: 2 },
buttonText: '4 day'
}
},
header: {
left: 'prev,next today',
center: 'title',
right: 'month,listMonth'
},
themeSystem: 'bootstrap5',
locale: 'en',
firstDay: '1',
contentHeight: 500,
height: 700,
expandRows: true,
events: 'getEvents',
eventClick: function(calendar, jsEvent, view) {
$('#eventDetail').modal("show");
$('#id').html(calendar.event.id);
$('#title').html(calendar.event.title);
$('#start').html(moment(calendar.event.start).format('DD.MM.YYYY'));
$('#volunteer').html(calendar.event.extendedProps.volunteer);
}
});
calendar.render();
});
</script>

Events blade template for show modal:

<div class="modal fade" id="eventDetail" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="bar" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Event details</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Start: <p id="start"></p>
Volunteer: <p id="volunteer"></p>
Title: <p id="title"></p>
</div>
<div class="modal-footer">
<form method="POST" action="{{ route('calendar.destroy') }}" class="needs-validation" novalidate=""></p>
@csrf
@method('DELETE')
<div class="form-group">
<x-button tabindex="3">
{{ __('Delete event') }}
</x-button>
</div>
</form>
</div>
</div>
</div>
</div>

Answer 1

我用了另一种方法;只是想张贴答案-我添加了一个隐藏的输入字段:<input type="hidden" name="id" id="id" value="">和值填写时，一个模态打开添加到原来的id选择器:$('#id').html(calendar.event.id).attr('value', calendar.event.id);我还必须更改我的删除路由:Route::DELETE('calendar/destroy/{event_id}'

就是这样。无论如何，谢谢你的帮助