FullCalendar 事件 ID - 如何獲取它以刪除 Laravel 中的事件？

Question

所以，我正在開發一個日歷應用程序，為此我使用 Laravel 和 FullCalendar。

我希望能夠刪除一個事件 - 一旦我點擊日歷中的事件，就會出現一個帶有刪除按鈕的模式彈出窗口。 為了刪除事件，我必須知道它的 ID，但我無法獲取。

我可以通過 JS 選擇器獲取它並將其顯示為文本，但我不知道如何將它作為 PHP 變量獲取，以便我可以在表單的操作參數中使用它。 我這樣做的原因是：如果我獲取所有事件並將它們“foreach”到 FullCalendar 的“事件”數組中，我的日歷呈現時的源代碼將是一團糟，充滿事件及其詳細信息。 通過使用這種方法，我發現源代碼中沒有顯示事件並且頁面呈現得更快（但我可能弄錯了）。

我從數據庫中顯示事件的方式如下：

事件控制器

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
        ]);
    }

事件刀片模板 - 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>

用於顯示模態的事件刀片模板：

<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}'

就是這樣。 無論如何謝謝你的幫助