勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

FullCalendarでラベルごとに表示・非表示を切り替える方法

   2024/01/13  jQuery

Googleカレンダーだとページ左側にマイカレンダーというのがあり、その中に任意で「プライベート」だとか「仕事」とか好きにラベルを作り、そのラベルをクリックするとラベルごとに表示非表示を切り替える事ができる。これをFullCalendarで行いたかった。以下に実装方法とサンプルをメモ。

 

サンプル

https://taitan916.info/sample/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

  関連記事

amazon等のECサイトによくにあるアイテムの満足度を星マークで送信・表示する方法

amazon等のECサイトによくにあるアイテムの満足度を星マークかつ5段階で送信 ...

jQueryにてCookieを取り扱う「jquery-cookie」プラグインの利用方法

jQueryでcookieを簡単に取り扱える「jquery-cookie」プラグ ...

CAPTCHAに代わる無料のツール「Cloudflare Turnstile」の導入方法

CAPTCHAと言えばGoogleのreCAPTCHAを思い浮かべるが、稀にCl ...

オリジナルのjQueryプラグインを作成する方法

オリジナルのjQueryプラグインを作ってみたかった。というのも大抵のものはググ ...

SNSのシェア(いいね)ボタンを設置できるjQueryプラグイン「jsSocials」の利用方法

サイト内にSNSのシェア(いいね)ボタンを設置する際、WordPressだと何ら ...