完整日历时间间隔应为1小时，从6:30开始

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 8: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:30开始

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”。看看这个jsfiddle。

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

现在,在第5701行定义了$ slotNormal,它是:

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分钟的插槽时间,则条件将为false,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