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

LINEと連携したテイクアウト事前注文システム徹底比較!

目次 テイクアウト予約・注文受付システムのトレンド LINEと連携したテイクアウト事前注文システムの価格表 L.B.B.Cloud テイクイーツ...

PHPで動画の撮影日を取得

PHPで動画の撮影日を取得 概要 PHPからffprobeコマンドを実行し、動画の撮影日時を取得します。 コード $posted_at = ...

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 ...
トップへ戻る