在jQuery fullcalendar插件中禁用时间段范围

我正在开发一个webapp并使用jQuery fullcalendar插件 。

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

我正在使用的当前方法是为我想要禁用的时隙添加事件，并禁止事件重叠。

有一个更好的方法吗？ 我宁愿不允许事件重叠。

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

---

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

我要添加的赏金是针对最后一个问题（着色的插槽范围，以及日视图和周视图）。 如果有人可以建议我使用其他解决方案，那么可以执行此操作的完整日历，那也没关系。

Answer 1

顺便说一下，你为什么不在Select回调中查看？

 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 } } 

Answer 2

使用Fullcalender，在我的代码中我有这样的东西：

 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 (eg '8:00') */ getSlotIndex = function(time) { time = timeToFloat(time); return Math.round((time-scheduleStartTime)/scheduleSlotSize); } /* remove 'closed' class of open slots */ for (i=0; i * @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; } 

上面的代码是我制作的插件的一部分的汇编，所以它可能无法直接工作。 随时联系我。

Answer 3

我终于每天都有这个可用的插槽。

调整koosvdkolk的答案，每天有不同的可用插槽：

  function adjustWorkHourSlotSize(day_num) { $(".day"+day_num+"slot").width($(".fc-col"+day_num).width()-2); } function addWorkHours2(availablePeriods, calendar_element) { if (availablePeriods !== undefined) { numberOfAvailablePeriods = availablePeriods.length; //slots.addClass('nySchedule_unavailable_slots'); //iterate trough days and get avail periods for each day of week currentView = calendar_element.fullCalendar('getView'); currentView = currentView.name; if (currentView === 'agendaWeek' || currentView === 'agendaDay') { scheduleStartTime = timeToFloat(calendar_element.fullCalendar( 'option', 'minTime')); scheduleSlotSize = calendar_element.fullCalendar( 'option', 'slotMinutes') /60; /* function to calculate slotindex for a certain time (eg '8:00') */ getSlotIndex = function(time) { time = timeToFloat(time); return Math.round((time-scheduleStartTime)/scheduleSlotSize); } slots_content = calendar_element.find('.fc-agenda-slots tr .ui-widget-content div'); for (var i=0; i!=numberOfAvailablePeriods; i++) { if (currentView === 'agendaWeek') { slots_content.append("
"); $(".day"+i+"slot").addClass('unavailable'); adjustWorkHourSlotSize(i); } dayPeriodsLength=availablePeriods[i].length; for (var j=0; j!=dayPeriodsLength; j++) { start=availablePeriods[i][j][0]; end=availablePeriods[i][j][1]; startOfPeriodSlot = getSlotIndex(timeToFloat(start)); endOfPeriodSlot = getSlotIndex(timeToFloat(end)); for (k=startOfPeriodSlot; k 

现在只需致电：

 var availablePeriods = [ [["8:00", "16:00"],["3:00", "5:00"]], [["9:00", "14:00"]] ]; addWorkHours2(availablePeriods, $("#calendar")); 

并且不要忘记css类：

 .dayslot { float: left; margin-left: 2px; } .fc-agenda-slots .unavailable{ background-color: #e6e6e6; } 

Answer 4

谷歌代码中的这个主题允许跟随这类问题的演变。 实际上它是关于繁忙的小时颜色，但它是直接相关的

此外， 这个人已经实现了一个非常方便的方法来管理这个目的仍然使用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 }] }); 

检查屏幕截图

Answer 5

Fullcalendar具有内置functionbusinessHours ，强调日历上的某些时间段。

 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 } ] 

Answer 6

我通过使用另一个日历找到了一个解决方案：jquery-week-calendar（ https://github.com/themouette/jquery-week-calendar ）。

此日历有一个名为Freebusy的function。 可以用来拥有繁忙和自由的时隙范围，但通过改变源代码，我可以为时隙范围添加背景颜色。 我将方法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); 

这给了我以下结果：

我打赌这可以改善; 我想我打破了freeBusyfunction，但我不需要它。

Answer 7

dhtmlx还有另一个更加开发和支持的日历类型插件，在这里称为调度程序： http ：//dhtmlx.com/docs/products/dhtmlxScheduler/

它支持禁用时间段，背景颜色等。 我以前用过它，发现它提供了我需要的一切。