在完整日历中自定义时间小时

Question

我正在使用 HTML5Admin 中的完整日历，但我需要日历显示在我设置的行中时刻 @@periods= ['pre-breakfast', 'post-breakfast', 'pre-lunch', ' post-lunch', 'afternoon', 'pre-dinner', 'post-dinner'] 而是在行中显示时间小时数（上午 7 点、上午 8 点、上午 9 点、上午 10 点......）。我不知道这是否可能。我也在使用 moment.js。我的代码如下所示：

$(document).ready(function() {

// page is now ready, initialize the calendar...


$('#calendar').fullCalendar({
    scrollTime: '07:00:00',
    minTime: '07:00:00',
    maxTime: '22:00:00',
    defaultView: 'agendaWeek',
    header:{left:"prev,next,today",
            center:"title",
            right:"month, agendaWeek, agendaDay"},

    // put your options and callbacks here
})

});

Answer 1

我认为仅更改日历的默认属性是不可能的，但您可以修改源代码。 在fullcalendar 2.2.0中负责绘制槽文本的方法是slatRowHtml：

具体这段代码：

axisHtml =
                '<td class="fc-axis fc-time ' + view.widgetContentClass + '" ' + view.axisStyleAttr() + '>' +
                    ((!slotNormal || !minutes) ? // if irregular slot duration, or on the hour, then display the time
                        '<span>' + // for matchCellWidths
                            htmlEscape(calendar.formatDate(slotDate, view.opt('axisFormat'))) +
                        '</span>' :
                        ''
                        ) +
                '</td>';

您应该添加一条新语句来验证您的范围，然后根据您的偏好修改“axisHtml”。

如你所见，slotTime 是一个时刻：

var slotTime = moment.duration(+this.minTime); // wish there was .clone() for durations

因此您可以定义自己的矩限制，然后使用本机 momentJs 比较器：

var mySpecificText;
var afternoon = moment(...);
var preLunch = moment(...);
if (slotTime.isBefore(afternoon) && slotTime.isAfter(preLunch){
    mySpecificText = "Pre Lunch";
    axisHtml = '<td class="fc-axis fc-time ' + view.widgetContentClass + '" ' + view.axisStyleAttr() + '><span>' + mySpecificText  + ' </span> </td>'
}