カレンダー実装プラグイン「Bootstrap Calendar」

「Bootstrap Calendar」はBootstrap 3ベースでカレンダーが実装できるjQueryプラグインです。
ダウンロード
スクリプト
<link href="bootstrap.css" type="text/css" rel="stylesheet"> <!-- Bootstrap 3 --> <link href="css/calendar.css" type="text/css" rel="stylesheet"> <script src="underscore-min.js" type="text/javascript"></script> <script src="js/calendar.js" type="text/javascript"></script> <script src="bootstrap.js" type="text/javascript"></script> <!-- Bootstrap 3 --> <!-- 日本語化用 --> <script src="js/language/ja-JP.js" type="text/javascript"></script>
実装
<!-- カレンダー表示部 --> <div id="calendar"></div>
<script type="text/javascript"> (function($) { "use strict"; // オプション var options = { tmpl_path: '/tmpls/', // テンプレートファイル パス events_source: function () { return [events]; }, // イベントデータ language: 'ja-JP', // カレンダー日本語化 onAfterViewLoad: function(view) { $('.page-header h3').text(this.getTitle()); $('.btn-group button').removeClass('active'); $('button[data-calendar-view="' + view + '"]').addClass('active'); }, }; // カレンダー表示 var calendar = $('#calendar').calendar(options); // ナビゲーション クリック $('.btn-group button[data-calendar-nav]').each(function() { var $this = $(this); $this.click(function() { calendar.navigate($this.data('calendar-nav')); }); }); // ビュー切替用ボタン クリック $('.btn-group button[data-calendar-view]').each(function() { var $this = $(this); $this.click(function() { calendar.view($this.data('calendar-view')); }); }); }(jQuery)); </script>
カレンダーのナビゲーションとビュー切替用ボタン
<!-- カレンダー ヘッダー --> <div class="page-header"> <!-- カレンダー タイトル --> <h3></h3> <!-- カレンダー ナビゲーション --> <div class="btn-group"> <button class="btn" data-calendar-nav="prev"><<</button><button class="btn" data-calendar-nav="today">[Today]</button><button class="btn" data-calendar-nav="next">>></button> </div> <!-- ビュー切替用ボタン --> <div class="btn-group"> <button class="btn" data-calendar-view="year">Year</button><button class="btn" data-calendar-view="month">Month</button><button class="btn" data-calendar-view="week">Week</button><button class="btn" data-calendar-view="day">Day</button> </div> </div>
イベントデータ
イベントデータのフォーマットは以下のようになっています。
classは、スタイルのためのもので、event-important, event-success, event-warning, event-info, event-inverse and event-specialがあるようです。
var events = { "id": 1222, // id "title": "Event 1222", // タイトル "url": "http://kwski.net", // リンク "class": "event-important", // class "start": 1412125748000, // 開始日時(ミリ秒まで) "end": 1412989748000 // 終了日時(ミリ秒まで) };
関連記事
-
-
Wysiwygエディタ用プラグイン「CKEditor」
「CKEditor」は、Wysiwygエディタを実装できるプラグインです。 ダウンロード | デモ スクリプト 実装 文字数・単語数のカウント表
-
-
ECサイトの商品表示に使えそうなスライダー「Simple Multi-Item Slider」
「Simple Multi-Item Slider」は、いうなればネスト型の画像スライダーです。ECサイトでの商品陳列からサムネイルメニューなどにも使用できそうです。ダウンロード デモ スクリプ
-
-
ポップアップ・モーダル ウィンドウ プラグイン
ポップアップ シンプルにポップアップを実装できる「PopBox」 実装方法が選べるツールチップ用プラグイン「Smallipop」 Bootstrap Popovers
-
-
selectボックスを華麗にしてくれる「Chosen」「Select2」
selectボックスに当てるjQueryプラグインを色々探してみましたがこれに決めました。シングルやマルチ、またグループにも対応しています。インスタンス検索してくれるのが決め手 Chosen CDN
-
-
実装方法が選べるツールチップ用プラグイン「Smallipop」
Smallipopは、ツールチップの実装をマークアップベース(HTMLに書き出し)とJavascriptベース両方で行えるjQueryプラグインです。世の中この手のツールは結構片方でのみだったりします
-
-
ページの画像を非同期で読み込んでくれる「Lazy Load」
「LazyLoad Plugin」は、画像をページのロード時ではなく非同期に読み込んでくれるjQueryプラグインです。設定によりスクロールした際に画像をロードしたりしてくれます。 ダウンロード |
-
-
クリックするとテキストボックスにかわるラベルを実装
Flickrなどでは、写真の編集画面でキャプションをラベルとして表示しておきクリックするとテキストボックスやテキストエリアに変換してくれて編集させるようなインターフェイスを実装しています。結構いいです
-
-
日付入力に便利な「Datepicker for Bootstrap」
「Datepicker for Bootstrap」はテキストボックスにカレンダーを表示して日付入力を便利にしてくれるjQueryプラグインです。 目次 Datepicker for Boot
-
-
色々なタイプの画像ギャラリーが実装できる「Rondell」
「Rondell」は、様々なタイプの画像ギャラリーを実装してくれるjQueryプラグインです。 カルーセル・スライダー・ギャラリーなど一通り実装可能です。 ダウンロード 本家デモ
-
-
スワイプ対応の画像スライダー・ギャラリー用プラグイン
画像スライダー(ギャラリー)を作成してくれるjQueryプラグインの中からスワイプ操作で画像をスライドできるものをいくつか集めてみました。 シンプルでカスタマイズ豊富なスライダー用プラグイン「b
Comment
@digi_snow https://t.co/RGxQ1H5735 こっちも、これなら簡単に書けるんじゃね? CSSフレームワークって初見のときに導入障壁はある。
2件のコメント https://t.co/MI9M5eoeCy “jQuery | カレンダー実装プラグイン「Bootstrap Calendar」” https://t.co/ItrdfpntFg
こんなのあったの?
[…] 「Bootstrap Calendar」はBootstrap 3ベースでカレンダーが実装できるjQueryプラグインです。 ダウンロード スクリプト情報源: カレンダー実装プラグイン「Bootstrap Calendar」 […]
[…] Think deeply, Do less, More effective カレンダー実装プラグイン「Bootstrap Calendar」 […]
カレンダー