Fullcalendar limite l'affichage des mois disponibles ?

Question

J'aimerais savoir comment limiter le calendrier complet à une période de trois mois et le désélectionner pour le reste des mois comme dans un sélecteur de date ?

Par exemple, le mois en cours est mai 2010, je voudrais que le calendrier n'affiche que les mois de mai et avril (en cliquant sur le mois précédent), et juin (en cliquant sur le mois suivant), le reste des mois étant désélectionné par l'utilisateur.

Je ne suis pas sûr d'avoir manqué de lire une partie de la documentation de fullcalendar. Veuillez me conseiller. Merci.

Answer 1

Pour FullCalendar dans la version 2 changer viewDisplay : function(view) { à viewRender: function(view,element) { (solution mixte à partir d'exemples sur cette page) :

  $('#calendar').fullCalendar({

       //restricting available dates to 2 moths in future
        viewRender: function(view,element) {
            var now = new Date();
            var end = new Date();
            end.setMonth(now.getMonth() + 2); //Adjust as needed

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

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

Answer 2

Ceci est basé sur tauren 's réponse mais inclut les calculs de date et les sélecteurs de calendrier complets nécessaires pour y parvenir (ce code utilise une plage de 12 mois) :

jQuery('#edit-calendar').fullCalendar({
    viewDisplay   : function(view) {
      var now = new Date(); 
      var end = new Date();
      end.setMonth(now.getMonth() + 11); //Adjust as needed

      var cal_date_string = view.start.getMonth()+'/'+view.start.getFullYear();
      var cur_date_string = now.getMonth()+'/'+now.getFullYear();
      var end_date_string = end.getMonth()+'/'+end.getFullYear();

      if(cal_date_string == cur_date_string) { jQuery('.fc-button-prev').addClass("fc-state-disabled"); }
      else { jQuery('.fc-button-prev').removeClass("fc-state-disabled"); }

      if(end_date_string == cal_date_string) { jQuery('.fc-button-next').addClass("fc-state-disabled"); }
      else { jQuery('.fc-button-next').removeClass("fc-state-disabled"); }
    }
});

Answer 3

Je n'ai pas fait ça, donc je ne suis pas sûr que ça va marcher. Mais vous pourriez au moins essayer et voir.

Je chercherais probablement à personnaliser le viewDisplay rappel. Il reçoit un Voir l'objet qui contient un start la propriété, entre autres. Vous pouvez utiliser les propriétés de l'objet View pour tester la vue et la date que l'utilisateur regarde, puis effectuer des actions en fonction de celles-ci.

Je ne sais pas si fullcalendar fonctionne de cette manière, mais certains plugins interrompent une action si vous return false à partir d'un rappel. Ainsi, vous pourriez vérifier le start et si elle se situe en dehors de votre fourchette de mois acceptables, alors return false pour interrompre l'action.

Si cela ne fonctionne pas, à l'intérieur de viewDisplay vous pourriez à nouveau vérifier le start date. Si le mois suivant ou le mois précédent sont hors de portée, vous pouvez utiliser des sélecteurs jQuery pour saisir les boutons prev/next et les désactiver. Ainsi, l'utilisateur ne pourra pas passer à un mois hors limites.

De même, si l'utilisateur se trouve dans un mois hors de la plage, vous pouvez émettre immédiatement un gotoDate pour passer à un mois valide.

$('#calendar').fullCalendar({
    viewDisplay: function(view) {
        // maybe return false aborts action? 
        if (view.start > lastDayOfNextMonth) {
            return false;
        }
        // or disable next button if this is last valid month
        if (view.end + oneDay >= lastValidDate) {
            $("#calendar #fc-button-next").attr("disabled","disabled");
        }
        // or gotoDate if view.start is out of range
        if (view.start > lastValidDate) {
           // gotoDate
        }
    }
});

Il y a de nombreuses façons de faire de la logique et des calculs de date, mais je pense que vous pouvez obtenir quelque chose qui fonctionne de cette façon.

Answer 4

Vous pouvez utiliser l'option

$('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            validRange: {
                start: '2017-05-01',//start date here
                end: '2017-07-01' //end date here
            },
            defaultDate: '2017-05-12'
            });

Answer 5

            var academicYearStartDate = new Date('2013/4/10');
            var academicYearEndDate = new Date('2014/4/10');

            viewDisplay: function (view) {
                //========= Hide Next/ Prev Buttons based on academic year date range
                if (view.end > academicYearEndDate) {
                    $("#SchoolCalender .fc-button-next").hide();
                    return false;
                }
                else {
                    $("#SchoolCalender .fc-button-next").show();
                }

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

            }