2014/09/17
多機能のカレンダーを実装するjQueryプラグインのFullCalendar
Googleカレンダーのようなカレンダーを実装することができるjQueryプラグインに、
「FullCalendar」というものがあります。
多機能で、標準的なカレンダーだと、簡単に実装することができ、
オプションも豊富です。
ただ、オプションが豊富すぎて、実際使うときに迷ってしまいましたので、
基本的な使い方や、私が使ったオプションについてまとめてみました。
基本的な使い方
1.ファイルをダウンロードして、HTMLに読み込む
↓こちらのページの「Latest: fullcalendar-x.x.x.zip」からファイル一式をダウンロードします。
ダウンロードしたら、「fullcalendar.min.css」、「moment.min.js」、「jquery-ui.custom.min.js」、「fullcalendar.min.js」、
そして 必要に応じて、「ja.js」をダウンロードしたファイルから探し出して、適宜ディレクトリに配置します。
そして、以下の順番で、HTMLに読み込みます。
|
1 2 3 4 5 6 7 8 9 | <!-- CSS --> <link href="css/fullcalendar.min.css" rel="stylesheet" type="text/css"> <!-- JavaScript --> <script type="text/javascript" src="js/moment.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="js/jquery-ui.custom.min.js"></script> <script type="text/javascript" src="js/fullcalendar.min.js"></script> <script type="text/javascript" src="js/ja.js"></script> |
moment.min.jsをjQueryより先により先に読み込まないとエラーになりますので、気をつけてください。
2.HTMLにカレンダーを読み込むDIVを用意し、FullCalendarを呼び出す。
HTML
|
1 | <div id="calendar"></div> |
JavaScript
|
1 | $('#calendar').fullCalendar(); |
基本はこれで動きますが、
実際にはオプションを設定して、カスタマイズしていくのが通常だと思いますので、
すべてではありませんが、１日のスケージュール表示で使うものを中心に一部ご紹介いたします。
オプション
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | $('#calendar').fullCalendar({ //ヘッダーの設定 header: { //それぞれの位置に設置するボタンやタイトルをスペース区切りで指定できます。指定しない場合、非表示にできます。 // 'title'→月・週・日のそれぞれの表示に応じたタイトル // 'prev'→前へボタン // 'next'→次へボタン // 'today'→当日表示ボタン left: 'today prev', //左側に配置する要素 center: 'title', //中央に配置する要素 right: 'next' //右側に配置する要素 } height: 960, //高さをピクセルで指定 defaultView: 'agendaDay', //初めの表示内容を指定 内容はこちらを参照→ http://fullcalendar.io/docs/views/Available_Views/ aditable: true, //trueでスケジュールを編集可能にする allDaySlot: false, //falseでagendaDay表示のときに全日の予定欄を非表示にする //時間の表示フォーマットを指定する 指定方法はこちらを参照→http://momentjs.com/docs/#/displaying/format/ timeFormat: { agenda: 'h(:mm)' }, slotEventOverlap: false, //スケジュールが重なったとき、重ねて表示するかどうか（falseにすると、重ねずに表示する） axisFormat: 'H:mm', //時間軸に表示する時間の表示フォーマットを指定する(ヒョジ方法はtimeFormatと同じ) slotDuration: '01:00:00', //表示する時間軸の細かさ snapDuration: '01:00:00', //スケジュールをスナップするときの動かせる細かさ minTime: "00:00:00", //スケジュールの開始時間 maxTime: "24:00:00", //スケジュールの最終時間 defaultTimedEventDuration: '01:00:00', //画面上に表示する初めの時間(スクロールされている場所) eventClick: function(event) { //イベントをクリックしたときに実行 }, dayClick: function(date){ //イベントじゃないところをクリックしたとき(日をクリックしたとき)に実行 }, droppable: true, //外部要素からのドラッグアンドドロップを可にする drop: function(date){ //外部要素からドラッグアンドドロップしたときに実行 }, eventDragStop: { //カレンダー上にドラッグし終わったときに実行 } //カレンダーを再描画 $('#calendar').fullCalendar('rendar'); //カレンダーを削除 $('#calendar').fullCalendar('destroy'); //イベントを追加 $('#calendar').fullCalendar('renderEvent', event, true); //eventはeventオブジェクト //イベントを更新 $('#calendar').fullCalendar('updateEvent', event); }); |
追記：
Author Profile
SHARE
