ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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

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


デモ。左側にカレンダー、右側にイベントの一覧が表示されています。


別なデモ。カレンダーのみ表示して日付をクリックすると…


イベント表示に切り替わります。


こちらはすっきりとしたデザインのデモ。

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


MOONGIFTはこう見る

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

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

CLNDR.js

kylestetz/CLNDR

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2