javascript - 複数の eventSource のイベントの表示は、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',
            }

        ],

そして、チェックボックスでチェックされた、教師による「フィルタリング」イベント用のチェックボックスを実装したいと思います。最初はチェックボックスを1つだけ作成します（後でforeachカバーを作成します）

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

私が思うに、このコードでは、fullcalendar は vikaの sch_teacher_idで eventSource からのデータをフィルタリングする rerender_schedule() 関数を呼び出す必要があります

誰かが rerender_schedule() 関数を手伝ってくれたら、私は感謝します。なぜなら ajax は苦手だからです。

編集：（tocallaghanに感謝！）。今はまだ始まったばかりです。

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が必要ですが、呼び出す前に data パラメータを更新するように注意してください (そうしないと、最初に設定された値のままになります)

$('.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
});