fullcalendar v3 辺りはネットを探せば使い方はある程度分かったけど、v4からは読み込むファイルがだいぶ変わってる。
とりあえず本家サイトをリファレンスした結果以下のコードで表示することが可能。
|
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 58 59 60 61 62 63 |
<!DOCTYPE html> <html> <head> <link href='fullcalendar/core/main.css' rel='stylesheet' /> <link href='fullcalendar/daygrid/main.css' rel='stylesheet' /> <script src='fullcalendar/core/main.js'></script> <script src='fullcalendar/daygrid/main.js'></script> </head> <body> <p>カレンダーテスト</p> <div id="calendar"></div> </body> <script> document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { plugins: [ 'dayGrid', 'timeGrid', 'list' ] , header: { left: 'today month,basicWeek', center: 'title', right: 'prev next' }, editable: true, // イベントを編集 allDaySlot: false, // 終日表示の枠を表示 eventDurationEditable: false, // イベント期間をドラッグしで変更 slotEventOverlap: false, // イベントを重ねて表示 selectable: true, selectHelper: true, firstDay : 1, // パラメータが１だと月曜日から表示 droppable: true,// イベントをドラッグできるか select: function(start, end, allDay) { //日の枠内を選択したときの処理 }, dayClick: function(date, jsEvent, view) { //日付をクリックしたときの処理 alert('Clicked on: ' + date.format()); }, eventClick: function(calEvent, jsEvent, view) { //イベントをクリックしたときの処理 alert('Clicked on: ' + calEvent); console.log(calEvent); console.log(jsEvent); console.log(view); }, eventDrop: function(item, delta,revertFunc,jsEvent,ui, view) { //ドロップした情報 alert('Clicked on: ' + item.title); //ドロップしたことを元に戻したいとき revertFunc(); }, events: [ { title: 'イベント', start: '2019-03-23' } ] }); calendar.render(); }); </script> </html> |
今回は本家もjqueryを使わず純粋なjavascriptで書いてあったのでそのまま流用。
これで一応表示が可能。
だがしかしオプションでClickイベントを追加したのにも関わらずeventClick以外のイベントが発火しない。
v3まではdayClickという日付を選択した時のイベントがあるがv4には、無い。代わりにdateClickなるものがあるがそれではイベントが発火しない。
なんで？
v3辺りはこの設定で動くんだけど謎。
とりあえず深くは調べない。
無難にv3.9辺りを使って置けばネット上に情報はたくさん転がっているので、そちらを使った方がいいかも。
公式サイト：http://arshaw.com/fullcalendar/
ドキュメント： http://arshaw.com/fullcalendar/docs/
2019/03/25時点
最新版ダウンロード：https://github.com/fullcalendar/fullcalendar/releases/download/v4.0.1/fullcalendar-4.0.1.zip
コメントを残す