fullcalendar, wie die Anzahl der Ereignisse pro Tag in der Monatsansicht zu begrenzen

Question

Ich habe viele Ereignisse an einem Tag, und es funktioniert wie erwartet, aber jetzt in der Monatsansicht suchen, ist mein Kalender Raster viel größer als erwartet. Ich möchte einige dieser Ereignisse aus der Monatsansicht ausblenden, wie eine Zusammenfassung mit einer visuellen Abfrage, dass an diesem Tag mehr vorhanden ist, als angezeigt werden kann.

Ich kann eventRender verwenden und false zurückgeben, aber ich möchte wissen, wie viele Ereignisse an einem bestimmten Tag sind, also kann ich das Rendering auf etwa 4 begrenzen, dann würde ich vielleicht ein Ereignis hinzufügen, das sagt "mehr .. . "

Die Frage könnte also lauten: Wie zählt man die Ereignisse an einem bestimmten Datum?

oder ist das eher eine Feature-Anforderung, um einen maximalen Zähler für die Monatsansicht verfügbar zu machen?

danke

Answer 1

derzeit nicht möglich. siehe Feature-Anfrage: http://code.google.com/p/fullcalendar/issues/detail?id=304

Answer 2

Ich habe eine ähnliche Anforderung und dachte an so etwas wie dies zu tun:

in json Futter, würde ich besondere Ereignisse zurück, die eine Anzahl von Veranstaltungen für jeden Tag enthält.

Mit dem entsprechenden EventRender-Callback für den vollständigen Kalender würde ich diese speziellen Gesamtzählungsereignisse nur in Abhängigkeit von der Ansicht anzeigen, indem ich in eventRender() für Ereignisse, die ich nicht sehen möchte, false zurücksende.

Ich habe dies noch nicht implementiert, aber vielleicht kann es ein gültiger Weg sein. Korrigiere mich, wenn ich falsch liege.

Answer 3

Ich habe so etwas wie dies:

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

Hier ist die GetEventsByView Methode gibt einen gruppierten Satz für Monatsansicht und detaillierte Set für agendaWeek und Tag Aussicht. Damit dies jedoch korrekt funktioniert, musste ich lazyFetching:false für den Kalender festlegen.

Answer 4

Dieses Buggy (meist aufgegeben) Plugin tut genau, was Sie verlangen. Schauen Sie es sich an und fühlen Sie sich frei, etwas beizutragen. Warnung: Es ist ein Hack, aber Fullcalendar selbst hat eine API, die viel Arbeit benötigt. Die meisten wichtigen Teile sind in einem Verschluss eingeschlossen, was es sehr schwierig macht, sie zu verlängern. Es gibt wirklich keine Möglichkeit, dies ohne Hacker zu erreichen, es sei denn, Sie möchten den Quellcode des Plugins bearbeiten.

Dass gesagt wird, ist dies der nächste, die ich gefunden habe, was Sie fordern: https://github.com/lyconic/fullcalendar/tree/view-more

Answer 5

Ich mag dieses

Css tue:

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

Plugin-Code

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

Sie müssen sich nicht viel Mühe geben, die Gesamtzahl der Even zu nehmen ts. Ich habe eine einfache Möglichkeit, die Gesamtereignisse auf meinem FullCalendar zu zählen.Im eventAfterAllRender, so etwas schreiben,

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

-wo calendar ist mein Kalender #

Das ist alles meine Art und Weise zu tun. Ich nehme links von hier. Aber ich bin sicher, es ist nicht so schwer, wenn Sie etwas auf dem loading: function() des Vollkalenders versuchen, die Anzahl der Ereignisse nach Ihrem Wunsch zu begrenzen.

Danke, obwohl.

Answer 7

Ab FullCalendar 2.1.0, ist diese Funktion enthalten ist, benutzen Sie einfach:

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

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

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