Question

我正在使用HTML5Admin的完整日历，但是我需要在我设置的行时刻显示日历@@ periods = ['pre-breakfast'，'post-breakfast'，'pre-lunch'，'午餐后'，'下午'，'餐前'，'餐后']而不是显示行中的时间（早上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>'
}

在完整日历中自定义时间

1 个答案: