如何在特定日期之前阻止Fullcalendar中的日期

Question

我有將來的日期，總是比當前日期提前30天。它存儲在一個Date對象中。我工作了這一點，使用：

var currentDate = new Date(); 
var futureBlockDate = new Date(); 
futureBlockDate.setDate(currentDate.getDate() + 30); 

使用FullCalendar jQuery plugin我想在視覺上屏蔽掉任何天過去這個日期與不同的背景顏色，以便用戶知道日曆他們不能在上面點擊還是創建活動在那些日子裏。

用FullCalendar做這件事的最好方法是什麼？也許在默認情況下禁用所有日期，並且只對特定範圍啓用（從今天到未來30天）？

我想我可以使用下面的代碼應用禁用後臺狀態的所有單元格：

$(".fc-widget-content").addClass("disabled"); 

.disabled .fc-day-content { 
    background-color: #123959; 
    color: #FFFFFF; 
    cursor: default; 
} 

如何能不能做到？

Answer 1

使用dayRender選項爲 「已禁用」 類添加到了日期範圍。

$('#calendar').fullCalendar({ 
    ... 
    dayRender: function(date, cell){ 
     if (date > maxDate){ 
      $(cell).addClass('disabled'); 
     } 
    } 
    ... 
}); 

您也可以使用viewRender事件和gotoDate方法，以防止用戶後，今天超過30天來瀏覽更遠：上點擊

$('#calendar').fullCalendar({ 
    ... 
    viewRender: function(view){ 
     if (view.start > maxDate){ 
      $('#calendar').fullCalendar('gotoDate', maxDate); 
     } 
    } 
    ... 
}); 

Answer 2

How about this solution?

dayClick: function(date, allDay, jsEvent, view) { 
    var myDate = new Date(); 

    //How many days to add from today? 
    var daysToAdd = 15; 

    myDate.setDate(myDate.getDate() + daysToAdd); 

    if (date < myDate) { 
     //TRUE Clicked date smaller than today + daysToadd 
     alert("You cannot book on this day!"); 
    } else { 
     //FLASE Clicked date larger than today + daysToadd 
     alert("Excellent choice! We can book today.."); 
    } 

} 

Answer 3

爲禁用電池（2.0版本）：

dayRender: function(date, cell) { 
    // It's an example, do your own test here 
    if(cell.hasClass("fc-other-month")) { 
      cell.addClass('disabled'); 
    } 

}, 
dayClick: function(date, jsEvent, view) { 
    if($(jsEvent.target).hasClass("disabled")){ 
     return false; 
    } 
    // Your code 
    // .... 
} 

Answer 4

對於正在尋找解決方案來定義min-display-date和max-display-date的人：（for fullcalendar v2）

$('#calendar').fullCalendar({ 
    defaultDate: new Date(), 
    viewRender: function(view, element) { 

     curdate = new Date(); 
     viewdate = new Date(view.start); 

     // PREV - force minimum display month to current month 
     if (new Date(viewdate.getFullYear(), viewdate.getMonth() + 1, 1).getTime() <= 
      new Date(curdate.getFullYear(), curdate.getMonth(), 1).getTime()){ 
      $('.fc-prev-button').prop('disabled', true); 
      $('.fc-prev-button').css('opacity', 0.5); 
     } else { 
      $('.fc-prev-button').prop('disabled', false); 
      $('.fc-prev-button').css('opacity', 1); 
     } 

     // NEXT - force max display month to a year from current month 
     if (new Date(viewdate.getFullYear(), viewdate.getMonth() + 1).getTime() >= 
      new Date(curdate.getFullYear() + 1, curdate.getMonth() + 1).getTime()){ 
      $('.fc-next-button').prop('disabled', true); 
      $('.fc-next-button').css('opacity', 0.5); 
     } else { 
      $('.fc-next-button').prop('disabled', false); 
      $('.fc-next-button').css('opacity', 1); 
     } 
    } 
}); 

Answer 5

這一個選擇了當月期

<?php $numerodias = cal_days_in_month(CAL_GREGORIAN, date('m'), date('Y')); ?> 
$('#calendar').fullCalendar({ 
      header: { 
       left: 'prev,next', 
       center: 'title', 
       right: 'today' 
      }, 
      defaultDate: moment(), 
      editable: false, 
      //height:'auto', 
      //weekends: false, 
      defaultView: 'agendaWeek', 
      eventLimit: true, 

      events: { 
       url: 'php/get-events.php', 
       error: function() { 
        $('#script-warning').show(); 
       } 

      }, 
      loading: function(bool) { 
       $('#loading').toggle(bool); 

      }, 
     viewRender: function(view,element) { 
      var now = new Date(); 
      var end = new Date(); 
      end.setMonth(now.getMonth()); 
      end.setDate(<?php echo $numerodias; ?>); 
      now.setDate(1); 
      if (end < view.end) { 
       $("#calendar .fc-next-button").hide(); 
       return false; 
       alert(end); 
      } 
      else { 
       $("#calendar .fc-next-button").show(); 
      } 

      if (view.start < now) { 
       $("#calendar .fc-prev-button").hide(); 
       return false; 
      } 
      else { 
       $("#calendar .fc-prev-button").show(); 
      } 
     } 
     }); 
    });