完整日历 - 垂直资源，水平天数

Question

我想知道，是否有任何方法可以使用这种格式的Fullcalendar创建日历：

Resource A   Resource B   Resource C
Apr. 26
Apr. 27
Apr. 28
Apr. 29

时间线视图与此类似，但不完全是我需要的。拥有一个可以管理此类事件的日历非常重要。

提前谢谢你！

Answer 1

是的。这是一种解决方法。尝试声明如下自定义视图：

$(function() {
// You should change dynamically the min/maxtime
// settings of your custom view when switching
// between months.
// https://fullcalendar.io/docs/dynamic-options
var getDaysInMonth = function() {
var d = new Date();
var year = d.getYear();
var month = d.getMonth() + 1;
return new Date(year, month, 0).getDate();
};
var getMonthDay = function() {
var d = new Date();
return d.getDate();
};
var getMinTime = function() {
var days = getMonthDay() - 1;
var time = "-" + days + ".00:00:00";
return time;
};
var getMaxTime = function() {
var days = getDaysInMonth() - getMonthDay() + 1;
var time = days + ".00:00:00";
return time;
};
$('#calendar').fullCalendar({
defaultView: 'agendaMonth',
groupByResource: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaMonth,listThreeDay,agendaWeek,month'
},
views: {
listThreeDay: {
type: 'list',
duration: {
days: 31
}
},
agendaMonth: {
type: 'agendaDay',
minTime: getMinTime(),
maxTime: getMaxTime(),
slotDuration: '24:00:00',
slotLabelFormat: [
'MMMM YYYY', // top level of text
'D' // lower level of text
],
buttonText: 'custom agenda'
},      
},    
resources: [
{ id: 'a', title: 'Room A' },
{ id: 'b', title: 'Room B' }
],
events: 'https://fullcalendar.io/demo-events.json?with-resources=2'
});
});

工作演示：https://codepen.io/anon/pen/jKQvLx