CLNDR.jsはjQuery/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

カレンダー機能は意外とよく使われます。イベント系はもちろん、ブログのサイドバーにつけることもあります。そんなカレンダー表示をjQueryで提供するのがCLNDR.jsです。

[![](http://images.moongift.jp/2013/09/Screenshot 2013-09-22 11.35.40_thumb.1379908605.png)](http://images.moongift.jp/2013/09/Screenshot 2013-09-22 11.35.40.1379908605.png)
デモ。左側にカレンダー、右側にイベントの一覧が表示されています。

[![](http://images.moongift.jp/2013/09/Screenshot 2013-09-22 11.36.01_thumb.1379908615.png)](http://images.moongift.jp/2013/09/Screenshot 2013-09-22 11.36.01.1379908615.png)
別なデモ。カレンダーのみ表示して日付をクリックすると…

[![](http://images.moongift.jp/2013/09/Screenshot 2013-09-22 11.36.04_thumb.1379908639.png)](http://images.moongift.jp/2013/09/Screenshot 2013-09-22 11.36.04.1379908639.png)
イベント表示に切り替わります。

[![](http://images.moongift.jp/2013/09/Screenshot 2013-09-22 11.36.19_thumb.1379908655.png)](http://images.moongift.jp/2013/09/Screenshot 2013-09-22 11.36.19.1379908655.png)
こちらはすっきりとしたデザインのデモ。

CLNDR.jsは今時のフラットデザインですっきりとした見やすいカレンダーになっています。そのまま使うのはもちろんjQueryベースとあって、他の処理と組み合わせて拡張するのも容易です。シンプルなUIだけに使い勝手が良さそうです。

MOONGIFTはこう見る

カレンダーの利用場面はとても多いです。単純に表示するのはもちろん、日付選択に使ったりもします。殆どのデータは日付や時刻に紐づいており、それらを絞り込んで表示しようと思うと必ずカレンダー的インタフェースが欲しくなります。それなのにWebの標準ではそういったUIは用意されていません。

CSSでデザインを行う場合、他のフレームワークの設定から干渉を受けたり、雰囲気が変わってしまったりもします。また、本当の意味で使い勝手の良いカレンダーライブラリは多くありません。一つ、そういったライブラリを知っておくと使い回しがきくのでぜひ探してみましょう。

CLNDR.js

kylestetz/CLNDR