Fullcalendar - Add custom fields from JSON feed to javascript object - fullcalendar

Question

C# .net Core MVC fullcalendar.js
I have the JSON feed working great from my controller. I want to add a couple of custom fields to the JSON feed like description and type.
I can create manual events in the View Javascript and add all kinds of extra fields just fine. I'm trying to handle the same extra fields when they come from a url JSON feed. How can I change the object in the View javascript so that data is being stored?
Sample from JSON file:
[
{
"id": 2020,
"batch": "c8762027-91d6-4892-af45-9737e86cd1a8",
"type": "Schedule",
"date": "2022-02-17",
"title": "Schedule - 2020",
"description": "test",
"notes": null,
"color": "blue"
},
{
"id": 2021,
"batch": "45fe545f-a274-4e38-af85-6340c98ee4c0",
"type": "Schedule",
"date": "2022-03-01",
"title": "Schedule - 2021",
"description": "test",
"notes": null,
"color": "blue"
}
]
The events get created on the calendar with the correct ID, title, color, etc. .. all the standard fields. The description and type do not get filled.
From the View file
<script type="text/javascript">
let calendar = initCalendar();
function initCalendar() {
var calendarEl = document.getElementById('calendar');
let calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
weekNumbers: true,
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
eventClick: function (info) {
//alert('Title: ' + info.event.title + ' - ' + 'ID: ' + info.event.id);
document.getElementById('Title').innerHTML = info.event.title;
document.getElementById('Description').innerHTML = info.event.description;
$('#EventDetail').modal('show');
},
events: {
url: '#Url.Action("Calendar")'
}
});
calendar.render();
return calendar;
}
</script>
ends up showing

Answer 1

I figured it out. When the calendar receives the JSON stream, it will add non-standard fields to the extendeProps section automatically. So if you are sending in your stream a "description" field (which is not a standard field), it will be added to the extendedProps object.
When you need to reference those extra fields in the javascript, you need to reference extendedProps like below in the eventClick handler. For setting the "description" of my event to show in the body of my popup modal display, you reference the info.event.extendedProps.description.
<script type="text/javascript">
let calendar = initCalendar();
function initCalendar() {
var calendarEl = document.getElementById('calendar');
let calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
weekNumbers: true,
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
eventClick: function (info) {
document.getElementById('Title').innerHTML = info.event.title;
document.getElementById('Description').innerHTML = info.event.extendedProps.description;
$('#EventDetail').modal('show');
},
events: {
url: '#Url.Action("Calendar")'
}
});
calendar.render();
return calendar;
}
</script>