css - 资源 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，但它仍在尝试自动适应所有内容。

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

我有这种滚动风格：

#calendar
{
    overflow-x:auto;
}

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

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

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

对其中任何一个的任何见解都会非常有帮助。

谢谢

Answer 1

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

#calendar table { table-layout: fixed; }

Answer 2

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

.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;
}

Answer 3

我知道我的解决方案不相关，但感谢“overflow-x:auto;” 这帮助我解决了我的问题。

这适用于我在议程视图中使用原始 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 4

放

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

这解决了你的问题