jQuery FullCalendar - trying to add event and display on calendar failed

Question

Hi all:

I am trying to work out how to use Adam Shaw's brilliant jQuery plugin - FullCalendar to add an event on our project : online balloon ordering page under development

Basically, if you click on "step1" and choose "pickup in shop" , the page will bring you to the calendar view, where you could click on the upper-right corner at the "week" button to alter the view to a weekly basis. What I am trying to achieve is when client clicks on an empty slot in a day, she can create her event on that spot. Here is my code in custom.js:

dayClick: function() 
            {

                var n = parseInt(this.className.match(/fc\-slot(\d+)/)[1]);
                alert('a day has been clicked on slot ' + n);

                //trying to add an event using the renderEvent() method.
                $('#' + type + 'Calendar').fullCalendar('renderEvent', 
                        {
                            title : 'my pickup slot',
                            start : new Date(y,m,d, 12, 30),
                            end   : new Date(y,m,d, 13, 00),
                        });
            }

It tries to use the FullCalendar's API method renderEvent so to create such an event. However, although my code runs without error and I can see the prompt saying which slot has been clicked, It wouldn't render such an new event on calendar.

Is there another way to do this or my code does something wrong?

Any suggestion would be much appreciated, thanks a lot in advance.

Answer 1

It's a simple oversight. The value of type in the function loadCalender(type) is set to pickupCalendar from the call closeStep1OpenSetp2("pickupCalendar");.

But you do $('#' + type + 'Calendar') which evaluates to $('#pickupCalendarCalendar') and there is no element with this id. Correct would be $('#pickupCalendar') so either remove Calendar in the parameter or ditch the + 'Calendar'. Then it should work just fine