Blog

jQueryプラグインFullCalendarのイベントをフィルターで絞り込む方法

以前jQueryプラグインのFullCalendarについて簡単にご紹介させていただきました。

多機能なFullCalendarですが、その中でも便利で重要なもののひとつに、イベント(Event)の機能になります。

イベントを扱っていると、特定の条件にあったイベントを選択して、一括で処理する必要性も出てきます。

 

今回はその方法として、FullCalendarでメソッドとして利用できる、

clientEventsのフィルター(Filter)でイベントを絞り込んで処理する方法について、ご紹介いたします。

 

↓こちらがDEMOです。

DEMO

 

方法

1. FullCalendarの準備

今回は、JSONに入れたイベントのデータをAJAXで読み込み、FullCalendarに追加します。

JavaScript

 

2. イベントの絞り込みと処理(絞り込みと処理を同時に行う場合)

clientEventsメソッドでFullCalendarに登録したイベントを呼び出し、イベントがして下条件と遭う場合に、その場で処理を行います。

こちらは、クリックした要素のテキストと同じクラス名を持つイベントを絞り込んで、処理をする場合のコードです。

clientEventsメソッドではすべてのイベントが一度呼び出されます。

第2引数のfunctionはその呼び出されたイベント毎に実行され、その引数として、個別のイベントデータが渡されます。

ここで、IF文を使って条件をつけ、呼び出したイベントが条件に合えば処理を行うという仕組みです。

 

3.イベントの絞り込みと処理(絞り込んだイベントを取得し、別途処理を行う場合)

2と同様にclientEventメソッドでFullCalendarに登録したイベントを呼び出しますが、

一度条件に合うイベントだけを取得して保持し、別途処理を行います。

こちらは、クリックした要素のテキストと同じ日付に登録されたイベントを絞り込んで、処理をする場合のコードです。

まず、clientEventsメソッドで絞り込まれたイベントを「selectedEvents(任意の名前)」という名前のオブジェクトに格納します。

clientEventsメソッド内で先ほどの方法と同様にIF分で条件をしていますが、

条件が合う場合はreturn trueを、合わない場合はreturn falseを返すことで、

条件に合うイベントだけがclientEventsメソッドから返されるため、

「selectedEvents」にそのイベントが取得されます。

 

その後、FOR IN文で取得できたイベントすべてについて、処理を行っています。

 

 

clientEventsメソッド内で直接処理を行うか、一度イベントを取得した上で別途処理を行うか、

必要に応じて使い分けることができます。

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