FullCalendarの使い方

Tag:

FullCalendarを利用すると、Googleカレンダーのように、カレンダ―上に予定情報などを表示することができます。ここでは、FullCalendarの使い方について紹介します。

ダウンロード

FullCalendarは、CDN経由でも利用できますが、ここではライブラリをダウンロードして利用します。http://fullcalendar.io/download/にアクセスしてzipファイルをダウンロードしてください。
fullcalender

サンプルで動作確認

zipファイルをダウンロードすると、FullCalendarのライブラリ以外に、FullCalendarを利用したサンプルコードも取得できます。サンプルは、FullCalendarを利用する上でとても参考になります。一度ダウンロードして解析してみることをお勧めします。

特に参考になるサンプルは以下の通りです。

demos/basic-views.html

基本的な使い方を学ぶことができます。

右上に切替ボタンがあります。月別、週別、日別と表示が切り替わります。
fullcalender1

fullcalender2

fullcalender3

demos/background-events.html

特定イベント設置場所を限定化する方法、全イベントの配置不可設定をする方法を学べます。
fullcalender4

demos/external-dragging.html

イベント一覧からイベントをドラッグして配置する方法を学べます。(dropプロパティ)
fullcalender5

demos/gcal.html

Googleカレンダーと連携する方法を学べます。

demos/languages.html

言語変更する方法を学べます。(langプロパティ)

demos/selectable.html

任意の日時をクリックしてイベント追加する方法を学べます。(selectプロパテイ)

基本的な使い方

カレンダー表示

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <link href='../fullcalendar.css' rel='stylesheet' />
        <link href='../fullcalendar.print.css' rel='stylesheet' media='print' />
        <script src='../lib/moment.min.js'></script>
        <script src='../lib/jquery.min.js'></script>
        <script src='../fullcalendar.min.js'></script>
        <script>
            $(document).ready(function () {
                $('#calendar').fullCalendar({
                });
            });
        </script>
        <style>
            body {
                margin: 40px 10px;
                padding: 0;
                font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
                font-size: 14px;
            }
            #calendar {
                max-width: 900px;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <div id='calendar'></div>
    </body>
</html>
5-9行目
fullcalendarに必要なライブラリを読み込んでいます。
12行目
表示する場所を指定して、カレンダーを呼び出しています。この引数内にオプションやコールバックを設定していきます(後述)。
30行目
HTMLでカレンダーを読み込む場所を用意します。

Options

カレンダー全体の設定です。よく利用する設定として以下の設定があります。

header
カレンダー上部に配置するボタン、タイトルを指定
defaultDate
カレンダーを最初にロードして表示される日
height
カレンダー全体の高さ
lang
言語
timeFormat
時間の表示書式
events
カレンダーに表示するデータ(後述)

Callbacks(イベント処理)

dayClick (callback)
日付内のイベント以外のところをクリックしたときに実行
eventClick (callback)
イベントをクリックしたときに実行
drop (callback)
外部要素からドラッグ&ドロップしたときに実行

Methods

//カレンダーを再描画
$('#calendar').fullCalendar('rendar');

//カレンダーを削除
$('#calendar').fullCalendar('destroy');

//イベントを追加
$('#calendar').fullCalendar('renderEvent', event, true);

//イベントを更新
$('#calendar').fullCalendar('updateEvent', event);

Eventsオブジェクト

カレンダーに表示するデータはEventsオブジェクトで渡します。Eventsオブジェクトの主なプロパティは以下の通りです。

title

タイトル
start

開始日時
end

終了日時
textColor

文字色
color

背景色
url

イベントにリンクを張る際利用。
複数個所からデータを取得したい場合、eventSources内にeventsオブジェクトを複数作成します。

カスタマイズ(basic-views)

