全日历结束时间

Question

我不确定我做错了什么。我正在测试 fullcalendar.js 并希望显示具有开始和结束时间的时段。我正在插入结束时间，我还将 allDay 标志设置为 false。然而，我没有看到结束时间。

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();
      });

我错过了什么，格式不正确吗？

Answer 1

是否在日历上显示活动的结束时间取决于

您正在使用的视图，and/or
displayEventEnd 日历设置的值。

如文档所述，默认值为：

false // for dayGridMonth and dayGridWeek views

true // for timeGridWeek, timeGridDay, and dayGridDay

因此，由于您使用 dayGridWeek 作为初始视图，因此默认情况下隐藏结束时间。

您可以通过添加

在所有视图中打开它们

displayEventEnd: true

到您的日历选项，或者您可以使用 View-Specific Options.

按视图设置

全日历结束时间

FullCalendar end time

javascript

fullcalendar

fullcalendar-5