在Fullcalendar上为每天应用不同的时间段和范围

Question

我需要在fullcalendar中的某些日子禁用一些时隙。我已经看到了：禁用jQuery fullcalendar插件中的时隙范围

但除了它指的是一个旧版本之外，它并没有提供一个可靠的解决方案。

我启用了上午9点到晚上9点的工作时间和每30分钟一次的时间段，但我需要周一和周三上午9点至下午6点的不同范围。同样在周六，我需要上午9点到下午5点，默认时段为60分钟。

到目前为止，我唯一想到的解决方案是添加一个innerHTMLdiv，它将通过应用z-index来隐藏我不需要的时隙。但我注意到，如果用户拖动时隙选择，它可能会意外地包括隐藏的时隙

除了Fullcalendar之外，是否还有其他工具可以原生地提供所需的操作？

Answer 1

这是我迄今为止在这部分代码中使用的解决方案，我为每个特定日期创建一个div，它将以不同的颜色突出显示Javascript

'viewRender' : function(view, element) {
    var currdisplay=view.name;
    if(currdisplay=='agendaWeek'){
        $('.fc-bg .fc-day.fc-widget-content.fc-sat').html("<div class='saturday'>some text</div>");
        $('.fc-bg .fc-day.fc-widget-content.fc-mon').html("<div class='monday'>some text</div>");
        $('.fc-bg .fc-day.fc-widget-content.fc-wed').html("<div class='wednesday'>some text</div>");
    }
},

CSS

.saturday{ 
    width: 113px;
    height: 174px;
    background: #A4A4A4;
    position: absolute;
    top: 352px;
    line-height: 22px;
}
.monday, wednesday{ 
    width: 113px;
    height: 130px;
    background: #A4A4A4;
    position: absolute;
    top: 396px;
    line-height: 22px;
}

因此，用这个代码，我强调周一和周三从18到21，周六从17到21

最后，为了防止在这些时间选择，我使用了这段代码

'select' : function(start, end, jsEvent, view) {
    var start_date = moment.tz(start, 'YourTimezone');
    var end_date = moment.tz(end, 'YourTimezone');
    var unselect = moment(start_date).format("dddd");
    var unselect_start = moment(start_date).format("HHmm")
    var unselect_end = moment(end_date).format("HHmm")
    if(unselect == 'Monday' || unselect == 'Wednesday'){
        if(unselect_start >=1800 || unselect_end >1800){
          $('.calendar').fullCalendar('unselect');
          return;
        }
    } else if(unselect == 'Saturday'){
        if(unselect_start >=1700 || unselect_end >1700){
          $('.calendar').fullCalendar('unselect');
          return;
        }
    }
}

我已经包含了minute.tz.js库以获取正确的时区格式日期