レスポンシブにも対応したカレンダーを表示する「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を触ったことがある方はすんなり馴染めそうです。ブラウザ小さくすると縦並びにしてくれます。
表示データはこれまたクセがありそうですが、次の機会に、動的データ取得して表示してみよう。
関連記事
-
-
入力数値の桁区切り挿入
ユーザに数値を入力してもらう際に区切りを入れるようにすると入力ミスを少なくすることができます。このソースは、SugarJSというものから拝借して少し改変しています。 実装 fu
-
-
ナビゲーション内にサムネイルを設置できる画像スライダー・ギャラリー用プラグイン
画像ギャラリーを作成してくれるjQueryプラグインはたくさん制作されています。その中でもサムネイルを使用してギャラリーのナビゲーションを行ってくれるプラグインをいくつか集めてみました。 サムネ
-
-
リストをインクリメント検索・ソートできる「List.js」
List.jsは、リストをインクリメント検索やソートができるjQueryプラグインです。 ダウンロードはこちら リストだけでなくテーブルにも実装可能のようです。 スクリプト
-
-
カウントダウン プラグイン
FlipClock #時間 FlipClock サイト [browser-shot url="http://xdsoft.net/jqplugins/flipcountd
-
-
シンプルにモーダルウィンドウを実装できる「leanModal」
「leanModal」は、シンプルにモーダルウィンドウを設置できるjQueryプラグインです。オプションは少なめですが、複雑な機能は必要なく単に設置したいという場合にはもってこいのライブラリだと思いま
-
-
レスポンシブに対応したテーブルを実装できる「FooTable」
「FooTable」は、画面の大きさに合わせて表示をかえてくれるテーブルを実装できるjQueryプラグインです。かなり、シンプルに実装できます。ダウンロード #v2にアップデートされたため刷
-
-
時刻入力に便利な「Timepicker for Bootstrap」(Bootstrap 2)
「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 目次 実装方法 モダール形式 Datepicker
-
-
Amazonのような画像ズーム機能が実装できる「SergeLand Image Zoomer」
「SergeLand Image Zoomer v3.0」はAmazonなどでみられるマウスオーバーで画像をズームしてくれる機能を実装できるjQueryプラグインです。 ダウンロード *黄色ボタン
-
-
表示パターン豊富なスライダー「flexslider 2」
「flexslider 2」は、シンプルに実装でき、かつカスタマイズ機能が豊富なスライダー用プラグインです。 flexslider 2 オプションや機能 サムネイルナビゲーション 複数表示
-
-
グラフ作成 プラグイン
C3.js C3.js サイト [browser-shot url="http://www.chartjs.org/" width="200" imgclass=" ali
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/