tests/stacking.html

<!DOCTYPE html>
<html>
<head>
<link href='../build/out/fullcalendar.css' rel='stylesheet' />
<link href='../build/out/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='../build/out/jquery.js'></script>
<script src='../build/out/jquery-ui.js'></script>
<script src='../build/out/fullcalendar.js'></script>
<script>

	$(document).ready(function() {
	
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();
		
		$('#calendar').fullCalendar({
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,basicWeek,agendaDay,basicDay'
			},

			year: 2010,
			month: 10,
			date: 14,

			editable: true,

			//isRTL: true,
			//hiddenDays: [ 3 ],

			/*
			// check to make sure there is no empty space where event should be
			eventRender: function(event) {
				if (event.title == 'event4') {
					return false;
				}
			},
			*/

			/*
			// KNOWN BUG: there shoulnd't be an empty space
			eventRender: function(event) {
				if (event.title == 'timed event 1') {
					return false;
				}
			},
			*/

			events: [
				{
					title: 'event1',
					start: '2010-11-15',
					end: '2010-11-19'
				},
				{
					title: 'event2 with a really long title that wraps',
					start: '2010-11-15'
				},
				{
					title: 'event3',
					start: '2010-11-17'
				},
				{
					title: 'event4',
					start: '2010-11-18',
					end: '2010-11-19'
				},
				{
					title: 'event5',
					start: '2010-11-18'
				},
				{
					title: 'event6 with a long title dude',
					start: '2010-11-25'
				},
				{
					title: 'event7',
					start: '2010-11-26'
				},
				{
					title: 'timed event 1',
					start: '2010-11-16T08:30:00',
					end: '2010-11-16T16:00:00',
					allDay: false
				},
				{
					title: 'timed event 2',
					start: '2010-11-16T09:30:00',
					end: '2010-11-16T11:30:00',
					allDay: false
				},
				{
					title: 'Long Event', // this allday event should be above...
					start: '2010-11-22',
					end: '2010-11-22'
				},
				{
					title: 'Birthday Party', // ...this timed event
					start: '2010-11-22T19:00:00',
					end: '2010-11-22T22:30:00',
					allDay: false
				},
				{
					title: 'An event', // this should be below the allday event
					start: '2010-11-22T00:00:00',
					allDay: false
				}
			]
		});
		
	});

</script>
<style>

	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;
		}

</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>