Question

当前一个月小于当月时，如何禁用上一步按钮？

例如，如果当前月份是8月，那么我想禁用上个月按钮，以便您看不到7月份。

Answer 1

代码检查fc-state-disabled或ui-state-disabled，因此不需要删除按钮。

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

Answer 2

您可以自己轻松完成此操作，这是一个有效的示例。

我通过更改fullcalendar.js来完成此操作。请注意，在许多示例中，您可以使用上一个/下一个按钮更改年，月和日。它们中的每一个都有自己的渲染功能，因此如果你想要它们中的每一个，都需要考虑这一点。我的例子很容易适应。

在我的例子中，当“禁用”时，我也将前一个按钮设置为红色。你可以自己决定如何处理这个问题。

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

这从fullcalendar.js中的第944行开始

我在Firefox 3.6.8中使用下载FullCalendar时提供的basic-view.html和default.html示例对此进行了测试。只需更改：

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

到

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

Answer 3

对于任何不想修改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 4

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

我无法在SanRyu上面发布的代码中添加注释，但是在ignoreWindowResize--之前它应该放在renderView函数中（版本1.5.4中的第368行）。接近函数的末尾。

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

FullCalendar - 如何禁用prev按钮

6 个答案: