FullCalendar 结束时间

Question

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?

Answer 1

Whether the end times are displayed on the calendar for your events depends on

1. The view you're using, and/or

2. the value of the displayEventEnd calendar setting.

As the documentation says, the default values for this are:

false // for dayGridMonth and dayGridWeek views

true // for timeGridWeek, timeGridDay, and dayGridDay

So since you're using dayGridWeek as your initial view, end times are hidden by default.

You can either switch them on across all views by adding

displayEventEnd: true

to your calendar options, or you can set it per-view using View-Specific Options .