javascript - 完整日历时间间隔应该是 1 小时，从 6 开始 :30

Question

我试过这个实现 Full Calendar Implementation .

    $("#available_classes_calendar").fullCalendar({
        header: {
             left   : 'prev,next',
             center : 'title'
            },
        defaultView: 'agendaWeek',
        views:{
            agenda:{
                allDaySlot: false,
                minTime: "06:30:00",
                maxTime: "24:00:00",
                slotDuration: "00:60:00"
            }
        }
    });

在这个全天专栏中，应该从早上 6:30 开始，间隔时段应该是 1 小时。

所以全天列应该如下所示:

6:30 am 7:30 am 8:30 am . . . 11:30 pm

我尝试了很多解决方案，但无法实现。

如果需要任何其他信息来解决此问题，请告诉我。

谢谢

Answer 1

您的问题是您放置选项的位置。应该是

$("#available_classes_calendar").fullCalendar({
    header: {
         left   : 'prev,next',
         center : 'title'
        },
    defaultView: 'agendaWeek',
    allDaySlot: false,
    minTime: "06:30:00",
    maxTime: "24:00:00",
    slotDuration: "06:00:01"
});

关于06:30、07:30等的显示，在纵轴上，需要设置slotDuration: "06: 30:01"。看看this jsfiddle .

要注意的最重要的事情是 slotDuration 上的 01 秒。没有这个，你将无法显示半小时。

---

关于为什么需要“+01”秒的解释:

FullCalendar 支持半小时轴或任何你想要的，但你需要做这个古怪的事情。这背后的原因在于源代码本身(查看 FullCalendar 2.3.1 的源代码)，从第 5714 行到第 5719 行:

((!slotNormal || !minutes) ? // if irregular slot duration, or on the hour, then display the time
    '<span>' + // for matchCellWidths
        htmlEscape(slotDate.format(this.axisFormat)) +
    '</span>' :
    ''

现在，$slotNormal 在第 5701 行定义并且是:

var slotNormal = this.slotDuration.asMinutes() % 15 === 0;

因此，如果您有 30 分钟的时段，则条件将为 false，FullCalendar 将不会显示时间。此主题在 this answer 中有深入介绍。 .

补充说明:您使用的是 FullCalendar v1.5.4，它真的很旧，我建议您升级。如果您升级，请记住 FullCalendar 现在依赖于 momentjs .