レスポンシブにも対応したカレンダーを表示する「Calendario.js」

Calendarioは、レスポンシブデザインにも対応したカレンダ表示プラグインです。
ダウンロード

スクリプト

<link href="/css/calendar.css" type="text/css" rel="stylesheet">
<script src="/js/jquery.calendario.js" type="text/javascript"></script>

実装

<div id="calendar" class="fc-calendar-container"></div>
<script type="text/javascript">
$(document).ready(function() {
    $('#calendar').calendario({
        caldata : codropsEvents    // 表示データ
    });
});
</script>

// 表示データ例
var codropsEvents = {
    '11-23-2012' : '<a href="http://tympanus.net/codrops/2012/11/23/three-script-updates/">Three Script Updates</a>',
};

デモ

配布元とまったく同じですがデモ作成してみました。
サンプル1
サンプル2

Fullcalendarを触ったことがある方はすんなり馴染めそうです。ブラウザ小さくすると縦並びにしてくれます。
表示データはこれまたクセがありそうですが、次の機会に、動的データ取得して表示してみよう。

Related

様々なタイプのグラフ表示をカバーする「jqPlot」(折れ線グラフ) 「カレンダー」ウィジェット カスタマイズ・プラグイン カレンダー実装プラグイン「Bootstrap Calendar」 表示パターン豊富なスライダー「flexslider 2」 シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlider」 レスポンシブ対応の画像スライダー・ギャラリー用プラグイン カルーセル プラグイン タブを画面サイズによってアコーディオンにしてくれる「Easy Responsive Tabs to Accordion」