I can get the dayClick function to work when the data is included in the $('#calendar').fullCalendar({ header : {} etc.... }) but the dayClick function will not work from an ajax returned data $('#calendar').fullCalendar(JSON.parse(data)) even though the data is near identical to the typed in data.
I get a javascript error: 0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'apply'
I am making an ajax call:
$.post('/Home/CalendarEntries', { TenantID: 2 }, function (data) {
$('#calendar').fullCalendar(JSON.parse(data));
}).fail(function (xhr, status, error) {
alert("Result: " + o.script + " " + status + " " + error + " " + xhr.status + " " + xhr.statusText) });
I'm posting back data from the controller...
CalendarEvents ce = new CalendarEvents();
ce.sJSON = JsonConvert.SerializeObject(cEntries, Formatting.None);
return View(ce);
where
public class CalendarEvents
{
public string sJSON { get; set; }
}
This works well for all data and shows up well on the calendar. I click on a date and I get the javascript error above with nothing happening.
this example works and functions well for the dayClick event.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
defaultDate: '2018-03-12',
navLinks: true, // can click day/week names to navigate views
businessHours: true, // display business hours
editable: true,
dayClick: function (date, jsEvent, view) { $(this).css('background-color', 'red'); },
events: [
{
title: 'Business Lunch',
start: '2018-03-03T13:00:00',
constraint: 'businessHours'
},
{
title: 'Meeting',
start: '2018-03-13T11:00:00',
constraint: 'availableForMeeting', // defined below
color: '#257e4a'
},
{
title: 'Conference',
start: '2018-03-18',
end: '2018-03-20'
},
{
title: 'Party',
start: '2018-03-29T20:00:00'
},
// areas where "Meeting" must be dropped
{
id: 'availableForMeeting',
start: '2018-03-11T10:00:00',
end: '2018-03-11T16:00:00',
rendering: 'background'
},
{
id: 'availableForMeeting',
start: '2018-03-13T10:00:00',
end: '2018-03-13T16:00:00',
rendering: 'background'
},
// red areas where no events can be dropped
{
start: '2018-03-24',
end: '2018-03-28',
overlap: false,
rendering: 'background',
color: '#ff9f89'
},
{
start: '2018-03-06',
end: '2018-03-08',
overlap: false,
rendering: 'background',
color: '#ff9f89'
}
]
});
I have recreated this data in the controller and passed it back through the ajax call and the text data is near identical except that everything is in double quotes from the ce.sJSON = JsonConvert.SerializeObject(cEntries, Formatting.None);
All the data on the calendar is identical to the example above from the passed back ajax call but a click on any day will produce the javascript error above.
If I change the above typed in data example for the dayClick to: dayClick: "function (date, jsEvent, view) { $(this).css('background-color', 'red'); }",
notice the double quotes at the beginning of function and the end of the function. I will get the same javascript apply error above as the passed back ajax call data.
In the controller, I have removed the double quotes for the dayClick value in the serialized text before posing back and have the data passed back for the dayClick value identical to the typed in data example dayClick value and the JSON.parse(data) fails with a javascript error.
What am I doing wrong with the JSON data?
User contributions licensed under CC BY-SA 3.0