FullCalendar render events dynamic

Question

I am working with Bootstarp v4.0 with FullCalendar.io I have created FullCalendar as below

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar, events = localStorage.reservedRooms ? JSON.parse(localStorage.reservedRooms) : []
    calendar = new FullCalendar.Calendar(calendarEl, {
        plugins: ['bootstrap', 'interaction', 'dayGrid', 'timeGrid', 'list'],
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
        },
        //defaultDate: '2019-04-12',
        weekNumbers: true,
        navLinks: true, // can click day/week names to navigate views
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        events: events
    });
    calendar.render();
});

Where I am putting events from localStorage

I want to load fullcalendar from jQuery button click but I cannot do it. I also tried to create separate HTML file and try to load that HTML file in div by $.get but it never render. I also tried to insert events by calendar.addEventSource( source ) but that too not works.

My jQuery button click

$(document).ready(function() {
    $('#checkAvailability').click(function(e) {
        $.get(
            '../Shared Documents/html/meetingRoom/meetingRoomSearchResult.html',
            function(data) {
                $('#dvResult').html(data)
            })
    })
})

Please help me load calendar dynamically.

Answer 1

Alter your ajax to return only the events( as json), initialize the calendar when the ajax was successful

var calendar;
$('#checkAvailability').click(function(e) {
$.get(
    '../Shared Documents/html/meetingRoom/meetingRoomSearchResult.html',
function(events) {
    if(calendar) calendar.destroy();
    var calendarEl = document.getElementById('calendar');
    calendar = new FullCalendar.Calendar(calendarEl, {
          plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'timeGrid', 'list' ],
          header: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
          },
          //defaultDate: '2019-04-12',
          weekNumbers: true,
          navLinks: true, // can click day/week names to navigate views
          editable: true,
          eventLimit: true, // allow "more" link when too many events
          events: events
        });
        calendar.render();
   });
})

add the div to your main page

  <div id='calendar'></div>