资源 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 滚动，但我总是希望每个单元格正好是 100px。

我有这种滚动风格：

#calendar
{
    overflow-x:auto;
}

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

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

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

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

谢谢

Answer 1

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

.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 2

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

#calendar table {
    table-layout: fixed;
}

Answer 3

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

这对我有用，在 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 4

设置

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

这解决了你的问题

Answer 5

如果有人使用较新版本的 fullcalendar 遇到此问题，您可以使用 v4 中的 slotWidth 设置和 v5/6 中的 slotMinWidth。

如果你想为每个视图覆盖它，你可以在 views 属性中进行。在下面的示例中，所有视图将共享相同的 slotMinWidth，除了具有覆盖的 resourceTimelineDay（标准包含视图）。

slotMinWidth: 100,
views: {
   resourceTimelineDay: {
     slowMinWidth: 50
   }
}

Answer 6

他们已经解决了这个问题。你只需要安装这个插件：https://fullcalendar.io/docs/dayMinWidth