fullcalenderにMySQLのシフトデータをカレンダー上に表示させたい

calendar.js

1document.addEventListener('DOMContentLoaded', function() { 2 var calendarEl = document.getElementById('calendar'); 3 4 fetch('getShifts.php') 5 .then(response => response.json()) 6 .then(data => { 7 var calendar = new FullCalendar.Calendar(calendarEl, { 8 headerToolbar: { 9 left: 'prev,next today', 10 center: 'title', 11 right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth' 12 }, 13 buttonText: { 14 prev: '先月', 15 next: '来月', 16 today: '今日', 17 dayGridMonth: '月', 18 timeGridWeek: '週', 19 timeGridDay: '日', 20 listMonth: 'リスト', 21 }, 22 locale: 'ja', 23 timeZone: 'Asia/Tokyo', 24 eventLimit: true, 25 navLinks: true, 26 editable: true, 27 dayMaxEvents: true, // for all non-TimeGrid views 28 views: { 29 timeGrid: { 30 dayMaxEventRows: 4 // adjust to 6 only for timeGridWeek/timeGridDay 31 } 32 }, 33 selectable: true, 34 plugins: ['dayGrid', 'timeGrid', 'interaction', 'list'], 35 initialView: 'dayGridMonth', 36 events: function(info, successCallback, failureCallback) { 37 // infoオブジェクトを使用して日付の範囲を取得 38 setCalendarList(info.startStr, info.endStr, successCallback); 39 }, 40 eventClick: function(info) { 41 // カレンダーに設定したイベントクリック時のイベント 42 }, 43 dateClick: function(info) { 44 // カレンダー空白部分クリック時のイベント 45 }, 46 select: function(info) { 47 // カレンダー空白部分をドラッグして範囲指定した時のイベント 48 }, 49 eventDrop: function(info) { 50 // イベントをドラッグして別日に移動させた時のイベント 51 } 52 }); 53 54 calendar.render(); 55 }) 56 .catch(error => { 57 console.error('Error fetching data:', error); 58 }); 59}); 60 61/** 62 * 対象日付スケジュールデータセット処理 63 * @param {string} startStr - 開始日付 64 * @param {string} endStr - 終了日付 65 * @param {function} successCallback - 成功時のコールバック関数 66 * @returns {undefined} 67 */ 68function setCalendarList(startStr, endStr, successCallback) { 69 $.ajax({ 70 type: 'post', 71 dataType: "json", 72 async: true, 73 cache: false, 74 url: 'getShifts.php', 75 data: { 76 startDate: startStr, 77 endDate: endStr 78 } 79 }) 80 .then(function(data) { 81 var events = []; 82 83 // 取得したデータをフルカレンダーのイベント形式に整形 84 $.each(data, function(index, value) { 85 events.push({ 86 id: value['shift_id'], 87 title: value['title'], 88 description: value['description'], 89 start: value['start'], 90 end: value['end'], 91 color: value['color'], 92 textColor: value['textColor'] 93 }); 94 }); 95 96 // 成功時のコールバック関数にイベントを渡す 97 successCallback(events); 98 }) 99 .catch(error => { 100 console.error('Error in setCalendarList:', error); 101 // 失敗時の処理をここに記述することもできます 102 }); 103 104 return; 105} 106