Question

这看起来非常简单，但是我花了半天的时间抨击墙壁，试图弄清楚为什么我的全日历事件只显示在77px，当时单元格的宽度（月视图）似乎是90px或更高。我已经尝试修改fc-event css规则，但似乎javascript正在将一些内联样式写入日历，覆盖这些样式。

我似乎无法找到这些风格的写法！

任何定制过fullcalendar的人都可以提供一些见解吗？它在wordpress博客上作为一个页面运行，不知道这与它有什么关系，因为我注意到其中一个按钮在一个尴尬的位置被砍掉了。

Answer 1

您可以使用eventAfterRender

设置事件宽度

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

Answer 2

我使用了！important来覆盖内联样式并且工作正常

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

Answer 3

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 4

我使用此代码得到了结果，希望你也能正常工作。

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

Answer 5

有些wordpress主题样式与fullcalendar不兼容。我正在使用Wordpress 3.0，使用Twenty Ten风格。我没有将它插入内容div中，而是将其插入其父级容器div中，然后样式自行修复。

Answer 6

TwentyTen添加了填充表格单元格（参见style.css）：

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

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

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

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

6 个答案: