fullcalendar, comment limiter le nombre d'événements par jour dans la vue mensuelle

Question

J'ai beaucoup d'événements sur un jour, et cela fonctionne comme prévu, mais maintenant en regardant la vue mensuelle, ma grille de calendrier est beaucoup plus grande que prévu. Je voudrais cacher certains de ces événements de la vue du mois, comme un résumé avec un visuel que ce jour-là est plus que ce qui peut être montré.

Je peux utiliser eventRender et retourner false, mais j'aimerais savoir combien d'événements sont sur un jour donné, donc je peux limiter le rendu à environ 4, alors peut-être que j'ajouterais un événement qui dit "more .. Donc, la question peut être: comment compter les événements à une date donnée? Ou est-ce plus comme une demande de fonctionnalité pour exposer un compteur max pour la vue mensuelle?

merci

Answer 1

actuellement impossible. voir demande de fonctionnalité: http://code.google.com/p/fullcalendar/issues/detail?id=304

Answer 2

J'ai une exigence similaire et a été pensée de faire quelque chose comme ceci:

dans les aliments JSON, je retournerais des événements spéciaux qui contiennent un nombre d'événements pour chaque jour. En utilisant le callback eventRender de calendrier complet approprié, je n'afficherais ces événements de nombre total spécial selon la vue en retournant false dans eventRender() pour tous les événements que je ne veux pas voir.

Je ne l'ai pas encore implémenté, mais peut-être que cela peut être une avenue valide. Corrige moi si je me trompe.

Answer 3

je fait quelque chose comme ceci:

function(start, end, callback) { 
       var viewName = $("#calendar").fullCalendar('getView'); 
       var startTime = Math.round(start.getTime()/1000); 
       var endTime = Math.round(end.getTime()/1000); 
       MyWebService.MyWebMethod.GetEventsByView(startTime, endTime, viewName.name, 
        function(args) { 
         callback(args); 
        }, 
        function(error) { 
         var e = error; 
        } 
       ); 
      } 

Voici la méthode GetEventsByView retourne un ensemble groupé pour une vue mois et ensemble détaillé pour les vues agendaWeek et jour. Mais pour que cela fonctionne correctement, j'ai dû mettre lazyFetching:false pour le calendrier.

Answer 4

Ce plugin buggy (la plupart du temps abandonné) fait exactement ce que vous demandez. Vérifiez-le, et n'hésitez pas à contribuer. Attention: C'est un hack, mais fullcalendar lui-même a une API qui demande beaucoup de travail. La plupart des pièces importantes sont emprisonnées dans une fermeture, ce qui rend leur extension très difficile. Il n'y a vraiment aucun moyen d'accomplir cela sans piratage, sauf si vous voulez modifier le code source du plugin.

Cela étant dit, c'est le plus proche que j'ai trouvé ce que vous demandez: https://github.com/lyconic/fullcalendar/tree/view-more

Answer 5

que je fais comme ça

Css:

 .MaxHght 
     { 
     height:16px; 
     } 
     .viewMore 
     { 
     float:right; 
     color: rgb(219, 104, 28); 
     cursor:pointer; 
     } 

code du plugin

dayClick: function (date, allDay, jsEvent, view) { 
        $('#fullCalendar').fullCalendar('changeView', 'agendaDay').fullCalendar('gotoDate', date.getFullYear(), date.getMonth(), date.getDate()); 
       }, 
eventRender: function (event, element, view) { 
       element.qtip({ 
        content: event.QText, 

        position: { 
         my: 'CenterBottom', 
          at:'TopCenter' 

        }, 
        style: { 
         tip: 'bottomMiddle' 

        } 
       }); 
       $(element).removeClass('MaxHght'); 
       if (view.name == 'month') { 

         $(element).addClass('MaxHght'); 
        var year = event.start.getFullYear(), month = event.start.getMonth() + 1, date = event.start.getDate(); 
        var result = year + '-' + (month < 10 ? '0' + month : month) + '-' + (date < 10 ? '0' + date : date); 
        $(element).addClass(result); 
        var ele = $('td[data-date="' + result + '"]'),count=$('.' + result).length; 
        $(ele).find('.viewMore').remove(); 
        if (count> 3) { 
         $('.' + result + ':gt(2)').remove();       
         $(ele).find('.fc-day-number').after('<a class="viewMore"> More</a>'); 

        } 
       } 

      }, 
      eventAfterAllRender: function (view) { 
       if (view.name == 'month') { 
        $('td.fc-day').each(function() { 
         var EventCount = $('.' + $(this).attr('data-date')).length; 
         if (EventCount == 0) 
          $(this).find('.viewMore').remove(); 
        }); 
       } 
      }, 

Answer 6

Vous n'avez pas besoin de faire beaucoup d'efforts pour prendre le nombre total de ts. J'ai un moyen simple de compter le nombre total d'événements sur mon fullCalendar.Dans le eventAfterAllRender, écrire quelque chose comme ça,

eventAfterAllRender: function(view) { 
        var allevents = $('#calendar').fullCalendar('clientEvents'); 
        var countevents = 0; 
        if(allevents.length) { 
         countevents = countevents + allevents.length; 
        } 
        if(!countevents) { 
         // alert('event count is'+countevents); 
         console.log('event count is',countevents); 
        } 
       } 

-où calendar est mon calendrier #

C'est toute ma façon de faire. Je prends à gauche d'ici. Mais je suis sûr, ce n'est pas si difficile si vous essayez quelque chose sur le loading: function() du fullCalendar pour limiter le nombre d'événements selon votre souhait.

Merci bien.

Answer 7

Au FullCalendar 2.1.0, cette fonctionnalité est incluse, il suffit d'utiliser:

$('#calendarBlock').fullCalendar({ 
    eventLimit: true 
    [...] 
}); 

Démo: http://arshaw.com/js/fullcalendar-2.1.0-beta2/demos/agenda-views.html

Documentation: http://fullcalendar.io/docs/display/eventLimit/