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!

Solution

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.

Comments

[pepe]

@scoobler -- you nailed it -- works great now, thanks a million -- one point re the onClosed -- if I remove it, although the edit is saved on fullCalendar, if I click again on the event it does NOT open in the Fancybox (it loads the edit page). So I think there is the need to actually reload the entire page where fullCalendar is in order to re-initialize Fancybox for that specific event.

[Scoobler]

@torr does that happen with all events, ie you can edit one event but non of the others in fancybox, or is it just the updated event that then can't be edited again in fancybox?

[pepe]

@scoobler - it only happens with that one event that was updated -- the others open in a fancybox the first time

[Scoobler]

@torr Ahh in that case I would think fullcalendar's default action is to add a click event when you use the eventClick callback. The trouble is, because you are adding the extra item, it wasn't there when you added the click handlers, so it uses the default which is to just follow the URL. There is a way round this, well possibly two. I will have a quick look at the source and update my answer shortly if I find what I think I will...

[Scoobler]

Hmm, I'm having a bit of trouble replicating the problem when the even't handler for .eventClick() isn't added to the new event. When ever I add an event, it still copies the original callback :s I wounder if its because, and I forgot to mention in the answer, you would need to remove the original event, I suppose if you are happy with reloading the page though, I will leave it without being able to reproduce the behavior :s

[pepe]

thanks for looking into it @scoobler - i guess it feels a bit more clunky with the refresh but at this point don't see a way around it