FullCalendar - comment désactiver le bouton prev

Question

Comment désactiver le bouton prev lorsque le mois précédent est inférieur au mois en cours? Par exemple, si le mois en cours est août, alors je veux désactiver le bouton mois précédent afin que vous ne puissiez pas voir le mois de juillet.

Answer 1

Vous pouvez le faire facilement par vous-même, voici un exemple qui fonctionne.

Je l'ai fait en changeant fullcalendar.js. Notez que dans de nombreux exemples, vous pouvez changer l'année, le mois et le jour en utilisant les boutons prev/next. Chacun d'entre eux a sa propre fonction de rendu, donc cela devrait être pris en considération si vous le souhaitez pour chacun d'entre eux. Mon exemple peut facilement être adapté.

Dans mon exemple, j'ai également mis le bouton précédent à la couleur rouge lorsqu'il est "désactivé". Vous pouvez décider vous-même comment vous voulez faire avec cela.

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

Cela commence de la ligne: 944 à fullcalendar.js

J'ai testé ce dans Firefox 3.6.8 en utilisant les exemples view.html de base et default.html fourni lorsque vous téléchargez FullCalendar. Il suffit de changer:

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

à

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

Answer 2

Pour toute personne qui ne veut pas modifier les fullcalendar.js car cela pourrait compliquer les mises à jour:

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

Note 1: I Je préfère utiliser la date courante des rails au lieu de Jquery puisque je préfère utiliser le temps du serveur puisque mon application n'est pas utilisée dans le monde entier, et je n'ai pas le temps ay.

Note 2: J'utilise $ jQ pour jQuery.noConflict(), si vous ne recherchez pas et ne remplacez pas $ jQ pour $.

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

Je ne peux pas ajouter un commentaire à mon code SanRyu affiché ci-dessus, mais il doit être placé dans la fonction RenderView (autour de la ligne 368 dans la version 1.5.4) avant ignoreWindowResize--; près de la fin de la fonction.

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

Version mise à jour:

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

Les contrôles de code pour fc-état désactivé ou ui-état désactivé donc il n'y a pas besoin de disbled le bouton.

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