レスポンシブにも対応したカレンダーを表示する「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を触ったことがある方はすんなり馴染めそうです。ブラウザ小さくすると縦並びにしてくれます。
表示データはこれまたクセがありそうですが、次の機会に、動的データ取得して表示してみよう。
関連記事
-
-
「jqPlot」を使って棒グラフを作成
jqPlotを使って棒グラフを作成してみました。ベースはこの記事を参照ください。 スクリプト jqPlotのベースとなるjsファイルと以下の棒グラフの作成に必要なスクリプトを読み込んで下さい。
-
-
画像ズーム プラグイン
画像をズームしてくれるプラグインには、ツールチップ的にサムネイルにマウスオーバーした部分をズームアップしたり元画像を表示したり、その画像内でインナーズームする というような機能があるようです。
-
-
リストをインクリメント検索・ソートできる「List.js」
List.jsは、リストをインクリメント検索やソートができるjQueryプラグインです。 ダウンロードはこちら リストだけでなくテーブルにも実装可能のようです。 スクリプト
-
-
バリデーション プラグイン
Nod Nod サイト | デモ [browser-shot url="http://rickharrison.github.io/validate.js/" width="2
-
-
時刻入力に便利な「Timepicker for Bootstrap」
「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 2014/06/16 Bootstrap3対応版に書き換え
-
-
ページの画像を非同期で読み込んでくれる「Lazy Load」
「LazyLoad Plugin」は、画像をページのロード時ではなく非同期に読み込んでくれるjQueryプラグインです。設定によりスクロールした際に画像をロードしたりしてくれます。 ダウンロード |
-
-
シンプルにモーダルウィンドウを実装できる「leanModal」
「leanModal」は、シンプルにモーダルウィンドウを設置できるjQueryプラグインです。オプションは少なめですが、複雑な機能は必要なく単に設置したいという場合にはもってこいのライブラリだと思いま
-
-
商用利用フリー Lightbox プラグイン
商用利用フリー(投稿時)のlightbox用プラグインをまとめてみました。最新のライセンスに関しては各サイトに確認をお願いいたします。) lightboxの中にもギャラリー表示が可能なもの、ギャラリ
-
-
定期的にAjaxリクエストを送信してくれる「PeriodicalUpdater」
PeriodicalUpdaterは、定期的にpostもしくはgetリクエストを送信してくれるjQueryプラグインです。Twitterのタイムラインのように定期的にツイートをロードしてくれるようなや
-
-
カウントダウン プラグイン
FlipClock #時間 FlipClock サイト [browser-shot url="http://xdsoft.net/jqplugins/flipcountd
Comment
“jQuery | レスポンシブにも対応したカレンダーを表示する「Calendario.js」 | Think deeply, Do less, More effective” https://t.co/toMIIrfdhe
[jQuery[プラグイン][responsive]かっちょいい
jQuery - レスポンシブにも対応したカレンダーを表示する「Calendario.js」 http://t.co/jxGcobqENT
レスポンシブにも対応したカレンダーを表示する「Calendario.js」 http://t.co/SXVnufDHVP
jQuery | レスポンシブにも対応したカレンダーを表示する「Calendario.js」 | Think deeply, Do less, More effective - http://kwski.net/jquery/1051/
Calendario.js、Googleカレンダーのデータひっぱって来れたら便利なんだけどな|レスポンシブにも対応したカレンダーを表示する「Calendario.js」 http://kwski.net/jquery/1051/