jQueryで作るミニマルな良デザインカレンダー「CLNDR.js」

「CLNDR.js」はカレンダーが作れるjQueryプラグインです。そのようなプラグインは数多くありますが、このプラグインはフラットなデザインがとても美しいカレンダーです。

CLNDR.js

CLNDR

とてもよいデザインです。こういうミニマルなデザイン大好きなんですよね。右側にその日のスケジュールを表示しているのもグッドです。他にもサンプルが紹介されています。こちらは緑を基調としたカラーリングが素敵ですね。

CLNDR-demo-1

予定のある日をクリックすると、このように予定がリストされます。

CLNDR-demo-2

こちらはさらにシンプル。

CLNDR-demo-3

 

それでは「CLNDR.js」の実装方法をご紹介します。まずはjQuery含む外部ファイルを読み込みます。

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.1.0/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="clndr.min.js"></script>

 

HTMLはこのようにマークアップします。

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

 

JavaScriptはこのように実装します。

$('.clndr').clndr();

 

するとこのように作ることができました。

CLNDR-sample-1

もっともノーマルな形で作りました。CSSをChromeConsoleから若干いじっています。他にも多くのオプションがありますし、CSSで作り込めばよいデザインに仕上がります。リンク先のDemoを参考にされるとよいかと思います。参考にどうぞ。

 

Home > JavaScript > jQueryで作るミニマルな良デザインカレンダー「CLNDR.js」

Return to page top