レスポンシブにも対応したカレンダーを表示する「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を触ったことがある方はすんなり馴染めそうです。ブラウザ小さくすると縦並びにしてくれます。
表示データはこれまたクセがありそうですが、次の機会に、動的データ取得して表示してみよう。
関連記事
-
-
レスポンシブに対応した画像ギャラリーが実装できる「Responsive Image Gallery」
「Responsive Image Gallery with Thumbnail Carousel」はレスポンシブにも対応した画像ギャラリーが実装できるjQueryプラグインです。Twitterの「最
-
-
jqPlot - Legend(凡例) オプション
jqPlotの凡例(Legend)の設定オプションのまとめです。前提は、こちらを参照して下さい。 目次 凡例を表示 凡例の位置 [location, placement] 凡例のフォ
-
-
ナビゲーションメニューを画面サイズによってドロップダウンにしてくれる「TinyNav.js」
「TinyNav.js」はナビゲーションメニューを画面サイズがある以下になるとドロップダウンにしてくれるjQueryプラグインです。 スクリプト 実装 スタイルシート
-
-
ファイルアップロードフォーム プラグイン
Ajax File Upload Form with jQuery Ajax File Upload Form with jQuery [browser-shot url="h
-
-
画像ギャラリーを実装できる「Galleria」
Galleriaは、わずか数行で画像ギャラリーが作成できるjQueryプラグインです。Airbnbのページで使用されていて、コレいいな~と思い試してみました。 ナビゲーション内にサムネイルを
-
-
バリデーション プラグイン
Nod Nod サイト | デモ [browser-shot url="http://rickharrison.github.io/validate.js/" width="2
-
-
数値入力に便利なステッパーを実装「Numeric Stepper」
「Numeric Stepper」は、数値用のステッパーを実装できるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 既存のテキストボックスにclas
-
-
テキストボックスの入力値を数値限定にしてくれる「jQuery - numeric」
「jQuery - numeric」は、テキストボックスへの入力を数字のみに制限してくれるjQueryプラグインです。正/負、整数/小数点 チェックまで限定してくれます。ダウンロード スクリプト
-
-
ページの画像を非同期で読み込んでくれる「Lazy Load」
「LazyLoad Plugin」は、画像をページのロード時ではなく非同期に読み込んでくれるjQueryプラグインです。設定によりスクロールした際に画像をロードしたりしてくれます。 ダウンロード |
-
-
定期的にAjaxリクエストを送信してくれる「PeriodicalUpdater」
PeriodicalUpdaterは、定期的にpostもしくはgetリクエストを送信してくれるjQueryプラグインです。Twitterのタイムラインのように定期的にツイートをロードしてくれるようなや
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/