如何使用 ajax 加载 jquery 完整日历？

Question

我想使用 Ajax 加载完整日历。数据将从控制器传递为 json 格式。我不知道该怎么做请帮助。

我的控制器代码：

public function calenderHoliday(){

    $appointments = Holiday::all();
    $items = Holiday::all();
    if(request()->ajax())
    {

        $data = Holiday::all();
        return response()->json( $data);
    }


    return view('admin.pages.calender_test',compact('appointments','items'));
}

我的jquery代码

 $('#calendar').fullCalendar({
        events: function(start, end, timezone, callback) {
            $.ajax({
                url: config.routes.holiday_calender,
                type: "get",
                data: {
                    // our hypothetical feed requires UNIX timestamps
                    start: start.format(),
                    end: end.format()

                },
                success: function(doc) {
                    var events = [];
                    console.log(doc);
                    $(doc).find('event').each(function() {
                        events.push({
                            title: $(this).attr('title'),
                            start: $(this).attr('start') // will be parsed
                        });
                    });
                    callback(events);
                }
            });
        }
    });

我的路线：

Route::get('/test-calender', 'HolidayController@calenderHoliday')->name('calender.index');

json

请帮助我...日历显示。但是我的数据没有显示。

Answer 1

FullCalendar 将在需要新事件数据时调用此函数。当用户单击 prev/next 或切换视图时触发。

这个函数将被赋予start和end参数，它们是Moments表示日历需要事件的范围.

timezone 是描述日历当前时区的 string/boolean。它是 timezone 选项的精确值。

它也将被赋予回调函数，当自定义事件函数生成其事件时必须调用的函数。事件函数有责任确保使用 Event Objects.

的数组调用回调

下面的示例展示了如何使用事件函数从假设的 XML 提要中获取事件：

$('#calendar').fullCalendar({
    events: function(start, end, timezone, callback) {
        $.ajax({
            url: 'myxmlfeed.php',
            dataType: 'xml',
            data: {
                // our hypothetical feed requires UNIX timestamps
                start: start.unix(),
                end: end.unix()
            },
            success: function(doc) {
                var events = [];
                $(doc).find('event').each(function() {
                    events.push({
                        title: $(this).attr('title'),
                        start: $(this).attr('start') // will be parsed
                    });
                });
                callback(events);
            }
        });
    }
});

Source

我做了一些小改动：

$('#calendar').fullCalendar({
    events: function(start, end, timezone, callback) {
        jQuery.ajax({
            url: 'schedule.php/load',
            type: 'POST',
            dataType: 'json',
            data: {
                start: start.format(),
                end: end.format()
            },
            success: function(doc) {
                var events = [];
                if(!!doc.result){
                    $.map( doc.result, function( r ) {
                        events.push({
                            id: r.id,
                            title: r.title,
                            start: r.date_start,
                            end: r.date_end
                        });
                    });
                }
                callback(events);
            }
        });
    }
});

注意：开始和结束必须是 ISO 8601。另一个变化是使用格式而不是 unix（这让我更容易处理代码隐藏）

如何使用 ajax 加载 jquery 完整日历？

How to load jquery full calender using ajax?

ajax

jquery

fullcalendar

laravel