勉強したことのメモ

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

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

   

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

 

サンプル

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

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

 

ソース

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>FullCalendarサンプル</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.5.0/fullcalendar.min.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.5.0/fullcalendar.js"></script>
<style>
.contents{
	display:flex;
}
#label{
	width:20%;
}
#calendar{
	width:80%;
}
#label a{
	display: block;
}
#label a.off{
	opacity: 0.3;
}
</style>
</head>
<body>

	<div class="contents">

		<div id="label">
			<a href="javascript:void(0);" class="label-link-1" onclick="return change(1);">
				<span style="color:#2ECCFA;">■</span>
				ラベル1
			</a>
			<a href="javascript:void(0);" class="label-link-2" onclick="return change(2);">
				<span style="color:#B40486;">■</span>
				ラベル2
			</a>
			<a href="javascript:void(0);" class="label-link-3" onclick="return change(3);">
				<span style="color:#B45F04;">■</span>
				ラベル3
			</a>
		</div>

		<div id="calendar"></div>

	</div>

	<script>
	<!--
	$(function(){

		$('#calendar').fullCalendar({
			navLinks: true, 
			height: 500, 
			defaultDate: '<?php echo date("Y-m-d");?>',
			events: [
				{
					title: 'タイトル1', 
					start: '<?php echo date("Y-m-d", strtotime("-1day"));?>', 
					end: '<?php echo date("Y-m-d", strtotime("-1day"));?>', 
					className: 'staff-1', 
					color: '#2ECCFA',
				},
				{
					title: 'タイトル2', 
					start: '<?php echo date("Y-m-d", strtotime("-2day"));?>', 
					end: '<?php echo date("Y-m-d", strtotime("-2day"));?>', 
					className: 'staff-2', 
					color: '#B40486',
				},
				{
					title: 'タイトル3', 
					start: '<?php echo date("Y-m-d", strtotime("-3day"));?>', 
					end: '<?php echo date("Y-m-d", strtotime("-3day"));?>', 
					className: 'staff-3', 
					color: '#B45F04',
				},
			]
		});
	});

	function change(key){
		$('.staff-'+key).toggle();
		$('.label-link-'+key).toggleClass('off');
	}
	-->
	</script>

</body>
</html>

 

解説

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

  関連記事

要素の表示or非表示

今まで要素の表示or非表示をCSSで操作する際、 display:none; / ...

Lightboxで画像拡大時に閉じるボタンの位置を右上に変更

Lightbox(バージョン2.7.1)で画像拡大時に閉じるボタンの位置を右下か ...

ダウンロード無しで外部ファイル呼び出し

■jQuery http://scriptsrc.net/ ■bootstrap ...

jQueryでUNIXタイムスタンプの取得

jQueryでUNIXタイムスタンプを取得したい場合、 $.now()だけで取得 ...

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

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

formで複数選択可能なセレクトメニュー(プルダウン)を実装する方法(select2)

フォームで複数選択可能なセレクトボックス(プルダウン)を実装したい。ただHTML ...

tableのヘッダーを残して表示(jquery-decapitate)

bootstrapはあまり使わないので切り離して使えるように したいところ。 ■ ...

IE11でフォーム送信時に二重登録される

Internet Explorer11でform送信時にデータが二重登録されると ...

DateTimePickerで特定日にClassを付与&選択不可にする方法

jQueryプラグインのDateTimePikerで特定の日にClassを付与し ...

jQueryのtoggleに引数

社内のソースで、 $(".hoge").toggle(flg == 1? fal ...