Question

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

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

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

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

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

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

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

Answer 1

BTW，你为什么不在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

使用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;
}

上面的代码是我制作的插件部分的汇编，因此可能无法直接使用。请随时与我联系。

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 (e.g. '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("<div class='day"+i+"slot dayslot'></div>");
                $(".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<endOfPeriodSlot; k++) {
                  $(".day"+i+"slot").eq(k).removeClass("unavailable");
                }
              }                
            }
          }
       }
   }

现在只需致电：

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

谷歌代码中的

This thread允许跟随此类问题的演变。实际上它是关于繁忙的小时颜色，但它是直接链接的

同样this guy已经实现了一种非常方便的方法来管理这个目的仍然使用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
    }]      
});

检查screenshot

Answer 5

Fullcalendar有一个内置函数businessHours，它强调日历上的某些时间段。

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

给了我以下结果：

calendar

我敢打赌这可以改善;我想我打破了freeBusy这个功能，但我不需要它。

Answer 7

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

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

enter image description here

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

7 个答案: