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

Question

我正在添加 Solgema Fullcalendar 中的功能 - http://plone.org/products/solgema.fullcalendar/releases/2.1.2 (选择并显示带有复选框选择的事件)

我的事件源看起来像:

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