全日历时间间隔为1小时，从6点半开始

I tried this implementation 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"
            }
        }
    });

In this all-day column should be start from 6:30am and interval slot should be 1 hour.

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

So all-days column should look like:

所以全天专栏应该是这样的:

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

早上6:30 am 7:30 am…11:30

I tried lots of solution but not able to achieve this.

我尝试了很多解决办法，但是没有成功。

Please let me know if any other info is required to solve this.

请让我知道如果需要任何其他信息解决这个问题。

Thanks 全日历时间间隔为1小时，从6点半开始

谢谢

2 个解决方案

#1

Your issue is the place where you've put your options. It should be

你的问题是你的选择。它应该是

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

Regarding the display of 06:30, 07:30 and so on, on the vertical axis, you need to set the slotDuration: "06:30:01". Take a look at this jsfiddle.

关于06:30、07:30等显示，在纵轴上，需要设置slotDuration:“06:30:01”。看看这个小提琴。

The most important thing to notice is the 01 second on the slotDuration. Without this, you won't be able to display half hours.

最重要的是在slotDuration上的01秒。没有这个，你将不能显示半个小时。

Explanation as to why you need the "+01" second:

解释为什么需要+01秒:

FullCalendar supports axis with half hours or whatever you want, but you need to do this quirky thing. The reason behind this is in the source code itself (view source for FullCalendar 2.3.1), from line 5714 to 5719:

全日历支持半小时或任何你想要的轴，但是你需要做这个古怪的事情。原因是源代码本身(查看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>' :
    ''

Now, $slotNormal is defined on line 5701 and is:

现在，$slotNormal是在第5701行定义的，它是:

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

So, if you have a 30 minute slot time, the condition will be false and FullCalendar won't display the time. This subject is covered in depth in this answer.

因此，如果您有一个30分钟的插槽时间，条件将是假的，FullCalendar将不会显示时间。这个问题在这个答案中有详细的论述。

One additional remark: You're using FullCalendar v1.5.4 which is really old and I advice you to upgrade. If you do upgrade, remember that FullCalendar now relies on momentjs.

另外一个注意事项:您使用的是FullCalendar v1.5.4，它非常旧，我建议您升级。如果要升级，请记住FullCalendar现在依赖于momentjs。

#2

Simply pull out the options that you put inside views.

只需拿出您放入视图内部的选项。

This is your modified working fiddle.

这是你修改过的工作小提琴。

#1