[英]Fullcalendar 4: update info event from modal Bootstrap
我正在嘗試從 Fullcalendar 版本 4 中的模態 Bootstrap 更新信息日期事件。我的測試:
但是當點擊按鈕時我有這個錯誤:
q TypeError: calendar.fullCalendar is not a function on this line: var event_obj_arr = calendar.fullCalendar('clientEvents', calendario_id);
(function ($) {
'use strict';
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
locale: 'it',
plugins: ['dayGrid', 'timeGrid', 'list', 'interaction', 'bootstrap'],
themeSystem: 'bootstrap',
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectMirror: true,
editable: true,
eventLimit: true, // allow "more" link when too many events
events: {
url: '/_admin/vendor/fullcalendar/php/get-events.php',
failure: function () {
document.getElementById('script-warning').style.display = 'block';
}
},
eventClick: function (info) {
$('.card-body h4').html(info.event.start.toDateString());
$('.card-body p').html(info.event.title + '<br>' + info.event.extendedProps.autista + ' / Info: ' + info.event.extendedProps.autista_description);
$('#calendario_id').val(info.event.id);
$('#btnModal').trigger('click');
},
loading: function (bool) {
document.getElementById('loading').style.display =
bool ? 'block' : 'none';
}//,
});
calendar.render();
$('#submitButtonEdit').on('click', function (e) {
// We don't want this to act as a link so cancel the link action
e.preventDefault();
doSubmitEdit();
});
function doSubmitEdit() {
// get event object
var event_obj_arr = calendar.fullCalendar('clientEvents', calendario_id);
var event_obj = event_obj_arr[0];
// edit
$("#createEventModalEdit").modal('hide');
console.log($('#autista_description').val());
console.log($('#calendario_id').val());
// update event object properties
event_obj.extendedProps.autista_description = $('#autista_description').val();
// post to server
$.ajax({
url: '/_admin/vendor/fullcalendar/php/planning-aggiorna.asp',
data: 'type=changetitle&title=' + title + '&calendario_id=' + calendario_id,
type: 'POST',
dataType: 'json',
success: function (response) {
if (response.status == 'success') {
// nothing to do here
// update calendar, you may put this line into success method
calendar.fullCalendar('updateEvent', event_obj);
}
},
error: function (e) {
alert('Error processing your request: ' + e.responseText);
}
});
}
}).apply(this, [jQuery]);
是否可以訪問它之外的 fullcalendar 類? 謝謝你。
這是解決方案,感謝@Adison。 我們有從模態表單中檢索的元素、實時日歷的更新(我將“更改的”文本附加到事件的標題)和 db 的更新。
function doSubmitEdit() { // get values from modal form var calendario_id = $('#calendario_id').val(); var calendario_descrizione = $('#calendario_descrizione').val(); // get event object by id var event = calendar.getEventById(calendario_id); var title = event.title; // post to server and update db $.ajax({ url: '/_admin/planning-aggiorna.asp', data: 'calendario_descrizione=' + encodeURIComponent(calendario_descrizione) + '&calendario_id=' + calendario_id, type: 'POST', dataType: 'text', success: function (response) { if (response == 'success') { // update calendar event.setProp('title', title + ' changed'); event.setExtendedProp('autista_description', calendario_descrizione); } }, error: function (e) { alert('Error processing your request: ' + e.responseText); } }); }
有很多方法可以從外部訪問日歷。 最簡單的方法是改變第 4 行,
var calendar = new FullCalendar.Calendar(calendarEl, {
到
$.calendar = new FullCalendar.Calendar(calendarEl, {
這意味着使日歷變量成為 JQuery 的屬性。
希望這有幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.