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

 $('#calendar').fullCalendar({
            viewDisplay   : function(view) {
                var now = new Date(); 
                var end = new Date();
                var begin =  new Date ();

                end.setMonth(now.getMonth() + 12); //Adjust as needed
                begin.setMonth(now.getMonth() - 12); //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();
                var begin_date_string = begin.getMonth()+'/'+begin.getFullYear();

                if(cal_date_string == begin_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 2

J'étais confronté à une situation similaire : J'ai un programme d'événements et je voulais limiter le calendrier complet à la plage de dates des événements (par exemple, 12 semaines). Ainsi, si aujourd'hui est dans la semaine 6, alors le calendrier n'affiche que les dates de la semaine 1 à 12 lorsque l'utilisateur clique sur suivant ou précédent. J'ai envisagé de modifier fullcalendar.js mais je n'ai pas le temps de faire un détour par rapport au calendrier de mon projet pour le faire. Voici donc ce que j'ai fait en guise de solution de rechange :

1. Ajoutez un sélecteur de date dans un div à gauche de la page, avec le calendrier complet à droite.

2. Définissez une date de début et une date de fin pour la plage de dates de votre programme.

3. Définissez les variables minDate et maxDate dans le sélecteur de date en utilisant startDate et endDate pour la plage de dates du programme dans le sélecteur de date, afin de masquer toutes les autres dates en dehors de la plage. L'objectif est d'inciter l'utilisateur à rester dans la plage. J'ai également ajouté du code pour que, lorsqu'un utilisateur clique sur la date dans le sélecteur de date, le jour s'affiche dans le calendrier complet.

4. Dans votre fichier jQuery personnalisé .js, ajoutez à la méthode fullCalendar pour dayClick qui prend la date comme variable :

   if (+date < +jQuery.startDate || +date > jQuery.endDate) {

   var $date_out_of_range_dialog = jQuery('') .html('

   Désolé, la date que vous avez sélectionnée est en dehors de la plage de dates du programme actuel.

   Date de début : '+ (jQuery.startDate.getMonth() + 1) + '/' +jQuery.startDate.getDate() + '/' +jQuery.startDate.getFullYear() +'

   Date de fin : ' + (jQuery.endDate.getMonth() + 1) + '/' +jQuery.endDate.getDate() + '/' +jQuery.endDate.getFullYear() + '

   ') .dialog({ autoOpen : false, modal : true, title : 'Date Out of Range', largeur : 600, boutons : { "Ok" : function() { jQuery(this).dialog("close") ; } } })

   $date_out_of_range_dialog.dialog('open') ;

   } else {

   //faire quelque chose d'autre comme afficher/additionner/supprimer un événement pour ce jour dans la plage.

   }

5. La méthode .dialog pour ouvrir la fenêtre de dialogue provient de mootools, mais quelque chose de similaire peut être utilisé dans jQuery. J'ai ajouté jQuery. à startDate et endDate pour que les variables soient disponibles dans mon fichier .js.

6. Voici le code de l'afficheur de date pour choisir la date et sélectionner le calendrier complet :

   jQuery('#datepicker_for_calendar').datepicker({ defaultDate : jQuery.startDate, minDate : jQuery.startDate, maxDate : jQuery.endDate, inline : true, showButtonPanel : true, onSelect : function(dateText, inst) { var d = new Date(dateText) ; jQuery('#calendar').fullCalendar('gotoDate', d) ; selectedDate = d ; } }) ;

Answer 3

A mon tour d'ajouter une modification. Celle-ci est cependant basée sur lewsid 's réponse qui inclut les calculs de date et les sélecteurs de calendrier complets nécessaires pour y parvenir, mais avec une petite touche d'originalité.

J'ai juste ajouté deux "si", que vous pouvez choisir d'utiliser l'un ou les deux, ou aucun. L'objectif est d'être spécifique au jour, juste parce que vous permettez par exemple, "2 mois" en avant et en arrière, si vous êtes sur une vue hebdomadaire, le "Aujourd'hui" + 2 mois pourrait être désactivé, et aussi, après avoir avancé, vous pourriez être bloqué pour revenir à "Aujourd'hui".

jQuery('#edit-calendar').fullCalendar({
    viewDisplay   : function(view) {
      var now = new Date(); 
      var end = new Date();
      end.setMonth(now.getMonth() + 2); //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();
      // TWEAK: Day Specific Vars
      var cal_date_month_day = parseInt(view.start.getDate());
      var cur_date_month_day = parseInt(now.getDate());

      // TWEAK: Only Disable if I can see today!
      if(cal_date_string == cur_date_string && cal_date_month_day <= cur_date_month_day) { jQuery('.fc-button-prev').addClass("fc-state-disabled"); }
      else { jQuery('.fc-button-prev').removeClass("fc-state-disabled"); }
      // TWEAK: Only Disable if I really did reach "Today" + months
      if(end_date_string == cal_date_string && cal_date_month_day >= cur_date_month_day) { jQuery('.fc-button-next').addClass("fc-state-disabled"); }
      else { jQuery('.fc-button-next').removeClass("fc-state-disabled"); }
    }
});

Answer 4

J'ai beaucoup aimé la réponse de Lewsid, mais elle présente quelques problèmes. Tout d'abord, le view.start est un Moment, et non une date, donc getMonth() n'existe pas. Deuxièmement, une vue start est juste le premier jour visible de ce mois, ce qui signifie que cette date peut être du mois précédent. Pour contourner cela, utilisez son intervalStart propriété.

Voici mon implémentation pour que le calendrier affiche l'année en cours.

viewRender: function(view, element) {
    var now = new Date(new Date().getFullYear(), 0, 1);
    var end = new Date(new Date().getFullYear(), 11, 31);

    var calDateString = view.intervalStart.month()+'/'+view.intervalStart.year();
    var curDateString = now.getMonth()+'/'+now.getFullYear();
    var endDateString = end.getMonth()+'/'+end.getFullYear();

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

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