fullcalendar, come limitare il numero di eventi al giorno nella vista mensile

Question

Ho molti eventi in un giorno e funziona come previsto ma ora guardando la vista del mese, la mia griglia del calendario è molto più alta di quanto previsto. Mi piacerebbe nascondere alcuni di questi eventi dalla vista mensile, come un riepilogo con una visualizzazione visuale che ci sono più in questo giorno di quanti possano essere mostrati.

Posso usare eventRender e restituire false, ma mi piacerebbe sapere quanti eventi ci sono in un dato giorno, quindi posso limitare il rendering a circa 4, quindi forse aggiungerei un evento che dice "altro .. . "

Quindi la domanda potrebbe essere: come contare gli eventi in una determinata data?

o è più simile a una richiesta di funzionalità per esporre un contatore massimo per la visualizzazione mese?

grazie

Answer 1

Attualmente non possibile. vedi richiesta di funzionalità: http://code.google.com/p/fullcalendar/issues/detail?id=304

Answer 2

Ho un requisito simile e stava pensando di fare qualcosa di simile:

nei mangimi JSON, sarei tornato eventi speciali che contengono un conteggio di eventi per ogni giorno.

Utilizzando il callback eventRender del calendario completo appropriato, vorrei solo visualizzare questi eventi di conteggio totale speciale a seconda della visualizzazione restituendo false in eventRender() per tutti gli eventi che non desidero vedere.

Non l'ho ancora implementato, ma forse può essere una strada valida. Correggimi se sbaglio.

Answer 3

ho fatto qualcosa di simile:

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

Qui il metodo GetEventsByView restituisce un insieme raggruppato per la vista mese e insieme dettagliato per le viste agendaWeek e giorno. Ma per farlo funzionare correttamente, ho dovuto impostare lazyFetching:false per il calendario.

Answer 4

Questo plugin buggy (per lo più abbandonato) fa esattamente quello che stai chiedendo. Dai un'occhiata, e sentiti libero di contribuire. Attenzione: Si tratta di un trucco, ma lo stesso fullcalendar ha un'API che richiede molto lavoro. La maggior parte delle parti importanti sono intrappolate in una chiusura, il che rende molto difficile estenderle. Non c'è davvero alcun modo per farlo senza hacker, a meno che non si voglia modificare il codice sorgente del plugin.

Detto questo, questo è il più vicino che ho trovato per quello che stai chiedendo: https://github.com/lyconic/fullcalendar/tree/view-more

Answer 5

sto facendo in questo modo

Css:

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

codice del 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

Non è necessario fare molto sforzo per prendere il conto totale anche ts. Ho un modo semplice per contare gli eventi totali sul mio fullCalendar.Nel eventAfterAllRender, scrivere qualcosa del genere,

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

-dove calendar è il mio calendario #

Questo è tutto il mio modo di fare. Sto prendendo a sinistra da qui. Ma sono sicuro, non è così difficile se provi qualcosa sullo loading: function() del fullCalendar per limitare il numero di eventi in base ai tuoi desideri.

Grazie però.

Answer 7

A partire dal FullCalendar 2.1.0, questa funzione è inclusa, basta usare:

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

Demo: http://arshaw.com/js/fullcalendar-2.1.0-beta2/demos/agenda-views.html

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