2014/10/08
jQueryプラグインFullCalendarのイベントをフィルターで絞り込む方法
以前jQueryプラグインのFullCalendarについて簡単にご紹介させていただきました。
多機能なFullCalendarですが、その中でも便利で重要なもののひとつに、イベント(Event)の機能になります。
イベントを扱っていると、特定の条件にあったイベントを選択して、一括で処理する必要性も出てきます。
今回はその方法として、FullCalendarでメソッドとして利用できる、
clientEventsのフィルター(Filter)でイベントを絞り込んで処理する方法について、ご紹介いたします。
↓こちらがDEMOです。
方法
1. FullCalendarの準備
今回は、JSONに入れたイベントのデータをAJAXで読み込み、FullCalendarに追加します。
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | $(function(){ //FullCalendarを実行(編集可能に) $('#calendar').fullCalendar({ editable: true }); //JSONでイベントを読み込み $.getJSON('js/events.json', function(data) { var jsonEvents = data; for(i in jsonEvents){ $('#calendar').fullCalendar('renderEvent', jsonEvents[i], true); } $('#calendar').fullCalendar('gotoDate', '2014-10-01'); }); ・・・ |
2. イベントの絞り込みと処理(絞り込みと処理を同時に行う場合)
clientEventsメソッドでFullCalendarに登録したイベントを呼び出し、イベントがして下条件と遭う場合に、その場で処理を行います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | ・・・ //イベント削除のクラス名をクリックしたときの処理 $(".delete-events_class a").click(function(){ var className = $(this).text(); //フィルター内で直接処理をする $('#calendar').fullCalendar('clientEvents', function(clEvent){ if(clEvent.className == className){ //クラス名が一致するイベントについて、処理をする $('#calendar').fullCalendar('removeEvents', clEvent.id); } }); return false; }); ・・・ |
こちらは、クリックした要素のテキストと同じクラス名を持つイベントを絞り込んで、処理をする場合のコードです。
clientEventsメソッドではすべてのイベントが一度呼び出されます。
第２引数のfunctionはその呼び出されたイベント毎に実行され、その引数として、個別のイベントデータが渡されます。
ここで、IF文を使って条件をつけ、呼び出したイベントが条件に合えば処理を行うという仕組みです。
3.イベントの絞り込みと処理(絞り込んだイベントを取得し、別途処理を行う場合)
2と同様にclientEventメソッドでFullCalendarに登録したイベントを呼び出しますが、
一度条件に合うイベントだけを取得して保持し、別途処理を行います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | ・・・ //イベント削除の日付をクリックしたときの処理 $(".delete-events_date a").click(function(){ var eventDate = $(this).text(); //フィルターで「selectedEvents」にイベントを取得しする var selectedEvents = $('#calendar').fullCalendar('clientEvents', function(clEvent){ var rootEventDate = moment(clEvent.start); rootEventDate = ((rootEventDate.format()).split('T'))[0]; if(rootEventDate == eventDate){ //日付が一致するイベントを、データとして返す return true; }else{ //日付が一致しない場合は、データとして返さない return false; } }); //取得したイベントすべてに処理を行う for(var i in selectedEvents){ $('#calendar').fullCalendar('removeEvents', selectedEvents[i].id); } return false; }); }); |
こちらは、クリックした要素のテキストと同じ日付に登録されたイベントを絞り込んで、処理をする場合のコードです。
まず、clientEventsメソッドで絞り込まれたイベントを「selectedEvents(任意の名前)」という名前のオブジェクトに格納します。
clientEventsメソッド内で先ほどの方法と同様にIF分で条件をしていますが、
条件が合う場合はreturn trueを、合わない場合はreturn falseを返すことで、
条件に合うイベントだけがclientEventsメソッドから返されるため、
「selectedEvents」にそのイベントが取得されます。
その後、FOR IN文で取得できたイベントすべてについて、処理を行っています。
clientEventsメソッド内で直接処理を行うか、一度イベントを取得した上で別途処理を行うか、
必要に応じて使い分けることができます。
Author Profile
SHARE
