Javascript 禁用jQuery fullcalendar插件中的时隙范围

我正在开发一个网络应用程序，正在使用

我需要以某种方式禁用某些时段

当前我使用的方法是为我要禁用和不允许事件重叠的时间段添加事件

有更好的方法吗？我并不反对事件重叠

我可以接受上述问题的解决方案：添加黑色时隙并禁止在这些区域添加时隙

---

然而，我有一个更紧迫的问题。我需要能够改变特定时间范围内插槽的背景色。理想情况下，我将以与eventSources相同的方式使用它；只需指向一个url，并使用ajax/json将要着色的范围发送回

---

我将要添加的悬赏是针对最后一个问题（彩色插槽范围，以及在日视图和周视图中）。如果有人可以向我推荐另一种解决方案，那么完整的日历也可以做到这一点。

顺便说一句，你为什么不在

选择

回调中检查它呢

select: function( start, end, allDay, jsEvent, view ) {
    if( /*start is the disabled time*/ )
        return false;
    else{
        // Proceed with the normal flow of your application
        // You might show a popup to get info from user to create
        // a new event here
    }
}

---

我通过使用另一个日历找到了解决方案：jquery week calendar（）

此日历具有名为Freebusy的功能。它可以用于忙时隙和空闲时隙范围，但通过稍微修改源代码，我可以为时隙范围添加背景色。我将freeBusyRender方法更改如下：

freeBusyRender: function(freeBusy, $freeBusy, calendar) {
    if(freeBusy.free == 't_red') {
        $freeBusy.css("backgroundColor", "red");
    } else if(freeBusy.free == 't_green') {
        $freeBusy.css("backgroundColor", "green");
    } else if(freeBusy.free == 't_blue') {
        $freeBusy.css("backgroundColor", "blue");
    } else if(freeBusy.free == 't_black') {
        $freeBusy.css("backgroundColor", "black");
    }
    $freeBusy.addClass('free-busy-free');
    return $freeBusy;
}

(function($) {
    d = new Date();
    d.setDate(d.getDate() - (d.getDay() - 3));
    year = d.getFullYear();
    month = d.getMonth();
    day = d.getDate();
    var eventData2 = {
        options: {
            timeslotsPerHour: 4,
            timeslotHeight: 12,
            defaultFreeBusy: { free: true }
        },
        events: [
            { 'id': 1, 'start': new Date(year, month, day, 12), 'end': new Date(year, month, day, 13, 00), 'title': 'Lunch with Sarah'},
            { 'id': 2, 'start': new Date(year, month, day, 14), 'end': new Date(year, month, day, 14, 40), 'title': 'Team Meeting'},
            { 'id': 3, 'start': new Date(year, month, day + 1, 18), 'end': new Date(year, month, day + 1, 18, 40), 'title': 'Meet with Joe'},
            { 'id': 4, 'start': new Date(year, month, day - 1, 8), 'end': new Date(year, month, day - 1, 9, 20), 'title': 'Coffee with Alison'},
            { 'id': 5, 'start': new Date(year, month, day + 1, 14), 'end': new Date(year, month, day + 1, 15, 00), 'title': 'Product showcase'}
        ],
        freebusys: [
            { 'start': new Date(year, month, day - 1, 8), 'end': new Date(year, month, day - 1, 18), 'free': 't_red'},
            { 'start': new Date(year, month, day, 8), 'end': new Date(year, month, day + 0, 18), 'free': 't_green' },
            { 'start': new Date(year, month, day + 1, 8), 'end': new Date(year, month, day + 1, 18), 'free': 't_blue' },
            { 'start': new Date(year, month, day + 2, 14), 'end': new Date(year, month, day + 2, 18), 'free': 't_black'},
            { 'start': new Date(year, month, day + 3, 8), 'end': new Date(year, month, day + 3, 18), 'free': 't_red' }
        ]
    };
    $(document).ready(function() {
        var $calendar = $('#calendar').weekCalendar({

        allowCalEventOverlap: true,
        overlapEventsSeparate: true,
        totalEventsWidthPercentInOneColumn: 95,

        timeslotsPerHour: 4,
        scrollToHourMillis: 0,
        height: function($calendar) {
            return $(window).height() - $('h1').outerHeight(true);
        },
        eventRender: function(calEvent, $event) {
            if (calEvent.end.getTime() < new Date().getTime()) {
                $event.css('backgroundColor', '#aaa');
                $event.find('.wc-time').css({
                    backgroundColor: '#999',
                    border: '1px solid #888'
                });
            }
        },
        eventNew: function(calEvent, $event, FreeBusyManager, calendar) {
                    calEvent.id = calEvent.userId + '_' + calEvent.start.getTime();
        },
        data: function(start, end, callback) {
                    callback(eventData2);
        },
        displayFreeBusys: true,
        daysToShow: 7,
        switchDisplay: { '1 day': 1, '3 next days': 3, 'work week': 5, 'full week': 7 },
        headerSeparator: ' ',
        useShortDayNames: true
        });
    });
})(jQuery);

