我现在一直在使用完整日历计划程序,以便为客户创建日历,除了"事件"只是工作分配时间。
我已经设置了日历本身以适应客户端,但数据输入后日历上显示的实际事件栏仅为实际时段高度的一半左右。我知道这可能是为了重叠事件的目的,但在这种情况下这种情况永远不会发生,所以有没有办法将事件栏的高度增加到100%的时间段?我已经尝试过CSS,但它永远无法运行。
这是在时间轴视图中,一周,水平而不是垂直。我附上了一个截图作为例子。
编辑:日历代码
JS:
$('#calendar').fullCalendar({
resourceAreaWidth: "20%",
editable: true,
aspectRatio: 2.5,
scrollTime: '08:00',
minTime: '08:00',
maxTime: '22:00',
firstDay: 1,
header: {
left: 'promptResource today prev,next',
center: 'title',
right: 'timelineDay,timelineWeek,timelineMonth'
},
customButtons: {
},
defaultView: 'timelineWeek',
views: {
timelineWeek: {
type: 'timeline',
slotWidth: 60,
slotDuration: '02:00',
duration: { days: 6 }
}
},
slotLabelFormat: [
'dddd D/M/YY',
'h:mma'
],
events: [
{ id: '1', resourceId: '1', start: '2016-10-24 08:00:00', end: '2016-10-24 10:00:00', title: 'TESTREF001', url: 'null' },
],
resourceLabelText: 'Staff',
resources: [
{ id: '1', title: 'John Doe' },
]
});
CSS:
.fc-widget-header > .fc-cell-content > .fc-cell-text {
font-family: 'Oswald', sans-serif;
font-weight: 400 !important;
padding-top: 12px;
}
.fc-widget-header > .fc-cell-content {
background: #e4dbff;
}
.fc-time-area .fc-widget-header {
background: #e4dbff !important;
text-align: center !important;
}
.fc-unthemed th, .fc-unthemed td, .fc-unthemed thead, .fc-unthemed tbody, .fc-unthemed .fc-divider, .fc-unthemed .fc-row, .fc-unthemed .fc-content, .fc-unthemed .fc-popover, .fc-unthemed .fc-list-view, .fc-unthemed .fc-list-heading td {
border-color: #AAA !important;
}
.fc-body .fc-resource-area .fc-cell-content, .fc-body .fc-resource-area .fc-widget-content > div {
background: #f9f2c7;
font-family: 'Oswald', sans-serif;
font-weight: 400;
}
.fc-widget-header > div > .fc-cell-content > .fc-cell-text {
font-family: 'Oswald', sans-serif;
font-weight: 400 !important;
font-size: 24px;
padding-top: 12px;
}
.fc-widget-header {
background: #f9f2c7;
}
.fc-widget-content.fc-major {
background: #fff2e7;
border-collapse: collapse;
}
.fc-resource-area .fc-scroller-canvas {
background: #f9f2c7;
}