CODEWITHSUNDEEP
javascriptjqueryajaxfullcalendar
Kim Carlo
Kim Carlo

Reputation: 1223

FullCalendar: display events on ajax call on modal pop-up

I am creating a scheduling system and I want to show each users' schedule using fullCalendar. I need to show the calendar in bootstrap modal and populate the calendar with events via AJAX call.

My problem is when I click the button to show the modal, the events are not showing in the calendar.

enter image description here

I am using Laravel for my backend and here's the code to retrieve the schedule from the database

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

here's how I do it via AJAX call

$('.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)
        }
    })
});

I have this initialized on page load

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

I am getting responses from my backend, it's just it is not showing in the calendar.

response from query

{
"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"
    }
  ]
}

Upvotes: 0

Views: 1312

Answers (1)

Rakib
Rakib

Reputation: 643

To render multiple events use 

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

instead of 

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

renderEvent is for single event.

Upvotes: 1

Related Questions