修复了Resource FullCalendar中的列宽

Question

我正在使用支持资源视图的特殊版本的FullCalendar。 http://tux.fi/~jarnok/fullcalendar-resourceviews/

我只有几个问题。它似乎自动设置列宽，我认为应用这种地址：

.fc-widget-header
{
    width:100px;
}
.fc-widget-content
{
    width:100px;
}
.fc-resourceName
{
    background-color:aliceblue;
    width:150px;
}

然后html写道，单元格的宽度是100px，但它仍然试图自动适应所有内容。

我想要它做的是，如果它太大，要滚动，但我总是希望每个单元格正好是100px。

我有这种滚动样式：

#calendar
{
    overflow-x:auto;
}

但是元素仍然会根据日期显示为可变宽度。 这是它的样子：

显然，我的每个列都不是我要求的100px，资源列不是150px。我该怎么做才能获得理想的外观？

另一个问题是没有为新的一周定义课程。我真的想要将第X周写成不同颜色的列显示出来。

对这两种方法的任何见解都会非常有用。

由于

Answer 1

我想我之前遇到过这个问题，把这条线放在我的日历表上对我有用。

#calendar table { table-layout: fixed; }

Answer 2

我知道我的解决方案没有关系，但感谢“overflow-x：auto;”这有助于我解决我的问题。

这适用于使用垂直视图like this中的列资源在agendaView中使用原始fullCalendar + Scheduler：

@media (min-width: 1170px) {
    div.fc-view.fc-agendaDay-view.fc-agenda-view table {
        max-width: 100%;
    }
}
@media (max-width: 1170px) {
    div.fc-view-container {
        overflow-x: scroll;
    }
    div.fc-view.fc-agendaDay-view.fc-agenda-view table {
        min-width: 1170px;
    }
}

这种方式是使用原始最小宽度设置为120px的列，响应速度但使用滚动来增加尺寸，以便在小型设备上看起来更好。

Answer 3

设置

$('#calendar').fullCalendar({
 contentHeight: 'auto',
                aspectRation: 1.35,
})

这可以解决您的问题

Answer 4

对于在垂直资源视图中搜索解决方案的任何人，这都对我有帮助：

.fc table{
    table-layout: auto;
}
.fc-view > table{  
    min-width: 0;
    width: auto;
}
.fc-axis{
    min-width:100px; /*the width of times column*/
    width:100px; /*the width of times column*/
}
.fc-day,.fc-resource-cell,.fc-content-col{
    min-width:300px;
    width:300px;
}