Choorker's Field Notes.

トップウォータープラッギング

rails4でCLNDR.jsを使う

フラットな感じのカレンダーを使いたくて、色々探しているうちに見つけたのがCLNDR.js
まだ仕上がっていないけど、いい感じになったので導入までにやったことをメモ。

jsファイルの格納

Githubに上がっている、clndr.min.jsをapp/assets/javascripts/に格納する。

application.jsの変更

clndr.min.jsが読み込まれるように、application.jsを修正する。

//= require clndr.min

viewの変更

カレンダーを表示したいviewにスクリプトと表示部分を書く。ここはもっといい方法があるはず。
曜日変更のカスタマイズをしたくて、daysOfTheWeek:を追記している。

スクリプト部分

<%= javascript_tag do %>
$(document).ready(function(){
  $('.clndr').clndr({
    daysOfTheWeek: ['SU', 'M', 'T', 'W', 'T', 'F', 'SA']
  })
});
<% end %>

表示部分

<div class="clndr"></div>

これだけ。


f:id:hsaitou:20140720154309p:plain

あとは、CSSで背景色やバランスを整えた。
previousとnextの表示を変えたいんだけど、やりかたが分からず。苦戦中。
詳しい人いないかなあ。