「demos/basic-views」を日本向けにカスタマイズしてみました。

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <link href='../fullcalendar.css' rel='stylesheet' />
        <link href='../fullcalendar.print.css' rel='stylesheet' media='print' />
        <script src='../lib/moment.min.js'></script>
        <script src='../lib/jquery.min.js'></script>
        <script src='../fullcalendar.min.js'></script>
        <script src='../lang/ja.js'></script>
        <script>

            $(document).ready(function () {

                $('#calendar').fullCalendar({
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'month,agendaWeek,agendaDay'
                    },
                    lang: "ja",
                    height: 800,
                    timeFormat: 'H:mm',
                    columnFormat: {
                        week: 'M/DD(ddd)',
                        day: 'M/DD(ddd)'
                    },
                    axisFormat: 'H:mm', //時間軸に表示する時間の表示フォーマットを指定する
                    defaultDate: '2016-01-12',
                    editable: false, // 変更不可にする
                    eventLimit: true, // allow "more" link when too many events
                    eventLimitClick:'popover',
                    events: [
                        {
                            title: 'All Day Event',
                            start: '2016-01-01'
                        },
                        {
                            title: 'Long Event',
                            start: '2016-01-07',
                            end: '2016-01-10'
                        },
                        {
                            id: 999,
                            title: 'Repeating Event',
                            start: '2016-01-09T16:00:00'
                        },
                        {
                            id: 999,
                            title: 'Repeating Event',
                            start: '2016-01-16T16:00:00'
                        },
                        {
                            title: 'Conference',
                            start: '2016-01-11',
                            end: '2016-01-13'
                        },
                        {
                            title: 'Meeting',
                            start: '2016-01-12T10:30:00',
                            end: '2016-01-12T12:30:00'
                        },
                        {
                            title: 'Lunch',
                            start: '2016-01-12T12:00:00'
                        },
                        {
                            title: 'Meeting',
                            start: '2016-01-12T14:30:00'
                        },
                        {
                            title: 'Happy Hour',
                            start: '2016-01-12T17:30:00'
                        },
                        {
                            title: 'Dinner',
                            start: '2016-01-12T20:00:00'
                        },
                        {
                            title: 'Birthday Party',
                            start: '2016-01-13T07:00:00'
                        },
                        {
                            title: 'Click for Google',
                            url: 'http://google.com/',
                            start: '2016-01-28'
                        }
                    ]
                });
            });

        </script>
        <style>

            body {
                margin: 40px 10px;
                padding: 0;
                font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
                font-size: 14px;
            }

            #calendar {
                max-width: 900px;
                margin: 0 auto;
            }
            .fc-sun, .fc-sat {
                color: #FF0000;
            }
        </style>
    </head>
    <body>

        <div id='calendar'></div>

    </body>
</html>

カスタマイズした箇所は以下の通りです。

10,21行目

日本語表示されるようにしています。
19行目

「basicWeek,basicDay」を「agendaWeek,agendaDay」に変更しています。下記のように、左側に時間軸が表示されるようになります。
fullcalender6
22-28行目

表示高さ設定、書式設定を行っています。
30行目

イベントの日時を移動できないようにしています。
32行目

イベント件数が上限を超えた場合、ポップオーバーで確認できるようにしています。なおイベント件数に上限を設けたくない場合には、「eventLimit」を false にします。
106-108行目

土日を赤色で表示するようにしています。

サーバー連携

「demos/basic-views」をさらにカスタマイズして、サーバーからjsonデータを取得して表示するようにしてみます。

まず、eventsオプションの設定を下記のように書き替えます。

eventSources: [{
    url: 'php/get-events_dnweb.php',
    dataType: 'json',
    async: false,
    type: 'POST',
    data: {
        flg: 1
    },
    error: function () {
    }
}]

「php/get-events_dnweb.php」からデータを取得するように設定しています。POSTメソッドで渡すデータは、dataプロパティで設定します。

サーバー側の処理(php/get-events_dnweb.php)は以下の通りです。

<?php

if (!isset($_POST['flg']) || $_POST['flg'] != 1) {
    die("error");
}

$output_arrays = array();
$output_arrays[] = array(
    'title' => 'All Day Event',
    'start' => '2016-01-01',
    'color' => 'rgb(0,255,0)',
    'textColor' => 'rgb(0,0,0)',
    'backgroundColor' => 'rgb(0,255,0)'
);
$output_arrays[] = array(
    'title' => 'Long Event',
    'start' => '2016-01-07',
    'end' => '2016-01-10'
);
$output_arrays[] = array(
    'title' => 'Conference',
    'start' => '2016-01-11',
    'end' => '2016-01-13'
);
$output_arrays[] = array(
    'title' => 'Meeting',
    'start' => '2016-01-12T10:30:00-05:00',
    'end' => '2016-01-12T12:30:00-05:00'
);
$output_arrays[] = array(
    'title' => 'Meeting',
    'start' => '2016-01-12T14:30:00-05:00'
);
$output_arrays[] = array(
    'title' => 'Click for Google',
    'url' => 'http://google.com/',
    'start' => '2016-01-28'
);

header("Content-Type: application/json; charset=utf-8");
echo json_encode($output_arrays);
exit;

PHPでEventsオブジェクト用の連想配列を作り、JSON形式のデータに変換し、レスポンスを返しています。

このように、サンプルをカスタマイズすることで理解が深まるので試してみてください。

スポンサーリンク