Managing multiple calendars on single page
<p>I went through a couple of similar questions on stackoverflow. But, I couldn't get much help from them. Here is my problem :</p>

<p>I need to have multiple calendar on single page. But, currently only the first rendered calendar works properly. For example, if I have three calendars with different ids :</p>

<pre>#calendarug1, #calendarug2, #calendarug3</pre>

<p>Assume that order of declaring them in html page is </p>

<ol>
<li><code>#calendarug3</code></li>
<li><code>#calendarug2</code></li>
<li><code>#calendarug1</code></li>
</ol>

<p>Then only on <code>#calendarug3</code> events like drag, drop and select work properly. On other calendars I am unable to create new events or drop new events. </p>

<p>Here is my code</p>

<h1>HTML</h1>

<pre><code>&lt;div class="container-fluid"&gt;

            &lt;div class="row"&gt;
                &lt;div class="col-lg-12 calendarbox"&gt;
                    &lt;div class="row well calendar"&gt;
                        &lt;h3 &gt;UG3 Timetable&lt;/h3&gt;
                        &lt;div id='calendarug3'&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;div class="row"&gt;
                &lt;div class="col-lg-12 calendarbox"&gt;
                    &lt;div class="row well calendar"&gt;
                        &lt;h3 &gt;UG2 Timetable&lt;/h3&gt;
                        &lt;div id='calendarug2'&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;div class="row"&gt;
                &lt;div class="col-lg-12 calendarbox"&gt;
                    &lt;div class="row well calendar"&gt;
                        &lt;h3 &gt;UG1 Timetable&lt;/h3&gt;
                        &lt;div id='calendarug1'&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;

        &lt;/div&gt;
</code></pre>

<h1>JS</h1>

