FullCalendar - 在日 View 中隐藏某些时间

Question

我正在使用 jQuery FullCalendar 插件并想在日 View 中隐藏某些时间。

我想显示早上 6 点到上午 10 点以及中午 12 点到下午 4 点的日历。

我已经设置了 minTime: '6:00' 和 maxTime: '14:00' 但我还需要隐藏上午 10 点到中午 12 点之间的时间。

Answer 1

问题是，fullcalendar 依赖于 Moment.js 持续时间。据我所知，你不能有多个持续时间的持续时间。

不过fullcalendar好像是先渲染agenda，然后计算agenda布局后events需要在什么位置。因此，如果可以接受 CSS 解决方案，您始终可以执行以下操作:

[data-time^="10"]>td, [data-time^="11"]>td, [data-time^="12"]>td
{
    height: 0 !important;
    border: 0 !important;
}

这通过匹配表格行的“数据时间”属性来实现。匹配模式是前缀匹配，以节省一些输入。如果你不想使用^=来匹配前缀，你可以试试这些:

https://www.w3.org/TR/css3-selectors/#selectors

编辑演示(适用于 Chrome 52)。如您所见，我还需要隐藏受影响单元格的子级 (display: none;)。另请注意，您需要过滤自己的数据以排除或更改落在该范围内的日期时间。我已经包含了一些事件，这些事件表明如果您不采取这种预防措施会发生什么。

$(document).ready(function() {
	$('#calendar').fullCalendar({
		header: {
			left: 'prev,next today',
			center: 'title',
			right: 'agendaDay'
		},
		defaultView: 'agendaDay',
		defaultDate: '2016-06-12',
		editable: true,
		eventLimit: true,
		events: [
			{
				title: 'Meeting',
				start: '2016-06-12T10:30:00',
				end: '2016-06-12T12:30:00'
			},
			{
				title: 'Loooong Meeting',
				start: '2016-06-12T09:30:00',
				end: '2016-06-12T14:30:00'
			},
			{
				title: 'Lunch',
				start: '2016-06-12T12:00:00'
			},
			{
				title: 'Meeting',
				start: '2016-06-12T14:30:00'
			},
			{
				title: 'Happy Hour',
				start: '2016-06-12T17:30:00'
			},
			{
				title: 'Dinner',
				start: '2016-06-12T20:00:00'
			}
		]
	});
})

[data-time^="10"]>td,
[data-time^="11"]>td,
[data-time^="12"]>td
{
  height: 0 !important;
  border: 0 !important;
}

[data-time^="10"]>td *,
[data-time^="11"]>td *,
[data-time^="12"]>td *
{
  display: none !important;
}

<link href="http://fullcalendar.io/js/fullcalendar-2.9.1/fullcalendar.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="http://fullcalendar.io/js/fullcalendar-2.9.1/fullcalendar.min.js"></script>
<div id="calendar"></div>