FullCalendar 结束时间答案

【问题标题】：FullCalendar end timeFullCalendar 结束时间
【发布时间】：2022-01-05 14:50:11
【问题描述】：

我不确定我做错了什么。我正在测试 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();
      });

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

【问题讨论】：

标签： javascript fullcalendar fullcalendar-5

【解决方案1】：

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

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

如文档所述，默认值为：

false // 对于 dayGridMonth 和 dayGridWeek 视图

true // 对于 timeGridWeek、timeGridDay 和 dayGridDay

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

您可以通过添加在所有视图中打开它们

displayEventEnd: true

到您的日历选项，或者您可以使用 View-Specific Options 为每个视图设置它。

【讨论】：