FullCalendar - как отключить кнопку prev

Question

Как отключить кнопку «предыдущий», если предыдущий месяц меньше текущего месяца?

Например, если текущим месяцем является август, то я хочу отключить кнопку предыдущего месяца, чтобы вы не могли видеть июльский месяц.

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

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 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: Я предпочитаю вместо этого получать текущую дату из railsJquery, поскольку я предпочитаю использовать серверное время, поскольку мое приложение не используется во всем мире, и я все равно не получаю время.

Примечание 2: Я использую $ jQ дляjQuery.noConflict (), если вы не просто ищете и заменяете $ jQ на $.

Answer 4

Вы можете легко сделать это самостоятельно, вот пример, который работает.

Я сделал это, изменив 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");
            }

Это начинается со строки: 944 в fullcalendar.js

Я протестировал это в Firefox 3.6.8, используя примерыbasic-view.html и default.html предоставляются при загрузке FullCalendar.Просто измените:

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

на

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

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 разместил выше, но его следует поместить в функцию renderView (около строки 368 в версии 1.5.4) перед ignoreWindowResize--;ближе к концу функции.

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