I am not sure what I am doing wrong. I am testing fullcalendar.js and would like to display slots with start and end times. I am inserting the end time, I have also set the allDay flag to false. Yet, I do not get the end time displayed.
class TimeTable {
constructor(title, start, end,startStr, endStr, allDay, extendedProps) {
this.title = title;
this.start = start;
this.end = end;
this.startStr = startStr;
this.endStr = endStr;
this.allDay = allDay;
this.extendedProps = extendedProps;
}
}
class extendedProps {
constructor(moduleName, lecturer, room, campus){
this.moduleName = moduleName;
this.lecturer = lecturer;
this.room = room;
this.campus = campus;
}
}
details = [{"moduleCode":"AS007",
"moduleName":"The Art of Spycraft",
"start":"2022-01-05T10:30:00",
"end":"2022-01-05T12:30:00",
"lecturer":"James Bond",
"room":"007",
"campus":"A"
},
{"moduleCode":"AS007",
"moduleName":"The art of Spycraft",
"start":"2022-01-05T14:30:00",
"end":"2022-01-05T15:30:00",
"lecturer":"James Bond",
"room":"007",
"campus":"A"
}
]
function constructTimetableArray(details){
let eventsObject = [];
for(let i = 0; i < details.length; i++){
var e = new extendedProps(details[i].moduleName, details[i].lecturer, details[i].room, details[i].campus);
var stDate = new Date(details[i].start);
var edDate = new Date(details[i].end);
var t = new TimeTable(details[i].moduleCode, stDate, edDate,details[i].start, details[i].end, false, e);
eventsObject.push(t);
}
return eventsObject;
}
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var eventsData = {"events":constructTimetableArray(details)}
console.log(eventsData);
var calendar = new FullCalendar.Calendar(calendarEl, {
events: eventsData,
initialView: 'dayGridWeek'
});
calendar.render();
});
What am I missing, is it incorrect formatting?