然后，我可以按如下方式初始化日历：

freeBusyRender: function(freeBusy, $freeBusy, calendar) {
    if(freeBusy.free == 't_red') {
        $freeBusy.css("backgroundColor", "red");
    } else if(freeBusy.free == 't_green') {
        $freeBusy.css("backgroundColor", "green");
    } else if(freeBusy.free == 't_blue') {
        $freeBusy.css("backgroundColor", "blue");
    } else if(freeBusy.free == 't_black') {
        $freeBusy.css("backgroundColor", "black");
    }
    $freeBusy.addClass('free-busy-free');
    return $freeBusy;
}

(function($) {
    d = new Date();
    d.setDate(d.getDate() - (d.getDay() - 3));
    year = d.getFullYear();
    month = d.getMonth();
    day = d.getDate();
    var eventData2 = {
        options: {
            timeslotsPerHour: 4,
            timeslotHeight: 12,
            defaultFreeBusy: { free: true }
        },
        events: [
            { 'id': 1, 'start': new Date(year, month, day, 12), 'end': new Date(year, month, day, 13, 00), 'title': 'Lunch with Sarah'},
            { 'id': 2, 'start': new Date(year, month, day, 14), 'end': new Date(year, month, day, 14, 40), 'title': 'Team Meeting'},
            { 'id': 3, 'start': new Date(year, month, day + 1, 18), 'end': new Date(year, month, day + 1, 18, 40), 'title': 'Meet with Joe'},
            { 'id': 4, 'start': new Date(year, month, day - 1, 8), 'end': new Date(year, month, day - 1, 9, 20), 'title': 'Coffee with Alison'},
            { 'id': 5, 'start': new Date(year, month, day + 1, 14), 'end': new Date(year, month, day + 1, 15, 00), 'title': 'Product showcase'}
        ],
        freebusys: [
            { 'start': new Date(year, month, day - 1, 8), 'end': new Date(year, month, day - 1, 18), 'free': 't_red'},
            { 'start': new Date(year, month, day, 8), 'end': new Date(year, month, day + 0, 18), 'free': 't_green' },
            { 'start': new Date(year, month, day + 1, 8), 'end': new Date(year, month, day + 1, 18), 'free': 't_blue' },
            { 'start': new Date(year, month, day + 2, 14), 'end': new Date(year, month, day + 2, 18), 'free': 't_black'},
            { 'start': new Date(year, month, day + 3, 8), 'end': new Date(year, month, day + 3, 18), 'free': 't_red' }
        ]
    };
    $(document).ready(function() {
        var $calendar = $('#calendar').weekCalendar({

        allowCalEventOverlap: true,
        overlapEventsSeparate: true,
        totalEventsWidthPercentInOneColumn: 95,

        timeslotsPerHour: 4,
        scrollToHourMillis: 0,
        height: function($calendar) {
            return $(window).height() - $('h1').outerHeight(true);
        },
        eventRender: function(calEvent, $event) {
            if (calEvent.end.getTime() < new Date().getTime()) {
                $event.css('backgroundColor', '#aaa');
                $event.find('.wc-time').css({
                    backgroundColor: '#999',
                    border: '1px solid #888'
                });
            }
        },
        eventNew: function(calEvent, $event, FreeBusyManager, calendar) {
                    calEvent.id = calEvent.userId + '_' + calEvent.start.getTime();
        },
        data: function(start, end, callback) {
                    callback(eventData2);
        },
        displayFreeBusys: true,
        daysToShow: 7,
        switchDisplay: { '1 day': 1, '3 next days': 3, 'work week': 5, 'full week': 7 },
        headerSeparator: ' ',
        useShortDayNames: true
        });
    });
})(jQuery);

