Fullcalendar.io 将事件属性解析为函数时出现问题
Fullcalendar.io issue in parsing events properties as function
根据 docs of fullcalender.io,我试图在每次触发上一个、下一个、一个月、一天或列表视图等事件时调用 API。就我而言,该活动完全正常。我可以调用 API 和每个事件并将数据收集到一个名为 sessionCalendar[]
的数组中。在 API 被调用后我可以看到数组有数据。
calendar_view_session: function(){
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid', 'timeGrid', 'list', 'interaction' , 'momentTimezone' ],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
defaultDate: '2019-04-12',
navLinks: true, // can click day/week names to navigate views
editable: false,
eventLimit: true, // allow "more" link when too many events
events: function(info, successCallback,failureCallback) {
console.log(info);
var date1 = new Date(info.start.valueOf());
var date2 = new Date(info.end.valueOf());
var callData = {
from_date:moment.tz(date1, timeZone).format('YYYY-MM-DD'),
to_date: moment.tz(date2, timeZone).format('YYYY-MM-DD')
}
sessionCalendar = [];
console.log(callData);
$.ajax({
url:app.createApiPath(apiController_data,apiAction_data),
method:"POST",
dataType: "json",
data: {
callData: JSON.parse(JSON.stringify(callData)),
api_version: 1,
deviceType: 'web'
},
success: function(responseData){
console.log({responseData})
app.calendarParse(responseData.data.results);
}
})
},
//sessionCalendar
});
calendar.render();
},
这是我将所有结果推入数组的地方。请注意,我已将代码最小化以使其尽可能短。
calendarParse: function(apiData){
for(var i=0; i<apiData.length; i++){
const { bookingId, course, customers, end_date_time, id, lm_firstname, lm_lastname,localmasterId, meeting_id, meeting_type, payout, request_payout_status, sessionDate, session_status, start_date_time, status,attributes } = apiData[i];
sessionCalendar.push(
{
title: `${course["course_name"]}`,
start: gbl.datetime_utc(start_date_time),
end: gbl.datetime_utc(end_date_time),
customers: customersName,
localmasterName: lm_firstname + " " + lm_lastname,
sessionStatus: session_status,
meetingType: meetingtype,
payoutStatus: request_payout_status,
sessionDate: sessionDate,
startTime: gbl.datetime(start_date_time),
endTime: gbl.datetime(end_date_time)
},
)
}
},
但是我在日历中看不到该事件。这里有什么问题。在我使用 event
properties with array and it was working fine. Now when I am using event
function 之前,它不起作用。
所有日期字段都是空白的。请帮忙。
你没有成功调用 successCallback 我做了一些更改请试试这个
events: function(info, successCallback,failureCallback) {
console.log(info);
var date1 = new Date(info.start.valueOf());
var date2 = new Date(info.end.valueOf());
var callData = {
from_date:moment.tz(date1, timeZone).format('YYYY-MM-DD'),
to_date: moment.tz(date2, timeZone).format('YYYY-MM-DD')
}
sessionCalendar = [];
console.log(callData);
$.ajax({
url:app.createApiPath(apiController_data,apiAction_data),
method:"POST",
dataType: "json",
data: {
callData: JSON.parse(JSON.stringify(callData)),
api_version: 1,
deviceType: 'web'
},
success: function(responseData){
console.log({responseData})
successCallback(app.calendarParse(responseData.data.results));
}
})
},
calendarParse: function(apiData){
for(var i=0; i<apiData.length; i++){
const { bookingId, course, customers, end_date_time, id, lm_firstname, lm_lastname,localmasterId, meeting_id, meeting_type, payout, request_payout_status, sessionDate, session_status, start_date_time, status,attributes } = apiData[i];
sessionCalendar.push(
{
title: `${course["course_name"]}`,
start: gbl.datetime_utc(start_date_time),
end: gbl.datetime_utc(end_date_time),
customers: customersName,
localmasterName: lm_firstname + " " + lm_lastname,
sessionStatus: session_status,
meetingType: meetingtype,
payoutStatus: request_payout_status,
sessionDate: sessionDate,
startTime: gbl.datetime(start_date_time),
endTime: gbl.datetime(end_date_time)
},
)
}
return sessionCalendar;
},
根据 docs of fullcalender.io,我试图在每次触发上一个、下一个、一个月、一天或列表视图等事件时调用 API。就我而言,该活动完全正常。我可以调用 API 和每个事件并将数据收集到一个名为 sessionCalendar[]
的数组中。在 API 被调用后我可以看到数组有数据。
calendar_view_session: function(){
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid', 'timeGrid', 'list', 'interaction' , 'momentTimezone' ],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
defaultDate: '2019-04-12',
navLinks: true, // can click day/week names to navigate views
editable: false,
eventLimit: true, // allow "more" link when too many events
events: function(info, successCallback,failureCallback) {
console.log(info);
var date1 = new Date(info.start.valueOf());
var date2 = new Date(info.end.valueOf());
var callData = {
from_date:moment.tz(date1, timeZone).format('YYYY-MM-DD'),
to_date: moment.tz(date2, timeZone).format('YYYY-MM-DD')
}
sessionCalendar = [];
console.log(callData);
$.ajax({
url:app.createApiPath(apiController_data,apiAction_data),
method:"POST",
dataType: "json",
data: {
callData: JSON.parse(JSON.stringify(callData)),
api_version: 1,
deviceType: 'web'
},
success: function(responseData){
console.log({responseData})
app.calendarParse(responseData.data.results);
}
})
},
//sessionCalendar
});
calendar.render();
},
这是我将所有结果推入数组的地方。请注意,我已将代码最小化以使其尽可能短。
calendarParse: function(apiData){
for(var i=0; i<apiData.length; i++){
const { bookingId, course, customers, end_date_time, id, lm_firstname, lm_lastname,localmasterId, meeting_id, meeting_type, payout, request_payout_status, sessionDate, session_status, start_date_time, status,attributes } = apiData[i];
sessionCalendar.push(
{
title: `${course["course_name"]}`,
start: gbl.datetime_utc(start_date_time),
end: gbl.datetime_utc(end_date_time),
customers: customersName,
localmasterName: lm_firstname + " " + lm_lastname,
sessionStatus: session_status,
meetingType: meetingtype,
payoutStatus: request_payout_status,
sessionDate: sessionDate,
startTime: gbl.datetime(start_date_time),
endTime: gbl.datetime(end_date_time)
},
)
}
},
但是我在日历中看不到该事件。这里有什么问题。在我使用 event
properties with array and it was working fine. Now when I am using event
function 之前,它不起作用。
所有日期字段都是空白的。请帮忙。
你没有成功调用 successCallback 我做了一些更改请试试这个
events: function(info, successCallback,failureCallback) {
console.log(info);
var date1 = new Date(info.start.valueOf());
var date2 = new Date(info.end.valueOf());
var callData = {
from_date:moment.tz(date1, timeZone).format('YYYY-MM-DD'),
to_date: moment.tz(date2, timeZone).format('YYYY-MM-DD')
}
sessionCalendar = [];
console.log(callData);
$.ajax({
url:app.createApiPath(apiController_data,apiAction_data),
method:"POST",
dataType: "json",
data: {
callData: JSON.parse(JSON.stringify(callData)),
api_version: 1,
deviceType: 'web'
},
success: function(responseData){
console.log({responseData})
successCallback(app.calendarParse(responseData.data.results));
}
})
},
calendarParse: function(apiData){
for(var i=0; i<apiData.length; i++){
const { bookingId, course, customers, end_date_time, id, lm_firstname, lm_lastname,localmasterId, meeting_id, meeting_type, payout, request_payout_status, sessionDate, session_status, start_date_time, status,attributes } = apiData[i];
sessionCalendar.push(
{
title: `${course["course_name"]}`,
start: gbl.datetime_utc(start_date_time),
end: gbl.datetime_utc(end_date_time),
customers: customersName,
localmasterName: lm_firstname + " " + lm_lastname,
sessionStatus: session_status,
meetingType: meetingtype,
payoutStatus: request_payout_status,
sessionDate: sessionDate,
startTime: gbl.datetime(start_date_time),
endTime: gbl.datetime(end_date_time)
},
)
}
return sessionCalendar;
},