Как изменить ширину события в FullCalendar?

Это кажется невероятно простым, но я потратил полдня, колотя головой о стену, пытаясь понять, почему мои события fullcalendar отображаются только на 77px, когда ширина ячейки(месячный вид) кажется либо 90px, либо выше. Я попытался изменить правило CSS fc-event, но похоже, что javascript пишет некоторые встроенные стили в календарь, перезаписывая эти стили.

Я не могу, кажется, узнать, где эти стили получают написано!

может ли кто-нибудь, кто настроил fullcalendar дать некоторое представление? Он работает как страница в блоге wordpress, не уверен, что это имеет какое-то отношение к нему, так как я заметил, что одна из кнопок отрублена в неудобном положении.

6
fullcalendar

6 ответов

вы можете установить ширину события с помощью eventAfterRender

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

я использовал !важно переопределить встроенный стиль, и он работал нормально

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

2
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);
    }
},
1

Я получил результат, используя этот код, и надеюсь, что с вами тоже все будет хорошо.

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

некоторые wordpress стиль темы не играет хорошо с fullcalendar. Я использую Wordpress 3.0, используя стиль двадцать десять. Вместо того, чтобы вставлять его в контент div, я вставил его в родительский контейнер div, а затем стили исправляются.

0

TwentyTen добавляет ячейки таблицы заполнения (см. Стиль.css):

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

следующее должно "исправить" это для fullCalendar:

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