将水平滚动添加到fullcalendar调度程序

Question

我正在使用Fullcalendar Scheduler，问题是当我有很多资源时，它会变得不好，就像这样：

带有资源的实时演示：http://fullcalendar.io/js/fullcalendar-scheduler-1.3.3/demos/vertical-resource-view.html

我有一个想法，它正在添加一个水平卷轴，但我不知道方式，你们可以帮助我吗？ 非常感谢你，祝你有个美好的一天。

Answer 1

＆＃13;

＆＃13;

.fc-view-container { 
  overflow-x: scroll; 
}
.fc-view.fc-agendaDay-view.fc-agenda-view{
  width: 500%;
}
/* **For 2 day view** */
.fc-view.fc-agendaTwoDay-view.fc-agenda-view{
  width: 500%;
} 

＆＃13;

＆＃13;

＆＃13;

Answer 2

Paresh 的答案适用于具有多列的视图，但具有限制，即具有很少列的视图将具有非常宽的列。

Fullcalendar 的渲染算法根据视图宽度计算相等的列宽，并且似乎没有使用 CSS 设置列宽的简单方法。

相反，我们需要在 x 轴上启用滚动：

.fc-view-container { 
    overflow-x: scroll; 
}

然后使用jQuery来计算视图的整体宽度。这里我使用的最小列宽为 100px：

var columnCount = $('.fc-agendaDay-view th.fc-resource-cell').length;
var viewWidth = $('.fc-view-container').width();
var minViewWidth = 18 + columnCount * 100;
if (minViewWidth > viewWidth) {
    $('.fc-view.fc-agendaDay-view.fc-agenda-view').css('width', minViewWidth + 'px');
}

我们只更改视图的宽度并在超过当前视图的宽度时启用滚动。这具有将最小列大小设置为 100 像素的效果。

jQuery 需要在 calendar.render(); 调用之后运行。