レスポンシブにも対応したカレンダーを表示する「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を触ったことがある方はすんなり馴染めそうです。ブラウザ小さくすると縦並びにしてくれます。
表示データはこれまたクセがありそうですが、次の機会に、動的データ取得して表示してみよう。
関連記事
-
-
数値入力スライダー「jQuery Simple Slider」
「jQuery Simple Slider」はスライダーを使用して数値設定が行えるようにしてくれるjQueryプラグインです。"Unobtrusive Numerical Slider"とあるように余
-
-
ファイルアップロードフォーム プラグイン
Ajax File Upload Form with jQuery Ajax File Upload Form with jQuery [browser-shot url="h
-
-
様々なタイプのグラフ表示をカバーする「jqPlot」(折れ線グラフ)
Webページにグラフ表示する機会があったので、探してみました。 今回、使用してみた「jqPlot」がシンプルにもできてカスタマイズも豊富でいいです。グラフ用データの形式が少しクセがあり、動的に扱う際
-
-
わずかなコードで画像をサムネイル化してくれる「MyThumbnail.js」
サムネイル化してくれるJQueryプラグインは数多くありますが、この「MyThumbnail」はわずか数行で簡単にページ上の画像を指定サイズにサムネイル化してくれます。 ダウンロード 画像とし
-
-
親要素の大きさに合わせてテキストをリサイズ「FitText」
「FitText」は親要素の大きさに合わせてテキストをリサイズしくれるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 responsive_head
-
-
入力テキストの文字数をカウントしてくれる「Textchange」
Twitterのようにinputやtextareaに入力した際に、文字数をカウント(ダウン)してくれるとユーザの利便性が上がります。今回使用したTextChangeは、それ以外にも入力のイベントに対し
-
-
カルーセル プラグイン
「カルーセル(Carousel)」とは"回転木馬"という意味らしいのですが、jQuery(Javascript)では画像やコンテンツをスライド表示させるもののようです。が、スライダーとの違いはよく分り
-
-
カレンダー実装プラグイン「Bootstrap Calendar」
「Bootstrap Calendar」はBootstrap 3ベースでカレンダーが実装できるjQueryプラグインです。 ダウンロード スクリプト
-
-
Wysiwygエディタ用プラグイン「CKEditor」
「CKEditor」は、Wysiwygエディタを実装できるプラグインです。 ダウンロード | デモ スクリプト 実装 文字数・単語数のカウント表
-
-
画像をモザイク処理(ピクセル化)してくれるプラグイン「Pixelate.js」
「Pixelate.js」はその名の通り画像をピクセル化してくれるjQueryプラグインです。画面ロード時にピクセル化しておき、画像にマウスオーバーすると暴露してくれます。 ダウンロード | デモ
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/