Question

我需要在fullcalendar的某些日子禁用某些时间段。我已经看到了这一点：Disable timeslot ranges in jQuery fullcalendar plugin

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

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

我到目前为止所考虑的唯一解决方案是匹配提供的链接上的解决方案，是附加一个innerHTML div，它将隐藏我不需要的时间段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库添加到正确的时区格式日期

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

1 个答案: