jquery fullcalendar opening multiple calendars

Question

I have just started to use jQuery fullcalendar http://arshaw.com/fullcalendar/ and I am experiencing a strange problem. I am launching the calendar from a click function and the first time I open the calendar it is fine and opening 1 calendar. However, if I click again, it adds 1 and I now have 2 calendars. This happens on each time I click it adds 1 calendar each time. Is there some option I have to add to reinitialize the calendar. The only option I could see was the 'render' option, but cannot work out how to use it. Thanks

UPDATE: New code Update

$(function() {
    $('#calhead1').on("click", function(){

        $("#msgcontent, #msgcontent2, #main, #msgtest").hide(1000);
        $("#cal").show();
    });
});
    // Start Calendar Script //

    $(function() {

            var date = new Date();
            var d = date.getDate();
            var m = date.getMonth();
            var y = date.getFullYear();

            $('#cal').fullCalendar({

                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,basicWeek,basicDay'
                },
                editable: true,
                theme: true,
                width: 760,
                height: 470,
                events: [
                    {
                        title: 'All Day Event',
                        start: new Date(y, m, 1)
                    },
                    {
                        title: 'Long Event',
                        start: new Date(y, m, d-5),
                        end: new Date(y, m, d-2)
                    },
                    {
                        id: 999,
                        title: 'Repeating Event',
                        start: new Date(y, m, d-3, 16, 0),
                        allDay: false
                    },
                    {
                        id: 999,
                        title: 'Repeating Event',
                        start: new Date(y, m, d+4, 16, 0),
                        allDay: false
                    },
                    {
                        title: 'Meeting',
                        start: new Date(y, m, d, 10, 30),
                        allDay: false
                    },
                    {
                        title: 'Lunch',
                        start: new Date(y, m, d, 12, 0),
                        end: new Date(y, m, d, 14, 0),
                        allDay: false
                    },
                    {
                        title: 'Birthday Party',
                        start: new Date(y, m, d+1, 19, 0),
                        end: new Date(y, m, d+1, 22, 30),
                        allDay: false
                    },
                    {
                        title: 'Click for Google',
                        start: new Date(y, m, 28),
                        end: new Date(y, m, 29),
                        url: 'http://google.com/'
                    }
                ]
            });

            });

    // End Calendar Script //

Answer 1

1. jQuery live-function is deprecated, use .on()
2. Initialize your calendar outside of the click-event and just show and hide it on click.

Answer 2

Calling the fullCalendar function is designed to create a new calendar so your script is doing exactly what it's supposed to. You just need move that function outside your click event handler.

I'd also recommend moving from live to the new on method as jQuery has now deprecated live.

Your new code would look like:

$(function() {

    $('#cal').fullCalendar({

        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,basicWeek,basicDay'
        },
        editable: true,
        theme: true,
        width: 760,
        height: 470,
        events: [
            {
                title: 'All Day Event',
                start: new Date(y, m, 1)
            },
            {
                title: 'Long Event',
                start: new Date(y, m, d-5),
                end: new Date(y, m, d-2)
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d-3, 16, 0),
                allDay: false
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d+4, 16, 0),
                allDay: false
            },
            {
                title: 'Meeting',
                start: new Date(y, m, d, 10, 30),
                allDay: false
            },
            {
                title: 'Lunch',
                start: new Date(y, m, d, 12, 0),
                end: new Date(y, m, d, 14, 0),
                allDay: false
            },
            {
                title: 'Birthday Party',
                start: new Date(y, m, d+1, 19, 0),
                end: new Date(y, m, d+1, 22, 30),
                allDay: false
            },
            {
                title: 'Click for Google',
                start: new Date(y, m, 28),
                end: new Date(y, m, 29),
                url: 'http://google.com/'
            }
        ]
    });
    $('#calhead1').on("click", function(){

                    $("#msgcontent, #msgcontent2, #main, #msgtest").hide(1000);
                    $("#cal").show();
                    var date = new Date();
                    var d = date.getDate();
                    var m = date.getMonth();
                    var y = date.getFullYear();
    });

});