As per the docs of fullcalender.io, I am trying to call API everytime it triggers events like previous, next, month, day or list view. The event is totally working fine in my case. I can call the API and every event and collect the data in an array called sessionCalendar[]
. After the API is called I can see the array has data.
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();
},
This is where I am pushing all my results into array. Note I have minimize the code inorder to make it short as possible.
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)
},
)
}
},
But I cannot see the event in calendar. What is wrong here. Before I was using event
properties with array and it was working fine. Now when I am using event
function it is not working.
All the days feilds are blank. Please help.
you are not calling successCallback in success i made some changes please try this
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;
},