読者です 読者をやめる 読者になる 読者になる

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 /public/event_calendar_tmpl

ダウンロードしたbootstrap-calendarのtmpls/以下にあるファイルを全て上記で作成したディレクトリにコピーする $ cp bootstrap-calendar/tmpls/* /public/event_calendar_tmpl

これでOK