javascript - FullCalendar 显示事件半天(事件宽度)
问题描述
我想为少数事件显示半天半天或全天的事件开始。目前,所有活动在一个月内全天进行。
同时是否可以根据开始和结束时间显示事件宽度?
我试过下面的堆栈参考代码。评论进一步澄清。
eventAfterRender: function(event, element, view) {
var containerWidth = jQuery(element).offsetParent()
.siblings("table").find(".fc-day-content").width();
// half a day
var elementWidth = parseInt(containerWidth / 2);
// set width of element
jQuery(element).css('width', elementWidth + "px");
}
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
timeZone: 'UTC',
plugins: [ 'interaction', 'resourceTimeline' ],
header: {
left: 'promptResource today prev,next',
center: 'title',
right: 'resourceTimelineMonth,resourceTimelineWeek'
},
aspectRatio: 1.5,
displayEventTime: true,
displayEventTime: true,
displayEventEnd: true,
timeFormat: 'h:mma',
defaultView: 'resourceTimelineMonth',
resourceLabelText: 'Rooms',
editable: true,
resources: [ {
"id": "a", "title": "Auditorium A"
}
,
{
"id": "b", "title": "Auditorium B"
}
,
{
"id": "c", "title": "Auditorium C"
}
,
{
"id": "e", "title": "Auditorium E"
}
,
],
events: [
{
id: 1,
className: "HalfClass",
resourceId: 'a',
title: 'Taufik1',
start: "2019-09-03 06:00",
end: "2019-09-05 12:00",
description: ''
},
{
id: 2,
resourceId: 'b',
title: "Smith",
color: "#F6BB42",
start: "2019-09-06",
end: "2019-09-08"
},
{
id: 3,
resourceId: 'c',
title: 'Austin',
start: "2019-09-04",
end: "2019-09-08",
description: ''
},
{
id: 4,
resourceId: 'd',
title: 'Wong Ling',
color: "#DA4453",
start: "2019-09-04",
end: "2019-09-06"
}
]
});
calendar.render();
});
#calendar {
max-width: 900px;
margin: 40px auto;
}
<link href="https://fullcalendar.io/releases/core/4.2.0/main.min.css" rel="stylesheet"/>
<link href="https://fullcalendar.io/releases/timeline/4.2.0/main.min.css" rel="stylesheet"/>
<link href="https://fullcalendar.io/releases/resource-timeline/4.2.0/main.min.css" rel="stylesheet"/>
<script src="https://fullcalendar.io/releases/core/4.2.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/interaction/4.2.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/timeline/4.2.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/resource-common/4.2.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/resource-timeline/4.2.0/main.min.js"></script>
<div id="calendar"></div>
解决方案
使用内置 API 的一个选项是设置更短的时段持续时间 - 这将为日历提供更多空间以准确显示您的活动时间。
slotDuration: {
"hours": 12
},
将日历分为半天而不是全天,在视图中引入时间组件,然后允许更细粒度的显示。
我还(可选地)使用slotLabelInterval
并slotLabelFormat
改进了该设置的默认标题显示slotDuration
,因此它看起来更整洁。
有关文档,请参阅https://fullcalendar.io/docs/date-display和https://fullcalendar.io/docs/date-formatting。
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
timeZone: 'UTC',
plugins: ['interaction', 'resourceTimeline'],
header: {
left: 'promptResource today prev,next',
center: 'title',
right: 'resourceTimelineMonth,resourceTimelineWeek'
},
aspectRatio: 1.5,
displayEventTime: true,
displayEventTime: true,
displayEventEnd: true,
timeFormat: 'h:mma',
slotDuration: {
"hours": 12
},
slotLabelInterval: {
"hours": 24
},
slotLabelFormat: [{
month: 'long',
week: "short",
}, // top level of text
{
weekday: 'narrow',
day: 'numeric'
} // lower level of text
],
defaultView: 'resourceTimelineMonth',
resourceLabelText: 'Rooms',
editable: true,
resources: [{
"id": "a",
"title": "Auditorium A"
}
,
{
"id": "b",
"title": "Auditorium B"
}
,
{
"id": "c",
"title": "Auditorium C"
},
{
"id": "e",
"title": "Auditorium E"
},
],
events: [{
id: 1,
className: "HalfClass",
resourceId: 'a',
title: 'Taufik1',
start: "2019-09-03 06:00",
end: "2019-09-05 12:00",
description: ''
},
{
id: 2,
resourceId: 'b',
title: "Smith",
color: "#F6BB42",
start: "2019-09-06",
end: "2019-09-08"
},
{
id: 3,
resourceId: 'c',
title: 'Austin',
start: "2019-09-04",
end: "2019-09-08",
description: ''
},
{
id: 4,
resourceId: 'd',
title: 'Wong Ling',
color: "#DA4453",
start: "2019-09-04",
end: "2019-09-06"
}
]
});
calendar.render();
});
#calendar {
max-width: 900px;
margin: 40px auto;
}
<link href="https://fullcalendar.io/releases/core/4.2.0/main.min.css" rel="stylesheet" />
<link href="https://fullcalendar.io/releases/timeline/4.2.0/main.min.css" rel="stylesheet" />
<link href="https://fullcalendar.io/releases/resource-timeline/4.2.0/main.min.css" rel="stylesheet" />
<script src="https://fullcalendar.io/releases/core/4.2.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/interaction/4.2.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/timeline/4.2.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/resource-common/4.2.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/resource-timeline/4.2.0/main.min.js"></script>
<div id="calendar"></div>
推荐阅读
- php - 返回页面后php动态选择选项设置为默认值(表单提交后重置选择选项)
- python - 加载回文件后,matplotlib 图中的隐藏轴可见
- safari - Mac Safari (12 / 13) 会在 5-10 分钟后自动失去声音
- c - 为什么我的代码没有生成 1 到 N 之间的随机数字序列?不产生文件。我的代码有什么错误?我究竟做错了什么?
- python - 错误 builtins.TypeError:需要一个类似字节的对象,而不是使用 pickle 的“str”
- sql-server - 插入其中值不为空的带有选择语句
- excel - Excel VBA 调试
- excel - 如何将日期转换为 YYYY-MM 格式以便进行 SUMIFS?
- r - 从 R 中的单个文件创建多个文件
- azure - ADF 数据流中的返回计数