勉強したことのメモ

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

  関連記事

JavaScriptのbeforeunloadイベントでページの離脱防止

何らかのformがあるページで各種内容を入力後に何らかのリンクをクリックする等、 ...

NicEdit(WYSIWYGエディタ)とテキストエリアの切り替え

チェックボックスのON / OFFでNicEdit(WYSIWYGエディタ)とt ...

jQueryでチェックボックスの全チェック&チェック解除する方法

フォームのチェックボックスで「全てにチェックを入れる」「全てのチェックを外す」と ...

ajaxのエラー詳細を取得する

success or errorで分岐処理はできるけど、 エラー詳細取れないの？ ...

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

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