簡単にカレンダー機能を実装できるライブラリ、FullCalendar
簡単にカレンダー機能を実装できるfullcalendarというライブラリがあるので紹介します。
ダウンロードは以下から
http://fullcalendar.io/download/
簡単にHTML内に埋め込み実装できます。
ダウンロードしてきた中身の、
「fullcalendar.min.js」
「fullcalendar.min.css」
「moment.min.js」
「jquery-ui.custom.min.js」
上記をそれぞれディレクトリに配置。
以下の順番で、HTMLに読み込ませます。
<!-- 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を先に読み込ませます。
moment.min.jsを先に読み込ませないとエラーになります。
moment.min.jsの詳細は以下
日付処理を簡単に行ってくれるライブラリです
http://momentjs.com/
qiita.com
FullCalendar内で日付処理を行う際に利用しています。
<!-- 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>
HTML側にはこの一文
<div id="calendar"></div>
JSファイルに以下の文
$('#calendar').fullCalendar();
これでほぼ完成。実装は簡単です。
オプション設定をすることで自分好みのカレンダーにカスタマイズすることができます。
$('#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); });
こんな感じにカスタムすることもできます。
また、カレンダーをアプリケーション機能と組み合わせて実用的なカレンダーを作ることもできます。
詳しくは以下の記事を参考に。
Google Calendar APIとつなぎ込めば情報の共有などもできます。