FullCalendar と PHP との連携

JavaScript

FullCalendar とは、JavaScript で書かれたカレンダーライブラリ。 jQuery のプラグインとして利用する。

http://arshaw.com/fullcalendar/

FullCalendar を描画する際に、PHP からイベントデータを取得してみる。FullCalendar 側は、データの取得元の URL を events に記述するだけ。今回は、付属のサンプルと同じ json-events.php とした。

index.html:

<html>
<head>
<link rel='stylesheet' type='text/css' href='fullcalendar.css' />
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript' src='jquery-ui-custom.js'></script>
<script type='text/javascript' src='fullcalendar.min.js'></script>
<script type='text/javascript'>

$(document).ready(function() {
    $('#calendar').fullCalendar({
        header: {
           left: 'prev,next today',
           center: 'title',
           right: 'month,basicWeek,basicDay'
        },
        events: 'json-events.php'              
    });
});

</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>

PHP 側は、 カレンダーの表示期間を "start" と "end" パラメータで受け取り、その期間にあるイベントデータを JSON 形式で返す。

json-events.php:

<?php
// カレンダー開始日時
$start = date('Y-m-d H:i:s', $_GET['start']);
// カレンダー終了日時の１秒前
$end = date('Y-m-d H:i:s', $_GET['end'] - 1);

// イベントデータを出力
echo json_encode(array(
    array(
        'title' => "start:" . $start,
        'start' => $start
    ),

    array(
        'title' => "end:" . $end,
        'start' => $end,
    )
));

気づいた点：
FullCalendar が PHP からイベントデータを取得するタイミングは、元々取得した期間と異なる場合のみ。はじめに１ヶ月分表示して、週表示に切り替えただけでは、PHP へのアクセスは発生しない。