Question

我正在使用jQuery FullCalendar插件，并希望在日视图中隐藏某些小时。

我希望从早上6点到晚上10点以及中午12点到下午4点显示日历。

我已设置minTime: '6:00'和maxTime: '14:00'但我也需要在上午10点到下午12点之间隐藏小时数。

Answer 1

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

然而，似乎fullcalendar首先呈现议程，然后计算议程布局后事件需要的位置。因此，如果CSS解决方案可以接受，您可以始终执行以下操作：

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

这通过匹配表行的“data-time”属性来实现。匹配模式是前缀匹配，以节省一些输入。如果您不想使用^=来匹配前缀，可以尝试以下操作：

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>

FullCalendar - 隐藏日视图中的特定小时

1 个答案: