CODEWITHSUNDEEP
fullcalendar
Jochi
Jochi

Reputation: 51

FullCalendar - hide certain hours in day view

I'm using the jQuery FullCalendar plugin and want to hide certain hours in day view.

I want to show the calendar from 6am to 10am and from 12pm to 4pm.

I already set minTime: '6:00' and maxTime: '14:00' but I also need to hide the hours between 10am to 12pm too.

Upvotes: 3

Views: 3826

Answers (1)

Nate
Nate

Reputation: 1274

The problem is, fullcalendar relies on Moment.js durations. As far as I can tell, you can't have a duration that is multiple durations.

However, it seems that fullcalendar renders the agenda first, then calculates the position of where the events need to be after the agenda is laid out. So, if a CSS solution is acceptable, you could always do the following:

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

This works by matching the table row's "data-time" attribute. The match pattern is a prefix match, to save some typing. If you don't want to use ^= to match the prefix, you can try these:

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

Edit to demonstrate (works on Chrome 52). As you can see, I also needed to make the children of the affected cells hidden (display: none;). Also note that you'll need to filter your own data to exclude or alter dates times that fall in that range. I've included some events that show what happens if you don't take this precaution.

$(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>

Upvotes: 2

Related Questions