javascript - 显示多个事件源的事件取决于 Fullcalendar 中复选框的选择

Question

我正在添加 Solgema Fullcalendar 中的功能 - http://plone.org/products/solgema.fullcalendar/releases/2.1.2 （使用复选框选择和显示事件）

我的 eventSourses 看起来像：

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',
            }

        ],

我想为教师“过滤”事件实现复选框，勾选复选框。一开始只做一个复选框（后来做foreach封面）

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

按照我的想法，通过这段代码，fullcalendar 必须调用 rerender_schedule() 函数，该函数使用vika 的 sch_teacher_id过滤来自 eventSource的数据

如果有人可以帮助使用 rerender_schedule() 函数，我将不胜感激，因为 ajax 不好。

编辑：（感谢托卡拉汉！）。现在只是一个开始。

1. 我的 3 个复选框：

       $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 改变它们：

   $('.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. 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. 我的 eventSources 调用

   eventSources: [
       events1,
       events2,
       events3
   ],
   

Answer 1

您需要refetchEvents，但在调用之前要小心更新数据参数（否则它将保持最初设置的值）

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

编辑：声明事件对象的代码：

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

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