勉強したことのメモ

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

  関連記事

jquery_logo
jQueryで電話番号チェック

やりたかったことはjavascriptかjQueryで 電話番号のバリデート。 ...

jquery_logo
jQueryでshow/hideよりaddClass/removeClassの方が速い

diaplay:none/blockする際に最近はshow()/hide()を ...

jquery_logo
FormDataを使ったAjax通信がiPhoneのみエラー

FormDataオブジェクトを使用したAjax通信するシステムがあり、PCやAn ...

jquery_logo
jQueryuiを用いてメールの入力補助(サジェスト)

autocompleteを用いた簡易なサジェストを見かけたのでメモ。 ■ソース ...

jquery_logo
Ajaxで画像のアップロード(jquery.upload)

業務中に画像の選択後、アップロードボタンを押して画像のアップ、 その後フォームの ...

jquery_logo
日付入力のテキストフォームにカレンダープラグインを導入

やりたかった事と制限は下記の通り。 ・日付入力のテキストフォームにカレンダープラ ...

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

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

jquery_logo
Jcropを使ってブラウザ上で画像を範囲指定して切り抜き(トリミング)

やりたかった事は、画像をアップロードして必要な部分のみを範囲指定してもらい、指定 ...

jquery_logo
jquery.cookie.jsでcookieを取り扱う

機能拡張の依頼があってそのページを見たら jquery.cookie.jsが読み ...

javascript_logo_unofficial-300x300
getElementsByTagName

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