Q&A
htmlはどうなっているのでしょうか。
またそのJavaScriptのコードはどこで読み込ませているのでしょうか。
htmlは全体提示されたほうが良いです。
Fullcalendar V4での更新・削除方法について
Fullcalendar V4において（https://fullcalendar.io/）
実際にスケジュールとして運用していく場合、eventsによるスケジュール事前登録だけでなく
追加や更新などが必要になってきます。
ただ、サイトドキュメントを参照しても更新方法について理解ができず
下記方法で試してみましたが、記載の方法はおそらくV4ではないため、
エラーが発生してカレンダーへ予定が反映(更新)されません。
どなたかおわかりでしたらカレンダーへの予定更新と削除の方法を教えて頂けたらと思います。
※カレンダーのevents予定の表示や、予定内容の取得など基本的な部分については
正常に動いています。
v4が無理ならv5でも大丈夫です。
宜しくお願い致します。
発生している問題・エラーメッセージ
Uncaught TypeError: calendarEl.fullCalendar is not a function
該当のソースコード
html
1<html lang="ja"> 2 <link href="../assets/fullcalendar/4_3_1/packages/core/main.css" rel="stylesheet" /> 3 <link href="../assets/fullcalendar/4_3_1/packages/daygrid/main.css" rel="stylesheet" /> 4 <link href="../assets/fullcalendar/4_3_1/packages/timegrid/main.css" rel="stylesheet" /> 5 <link href="../assets/fullcalendar/4_3_1/packages/list/main.css" rel="stylesheet" /> 6 7 <script src="../assets/js/bootstrap.min.js"></script> 8 <script src="../assets/js/jquery-ui.min.js"></script> 9 <script src="../assets/js/jquery-ui.custom.min.js"></script> 10 <script src="../assets/js/jquery.ui.touch-punch.min.js"></script> 11 <script src="../assets/js/bootbox.js"></script> 12 <script src="../assets/js/jquery.easypiechart.min.js"></script> 13 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script> 14 <script src="../assets/js/moment.min.js"></script> 15 <script src="../assets/fullcalendar/4_3_1/packages/core/main.js"></script> 16 <script src="../assets/fullcalendar/4_3_1/packages/interaction/main.js"></script> 17 <script src="../assets/fullcalendar/4_3_1/packages/daygrid/main.js"></script> 18 <script src="../assets/fullcalendar/4_3_1/packages/timegrid/main.js"></script> 19 <script src="../assets/fullcalendar/4_3_1/packages/list/main.js"></script> 20 <script src="../common/js/default_cal.js"></script> 21 22<body> 23<div class="row"> 24 <div class="col-xs-12"> 25 <div class="row"> 26 <div class="col-sm-9"> 27 <div id="calendar"></div> 28 </div> 29 </div> 30 </div> 31 </div> 32</div> 33<div id="modal-table" class="modal fade" tabindex="-1"> 34 <div class="modal-dialog"> 35 <div class="modal-content"> 36 <div class="modal-body"> 37 <!-- 省略 --> 38 </div> 39 </div> 40 </div> 41</div> 42 43</body> 44</html>
jquery(default_cal.js)
1 2// 3// jqueryロード 4// 5window.addEventListener('DOMContentLoaded', function(){ 6 7//カレンダーイベント 8var calendarEl = document.getElementById('calendar'); 9var calendar = new FullCalendar.Calendar(calendarEl, { 10 11events: [{ 12 id: 1, 13 title: 'Business Lunch', 14 start: '2021-05-11T13:00:00', 15 naiyo: '打合せ' 16 }], 17eventClick: function(calEvent, jsEvent, view) { 18//登録予定の選択 19 //モーダル内に選択日のカレンダー内容をセット 20 $('#inp-modal-ymd-from').val(calEvent.event.start); 21 $('#inp-modal-title').val(calEvent.event.title); 22 $('#inp-modal-naiyou').val(calEvent.event.naiyo); 23 24 //モーダルを開く部分は省略 25 26 //モーダル内更新ボタンクリック 27 $('#btn-modal-update').on('click', function(ev) { 28 ev.preventDefault(); 29 //モーダル内のタイトル入力欄内容変更したものを取得 30 var title = $(this).parents('.modal-content').find("#inp-modal-title").val(); 31 32 //↓↓↓ここでエラー 33 //V4では使えない？ 34 calendarEl.fullCalendar('updateEvent', calEvent); 35 36 }); 37 38 //モーダル内削除ボタンクリック 39 $('#btn-modal-delete').on('click', function(ev) { 40 //ここでエラー 41 calEvent.remove(); 42 }); 43} 44 45}); 46calendar.render(); 47});
更新方法について試したこと
●イベントに入れ直しではだめ
var event = calendar.getEventById('1') // an event object!
event.title = 'Update!!!';
●おそらくV4では非対応なのでだめ
calendarEl.fullCalendar('updateEvent', calEvent);
●削除のほうもだめ
calEvent.remove();
補足情報（バージョン）
Fullcalendar V4
回答1件
0
ベストアンサー
こちらはいかがでしょうか？
https://fullcalendar.io/docs/v4/Event-setProp
ソースが一部省略されているためこちらの手元では再現できていませんが、calEvent.event.setProp( 'title', title )のような形で出来そうな気はします。
追記：削除に関しては下記URLを参考に実装できるように思います。
https://fullcalendar.io/docs/Event-remove
投稿2021/06/01 05:34
編集2021/06/01 05:43
総合スコア587
下記のような修正で上手くいきました！ 素晴らしいです。
ありがとうございました。
削除のほうも実装試します
//修正内容を保管
var inp_title = $(this).parents('.modal-content').find("#inp-modal-title").val();
//カレンダーへ反映
calEvent.event.setProp( 'title', inp_title );
あなたの回答
tips
プレビュー
