javascript - FullCalendar:在模式弹出窗口上显示 ajax 调用事件

Question

我正在创建一个日程安排系统，我想使用 fullCalendar 显示每个用户的日程安排。我需要在引导模式中显示日历，并通过 AJAX 调用用事件填充日历。

我的问题是，当我单击按钮显示模式时，事件未显示在日历中。

我使用 Laravel 作为后端，这是从数据库检索时间表的代码

public function getTeacherScheduleAJAX($id){
    $schedule = DB::table('schedules AS s')
                ->select('s.lesson_name AS title','s.time_start AS start','s.time_end AS end')
                ->where('s.teacher',$id)
                ->get();
    return response()->json([
        'teacher' => $schedule
    ]);
}

这是我通过 AJAX 调用实现的方法

$('.btn-calendar').click(function() {
    $.ajax({
        url : '/teacher-schedule/'+$(this).data('teacherid'),
        type: 'GET',
        success: function(response){
            $('.calendar').fullCalendar('renderEvent', response.teacher, true);
            $('#scheduleModal').modal('show');              
        },
        error: function(err){
            console.log(err)
        }
    })
});

我在页面加载时初始化了它

$('.calendar').fullCalendar({
    header : {
        left:   'prev,next today',
        center: 'title',
        right:  'month,agendaWeek,agendaDay'
    },
    defaultView : 'agendaWeek',
    allDaySlot : false,
    eventOverlap: false
});

我从后端收到回复，只是它没有显示在日历中。

查询的响应

{
"teacher": [
    {
        "title": "English Lesson Schedule",
        "start": "2017-09-08 10:00:00",
        "end": "2017-09-08 12:00:00"
    },
    {
        "title": "English Lesson Schedule",
        "start": "2017-09-13 07:00:00",
        "end": "2017-09-13 09:00:00"
    }
  ]
}

Answer 1

要呈现多个事件，请使用

$('.calendar').fullCalendar('renderEvents', response.teacher, true); 

而不是

$('.calendar').fullCalendar('renderEvent', response.teacher, true); 

renderEvent 用于单个事件。