FullCalendar Debugging Template

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.3/fullcalendar.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.3/fullcalendar.min.js"></script>
<!--Zoom the browser in and out to see events miss-align on the time grid. 
Steps:
1. zoom to smallest size using browser control + minus keys
2. zoom up once using browser control + plus keys
Observe: 2:30 event shows up closer to 3pm
Observe: 5:00 event shows up closer to 6pm
Expect: events to be aligned with their respective times
-->
<div id='calendar'></div>

CSS

body {
	margin-top: 40px;
	text-align: center;
	font-size: 13px;
	font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}

#calendar {
	width: 900px;
	margin: 0 auto;
}
p {
    font-size: 20pt;
}
}

JavaScript

$('#calendar').fullCalendar({
	header: {
		left: 'prev,next today',
		center: 'title',
    contentHeight: 1000,
		businessHours: [{
  	      dow: [ 1, 2, 3, 4, 5 ], // Monday - Friday
  	      start: '07:00', // 7am
  	      end: '17:00' // 5pm
 		   },
 		   {
     	   dow: [ 6 ], // Saturday
     	   start: '7:00', // 7am
     	   end: '13:00' // 1pm
   		 }
],
    Height: 6,
		right: 'agendaDay'
	},
	editable: true,
    year: 2013,
    month: 7, // August
    date: 11,
    defaultView: 'agendaWeek',
	events: [
		{
			title: 'All Day Event',
			start: '2013-08-11'
		},
		{
			title: 'Long Event',
			start: '2013-08-12',
            end: '2013-08-15'
		},
		{
			id: 999,
			title: 'Repeating Event',
            start: '2013-08-11T02:30:00',
			allDay: false
		},
		{
			id: 999,
			title: 'Repeating Event',
            start: '2013-08-13T05:00:00',
			allDay: false
		},
		{
			title: 'Click for Google',
			start: '2013-08-11',
			url: 'http://google.com/'
		}
	]
});