【发布时间】：2019-09-06 02:20:46
【问题描述】：
我想为少数事件显示活动开始半天和半天结束或全天。目前，所有活动在一个月内全天进行。
是否可以同时根据开始和结束时间显示事件宽度？
我试过下面的堆栈参考代码。评论进一步澄清。
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>【问题讨论】：
-
parseFloat 而不是 parseInt 一个。
-
@Icewine Updated 是否可以根据时间更改宽度？
-
它不是内置函数，但您可以使用 eventRenderer 回调函数来修改它们。就像用元素样式对象改变外观一样。
-
好的。你有什么想法吗？怎么做？
标签： javascript jquery html css fullcalendar