jQuery fullCalendar + Fancybox popup to edit event

Question

I am generating events on fullCalendar with this code

Answer 1

After Getting Success you just have to just render that event in the calendar.

success:function(rep)  
                    {  
                        var response_array = rep.split('|::|');  
                        if(response_array[0] == 'Error')    
                        {  
                        //alert(response_array[1]);  
                         $('#error').show();  
                         $('#error').html(response_array[1]);  
                       $('#error').fadeOut(3000);  
                      }  
                      if(response_array[0] == 'Success')  
                      {            
                       //alert(response_array[1]);  
                         // Close the fancybox window:  
                         $('#fancy_close').trigger('click');    
                        $("#calendarinfo").fullCalendar('renderEvent', {                            title: $('#title').val(),  
                                start: $datdata+" "+$hrsdata+":"+$mnsdata+":00 GMT+0000",
                            },true);  

                      }  
                    }  

Answer 2

In theory your code looks like it would work. But you are telling your fancybox to open an undefined variable link, instead use event.url. Also, instead of using parent.location.reload(this) which is a bit heavy here (you can add events on the fly, so there is no need to reload the entire page), you could do away with the onClosed() event:

eventClick: function(event) {
    if (event.url) {
        $.fancybox({
            'transitionIn': 'none',
            'transitionOut': 'none',
            'type': 'ajax',
            'href': event.url
        });
        .....................

Then in your .ajax()'s success method, you could return a json string from your events/events_edit/ page (containing the new event data, same style as you add when the page loads), then in the success method use fullcalendars addEventSource and pass the json object over to be added on to the callendar:

$.ajax({
    type: "POST",
    cache: false,
    data: $(this).serializeArray(),
    success: function(data) {
        // Add the event:
        $('#calendar').fullCalendar('addEventSource', data);
        // Close the fancybox window:
        $('#fancy_close').trigger('click'); 
    }
});

Its difficult to test any of this without having it all setup, but it may give you some ideas to point you towards the right direction.