勉強したことのメモ

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で同サーバ内のCSVを読み込み、配列やオブジェクトとして取り扱う方法

先日バニラJavaScriptで同サーバ内のCSVを読み込み、配列として取り扱う ...

要素の点滅

やりたかった事はaタグ内で囲まれている部分を点滅。 <blink>だ ...

jQueryの画像スライダー用プラグイン「slick」の使い方

jQueryの画像スライダー用プラグイン「slick」の使い方についてソースコー ...

Dropzone.jsを使って画像をドラッグ&ドロップでアップロードする方法

画像を複数枚ドラッグ&ドロップでアップロードしたかった。だいぶ前にDro ...

テキストエリアを選択すると中身を全選択状態にする方法

テキストエリアやテキストボックスの中に文字が書いてあり、ドラッグをしなくても、そ ...