勉強したことのメモ

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

  関連記事

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

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

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

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

jQueryで後から追加された要素にイベントを設定

jQueryで.html()等を使って追加した要素に対してイベントを設定したかっ ...

formでGET送信時に空のパラメータを送信しない方法(cleanQuery)

フォームでGET送信する際、通常だと空のパラメータも送信される。結果として「ドメ ...

テキストエリアを自動でリサイズ

改行するだけで勝手にリサイズしてくれるので、 ユーザー用でも管理用でも使えそう。 ...