勉強したことのメモ

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

  関連記事

javascript_logo_unofficial-300x300
getElementsByTagName

うろ覚えだけど業務中に、 document.getElementById('aa ...

jquery_logo
画像の登録フォームにてjQueryプラグインを用いてWebカメラの映像を撮影させる方法

form内の画像アップロード部分にて、通常であれば画像ファイルを参照させたものを ...

jquery_logo
POP広告をjQueryで再現する方法

サイト内のリンクをクリックすると、新しいタブもしくはウィンドウで開く広告をちょい ...

jquery_logo
配列をjQueryで取り扱う

やりたかった事は、 ・テキストボックスが複数ある。そのページに送信するクエリによ ...

jquery_logo
classの取り扱い

jQueryでclassを扱う際、 //id=aaaにclass=testを付与 ...

jquery_logo
prototypeとjqueryの競合

ちょいちょい見るが、実際に競合をおこしているケースに あたったのでメモ。 ↓↓の ...

jquery_logo
jQuery Alert Dialogsで表示後に処理したい

最近携わったサイトの中でJavaScript内に「jAlert」とかいう記述があ ...

jquery_logo
Ajaxの負荷対策

Ajaxを使ってボタンを押した際に表示を切り替える処理。 都度Ajaxを使ってた ...

jquery_logo
AjaxFileUploadで処理は実行できてもエラーが返る

AjaxFileUploadでPHPに通信し、サーバー側のPHPで処理は正常に実 ...

jquery_logo
jQueryでiframe内の要素を呼び出し

jQueryでiframeで開いたbody内の内容が欲しかった。 ■jQuery ...