Vô hiệu hóa phạm vi thời gian trong plugin jQuery fullcalendar

Question

Tôi đang phát triển một ứng dụng web và đang sử dụng jQuery fullcalendar plugin.

Tôi cần phải bằng cách nào đó vô hiệu hóa các khoảng thời gian nhất định.

Phương pháp hiện tại tôi đang sử dụng là thêm sự kiện cho các thời điểm tôi muốn vô hiệu hóa và không cho phép chồng chéo sự kiện.

Có cách nào tốt hơn để thực hiện việc này không? Tôi không muốn không cho phép chồng chéo sự kiện.

Tôi có thể sống với giải pháp cho vấn đề trên: thêm khoảng thời gian màu đen và không cho phép thêm khoảng thời gian trong các khu vực đó.

---

Tuy nhiên, tôi có vấn đề cấp bách hơn. Tôi cần có khả năng thay đổi màu nền của các vị trí trong một khoảng thời gian nhất định. Lý tưởng nhất là tôi sẽ sử dụng nó theo cùng cách với eventSources; chỉ cần trỏ đến một url và gửi các dãy màu được trở lại với ajax/json.

Tiền thưởng tôi sắp thêm vào là cho vấn đề cuối cùng này (phạm vi thời gian được ghi nhận, cũng như trong chế độ xem ngày và tuần). Nếu ai đó có thể gợi ý cho tôi một giải pháp khác thì toàn bộ lịch có thể làm điều này, điều đó cũng tốt.

Answer 1

Tôi đã tìm thấy giải pháp bằng cách sử dụng một lịch khác: lịch tuần lễ (https://github.com/themouette/jquery-week-calendar).

Lịch này có tính năng được gọi là Freebusy. Đó là lý do được sử dụng để có phạm vi thời gian bận rộn và miễn phí, nhưng bằng cách thay đổi mã nguồn một chút, tôi có thể thêm màu nền cho phạm vi thời gian. Tôi đã thay đổi phương pháp freeBusyRender như sau:

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

Sau đó, tôi có thể khởi tạo lịch như sau:

(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); 

mà mang lại cho tôi kết quả sau:

Tôi đặt cược này có thể được cải thiện; Tôi nghĩ rằng tôi đã phá vỡ tính năng freeBusy làm điều này, nhưng tôi không cần nó.

Answer 2

BTW, Tại sao bạn không kiểm tra trong Select gọi lại?

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 3

Sử dụng Fullcalender, trong mã của tôi, tôi có một cái gì đó như thế này:

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

Đoạn mã trên là một bộ sưu tập các bộ phận của một plugin Tôi đã thực hiện, vì vậy nó có thể không làm việc trực tiếp. Cứ tự nhiên liên lạc tôi.

Answer 4

This thread trong mã google cho phép theo dõi sự phát triển của loại sự cố này.Trên thực tế nó là về sự bận rộn giờ màu sắc, nhưng nó được liên kết trực tiếp

Cũng this guy đã thực hiện một cách rất tiện dụng để quản lý các mục đích này vẫn còn sử dụng fullcalendar với loại mã này

$('#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 
    }]  
}); 

Kiểm tra screenshot

Answer 5

Cuối cùng tôi đã có các khe có sẵn này để hoạt động mỗi ngày.

điều chỉnh câu trả lời koosvdkolk để có khe cắm có sẵn khác nhau cho mỗi ngày:

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"); 
       } 
       }     
      } 
      } 
     } 
    } 

bây giờ chỉ cần gọi:

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

và không quên lớp css:

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

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

} 

Answer 6

Có một plugin loại lịch được phát triển và hỗ trợ nhiều hơn từ dhtmlx được gọi là bộ lập lịch biểu tại đây: http://dhtmlx.com/docs/products/dhtmlxScheduler/

Nó hỗ trợ vô hiệu hóa khe thời gian, màu nền và hơn thế nữa. Tôi đã sử dụng nó trước và thấy nó cung cấp mọi thứ tôi cần.

Answer 7

Fullcalendar có một chức năng được xây dựng trong businessHours trong đó nhấn mạnh các khe thời gian nhất định trên lịch.

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