勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

FullCalendarでラベル毎に表示切替したい

   

Googleカレンダーだとページ左側にマイカレンダーというのがあり、その中に任意で「プライベート」だとか「仕事」とか好きにラベルを作り、ラベル毎に表示非表示を切り替える事ができる。これをFullCalendarで行いたかった。

 

サンプル

http://sample.taitan916.info/fullcalendar/index2.php

左側のラベル1~3のリンクを押すと非表示に、再度押すと表示になるのが確認できる。

 

ソース

 

解説

fullCalendarのevents内でclassNameという項目があり、ここで適宜class名を割り振ることができる。今回はstaff-1から3まで1つずつ用意したけど、staff-1が20個あっても大丈夫。

次に#label内のaタグをクリックするとchange関数を動く。上記で割り振ったclassに対してjQueryのtoggleが走るので、表示と非表示を自動で判断し動いてくれる。また、非表示の場合は元のaタグにoffというclassを付与する。

cssでoffというclassに対してopacityを設定しており、offの場合はリンク部分が薄く表示され、視覚的に分かりやすくなる。

 - jQuery

  関連記事

Ajaxで負荷軽減

業務中、専用のページでfile_get_contents的なものは あまり使わな ...

jQueryのfind時に複数のセレクタ指定

みたいなソース ...

jQueryでIPから位置情報の取得

jQueryのプラグインでお手軽にIPから 位置情報や経度緯度等調べられたのでメ ...

jQueryで画像(タグ内)のsrc情報を取得する場合

すぐに出てこなかったのでメモ。 $('#test').attr('src'); ...

imgタグとPHPでグラフ作成

プラグインやライブラリを使わずにグラフを作る 機会があったのでメモ。 ■サンプル ...

jQuery2.0がリリース

リリースされたとのこと。 http://blog.jquery.com/2013 ...

リアルタイムプレビュー時の改行とテーブルの上部揃え

■サンプル http://sample.taitan916.info/previ ...

テキストエリアのリアルタイムプレビュー

テキストエリア内に書いた内容をリアルタイムで プレビューする機能が必要となり、教 ...

要素の点滅

やりたかった事はaタグ内で囲まれている部分を点滅。 <blink>だ ...

jQueryのappendとprepend

よく忘れるのでメモ。 ■append(後ろに足す) http://semooh. ...