Pass variable from jQuery click function

Question

I'm trying to pass a function from .click() function but for some reason I'm not getting the value. Here is my code,

<script>
var guyid;

$(document).ready(function() {
    $('.guyid').click(function () {
        guyid = $(this).attr('id');  //This variable needs to pass
        alert(guyid);
    });
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,basicDay'
        },
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        eventSources: ['json-script.php?id=' + guyid]   //I need it here
    });
});

</script>

How can I pass the variable from .click() function to the eventSources ? Need this help badly. Tnx.

Answer 1

You need to destroy fullcalendar and re-initialize it.

Restores the element to the state before FullCalendar was initialized.

code

$(document).ready(function() {
    $('.guyid').click(function() {
        var guyid = $(this).attr('id'); 

        $('#calendar')
            .fullCalendar('destroy') //Destroy existing calendar
            .fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,basicDay'
                },
                editable: true,
                eventLimit: true, 
                eventSources: ['json-script.php?id=' + guyid] //Set updated id
            });

    });
});

---

OR, You can use events (as a function) with refetchEvents

var guyid = 'something';
$('#calendar').fullCalendar({
    events: function(start, end, timezone, callback) {
        $.ajax({
            url: 'json-script.php?id=' + guyid,
            dataType: 'JSON',
            success: function(doc) {
                var events = [];
                //Iterate are create 
                //This is pure hypothetical example
                $(doc).find('event').each(function() {
                    events.push({
                        title: $(this).attr('title'),
                        start: $(this).attr('start') // will be parsed
                    });
                });
                callback(events);
            }
        });
    }
});

$('.guyid').click(function () {
    guyid = $(this).attr('id');  
    alert(guyid);

    $('#calendar').fullCalendar('refetchEvents');
});