jQuery fullCalendar + Fancybox popup to edit event

Question

I am generating events on fullCalendar with this code

<script type="text/javascript">

$(document).ready(function() {

    $('#calendar').fullCalendar({
        // put your options and callbacks here
            header: {
                right: 'today month,agendaWeek,agendaDay prev,next'
            },
            events: [
                    <?php foreach($cal_data as $row): ?>
                            {   
                          title : '<?php echo $row->plant_name . ' ' . $row->value_2; ?>',
                          start : '<?php echo $row->date . ' ' . $row->time; ?>',
                          allDay: false,
                          url   : '<?php echo base_url() . 'events/events_edit/' . $row->record_id; ?>'
                            },
                    <?php endforeach; ?>
                    ],

    });
});
</script>

This works fine for data display. When I click on the event a new page is loaded for editing.

Now I need to edit inside a jQuery Fancybox popup.

Based on the fullCalendar API, I would use

eventClick: function(event) {
        if (event.url) {
            window.open(event.url);
            return false;
        }
    }

I am using this Fancybox code throughout the project to successfully edit other things inside popups:

$.fancybox({
    'transitionIn': 'none',
    'transitionOut': 'none',
    'type': 'ajax',
    'href': link,
    'onClosed': function() {
        parent.location.reload(true);
    }
});
$.bind("submit", function() {

    $.fancybox.showActivity();

    $.ajax({
        type: "POST",
        cache: false,
        data: $(this).serializeArray(),
        success: function(data) {
            $.fancybox(data);
        }
    });
    return false;
});

But I haven't been able to integrate it into the fullCalendar script.

For example this doesn't work:

eventClick: function(event) {
        if (event.url) {
    $.fancybox({
        'transitionIn': 'none',
        'transitionOut': 'none',
        'type': 'ajax',
        'href': link,
        'onClosed': function() {
            parent.location.reload(true);
        }
    });
    $.bind("submit", function() {

        $.fancybox.showActivity();

        $.ajax({
            type: "POST",
            cache: false,
            data: $(this).serializeArray(),
            success: function(data) {
                $.fancybox(data);
            }
        });
        return false;
    });
            return false;
        }
    }

Any suggestions how to get this done?

Thanks a lot for helping!

Answer 1

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.

Answer 2

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);  

                      }  
                    }