ruby on railsでbootstrap calendarを導入
最初に完成したデモ
DEMO http://workshops.ddns.net/event_calendar/show
必要なものをダウンロード
$ git clone https://github.com/Serhioromano/bootstrap-calendar.git
jQuery, underscore.js, bootstrap
コントローラーの生成
$ rails g controller event_calendar
ルートの編集
$ viconfig/routes.rb
# event calendar get 'event_calendar/show' resource :event_calendar
ビュー
面倒なのでjavascriptも一緒に書いています
$ vi app/views/event_calendar/show.html.erb
<%= stylesheet_link_tag 'bootstrap/bootstrap' %>
<%= stylesheet_link_tag 'calendar/calendar.min' %>
<!-- カレンダー ヘッダー -->
<div class="page-header">
<!-- カレンダー タイトル -->
<h3></h3>
<!-- カレンダー ナビゲーション -->
<div class="btn-group">
<button class="btn" data-calendar-nav="prev"></button><button class="btn" data-calendar-nav="today">[Today]</button><button class="btn" data-calendar-nav="next"></button>
</div>
<!-- ビュー切替用ボタン -->
<div class="btn-group">
<button class="btn" data-calendar-view="year">Year</button><button class="btn" data-calendar-view="month">Month</button><button class="btn" data-calendar-view="week">Week</button><button class="btn" data-calendar-view="day">Day</button>
</div>
</div>
<div id="calendar"></div>
<!--<script src="underscore-min.js" type="text/javascript"></script>-->
<%= javascript_include_tag 'underscore.min' %>
<%= javascript_include_tag 'calendar/calendar.min' %>
<!-- 日本語化用 -->
<%= javascript_include_tag 'calendar/language/ja-JP' %>
<script type="text/javascript">
//option
"use strict";
//event data
var events = {
"id": 1222, // id
"title": "Event 1222", // タイトル
"url": "http://kwski.net", // リンク
"class": "event-important", // class
"start": 1507075748000, // 開始日時(ミリ秒まで)
"end": 1508089748000 // 終了日時(ミリ秒まで)
};
// option
var options = {
tmpl_path: '/tmpls/', // テンプレートファイル パス
events_source: function () { return [events]; }, // イベントデータ
language: 'ja-JP', // カレンダー日本語化
onAfterViewLoad: function(view) {
$('.page-header h3').text(this.getTitle());
$('.btn-group button').removeClass('active');
$('button[data-calendar-view="' + view + '"]').addClass('active');
},
tmpl_path: "/event_calendar_tmpl/",
};
//view calendar
var calendar = $("#calendar").calendar(options);
//navigation click
$('.btn-group button[data-calendar-nav]').each(function() {
var $this = $(this);
$this.click(function() {
calendar.navigate($this.data('calendar-nav'));
});
});
//view switch button click
$('.btn-group button[data-calendar-view]').each(function() {
var $this = $(this);
$this.click(function() {
calendar.view($this.data('calendar-view'));
});
});
</script>
カレンダーテンプレートファイルの配置
$ mkdir
ダウンロードしたbootstrap-calendarのtmpls/以下にあるファイルを全て上記で作成したディレクトリにコピーする
$ cp bootstrap-calendar/tmpls/*
これでOK