<pre><code>$('#calendarug3').fullCalendar({
        // put your options and callbacks here
        header: { // Display nothing at the top
            left: '',
            center: '',
            right: ''
        },
        theme: true,
        //aspectRatio: 2.44,
        //eventSources: ['events.php'],
        height: 520, // Fix height
        columnFormat: 'dddd', // Display just full length of weekday, without dates
        defaultView: 'agendaWeek', // display week view
        hiddenDays: [0,], // hide Saturday and Sunday
        weekNumbers:  false, // don't show week numbers
        minTime: '8:30:00', // display from 16 to
        maxTime: '19:00:00', // 23
        slotDuration: '00:30:00', // 15 minutes for each row
        allDaySlot: false, // don't show "all day" at the top
        selectable: true,
        editable: true,
        defaultDate: '2016-10-10',
        droppable: true, // this allows things to be dropped onto the calendar
        selectHelper: true,
        select: function(start, end, jsEvent) {
            var title = prompt('Event Title:');
            var eventData;
            if (title) {
                eventData = {
                    title: title,
                    start: start,
                    end: end
                };
                $('#calendarug3').fullCalendar('renderEvent', eventData, true); // stick? = true
            }
            $('#calendarug3').fullCalendar('unselect');
        },
        //select: function(start, end, allDay) {
        // Code for creating new events.
        //     alert("Create new event at " + start);
        //},
        eventResize: function( event, delta, revertFunc, jsEvent, ui, view ) {
            // Code when you resize an event (for example make it two hours longer
            alert("I just got resized!");
        },
        eventDrop: function( event, jsEvent, ui, view ) {

            // Code when you drop an element somewhere else
            alert("I'm somewhere else now");
        },
        drop: function() {
            // is the "remove after drop" checkbox checked?
            console.log('calendar 3 viewRender');
            if ($('#drop-remove3').is(':checked')) {
                // if so, remove the element from the "Draggable Events" list
                $(this).remove();
            }
        }
        //defaultView : 'agendaSixDay'
    });

    ////////////////////////////////////////////////////////////////

    $('#calendarug2').fullCalendar({
        // put your options and callbacks here
        header: { // Display nothing at the top
            left: '',
            center: '',
            right: ''
        },
        theme: true,
        //aspectRatio: 2.44,
        //eventSources: ['events.php'],
        height: 520, // Fix height
        columnFormat: 'dddd', // Display just full length of weekday, without dates
        defaultView: 'agendaWeek', // display week view
        hiddenDays: [0,], // hide Saturday and Sunday
        weekNumbers:  false, // don't show week numbers
        minTime: '8:30:00', // display from 16 to
        maxTime: '19:00:00', // 23
        slotDuration: '00:30:00', // 15 minutes for each row
        allDaySlot: false, // don't show "all day" at the top
        selectable: true,
        editable: true,
        defaultDate: '2016-10-10',
        droppable: true, // this allows things to be dropped onto the calendar
        selectHelper: true,
        select: function(start, end, jsEvent) {
            var title = prompt('Event Title:');
            var eventData;
            if (title) {
                eventData = {
                    title: title,
                    start: start,
                    end: end
                };
                $('#calendarug2').fullCalendar('renderEvent', eventData, true); // stick? = true
            }
            $('#calendarug2').fullCalendar('unselect');
        },
        //select: function(start, end, allDay) {
        // Code for creating new events.
        //     alert("Create new event at " + start);
        //},
        eventResize: function( event, delta, revertFunc, jsEvent, ui, view ) {
            // Code when you resize an event (for example make it two hours longer
            alert("I just got resized!");
        },
        eventDrop: function( event, jsEvent, ui, view ) {

            // Code when you drop an element somewhere else
            alert("I'm somewhere else now");
        },
        drop: function() {
            // is the "remove after drop" checkbox checked?
            console.log('calendar 2 viewRender');
            if ($('#drop-remove2').is(':checked')) {
                // if so, remove the element from the "Draggable Events" list
                $(this).remove();
            }
        }
        //defaultView : 'agendaSixDay'
    });


    $('#calendarug1').fullCalendar({
        // put your options and callbacks here
        header: { // Display nothing at the top
            left: '',
            center: '',
            right: ''
        },
        theme: true,
        //aspectRatio: 2.44,
        //eventSources: ['events.php'],
        height: 520, // Fix height
        columnFormat: 'dddd', // Display just full length of weekday, without dates
        defaultView: 'agendaWeek', // display week view
        hiddenDays: [0,], // hide Saturday and Sunday
        weekNumbers:  false, // don't show week numbers
        minTime: '8:30:00', // display from 16 to
        maxTime: '19:00:00', // 23
        slotDuration: '00:30:00', // 15 minutes for each row
        allDaySlot: false, // don't show "all day" at the top
        selectable: true,
        editable: true,
        defaultDate: '2016-10-10',
        droppable: true, // this allows things to be dropped onto the calendar
        selectHelper: true,
        select: function(start, end, jsEvent) {
            var title = prompt('Event Title:');
            var eventData;
            if (title) {
                eventData = {
                    title: title,
                    start: start,
                    end: end
                };
                $('#calendarug1').fullCalendar('renderEvent', eventData, true); // stick? = true
            }
            $('#calendarug1').fullCalendar('unselect');
        },
        //select: function(start, end, allDay) {
        // Code for creating new events.
        //     alert("Create new event at " + start);
        //},
        eventResize: function( event, delta, revertFunc, jsEvent, ui, view ) {
            // Code when you resize an event (for example make it two hours longer
            alert("I just got resized!");
        },
        eventDrop: function( event, jsEvent, ui, view ) {

            // Code when you drop an element somewhere else
            alert("I'm somewhere else now");
        },
        drop: function() {
            // is the "remove after drop" checkbox checked?
            console.log('calendar 1 viewRender');
            if ($('#drop-remove1').is(':checked')) {
                // if so, remove the element from the "Draggable Events" list`enter code here`
                $(this).remove();
            }
        }
        //defaultView : 'agendaSixDay'
    });
    ///////////////////////////////////////////////////////////////////////
</code></pre>