勉強したことのメモ

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

FullCalendarでカレンダー内のイベントをクリックした際にタイトル以外の内容も表示させる方法

   2024/01/13  jQuery

FullCalendarでカレンダー内のイベントをクリックした際にtitle以外も表示させたかった。例えば予定内容であったり担当者名であったり等。調べたところ割と何でも表示させることができた。以下に実装方法とサンプルページをメモ。

 

サンプル

https://taitan916.info/sample/fullcalendar/

タイトル1とタイトル2というイベントが表示されているので、クリックすると内容が確認できる。

 

ソース

<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>
#detail-area{
    display: none;
    width: 300px;
    height: 200px;
    background-color: #eee;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    margin: auto;
    z-index: 999;
    padding: 30px;
}
</style>
</head>
<body>

    <div id="detail-area"></div>

    <div id="calendar"></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"));?>', 
                    description: '本文1<br>本文1', //予定内容
                    staff: '田中', //担当者
                },
                {
                    title: 'タイトル2', 
                    start: '<?php echo date("Y-m-d", strtotime("-2day"));?>', 
                    end: '<?php echo date("Y-m-d", strtotime("-2day"));?>', 
                    description: '本文2<br>本文2',
                    staff: '鈴木',
                }
            ],
            eventClick: function(event) { //イベントをクリックすると発動
                //event_dataという変数に表示させたいHTMLデータを入れ込んでいく
                var event_data = '<a href="javascript:void(0);" class="close" onclick="return closeArea();">[close]</a><br>';
                event_data += '<b>タイトル</b><br>\n';
                event_data += event.title + '<br><br>\n';
                event_data += '<b>担当者</b><br>\n';
                event_data += event.staff + '<br><br>\n';
                event_data += '<b>本文</b><br>\n';
                event_data += event.description + '\n';

                //<div id="detail-area"></div>の中にevent_dataを入れて表示させる
                $('#detail-area').html(event_data).show();
            }
        });
    });

    //closeリンクを押した時に#detail-area部分を非表示にする
    function closeArea(){
        $('#detail-area').hide();
    }
    -->
    </script>

</body>
</html>

 

注意点

ソースの例だとdescription部分で改行とか入ってきやすいと思うけど、MySQLからデータを引っ張ってきて<br>の改行ではなく\nや\rの改行の場合は、以下のような形で置き換えること。

str_replace("\r\n", '<br>', $description);

また、descriptionやstaffは適当に書いているけど予約語的なものがあるかもしれないのでその辺は気をつける。

 - jQuery

  関連記事

「slick」で作成したスライダー画像にランキングの順位を表示する方法

「slick」で作成したスライダー画像に対して、ランキングの順位を表示したいとい ...

jQueryにてボタンをクリックするとAjax通信し結果をテキストボックスに反映する方法

jQueryを利用しページ内の特定のボタンをクリックすると、指定のページにAja ...

jQueryで指定した要素を簡単にフォーカスするfocusbleの使い方

divやspanなど指定した要素を簡単にフォーカスするjQueryプラグインがあ ...

jQuery UIでテキストボックスにサジェスト(入力補助)機能を実装する方法

メールアドレスを入力するためのテキストボックスに文字を入力すると「@yahoo. ...

jQueryで画像が存在すれば表示、なければノーイメージ画像を表示

やりたかった事は以下の通り。 ・画像のURLはcode.jpgみたいになってる ...