在全日历日视图中显示超过 1 天

Question

我正在尝试使用完整日历组件在议程日视图中显示 3 天或最终使用垂直资源视图。

我尝试使用示例自定义视图，但没有运气。

是否可以在日视图中显示 3 天，一个接一个？

我正在使用这个构造函数，但我不希望日子彼此相邻，而是彼此下方。

$('#calendar').fullCalendar({
defaultView: 'agendaDay',
defaultDate: '2017-12-07',
editable: true,
selectable: true,
eventLimit: true, // allow "more" link when too many events
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay,agendaTwoDay,agendaWeek,month'
},
views: {
agendaTwoDay: {
type: 'agenda',
duration: { days: 3 },
// views that are more than a day will NOT do this behavior by default
// so, we need to explicitly enable it
//groupByResource: true
//// uncomment this line to group by day FIRST with resources underneath
groupByDate: true
}
}

Answer 1

您不能在议程样式视图中显示彼此下方的日期，不可以。其整个布局方案是水平定向的。您可以轻松地以正常的议程样式并排显示它们。

调度程序插件提供的垂直资源视图与议程视图基本相同，但每天都会为每个指定的资源拆分为子列。

如果您希望日子一个接一个地显示，您唯一的选择是"列表"样式的视图。这将垂直显示内容，但您将丢失时间网格。

此代码将在 3 天的跨度内实现这两种类型的视图，因此您可以看到差异：

views: {
agendaThreeDay: {
type: 'agenda',
duration: {
days: 3
},
buttonText: '3 day agenda'
},
listThreeDay: {
type: 'list',
duration: {
days: 3
},
buttonText: '3 day list'
}
},

这是一个工作演示：http://jsfiddle.net/sbxpv25p/104/

如果这些都不满足您想要的，那么您唯一的其他选择是创建完全自定义的视图类型(请参阅本文档页面的后半部分：https://fullcalendar.io/docs/views/Custom_Views/)。这是一项复杂且耗时的任务，因此在开始这样的事情之前，您应该考虑其中一种内置视图类型是否真的令人满意 - 它们确实向用户传达了必要的信息，这是日历的主要目的，即使它不完全符合您想象的布局。

Answer 2

为了在议程视图中显示多天(天)，只需添加 - 和 + 您想要多少小时......例如，-24 H 表示提前一天，+24 H 表示您选择的一天之后的一天。像这样：

views: {
firstView: {
type: 'agendaDay',
minTime: '-12:00:00',
maxTime: '36:00:00',
slotDuration: '00:30:00',
},
}

Answer 3

views: {
timeGridFourDay: {
type: 'timeGrid',
duration: { days: 4 },
buttonText: '4 day'
}
},

并将其添加到标题：

header: {
left: 'prev,next',
center: 'title',
right: '.....,timeGridFourDay'
},

https://fullcalendar.io/docs/custom-views