勉強したことのメモ

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

  関連記事

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

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

jQueryで対象の要素をまとめて親要素で囲む方法

あるシステムで出力されているHTMLタグを指定した親要素で囲みたいというケースが ...

JavaScript / jQueryでブラウザのウィンドウがアクティブかどうかを判別する方法

ある動画サイトを閲覧していた際にウィンドウが非アクティブになると視聴中の動画が止 ...

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

Googleカレンダーだとページ左側にマイカレンダーというのがあり、その中に任意 ...

PHPとajaxでチャットの作成

■ソース ・index.php <? error_reporting(E_ ...