fullcalendar, cómo limitar el número de eventos por día en la vista de mes

Question

Tengo muchos eventos en un día y funciona como se esperaba, pero ahora mirando la vista de mes, mi cuadrícula de calendario es mucho más alta de lo esperado. Me gustaría ocultar algunos de estos eventos desde la vista de mes, como un resumen con una consulta visual que dice que hay más en este día de lo que se puede mostrar.

Puedo usar eventRender y devolver falso, pero me gustaría saber cuántos eventos hay en un día determinado, así que puedo limitar el renderizado a aproximadamente 4, entonces quizás agregue un evento que diga "más ... . "

Así que la pregunta puede ser: ¿cómo contar los eventos en una fecha determinada?

o ¿es esto más como una solicitud de función para exponer un contador máximo para la vista de mes?

gracias

Answer 1

actualmente no es posible. ver solicitud de función: http://code.google.com/p/fullcalendar/issues/detail?id=304

Answer 2

que tienen un requisito similar y estaba pensando en hacer algo como esto:

en la alimentación JSON, volvería eventos especiales que contienen un recuento de los eventos de cada día.

Utilizando la devolución de llamada de eventRender de calendario completo, solo mostraría estos eventos de recuento total especial según la vista devolviendo false en eventRender() para cualquier evento que no desee ver.

No lo he implementado todavía, pero tal vez pueda ser una vía válida. Corrígeme si estoy equivocado.

Answer 3

he hecho algo como esto:

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

Aquí el método GetEventsByView devuelve un conjunto agrupado de vista del mes y el conjunto detallado de vistas agendaWeek y día. Pero para que esto funcione correctamente, tuve que configurar lazyFetching:false para el calendario.

Answer 4

Este plugin (principalmente abandonado) hace exactamente lo que estás pidiendo. Compruébalo y siéntete libre de contribuir. Advertencia: Es un truco, pero fullcalendar tiene una API que necesita mucho trabajo. La mayoría de las partes importantes están atrapadas en un cierre, lo que hace que sea muy difícil de extender. Realmente no hay forma de lograr esto sin piratería, a menos que desee editar el código fuente del complemento.

Dicho esto, este es el más cercano que he encontrado que lo que está pidiendo: https://github.com/lyconic/fullcalendar/tree/view-more

Answer 5

que estoy haciendo como esto

Css:

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

código 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

No es necesario que se esfuerce demasiado para obtener el recuento total de ts. Tengo una manera simple de contar eventos totales en mi fullCalendar.En el eventAfterAllRender, escribir algo como esto,

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

-donde calendar es mi calendario #

Todo esto es mi manera de hacer. Estoy tomando a la izquierda desde aquí. Pero estoy seguro, no es tan difícil si intentas algo en el loading: function() del calendario completo para limitar el número de eventos de acuerdo a tus deseos.

Gracias aunque.

Answer 7

A partir de FullCalendar 2.1.0, se incluye esta función, sólo tiene que utilizar:

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

Demostración: http://arshaw.com/js/fullcalendar-2.1.0-beta2/demos/agenda-views.html

Documentación: http://fullcalendar.io/docs/display/eventLimit/