Jak edytować szerokość wydarzenia w FullCalendar?

Question

Wydaje się to niezwykle łatwe, ale spędziłem pół dnia waląc głową o ścianę, próbując dowiedzieć się, dlaczego moje wydarzenia fullcalendar pokazują się tylko na poziomie 77 pikseli, gdy szerokość komórki (widok miesiąca) wydaje się być albo 90px albo wyższy. Próbowałem zmodyfikować regułę css zdarzenia zdarzeń, ale wydaje się, że javascript zapisuje niektóre style wbudowane w kalendarz, zastępując te style.

Nie mogę się dowiedzieć, skąd się biorą te style!

Czy każdy, kto ma dostosowany pełnoekranowy kalendarz, daje pewien wgląd? Działa jak strona na blogu wordpress, nie jestem pewien, czy to ma z tym coś wspólnego, ponieważ zauważyłem, że jeden z przycisków jest odrywany w niezręcznej pozycji.

Answer 1

Niektóre style motywu Wordpress nie odtwarzają się dobrze z funkcją fullcalendar. Używam Wordpressa 3.0, używając stylu Twenty Ten. Zamiast wstawiania go do elementu div zawartości, wstawiłem go do jego elementu nadrzędnego, elementu div kontenera, a następnie style same się poprawiają.

Answer 2

można ustawić szerokość zdarzeń z eventAfterRender

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

Answer 3

TwentyTen dodaje dopełnienie komórki tabeli (patrz style.css):

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

Poniższy powinien 'naprawić' to dla 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

Użyłem ! Ważne, aby przesłonić styl inline i to działało dobrze

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

Answer 6

mam wynik za pomocą tego kodu i nadziei działać dobrze z tobą też.

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