Laravel 8从DB获取数据并显示在完整的日历JS插件中

k7fdbhmy  于 2022-12-24  发布在  其他
关注(0)|答案(1)|浏览(126)
    • 路线**
Route::get('getEvents', [App\Http\Controllers\CalenderController::class, 'index'])->name('event.getEvents');
    • 主计长**
public function index(Request $request)
{
    $getEvents = Appointment::select('patient_id', 'start_time', 'end_time')->get();
    $events = [];

    foreach ($getEvents as $values) {
        $start_time_format = $values->start_time;
        $end_time_format = $values->end_time;
        $event = [];
        $event['title'] = $values->patient_id;
        $event['start'] = $start_time_format;
        $event['end'] = $end_time_format;
        $events[] = $event;
        Debugbar::info($events);
    }

    return $events;
}
    • 完整日历脚本**
var calendar = new FullCalendar.Calendar(calendarEl, {
            editable: true,
            droppable: true,
            selectable: true,
            initialView: getInitialView(),
            themeSystem: 'bootstrap',
            // responsive
            windowResize: function(view) {
                var newView = getInitialView();
                calendar.changeView(newView);
            },
            eventDidMount: function(info) {
                if (info.event.extendedProps.status === 'done') {

                    // Change background color of row
                    info.el.style.backgroundColor = 'red';

                    // Change color of dot marker
                    var dotEl = info.el.getElementsByClassName('fc-event-dot')[0];
                    if (dotEl) {
                        dotEl.style.backgroundColor = 'white';
                    }
                }
            },
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
            },

            eventClick: function(info) {
                addEvent.modal('show');
                formEvent[0].reset();
                selectedEvent = info.event;
                $("#event-title").val(selectedEvent.title);
                $('#event-category').val(selectedEvent.classNames[0]);
                newEventData = null;
                modalTitle.text('Edit Event');
                newEventData = null;
            },
            dateClick: function(info) {
                addNewEvent(info);
            },
            editable: true,
            events: 'getEvents',
            displayEventTime: true,
            eventRender: function(event, element, view) {
                if (event.allDay === 'true') {
                    event.allDay = true;
                } else {
                    event.allDay = false;
                }
            },
        });
        calendar.render();

我已经在这个脚本中正确地指定了路由events: 'getEvents',,您可以在上面脚本的结尾部分看到。
现在前端的结果是:

数据库中没有显示任何数据。我收到一个控制台错误,如下所示:Failed to load resource: the server responded with a status of 404 (Not Found): http://127.0.0.1:8000/getEvents?start=2021-09-26T00%3A00%3A00%2B05%3A30&end=2021-11-07T00%3A00%3A00%2B05%3A30
正如您所看到的,在获得的URL中有一些不需要的字符。
调试在这里不起作用,我不知道为什么..当我添加dd($data)或其他东西时,前端中没有调试器部分。
请帮我解决这件事。
谢谢你。

gmol1639

gmol16391#

它工作了。我所做的一切都是正确的。问题出在我的路由上,由于一个函数将无效路由重定向到404页面,我到控制器的路由不起作用。
当我把404路线的底部所有其他路线,它是工作.

相关问题