FullCalendarを使用して、GoogleカレンダーのようなUIを実装する使用例を紹介します。
https://fullcalendar.io/download/
こちらのサイトからファイルをダウンロードします。
ダウンロードしたファイルを解凍し、含まれている以下のファイルを使用します。
fullcalendar.min.css
fullcalendar.min.js
<link href="fullcalendar.min.css" rel="stylesheet" type="text/css" />
<script src="fullcalendar.min.js"></script>
<div id="calendar"></div>
HTML側はたったこれだけです。
CSS・Javascriptを読み込み、calendarというIDのタグを配置しています。
$(function () {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
titleFormat: 'YYYY年MM月DD日',
titleRangeSeparator: '~',
defaultView: 'agendaWeek',
defaultDate: today_at,
allDaySlot: false,
buttonText: {
today: '今日',
month: '月',
week: '週',
day: '日',
list: 'リスト',
},
monthNames: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
monthNamesShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
dayNames: ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'],
dayNamesShort: ['日', '月', '火', '水', '木', '金', '土'],
editable: false,
eventLimit: true, // allow "more" link when too many events
events: {
url: '/schedule/list', // スケジュール情報をjsonで取得するためのURLを記載
error: function() {
alert('スケジュールの取得に失敗しました。');
}
},
eventClick: function(event) {
openModal('schedule/edit/' + event.id)
}
});
});
こんな感じです。
/schedule/list には、GETでstart、endのデータが渡されるので、それを元に情報をjson形式で返すプログラムを実装してあげれば完了です。
また、eventClick を使用して、登録されているイベントを編集することも可能です。