No estoy seguro de lo que estoy haciendo mal. Estoy probando fullcalendar.js y me gustaría mostrar las franjas horarias con las horas de inicio y finalización. Estoy insertando la hora de finalización, también configuré el indicador allDay en falso. Sin embargo, no se muestra la hora de finalización.
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(); });¿Qué me estoy perdiendo, es un formato incorrecto?
Que las horas de finalización se muestren en el calendario para sus eventos depende de
La vista que está utilizando, y/o
el valor de la configuración del calendario displayEventEnd .
Como dice la documentación, los valores predeterminados para esto son:
false // para las vistas dayGridMonth y dayGridWeek
true // para timeGridWeek, timeGridDay y dayGridDay
Entonces, dado que está usando dayGridWeek como su vista inicial, las horas de finalización están ocultas de manera predeterminada.
Puede activarlos en todas las vistas agregando
displayEventEnd: truea las opciones de su calendario, o puede configurarlo por vista usando Opciones específicas de vista.