如何编辑FullCalendar中事件的宽度？

Question

这似乎非常简单，但我已经花了半天的时间试图解决为什么我的fullcalendar事件仅以77px显示，而单元格（月视图）的宽度似乎为90px或更高。我尝试修改fc-event css规则，但似乎javascript正在将一些内联样式写入日历中，覆盖这些样式。

我似乎找不到这些样式是从哪里写入的！

有定制fullcalendar的人能提供一些见解吗？它正在一个WordPress博客页面上运行，不确定这是否与此有关，因为我注意到其中一个按钮位于尴尬的位置。

- Ying

Answer 1

你可以使用eventAfterRender设置事件宽度。

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

- mikeonbike

Answer 2

我使用了 !important 来覆盖内联样式，效果良好。

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

- amoniz

---

这可能与日历调整大小和响应性产生冲突。 - Ahmad Maleki

Answer 3

我用这段代码获得了结果，希望对您也有效。

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

- user3243514

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

- eXistPierre

Answer 5

TwentyTen在style.css中为表格单元格添加了内边距。

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

以下内容应该可以“修复”fullCalendar：

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

- Stephen Harris

Answer 6

一些 WordPress 主题样式与 fullcalendar 不兼容。我正在使用 WordPress 3.0，使用 Twenty Ten 样式。我将其插入父级容器 div 中，而不是插入内容 div 中，这样样式就可以自动修复。

- Ying