レスポンシブにも対応したカレンダーを表示する「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を触ったことがある方はすんなり馴染めそうです。ブラウザ小さくすると縦並びにしてくれます。
表示データはこれまたクセがありそうですが、次の機会に、動的データ取得して表示してみよう。

: シンプルにモーダルウィンドウを実装できる「leanModal」

「leanModal」は、シンプルにモーダルウィンドウを設置できるjQueryプラグインです。オプションは少なめですが、複雑な機能は必要なく単に設置したいという場合にはもってこいのライブラリだと思いま

: select(list)ボックスを左右に並べて視覚的に使いやすくしてくれる「Multiselect」

「Multiselect」は、selectボックスを左右に配置して、選択したもの・していないものを左右に分けてくれるjQueryプラグインです。視覚的に使いやすくしてくれます。ダウンロードはこちら

: エフェクト豊富なニュースティッカー用プラグイン「inewsticker」

「inewsticker」は、色々なエフェクトでニュースティッカーが実装できるjQueryプラグインです。ダウンロードエフェクトには、fade/slide/typingの3つが可能です。デ

: Lightboxプラグイン「Boxer」

「Boxer」はLightboxやモーダルウィンドウを実装できるjQueryプラグインです。画像だけでなく動画にも対応しています。モバイル環境にも最適化されていて、#レスポンシブ対応で、#スワイ

: テキストに装飾効果を付けるプラグイン

Burn #テキストに炎のような効果 Burn サイトデモスクリプト実装 AAA $(function () { $('#defa

: jqPlot - Legend(凡例) オプション

jqPlotの凡例(Legend)の設定オプションのまとめです。前提は、こちらを参照して下さい。目次凡例を表示凡例の位置 [location, placement] 凡例のフォ

: selectボックスを華麗にしてくれる「Chosen」「Select2」

selectボックスに当てるjQueryプラグインを色々探してみましたがこれに決めました。シングルやマルチ、またグループにも対応しています。インスタンス検索してくれるのが決め手 Chosen CDN

: シンプルな画像スライダー/ギャラリー用プラグイン

スライダーやギャラリーを実装できるjQueryプラグインのうちシンプルなものを集めてみました。ベースはシンプルですが、オプションなどを使用してカスタマイズが豊富なものもたくさんありますね。シン

: ECサイトの商品表示に使えそうなスライダー「Simple Multi-Item Slider」

「Simple Multi-Item Slider」は、いうなればネスト型の画像スライダーです。ECサイトでの商品陳列からサムネイルメニューなどにも使用できそうです。ダウンロード　デモスクリプ

: マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」

「Mosaic」は、画像などにマウスオーバーすると、キャプションをスライド(イン/アウト)もしくはフェイド(イン/アウト)させてくれるjQueryプラグインです。ダウンロードはこちらスクリプト

Comment

@yahihi より:

2016年3月18日 11:40 AM

“jQuery | レスポンシブにも対応したカレンダーを表示する「Calendario.js」 | Think deeply, Do less, More effective” https://t.co/toMIIrfdhe

返信
studio-h より:

2015年3月18日 5:53 PM

[jQuery[プラグイン][responsive]かっちょいい
@suubeniko より:

2015年2月19日 11:05 PM

jQuery - レスポンシブにも対応したカレンダーを表示する「Calendario.js」 http://t.co/jxGcobqENT

返信
@sabadragon より:

2015年1月21日 10:32 AM

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

返信
kiyoshi1211 より:

2014年9月19日 8:07 PM

jQuery | レスポンシブにも対応したカレンダーを表示する「Calendario.js」 | Think deeply, Do less, More effective - http://kwski.net/jquery/1051/
@misasagi より:

2013年11月20日 5:40 PM

Calendario.js、Googleカレンダーのデータひっぱって来れたら便利なんだけどな｜レスポンシブにも対応したカレンダーを表示する「Calendario.js」 http://kwski.net/jquery/1051/

返信