I'm using Fullcalendar integrated with jQuery Mobile. When I tried to add new events dynamically using following method during pageshow event it causes a JavaScript exeption as below

Uncaught TypeError: Cannot call method 'empty' of undefined

My JavaScript Code

    $('#myCalendar').live('pageshow',function(event){
            Newevents = [
                    {
                        title  : 'event1',
                        start  : '2012-11-24 01:00',
                        color:'red'

                    },
                    {
                        title  : 'event2',
                        start  : '2012-11-25',
                        end    : '2012-11-27'
                    },
                    {
                        title  : 'event3',
                        start  : '2012-11-28 12:30:00',
                        allDay : false // will make the time show
                    },
                    {
                        title  : 'event4',
                        start  : '2012-11-29 01:30:00',
                        allDay : false // will make the time show
                    }
                ];
        $('#calendar').fullCalendar('renderEvent',Newevents);
        $('#calendar').fullCalendar('rerenderEvents'); 

    });

$('#myCalendar').live('pagecreate',function(event){


    $('#calendar').fullCalendar({
            // put your options and callbacks here
            header: {
                    left:   '',
                    center: '',
                    right:  ''
                    },
            firstDay :1,
            viewDisplay: function(view) {
                $('#calendarLabel').html(view.title);
            },
             events:[
                {
                    title  : 'event1',
                    start  : '2012-11-21 01:00',
                    end:'2012-11-24 02:00',
                    color:'red'

                },
                {
                    title  : 'event2',
                    start  : '2012-11-05',
                    end    : '2012-11-07'
                },
                {
                    title  : 'event3',
                    start  : '2012-11-09 12:30:00',
                    allDay : false // will make the time show
                },
                {
                    title  : 'event4',
                    start  : '2012-11-09 01:30:00',
                    allDay : false // will make the time show
                }
            ],
            eventClick: function(calEvent, jsEvent, view) {
                alert('Event: ' + calEvent.title);
            },
            dayClick: myDayClick,
            height: 999999999
           });



});

I'm using Fullcalendar integrated with jQuery Mobile. When I tried to add new events dynamically using following method during pageshow event it causes a JavaScript exeption as below

Uncaught TypeError: Cannot call method 'empty' of undefined

My JavaScript Code

    $('#myCalendar').live('pageshow',function(event){
            Newevents = [
                    {
                        title  : 'event1',
                        start  : '2012-11-24 01:00',
                        color:'red'

                    },
                    {
                        title  : 'event2',
                        start  : '2012-11-25',
                        end    : '2012-11-27'
                    },
                    {
                        title  : 'event3',
                        start  : '2012-11-28 12:30:00',
                        allDay : false // will make the time show
                    },
                    {
                        title  : 'event4',
                        start  : '2012-11-29 01:30:00',
                        allDay : false // will make the time show
                    }
                ];
        $('#calendar').fullCalendar('renderEvent',Newevents);
        $('#calendar').fullCalendar('rerenderEvents'); 

    });

$('#myCalendar').live('pagecreate',function(event){


    $('#calendar').fullCalendar({
            // put your options and callbacks here
            header: {
                    left:   '',
                    center: '',
                    right:  ''
                    },
            firstDay :1,
            viewDisplay: function(view) {
                $('#calendarLabel').html(view.title);
            },
             events:[
                {
                    title  : 'event1',
                    start  : '2012-11-21 01:00',
                    end:'2012-11-24 02:00',
                    color:'red'

                },
                {
                    title  : 'event2',
                    start  : '2012-11-05',
                    end    : '2012-11-07'
                },
                {
                    title  : 'event3',
                    start  : '2012-11-09 12:30:00',
                    allDay : false // will make the time show
                },
                {
                    title  : 'event4',
                    start  : '2012-11-09 01:30:00',
                    allDay : false // will make the time show
                }
            ],
            eventClick: function(calEvent, jsEvent, view) {
                alert('Event: ' + calEvent.title);
            },
            dayClick: myDayClick,
            height: 999999999
           });



});

• javascript
• jquery
• jquery-mobile
• fullcalendar

• 1 Check the documentation: renderEvent uses one event object, not an array. – MaxD Commented Nov 29, 2012 at 5:14

1 Answer 1

Rather than

.fullcalendar( 'renderEvent', []);

and

.fullCalendar( 'rerenderEvents'); 

Have you tried ... ?

.fullCalendar( 'addEventSource', NewEvents );