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

2017/01/19

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 を使用して、登録されているイベントを編集することも可能です。

  • このエントリーをはてなブックマークに追加
Related

PHP Laravel5.2でmulti-auth(複数テーブルでの認証)を実装

Laravel5.2でマルチ認証 概要 LaravelとはPHPの中で今最も伸びているフレームワークです。 処理速度が遅いなどありますが、かなり使い安く拡...

PHP 正規表現でIPアドレス形式の文字列か判定

正規表現でIPアドレスの入力チェック 概要 フォームで入力されたIPアドレスが正当な文字列か判定するためのバリデーション処理を実装します。 基本的...

rbenv環境でRuby on Railsのアプリケーションを一瞬で自動生成

アプリケーション構築時に最初に行う手順 概要 アプリケーションを作成するまでの手順を記載しています。 rbenvなどの環境が設定済と仮定して話を進めま...

Rails devise・authority・rolifyで権限付きの認証機能

devise・authority・rolify 概要 3つのGemを使用して、権限付き認証機能を実装します。 gem インストール Gemfile ...

Rails devise で複数モデルの認証機能を実装

Rails devise で複数モデルを管理 概要 rails のログイン認証 Gem「devise」のインストール・設定方法を紹介します。 よく「d...

jQuery UI ドラッグ&ドロップで並び替え sortableの使用方法

sortable 概要 jQuery UIを使用して、ドラッグ&ドロップで並び替えを行います。 sortableを使用することで、一瞬で実装できちゃいます...
トップへ戻る