在“完整日历”中自定义工作时间

Question

我正在使用HTML5Admin的完整日历，但我需要日历显示在我设置的行中@@periods= ['早餐前'，'早餐后'，'午餐前'，'午餐后'，'下午'，'餐前'，'

晚餐后']，而不是显示行中的时间段（上午7点，上午8点，上午9点，上午10点，...我不知道这是否可能。我也在使用时刻.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

我认为仅更改日历的默认属性是不可能的，但您可以修改源代码。在全日历 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>'
}