I have a div, where I want to show the calendar based on button click:
<label class="btn" onclick="getCalendar();"> Show Calendar </label>
<div id="calendarDiv">
</div>
The getCalendar()
function is implemented as following:
function getCalendar() {
var calendar = new FullCalendar.Calendar($("#calendarDiv"), {
plugins: ['dayGrid'],
header: {
left: 'title',
center: '',
right: 'today prev,next'
},
buttonText: {
today: 'Today'
},
defaultView: 'dayGridMonth',
defaultDate: '2019-09-12',
events: function(fetchInfo, successCallback, failureCallback) {
$.post('/Customer/GetCalendarEvents',
$.param({
selectedCountryIds: getSelectionsByName('cntName'),
fiscalYearEnd: '31/12/2018'
},
true),
function (res) {
var events = [];
console.log(res);
$.each(res,
function (index, value) {
events.push({
title: value.title,
start: value.start
});
});
successCallback(events);
})
.fail(function () {
failureCallback(alert('bla'));
});
}
});
calendar.render();
}
Where, the GetCalendarEvents(selectedCountryIds, fiscalYearEnd)
returns a Json array with a list of events that is constructed as following:
public JsonResult GetCalendarEvents(List<int> selectedCountryIds, string fiscalYearEnd) {
// some initial steps to get finalList
// creating result array
var result = finalList.Select(r => new
{
title = r.Item2 + " : " + r.Item3,
start = r.Item1
});
return Json(result, JsonRequestBehavior.AllowGet);
}
The function returns correct array and the events[] is properly generated, however, when I run it I get nothing shown and in console I see an error:
main.min.js:6 Uncaught TypeError: e.addEventListener is not a function
at O (main.min.js:6)
at e.bindHandlers (main.min.js:6)
at e.render (main.min.js:6)
at getCalendar (ViewName:1118) // this is the line with calendar.render();
at HTMLLabelElement.onclick (ViewName:1037)
Any suggestions what can be an issue and how could I resolve it? I am using the latest version of FullCalendar.