フロントエンドエンジニアの峯です。
前回はエンジニアブログ初投稿ということで、技術とは無縁のテーマでお送りしましたが、今回はJavaScriptを使ってカレンダーを作りたいと思います。
技術ブログっぽいものを目指して頑張ります！
目次
jQuery プラグイン「CLNDR.js」のダウンロード
JavaScript を使ってカレンダー機能を実装する手段は豊富に存在します。
今回は最低限のコーディング時間でカレンダーを表示することができるCLNDR.jsというjQuery プラグインを使います。
上記リンク先に移動すると、いくつかのカレンダー実装方法が記載されたWebページにリンクします。
CLNDR.jsは「moment.js」という日付、時刻操作を行うJavaScriptライブラリを用いて実装されています。
CLNDR.jsページのgithubページから clndr.js のダウンロードが可能です。
カレンダーの呼び出し
ダウンロードしたclndr.jsファイル内を参照すると既にカレンダーの枠組みがマークアップされています。
ここを呼び出すことで最低限のコーディングでカレンダーを表示させることができます。
var clndrTemplate =
"<div class='clndr-controls'>" +
"<div class='clndr-control-button'>" +
"<span class='clndr-previous-button'>previous</span>" +
"</div>" +
"<div class='month'><%= month %> <%= year %></div>" +
"<div class='clndr-control-button rightalign'>" +
"<span class='clndr-next-button'>next</span>" +
"</div>" +
"</div>" +
"<table class='clndr-table' border='0' cellspacing='0' cellpadding='0'>" +
"<thead>" +
"<tr class='header-days'>" +
"<% for(var i = 0; i < daysOfTheWeek.length; i++) { %>" +
"<td class='header-day'><%= daysOfTheWeek[i] %></td>" +
"<% } %>" +
"</tr>" +
"</thead>" +
"<tbody>" +
"<% for(var i = 0; i < numberOfRows; i++){ %>" +
"<tr>" +
"<% for(var j = 0; j < 7; j++){ %>" +
"<% var d = j + i * 7; %>" +
"<td class='<%= days[d].classes %>'>" +
"<div class='day-contents'><%= days[d].day %></div>" +
"</td>" +
"<% } %>" +
"</tr>" +
"<% } %>" +
"</tbody>" +
"</table>";
新規で作成したindex.htmlファイルでカレンダーを表示します。
ダウンロードしたclndr.jsファイルだけでは動きません。 以下のライブラリを利用します。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
カレンダーを呼び出す準備が整いました。
カレンダーの出力場所を用意して、カレンダーを呼び出す処理を記述します。
<body>
<div id="clndr"></div>
</body>
<script type="text/javascript">
$('#clndr').clndr();
</script>
たったこれだけでカレンダーの呼び出しが完了です。
以下でご確認ください！
「previous」、「next」で月の移動も可能です!
CSSファイルにデザインを追加して、自由にデザインができます。
日本語カレンダーにしよう
カレンダーを日本語対応にするためには、moment.jsのローカライズファイル一覧にあるja.jsを使用することで日本語に変換できます。
今回はのマークアップ部分を変更しようと思うので、CLNDR.jsファイルを直接編集して日本語カレンダーにします。
曜日の変更
まず、曜日を「日 月 火 水 木 金 土」に変更します。
「曜日」に関しては、clndr.jsの86行目daysOfTheWeek変数に日本語の曜日形式を渡します。
初期値はnullになっているかと思いますので、以下に変更します。
daysOfTheWeek: ['日', '月', '火', '水', '木', '金', '土'],
月の変更
次に「月」です。現在はアルファベットにて出力されていますので、「1月 2月… 10月 11月 12月」のように変更します。
clndr.jsはmoment.jsによって作られています。
moment.jsの公式サイトより、月の出力方法を見ると、数字出力にするにはformat('M')にするといいようです。
月の出力形式は786行目で設定されているので、以下のように変更します。
month: this.month.format('M'),
それから、clndr.jsのマークアップ部分の<% month %>の後に「月」を追加して保存します。再読み込みすると反映されているかと思います。
あとは、CSSの追加で自分好みの出力に変更すれば完成です！
ちなみに僕のお好みカレンダーはこんな感じにしました！いかがでしょうか？?
ajike カラーです！！
終わりに
clndr.jsいかがでしたでしょうか？
僕は拡張性が高くていいなと感じました。制作時間を大幅に削減できると思いませんか？
もちろんマークアップ部分を独自で作成すれば、見た目を変えたカレンダーを表示させることができます！
実はもっと簡単なライブラリがあるよなんてことがあれば教えて頂けると嬉しいです！
是非、カレンダーの実装がしたいという時の参考にしてください。
最後までお読みいただきありがとうございました!