demos/agenda-views.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: 'resourceDay,month,agendaWeek,agendaDay'
							},
							editable: true,
							resources: [
								{
									id: 1,
									name: 'Joe Bloggs',
									color: 'red',
									textColor: 'black'
								},
								{
									id: 2,
									name: 'Alan Black',
									color: 'blue'
								},
								{
									id: 4,
									name: 'Paul Green',
									color: 'green'
								},
								{
									id: 5,
									name: 'Jane Yellow',
									color: 'yellow',
									textColor: 'black'
								},
								{
									id: 6,
									name: 'Bob Orange',
									color: 'orange'
								}
							],
							events: [
								{
									title: 'All Day Event',
									start: new Date(y, m, 1),
									resourceId: 1
								},
								{
									title: 'Long Event',
									start: new Date(y, m, d-5),
									end: new Date(y, m, d-2),
									resourceId: 1
								},
								{
									id: 999,
									title: 'Repeating Event',
									start: new Date(y, m, d-3, 16, 0),
									allDay: false
								},
								{
									id: 999,
									title: 'Repeating Event',
									start: new Date(y, m, d+4, 16, 0),
									allDay: false,
									resourceId: 1
								},
								{
									title: 'Meeting',
									start: new Date(y, m, d, 10, 30),
									allDay: false,
									resourceId: 3
								},
								{
									title: 'Lunch',
									start: new Date(y, m, d, 12, 0),
									end: new Date(y, m, d, 14, 0),
									allDay: false,
									resourceId: 2
								},
								{
									title: 'Birthday Party',
									start: new Date(y, m, d+1, 19, 0),
									end: new Date(y, m, d+1, 22, 30),
									allDay: false,
									resourceId: 3
								},
								{
									title: 'Click for Google',
									start: new Date(y, m, 28),
									end: new Date(y, m, 29),
									url: 'http://google.com/',
									resourceId: 3
								}
							]
						});
						
					});

					function addRes() {
						var newResource = 	
								{
									id: 3,
									name: 'Robert White',
									color: 'pink'
								};
						resources = $('#calendar').fullCalendar( 'addEventResource', newResource );
					}

					function remRes() {
						resources = $('#calendar').fullCalendar( 'removeEventResource', 3 );
					}
				</script>
				<style type='text/css'>

					body {
						margin-top: 40px;
						text-align: center;
						font-size: 14px;
						font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
						}

					#calendar {
						width: 900px;
						margin: 0 auto;
						}

				</style>
				</head>
				<body>
				<a href="javascript:void(0)" onClick="addRes();">Add resource</a>
				<a href="javascript:void(0)" onClick="remRes();">Remove resource</a>
				<div id='calendar'></div>
				</body>
				</html>