我在我的WordPress的插件上使用FullCalendar javascript...一个旧的库,所以我更新到最新的5.11.0,所以我不得不重写一点功能来管理日历如下:
var calendarEl = document.getElementById('mycalendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
locale: locale.substring(0, 2),
lazyFetching: false,
loading: function(isLoading) { if (isLoading) { box = new ajaxLoader(".mycalendar"); } },
customButtons: {
myCustomButton: {
text: 'custom!',
click: function() {
alert('clicked the custom button!');
}
}
},
headerToolbar: {
left: 'today prevYear,prev,next,nextYear',
center: 'title',
right: 'myCustomButton'
},
initialView: 'dayGridMonth',
initialDate: '2020-09-12',
dateClick: function() {
alert('a day has been clicked!');
},
events: function (info, successCallback, failureCallback) {
let url = 'http://'+window.location.host+'/wp-content/plugins/myplugin/retrievedata/retrievedata.db.php?action=load_monthlyevents&' + new URLSearchParams({
start: info.startStr,
end: info.endStr
});
fetch(url)
.then(function(response) {
//const isEmpty = Object.keys(response).length === 0;
//if (!isEmpty)
return response.json();
})
.then(function(jsonResponse) {
// do something with jsonResponse
//alert(jsonResponse);
//console.log(jsonResponse);
var events = [];
jsonResponse.forEach(function(el) {
//alert(el.id + " - " + el.start + " - " + el.end + " - " + el.data1 + " - " + el.data2 + " - " + el.color);
var event = {
id: el.id,
start: el.start,
end: el.end,
title: el.data1 + ' (' + el.data2 + ')',
backgroundColor: el.color,
textColor: '#000000'
};
events.push(event);
});
console.log(events);
box.remove();
successCallback(events);
})
.catch(function(err) {
box.remove();
failureCallback(err);
});
},
eventDidMount: function(info) {
element.qtip({
content: { text: $.ajax({url:"http://"+window.location.host+"/wp-content/plugins/myplugin/retrievedata/retrievedata.db.php?action=load_eventdetails&ID="+info.event.id, async:false}).responseText },
position: { effect: false, viewport: $('#mydata_grid'), adjust: { method: 'flipinvert' } }
});
},
eventMouseEnter: function(event, jsEvent) { $(jsEvent.target).css('cursor','pointer'); },
eventClick: function(info) {
/* load event in panel */
alert("data id: " + info.event.id);
}
});
calendar.render();
问题是我从数据库中以JSON格式正确获取了数据,但它没有在日历上显示这些事件......可能是我遗漏了什么,或者我以错误的方式格式化了要传递给FullCalendar的结构?
我还尝试直接给FullCalendar JSON对象,让他用以下代码管理它:
events: {
url: "http://"+window.location.host+"/wp-content/plugins/myplugin/retrievedata/retrievedata.db.php",
//method: 'GET',
extraParams: {action:'load_monthlyevents'},
//format: 'json',
//cache: false,
//async: false,
failure: function () { box.remove(); },
success: function (data) {
box.remove();
//callback(data);
successCallback(data);
//return data;
}
},
但是这样它就说没有定义successCallback/callback...这是我从db中获取的JSON示例,其中包含console.log(jsonResponse)
:
[
{id: '576', start: '2015-09-07 12:00:00', end: '2015-09-07 17:00:00', data1: 'xxxxxxxxxxxxx', data2: 'xxxxxxxxxxxxx', color: '#A9F5F2'},
{id: '581', start: '2015-10-02 07:00:00', end: '2015-10-02 17:00:00', data1: 'xxxxxxxxxxxxx', data2: 'xxxxxxxxxxxxx', color: '#A9F5F2'},
{id: '582', start: '2015-10-08 06:00:00', end: '2015-10-08 11:00:00', data1: 'xxxxxxxxxxxxx', data2: 'xxxxxxxxxxxxx', color: '#A9F5F2'},
{id: '583', start: '2015-10-08 06:00:00', end: '2015-10-08 11:00:00', data1: 'xxxxxxxxxxxxx', data2: 'xxxxxxxxxxxxx', color: '#A9F5A9'},
{id: '584', start: '2015-10-08 06:00:00', end: '2015-10-08 11:00:00', data1: 'xxxxxxxxxxxxx', data2: 'xxxxxxxxxxxxx', color: '#F3F781'},
{id: '585', start: '2015-10-08 06:00:00', end: '2015-10-08 11:00:00', data1: 'xxxxxxxxxxxxx', data2: 'xxxxxxxxxxxxx', color: '#F5BCA9'},
{id: '586', start: '2015-10-08 06:00:00', end: '2015-10-08 11:00:00', data1: 'xxxxxxxxxxxxx', data2: 'xxxxxxxxxxxxx', color: '#A9BCF5'},
{id: '587', start: '2015-10-08 06:00:00', end: '2015-10-08 11:00:00', data1: 'xxxxxxxxxxxxx', data2: 'xxxxxxxxxxxxx', color: '#F5A9F2'}
]
任何方向都将不胜感激。提前感谢!干杯!
1条答案
按热度按时间oxiaedzo1#
首先预先在变量中获取json字符串,
在你让变量中的json像下面这样加载事件之后,