PbTimes 情報誌

FullCalendarでGoogleカレンダーのようなUIを実装

2017/01/19

• JavaScript
• jQuery

jQueryプラグインFullCalendarのサンプル

概要

FullCalendarを使用して、GoogleカレンダーのようなUIを実装する使用例を紹介します。

ダウンロード

https://fullcalendar.io/download/
こちらのサイトからファイルをダウンロードします。

ダウンロードしたファイルを解凍し、含まれている以下のファイルを使用します。
fullcalendar.min.css
fullcalendar.min.js

HTML設定例

  <link href="fullcalendar.min.css" rel="stylesheet" type="text/css" />
  <script src="fullcalendar.min.js"></script>

  <div id="calendar"></div>

HTML側はたったこれだけです。
CSS・Javascriptを読み込み、calendarというIDのタグを配置しています。

javascript設定例

$(function () {
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay,listWeek'
        },
        titleFormat: 'YYYY年MM月DD日',
        titleRangeSeparator: '～',
        defaultView: 'agendaWeek',
        defaultDate: today_at,
        allDaySlot: false,
        buttonText: {
            today:    '今日',
            month:    '月',
            week:     '週',
            day:      'æ—¥',
            list:     'リスト',
        },
        monthNames: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        monthNamesShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        dayNames: ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'],
        dayNamesShort: ['日', '月', '火', '水', '木', '金', '土'],
        editable: false,
        eventLimit: true, // allow "more" link when too many events
        events: {
            url: '/schedule/list',	// スケジュール情報をjsonで取得するためのURLを記載
            error: function() {
                alert('スケジュールの取得に失敗しました。');
            }
        },
        eventClick: function(event) {
            openModal('schedule/edit/' + event.id)
        }
    });
});

こんな感じです。
/schedule/list には、GETでstart、endのデータが渡されるので、それを元に情報をjson形式で返すプログラムを実装してあげれば完了です。

また、eventClick を使用して、登録されているイベントを編集することも可能です。