（函数（$）{
d=新日期（）；
d、 设置日期（d.getDate（）-（d.getDay（）-3））；
year=d.getFullYear（）；
month=d.getMonth（）；
day=d.getDate（）；
var eventData2={
选项：{
时间间隔：4，
时间间隔高度：12，
defaultFreeBusy:{free:true}
},
活动：[
{'id'：1，'start'：新日期（年，月，日，12），'end'：新日期（年，月，日，13，00），'title'：'与Sarah共进午餐'，
{'id'：2，'start'：新日期（年、月、日，14），'end'：新日期（年、月、日，14、40），'title'：'Team Meeting'}，
{'id'：3，'start'：新日期（年、月、日+1,18），'end'：新日期（年、月、日+1,18,40），'title'：'meetwithjoe'，
{'id'：4，'start'：新日期（年，月，日-1,8），'end'：新日期（年，月，日-1,9,20），'title'：'Coffee with Alison'，
{“id”：5，“开始”：新日期（年、月、日+1,14），“结束”：新日期（年、月、日+1,15,00），“标题”：“产品展示”}
],
免费巴士：[
{'start'：新日期（年、月、日-1,8），'end'：新日期（年、月、日-1,18），'free'：'t_red'，
{'start'：新日期（年、月、日，8），'end'：新日期（年、月、日+0,18），'free'：'t_green'}，
{'start'：新日期（年、月、日+1,8），'end'：新日期（年、月、日+1,18），'free'：'t_blue'}，
{'start'：新日期（年、月、日+2,14），'end'：新日期（年、月、日+2,18），'free'：'t_black'}，
{'start'：新日期（年、月、日+3,8），'end'：新日期（年、月、日+3,18），'free'：'t_red'}
]
};
$（文档）.ready（函数（）{
var$calendar=$（“#calendar”）.weekCalendar({
allowCalEventOverlap：是的，
重叠事件分离：正确，
TotalEventsWidthPercentIneon列：95，
时间间隔：4，
scrollToHourMillis:0，
高度：功能（$calendar）{
返回$（window）.height（）-$（'h1'）.outerHeight（true）；
},
eventRender:函数（calEvent，$event）{
if（calEvent.end.getTime（）

这给了我以下结果：

---

我打赌这是可以改进的；我想我这样做破坏了freeBusy功能，但我不需要它。

使用FullCalendar，在我的代码中我有如下内容：

var availablePeriods = [["8:00", "12:00"], ["13:00", "17:00"]]; //these are the time intervals when the slots are OPEN

if (availablePeriods !== undefined) {
  slots = $element.find('.fc-agenda-slots tr');

  /* first add 'closed' class to all slots, and then remove class from 'open' slotts */
  slots.addClass('experdscheduler_closedSlot');
  if (jQuery.isArray(availablePeriods)) {
    /* only in weekview and dayview */
    currentView = plugin.getView();

    if (currentView === 'agendaWeek' || currentView === 'agendaDay') {
      numberOfAvailablePeriods =  availablePeriods.length;

      scheduleStartTime = timeToFloat($element.fullCalendar( 'option', 'minTime'));            
      scheduleSlotSize = $element.fullCalendar( 'option', 'slotMinutes') /60;

      /* function to calculate slotindex for a certain time (e.g. '8:00') */    
      getSlotIndex = function(time) {
        time = timeToFloat(time);            
        return Math.round((time-scheduleStartTime)/scheduleSlotSize);
      }


      /* remove 'closed' class of open slots */                 
      for (i=0; i<numberOfAvailablePeriods; i++) {            
        startOfPeriodSlot = getSlotIndex(timeToFloat(availablePeriods[i][0]));
        endOfPeriodSlot = getSlotIndex(timeToFloat(availablePeriods[i][1]));

        for (j=startOfPeriodSlot; j<endOfPeriodSlot; j++) {
          slots.eq(j).removeClass('experdscheduler_closedSlot');
        }
      }          
    }
  }         
}

/**
 * Helper function: Converts a given time to a float, e.g. '8:15' becomes 8.25
 * @param mixed time A integer, float or a string. Valid strings: '8:15', '20:15', '8:15am', '8:15pm', '8.15', etc.
 * @license http://opensource.org/licenses/gpl-license.php GNU Public License
 * @author Koos van der Kolk <koosvdkolk at gmail dot com>
 * @return float
 **/
function timeToFloat(time) {      
  var returnValue, timeAsArray, separator, i, timeSeparators = [':', '.'], numberOfSeparators;

  /* is time an integer or a float? */
  if (parseInt(time, 10) === time || parseFloat(time) === time) {
    returnValue = time;
  } else {
    /* time will be considered a string, parse it */
    time = time.toString();

    numberOfSeparators = timeSeparators.length;

    for (i = 0; i < numberOfSeparators; i = i + 1) {
      separator = timeSeparators[i];

      if (time.indexOf(separator) > 0) {
        timeAsArray = time.split(separator);

        returnValue = parseInt(timeAsArray[0], 10) + parseInt(timeAsArray[1], 10) / 60;

        /* does string contain 'p' or 'pm'? */
        if (time.indexOf('p') > 0 && returnValue <= 12) {
          returnValue = returnValue + 12;
        }
      }
    }
  }
  return returnValue;
}

var availablePeriods=[“8:00”、“12:00”]、[“13:00”、“17:00”]//这些是插槽打开时的时间间隔
如果（可用周期！==未定义）{
slots=$element.find（'.fc议程插槽tr'）；
/*首先将“关闭”类添加到所有插槽，然后从“打开”插槽中删除类*/
slots.addClass（'experdscheduler_closedSlot'）；
if（jQuery.isArray（availablePeriods））{
/*仅在weekview和dayview中*/
currentView=plugin.getView（）；
如果（currentView=='agendaWeek'| | currentView==='agendaDay'）{
numberOfAvailablePeriods=availablePeriods.length；
scheduleStartTime=timeToFloat（$element.fullCalendar（'option'，'minTime'））；
scheduleSlotSize=$element.fullCalendar（'option'，'slotMinutes'）/60；
/*用于计算特定时间（例如“8:00”）的slotindex的函数*/
getSlotIndex=函数（时间）{
时间=timeToFloat（时间）；
返回Math.round（（时间scheduleStartTime）/scheduleSlotSize）；
}
/*移除开放插槽的“闭合”类*/
google代码中的for（i=0；i 0&&returnValue允许跟踪此类问题的发展。实际上这是关于繁忙时间的，但它是直接关联的

还实现了一种非常方便的方法来管理此目的，仍然使用fullcalendar和此类代码

$('#calendar').fullCalendar({
    ....
    events: [
        {
            title: 'All Day Event',
            start: new Date(y, m, 1)
        }
    ],
    annotations: [{
        start: new Date(y, m, d, 13, 0),
        end: new Date(y, m, d, 15, 30),
        title: 'My 1st annotation', // optional
        cls: 'open', // optional
        color: '#777777', // optional
        background: '#eeeeff' // optional
    }]      
});

检查th
.dayslot {
  float: left;
  margin-left: 2px;
}

.fc-agenda-slots .unavailable{
  background-color: #e6e6e6;

}

businessHours: [ // specify an array instead
{
    dow: [ 1, 2, 3 ], // Monday, Tuesday, Wednesday
    start: '08:00', // 8am
    end: '18:00' // 6pm
},
{
    dow: [ 4, 5 ], // Thursday, Friday
    start: '10:00', // 10am
    end: '16:00' // 4pm
}
]