¿Cómo se edita el ancho del evento en FullCalendar?

Question

Esto parece increíblemente fácil, pero he pasado medio día golpeando mi cabeza contra la pared tratando de descubrir por qué mis eventos de calendario completo se muestran solo a 77px, cuando el ancho de la celda (vista de mes) parece ser de 90px o mayor. Intenté modificar la regla fc-event css, pero parece que javascript está escribiendo algunos estilos en línea en el calendario, sobrescribiendo estos estilos.

¡Parece que no puedo averiguar dónde se están escribiendo estos estilos!

¿Alguien que haya personalizado fullcalendar puede darnos una idea? Se está ejecutando como una página en un blog de WordPress, no estoy seguro si esto tiene algo que ver con eso, ya que noté que uno de los botones se corta en una posición incómoda.

Answer 1

Algunos estilos de tema de wordpress no funcionan bien con fullcalendar. Estoy usando Wordpress 3.0, usando el estilo Twenty Ten. En lugar de insertarlo dentro del div de contenido, lo inserté en su elemento principal, el contenedor div, y luego los estilos se arreglan por sí mismos.

Answer 2

se puede establecer el ancho evento con eventAfterRender

$('#calendar').fullCalendar({ 
    eventAfterRender: function(event, element, view) { 
         $(element).css('width','50px'); 
        } 
}); 

Answer 3

TwentyTen añade celdas de la tabla de relleno (véase style.css):

#content tr td { 
    border-top: 1px solid #e7e7e7; 
    padding: 6px 24px; 
} 

Lo siguiente debe 'arreglar' esto para el fullCalendar:

#content .fc tr td{ 
    padding:0px; 
} 

Answer 4

eventRender: function (event, element, view) { 
    if (event.eventType == "Task") { //own property 
     var one_day = 1000 * 60 * 60 * 24; 
     var _Diff = Math.ceil((event.start.getTime() - view.visStart.getTime())/(one_day)); 
     var dayClass = ".fc-day" + _Diff; 

     if (event.days == 1) { //own property 
      jQuery(dayClass).addClass("one-day-event"); //set width to 90px (cca 2 cells) 
     } else { 
      jQuery(dayClass).removeClass("one-day-event"); 

     } 
     view.setWidth(jQuery(dayClass).css("width") * event.days); 
    } 
}, 

Answer 5

I've used ! Important para anular el estilo en línea y ha funcionado bien

.fc-event{ width: 98px !important;}

Answer 6

me dieron el resultado de utilizar este código y esperanza el trabajo bien con usted también.

$('#calendar').fullCalendar({ 
    eventAfterRender: function(event, element, view) 
    { 
     $(element).css('width','50'); 
    } 
});