Showing events for multiple eventSources depend on checkboxes' choice in Fullcalendar

Question

I'm adding the feature like in Solgema Fullcalendar - http://plone.org/products/solgema.fullcalendar/releases/2.1.2 (selecting and showing events with checkboxes selection)

My eventSourses look like:

eventSources: [
            ...
            {
                url: '/admin_schedule/get_schedule_db_recurring_events_on_daysweek/',//"<?echo $data_path?>",
                type: 'GET',
                data: {sch_teacher_id: sch_teacher_id},
                backgroundColor: 'red',
            }

        ],

And I want implement checkboxes for "filtering" events by teachers, checked in checkboxes. For beginning make just one checkbox (later make foreach cover)

<div class="box">
        <?php
        $js = 'onClick="rerender_schedule()"';
        echo form_checkbox('teacher', 'vika', FALSE, $js)." Vika";  
        ?>
</div>

By this code as I think, fullcalendar must call rerender_schedule() function which filters data from eventSource with vika's sch_teacher_id

If somebody could help with rerender_schedule() function, I will be thankful, because not good in ajax.

EDIT: (thanks to tocallaghan!). It's just a beginning right now.

1. My 3 checkboxes:

     $data = array( 'name' => 'teacher', 'class' => 'teacher', 'id' => 'teacher', 'value' => '128', 'checked' => FALSE, 'style' => 'margin:10px', ); echo form_checkbox($data); echo "Вика"; $data = array( 'name' => 'teacher', 'class' => 'teacher', 'id' => 'teacher2', 'value' => '111', 'checked' => FALSE, 'style' => 'margin:10px', ); echo form_checkbox($data); echo "Вася"; $data = array( 'name' => 'teacher', 'class' => 'teacher', 'id' => 'teacher3', 'value' => '1', 'checked' => FALSE, 'style' => 'margin:10px', ); echo form_checkbox($data); echo "Саша"; 

2. ajax on change them:

    $('.teacher').change(function (event) { events1.data.sch_teacher_id = $(this).val(); events2.data.sch_teacher_id = $(this).val(); events3.data.sch_teacher_id = $(this).val(); $calendar.fullCalendar('refetchEvents'); }); 

3. vars for eventSourses:

    var events1 = { url: 'url1', type: 'GET', data: {sch_teacher_id: $('#teacher').val() }, success: function (response) { return response; } }; var events2 = { url: 'url2', type: 'GET', data: {sch_teacher_id: $('#teacher').val() }, backgroundColor: 'green', success: function (response) { return response; } }; var events3 = { url: 'url3', type: 'GET', data: { sch_teacher_id: $('#teacher').val() }, backgroundColor: 'red', success: function (response) { return response; } }; 

4. my eventSources call

    eventSources: [ events1, events2, events3 ], 

Answer 1

You need refetchEvents , but be careful to update you data parameter before calling (otherwise it will remain the initially set value)

$('.CheckBoxClass').change(function () {
    events.data.sch_teacher_id = $(this).val();
    $('#calendar').fullCalendar('refetchEvents');
});

Edit: code to declare events object:

var events = {
    url: 'url',
    type: 'GET',
    data: { Id: $('#divId').val() },
    success: function (response) {
        return response;
    }
};

$('#calendar').fullCalendar({
    events: events
});