FullCalendar - 如何禁用上一個按鈕

Question

當上個月小於當前月份時，如何禁用上一個按鈕？

例如，如果當前月份是八月份，那麼我想禁用prev月份按鈕，以便您看不到七月份。

Answer 1

你可以很容易地自己做到這一點，這是一個有效的例子。

我通過更改fullcalendar.js來完成此操作。請注意，在許多示例中，您可以使用prev/next按鈕更改年，月和日。其中每個都有自己的渲染功能，因此如果您需要這些功能，就需要考慮這些功能。我的例子很容易適應。

在我的示例中，我還將前一個按鈕設置爲「禁用」時的紅色。你可以自己決定你想怎麼做。

views.month = function(element, options, viewName) { 
    return new Grid(element, options, { 
     render: function(date, delta) { 
      if (delta == -1) { 
       var curr_date = new Date(); 
       var curr_m = curr_date.getMonth(); 
       if (date.getMonth() < curr_m) { 
        return false; 
       } else if ((date.getMonth() - 1) < curr_m) { 
        $(".fc-button-prev span").css("background", "red"); 
       } else { 
        $(".fc-button-prev span").css("background", "#E8E8E8"); 
       }    
      } else { 
       $(".fc-button-prev span").css("background", "#E8E8E8"); 
      } 

這從行開始：944在fullcalendar.js

我已經在Firefox 3.6.8使用的例子基本-view.html測試這一點，當你下載FullCalendar default.html中提供。簡單地改變：

<script type='text/javascript' src='../fullcalendar.min.js'></script> 

到

<script type='text/javascript' src='../fullcalendar.js'></script> 

Answer 2

對於任何人，不希望修改fullcalendar.js因爲這可能複雜化更新：

// On load 
    $jQ(document).ready(function() { 
    // initialize calendar first 
    updateCalendar(); 
    } 

    // Update the calendar when previous button is pressed 
    $jQ('#calendar .fc-button-prev .fc-button-inner').live('click', function(){ 
    updateCalendar(); 
    }) 

    // Update the calendar when next button is pressed 
    $jQ('#calendar .fc-button-next .fc-button-inner').live('click', function(){ 
    updateCalendar(); 
    }) 

    // Update the calendar when the today button is pressed 
    $jQ('#calendar .fc-button-today .fc-button-inner').live('click', function(){ 
    updateCalendar(); 
    }) 


    function updateCalendar(){ 
    var dateObj=$jQ('#calendar').fullCalendar('getDate') 
    var month=dateObj.getMonth()+1; 
    var year=dateObj.getFullYear(); 
    var today_month=<%= Date.today.month %> 
    var today_year=<%= Date.today.year %> 

    // Disable prev button for the past 
    if (today_year==year && today_month==month){ 
     $jQ("#calendar .fc-button-prev").css("display", "none"); 
    } 
    else{ 
     $jQ("#calendar .fc-button-prev").css("display", ""); 
    } 
    // Disable next button for date.now + 1.year 
    if (today_year+1==year && today_month-1==month){ 
     $jQ("#calendar .fc-button-next").css("display", "none"); 
    } 
    else{ 
     $jQ("#calendar .fc-button-next").css("display", ""); 
    } 
    } 

注1：我更喜歡從rails而不是Jquery獲取當前日期，因爲我更喜歡使用服務器時間，因爲我的應用程序並未在全球範圍內使用，而且我也沒有時間唉。

注2：我使用$ jQ作爲jQuery.noConflict（），如果您不只是爲$查找和替換$ jQ。

Answer 3

viewDisplay: function getDate(date) { 
       var lammCurrentDate = new Date(); 
       var lammMinDate = new Date(lammCurrentDate.getFullYear(), lammCurrentDate.getMonth(), 1, 0, 0, 0, 0); 

       if (date.start <= lammMinDate) { 
        $(".fc-button-prev").css("display", "none"); 
       } 
       else { 
        $(".fc-button-prev").css("display", "inline-block"); 
       } 
      } 

Answer 4

我無法添加到我的代碼中的註釋是SanRyu張貼以上，但它應該放在（在1.5.4版本圍繞線368）ignoreWindowResize--前的RenderView功能;靠近函數的末尾。

var lammCurrentDate = new Date(); 
var lammMinDate = new Date(lammCurrentDate.getFullYear(), lammCurrentDate.getMonth(), 1, 0, 0, 0, 0); 
if (currentView.start <= lammMinDate){ 
    header.disableButton('prev'); 
} else { 
    header.enableButton('prev'); 
} 

Answer 5

更新版本：

viewRender: function (view,element) { 

      if (moment() >= view.start && moment() <= view.end) { 
       $(".fc-prev-button").prop('disabled', true); 
       $(".fc-prev-button").addClass('fc-state-disabled'); 
      } 
      else { 
       $(".fc-prev-button").removeClass('fc-state-disabled'); 
       $(".fc-prev-button").prop('disabled', false); 
      } 
     } 

Answer 6

的代碼檢查FC-國家禁用或UI狀態的殘疾人，所以沒有必要功能已停用的按鈕。

viewRender: function(view, element) { 
    // Drop the second param ('day') if you want to be more specific 
    if(moment().isAfter(view.intervalStart, 'day')) { 
     $('.fc-prev-button').addClass('fc-state-disabled'); 
    } else { 
     $('.fc-prev-button').removeClass('fc-state-disabled'); 
    } 
}