locked down examples/tests for 1.4, some minor bugfixes

changelog.txt

@@ -1,4 +1,22 @@
 
+version 1.4 (10/19/09)
+	- agendaWeek and agendaDay views !!!
+	- added some options for agenda views:
+		- allDaySlot
+		- allDayText
+		- firstHour
+		- slotMinutes
+		- defaultEventMinutes
+		- axisFormat
+	- modified some existing options/triggers to work with agenda views:
+		- dragOpacity and timeFormat can now accept a "View Hash" (a new concept)
+		- dayClick now has an allDay parameter
+		- eventDrop now has an an allDay parameter
+		  (this will affect those who use revertFunc, adjust parameter list)
+	- added 'prevYear' and 'nextYear' for buttons in header
+	- minor change for theme users, ui-state-hover not applied to active/inactive buttons
+	- added event-color-changing example in docs
+
 version 1.3.2 (10/13/09)
 	- Bugfixes (please upgrade from 1.3.1!)
 		- squashed potential infinite loop when addMonths and addDays

docs/colors-and-theming.txt

@@ -0,0 +1,59 @@
+
+Changing Event Colors
+=====================
+
+You can modify the default color that affects *all* events by adding some
+css in the following form:
+
+.. code-block:: css
+
+	.fc-event,
+	.fc-agenda .fc-event-time,
+	.fc-event a {
+		background-color: black; /* background color */
+		border-color: black;     /* border color (often same as background-color) */
+		color: red;              /* text color */
+		}
+	
+You can also change the color for *certain* events by using the ``className`` property
+of each :ref:`CalEvent Object <CalEvent>`. Here is an example of the CSS you would write
+if your className was ``"holiday"``:
+
+.. code-block:: css
+
+	.holiday,
+	.fc-agenda .holiday .fc-event-time,
+	.holiday a {
+		background-color: green; /* background color */
+		border-color: green;     /* border color (often same as background-color) */
+		color: yellow;           /* text color */
+	    }
+
+If you are using the "default" and "className" techniques together,
+make sure the CSS for the "default" technique *comes first*.
+
+
+Theming
+=======
+
+FullCalendar can be used with jQuery UI themes. Themes provide a more stylized
+look for the calendar and can easily be created using the
+`jQuery UI ThemeRoller <http://jqueryui.com/themeroller/>`_.
+
+In order for themes to work, you must include the theme's CSS file and
+*fullcalendar.css* on the current page. You must also enable the ``theme`` option.
+Here is the full list of theme-related options:
+
+**theme**: Boolean, *Default*: ``false``
+	Enables/disables use of jQuery UI themes
+
+**buttonIcons**: Object
+	Determines which icons appear within header buttons. If a button
+	does not have an entry, it falls back to using ``buttonText``.
+	
+	Here is the default value for ``buttonIcons``::
+	
+		{
+			prev: 'circle-triangle-w',
+			next: 'circle-triangle-e'
+		}

docs/index.txt

@@ -61,10 +61,10 @@ Basic Options
 	Text that will be displayed on buttons of the header. Default::
 	
 		{
-			prev: ' ◄ ', // left triangle
-			next: ' ► ', // right triangle
-			prevYear: 'prev year',
-			nextYear: 'next year',
+			prev: ' ◄ ',      // left triangle
+			next: ' ► ',      // right triangle
+			prevYear: '&nbsp;&lt;&lt;&nbsp;', // <<
+			nextYear: '&nbsp;&gt;&gt;&nbsp;', // >>
 			today: 'today',
 			month: 'month',
 			week: 'week',
@@ -103,7 +103,7 @@ Basic Options
 **allDaySlot**: Boolean, *Default*: ``true``
 	In the agenda views, determines if the "all-day" slot is displayed at the top
 	of the calendar. When hidden with ``false``, all-day events will not be displayed
-	at all.
+	in agenda views.
 	
 **allDayText**: Boolean, *Default*: ``'all-day'``
 	In the agenda views, the text titling the "all-day" slot at the top of the calendar.
@@ -147,7 +147,7 @@ Event Editing
 	The opacity of an event when it is being dragged. Values range
 	from 0.0 to 1.0.
 	
-	Specify a single number to affect all views, or an
+	Specify a single number to affect all views, or a
 	:ref:`ViewHash` to target specific views. Here is the default
 	(a View Hash)::
 	

docs/theming.txt

@@ -1,25 +0,0 @@
-
-Theming
-=======
-
-FullCalendar can be used with jQuery UI themes. Themes provide a more stylized
-look for the calendar and can easily be created using the
-`jQuery UI ThemeRoller <http://jqueryui.com/themeroller/>`_.
-
-In order for themes to work, you must include the theme's CSS file and
-*fullcalendar.css* on the current page. You must also enable the ``theme`` option.
-Here is the full list of theme-related options:
-
-**theme**: Boolean, *Default*: ``false``
-	Enables/disables use of jQuery UI themes
-
-**buttonIcons**: Object
-	Determines which icons appear within header buttons. If a button
-	does not have an entry, it falls back to using ``buttonText``.
-	
-	Here is the default value for ``buttonIcons``::
-	
-		{
-			prev: 'circle-triangle-w',
-			next: 'circle-triangle-e'
-		}

docs/triggered-actions.txt

@@ -23,9 +23,15 @@ always available (:ref:`more below <view-object>`).
 	
 	``this`` is set to the main element.
 
-**dayClick**: function(*dayDate, view*)
-	Triggered when the user clicks on a day. ``dayDate`` is a Date object with
-	it's time set to 00:00:00.
+**dayClick**: function(*dayDate, allDay, jsEvent, view*)
+	Triggered when the user clicks on a day. ``dayDate`` is a Date object holding the
+	current date and time (if in an agenda view) of the clicked area.
+	
+	``allDay`` will be ``true`` when the user clicks on a day in month-view
+	or the "all-day" slot in the agenda views. It will be ``false`` when the user
+	clicks on a slot in the agenda views.
+	
+	``jsEvent`` is the native javascript event (with information about click position, etc).
 	
 	``this`` is set to the TD element of the clicked day.
 
@@ -50,26 +56,30 @@ always available (:ref:`more below <view-object>`).
 	the event's URL.
 
 **eventDragStart**, **eventDragStop**: function(*calEvent, jsEvent, ui, view*)
-	Triggered before/after an event is dragged (but not necessarily moved to a new day).
+	Triggered before/after an event is dragged (but not necessarily moved to a new day/time).
 	``calEvent`` holds that event's information (date, title, etc).
 	``jsEvent`` holds the native javascript event (with information about click position, etc).
 	``ui`` holds the jQuery UI object.
 	
 	``this`` is set to the event's element
 
-**eventDrop**: function(*calEvent, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view*)
-	Triggered when dragging stops and the event has moved to a *different* day.
+**eventDrop**: function(*calEvent, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view*)
+	Triggered when dragging stops and the event has moved to a *different* day/time.
 	
 	``dayDelta`` holds the number of days the event was moved forward (a positive number)
 	or backwards (a negative number).
 	
-	``minuteDelta`` will always be ``0`` and is reserved for a future release
-	of FullCalendar where there will be an agenda view.
+	``minuteDelta`` holds the number of minutes the event was moved forward (a positive number)
+	or backwards (a negative number). Only applies to the agenda views.
 	
 	``dayDelta`` and ``minuteDelta`` are elegant for dealing with multi-day and
 	repeating events. If updating a remote database, just add these values to the
 	start and end times of all events with the given ``calEvent.id``
 	
+	``allDay`` is ``true`` if the event has been dropped on a day in month-view or the
+	"all-day" slot in the agenda views. It will be ``false`` if dropped on a slot
+	in the agenda views.
+	
 	``revertFunc`` is a function that, if called, reverts the event's start/end date to
 	the values *before* the drag. This is useful if an ajax call should fail.
 
@@ -87,8 +97,9 @@ always available (:ref:`more below <view-object>`).
 	``dayDelta`` holds the number of days the event's end time was moved
 	forward (a positive number) or backwards (a negative number).
 	
-	``minuteDelta`` will always be ``0`` and is reserved for a future release
-	of FullCalendar where there will be an agenda view.
+	``minuteDelta`` holds the number of minutes the event's end time was moved
+	forward (a positive number) or backwards (a negative number).
+	Only applies to the agenda views.
 	
 	``revertFunc`` is a function that, if called, reverts the event's start/end date to
 	the values *before* the drag. This is useful if an ajax call should fail.

examples/agenda-views.html

@@ -0,0 +1,114 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html>
+<head>
+<!--<src>-->
+<link rel='stylesheet' type='text/css' href='../src/css/main.css' />
+<link rel='stylesheet' type='text/css' href='../src/css/grid.css' />
+<link rel='stylesheet' type='text/css' href='../src/css/agenda.css' />
+<script type='text/javascript' src='../src/jquery/jquery.js'></script>
+<script type='text/javascript' src='../src/jquery/ui.core.js'></script>
+<script type='text/javascript' src='../src/jquery/ui.draggable.js'></script>
+<script type='text/javascript' src='../src/jquery/ui.resizable.js'></script>
+<script type='text/javascript' src='../src/main.js'></script>
+<script type='text/javascript' src='../src/grid.js'></script>
+<script type='text/javascript' src='../src/agenda.js'></script>
+<script type='text/javascript' src='../src/view.js'></script>
+<script type='text/javascript' src='../src/util.js'></script>
+<!--</src>-->
+<!--
+<dist>
+<link rel='stylesheet' type='text/css' href='../fullcalendar.css' />
+<script type='text/javascript' src='../jquery/jquery.js'></script>
+<script type='text/javascript' src='../jquery/ui.core.js'></script>
+<script type='text/javascript' src='../jquery/ui.draggable.js'></script>
+<script type='text/javascript' src='../jquery/ui.resizable.js'></script>
+<script type='text/javascript' src='../fullcalendar.min.js'></script>
+</dist>
+-->
+<script type='text/javascript'>
+
+	$(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,agendaDay'
+			},
+			editable: true,
+			events: [
+				{
+					title: 'All Day Event',
+					start: new Date(y, m, 1)
+				},
+				{
+					title: 'Long Event',
+					start: new Date(y, m, d-5),
+					end: new Date(y, m, d-2)
+				},
+				{
+					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
+				},
+				{
+					title: 'Meeting',
+					start: new Date(y, m, d, 10, 30),
+					allDay: false
+				},
+				{
+					title: 'Lunch',
+					start: new Date(y, m, d, 12, 0),
+					end: new Date(y, m, d, 14, 0),
+					allDay: false
+				},
+				{
+					title: 'Birthday Party',
+					start: new Date(y, m, d+1, 19, 0),
+					end: new Date(y, m, d+1, 22, 30),
+					allDay: false
+				},
+				{
+					title: 'Click for Google',
+					start: new Date(y, m, 28),
+					end: new Date(y, m, 29),
+					url: 'http://google.com/'
+				}
+			]
+		});
+		
+	});
+
+</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>
+<div id='calendar'></div>
+</body>
+</html>

examples/basic-views.html

@@ -29,56 +29,62 @@
 
 	$(document).ready(function() {
 	
-		var d = new Date();
-		var y = d.getFullYear();
-		var m = d.getMonth();
+		var date = new Date();
+		var d = date.getDate();
+		var m = date.getMonth();
+		var y = date.getFullYear();
 		
 		$('#calendar').fullCalendar({
-			editable: true,
 			header: {
-				left: 'title',
-				center: 'month,agendaWeek,basicWeek,agendaDay,basicDay',
-				right: 'today prev,next'
-			},
-			buttonText: {
-				agendaWeek: 'agendaWeek',
-				basicWeek: 'basicWeek',
-				agendaDay: 'agendaDay',
-				basicDay: 'basicDay'
+				left: 'prev,next today',
+				center: 'title',
+				right: 'month,basicWeek,basicDay'
 			},
+			editable: true,
 			events: [
 				{
-					id: 1,
-					title: "Long Event",
-					start: new Date(y, m, 6, 14, 0),
-					end: new Date(y, m, 11),
+					title: 'All Day Event',
+					start: new Date(y, m, 1)
+				},
+				{
+					title: 'Long Event',
+					start: new Date(y, m, d-5),
+					end: new Date(y, m, d-2)
+				},
+				{
+					id: 999,
+					title: 'Repeating Event',
+					start: new Date(y, m, d-3, 16, 0),
 					allDay: false
 				},
 				{
-					id: 2,
-					title: "Repeating Event",
-					start: new Date(y, m, 2),
-					allDay: true
-				},
-				{
-					id: 2,
-					title: "Repeating Event",
-					start: new Date(y, m, 9),
-					allDay: true
-				},
-				{
-					id: 3,
-					title: "Meeting",
-					start: new Date(y, m, 20, 9, 0),
+					id: 999,
+					title: 'Repeating Event',
+					start: new Date(y, m, d+4, 16, 0),
 					allDay: false
 				},
 				{
-					id: 4,
-					title: "Click for Facebook",
-					start: new Date(y, m, 27, 16),
+					title: 'Meeting',
+					start: new Date(y, m, d, 10, 30),
+					allDay: false
+				},
+				{
+					title: 'Lunch',
+					start: new Date(y, m, d, 12, 0),
+					end: new Date(y, m, d, 14, 0),
+					allDay: false
+				},
+				{
+					title: 'Birthday Party',
+					start: new Date(y, m, d+1, 19, 0),
+					end: new Date(y, m, d+1, 22, 30),
+					allDay: false
+				},
+				{
+					title: 'Click for Google',
+					start: new Date(y, m, 28),
 					end: new Date(y, m, 29),
-					url: "http://facebook.com/",
-					allDay: false
+					url: 'http://google.com/'
 				}
 			]
 		});

examples/default.html

@@ -1,97 +1,109 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html>
-<head>
-<!--<src>-->
-<link rel='stylesheet' type='text/css' href='../src/css/main.css' />
-<link rel='stylesheet' type='text/css' href='../src/css/grid.css' />
-<link rel='stylesheet' type='text/css' href='../src/css/agenda.css' />
-<script type='text/javascript' src='../src/jquery/jquery.js'></script>
-<script type='text/javascript' src='../src/jquery/ui.core.js'></script>
-<script type='text/javascript' src='../src/jquery/ui.draggable.js'></script>
-<script type='text/javascript' src='../src/jquery/ui.resizable.js'></script>
-<script type='text/javascript' src='../src/main.js'></script>
-<script type='text/javascript' src='../src/grid.js'></script>
-<script type='text/javascript' src='../src/agenda.js'></script>
-<script type='text/javascript' src='../src/view.js'></script>
-<script type='text/javascript' src='../src/util.js'></script>
-<!--</src>-->
-<!--
-<dist>
-<link rel='stylesheet' type='text/css' href='../fullcalendar.css' />
-<script type='text/javascript' src='../jquery/jquery.js'></script>
-<script type='text/javascript' src='../jquery/ui.core.js'></script>
-<script type='text/javascript' src='../jquery/ui.draggable.js'></script>
-<script type='text/javascript' src='../jquery/ui.resizable.js'></script>
-<script type='text/javascript' src='../fullcalendar.min.js'></script>
-</dist>
--->
-<script type='text/javascript'>
-
-	$(document).ready(function() {
-	
-		var d = new Date();
-		var y = d.getFullYear();
-		var m = d.getMonth();
-		
-		$('#calendar').fullCalendar({
-			editable: true,
-			events: [
-				{
-					id: 1,
-					title: "Long Event",
-					start: new Date(y, m, 6, 14, 0),
-					end: new Date(y, m, 11),
-					allDay: false
-				},
-				{
-					id: 2,
-					title: "Repeating Event",
-					start: new Date(y, m, 2),
-					allDay: true
-				},
-				{
-					id: 2,
-					title: "Repeating Event",
-					start: new Date(y, m, 9),
-					allDay: true
-				},
-				{
-					id: 3,
-					title: "Meeting",
-					start: new Date(y, m, 20, 9, 0),
-					allDay: false
-				},
-				{
-					id: 4,
-					title: "Click for Facebook",
-					start: new Date(y, m, 27, 16),
-					end: new Date(y, m, 29),
-					url: "http://facebook.com/",
-					allDay: false
-				}
-			]
-		});
-		
-	});
-
-</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>
-<div id='calendar'></div>
-</body>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html>
+<head>
+<!--<src>-->
+<link rel='stylesheet' type='text/css' href='../src/css/main.css' />
+<link rel='stylesheet' type='text/css' href='../src/css/grid.css' />
+<link rel='stylesheet' type='text/css' href='../src/css/agenda.css' />
+<script type='text/javascript' src='../src/jquery/jquery.js'></script>
+<script type='text/javascript' src='../src/jquery/ui.core.js'></script>
+<script type='text/javascript' src='../src/jquery/ui.draggable.js'></script>
+<script type='text/javascript' src='../src/jquery/ui.resizable.js'></script>
+<script type='text/javascript' src='../src/main.js'></script>
+<script type='text/javascript' src='../src/grid.js'></script>
+<script type='text/javascript' src='../src/agenda.js'></script>
+<script type='text/javascript' src='../src/view.js'></script>
+<script type='text/javascript' src='../src/util.js'></script>
+<!--</src>-->
+<!--
+<dist>
+<link rel='stylesheet' type='text/css' href='../fullcalendar.css' />
+<script type='text/javascript' src='../jquery/jquery.js'></script>
+<script type='text/javascript' src='../jquery/ui.core.js'></script>
+<script type='text/javascript' src='../jquery/ui.draggable.js'></script>
+<script type='text/javascript' src='../jquery/ui.resizable.js'></script>
+<script type='text/javascript' src='../fullcalendar.min.js'></script>
+</dist>
+-->
+<script type='text/javascript'>
+
+	$(document).ready(function() {
+	
+		var date = new Date();
+		var d = date.getDate();
+		var m = date.getMonth();
+		var y = date.getFullYear();
+		
+		$('#calendar').fullCalendar({
+			editable: true,
+			events: [
+				{
+					title: 'All Day Event',
+					start: new Date(y, m, 1)
+				},
+				{
+					title: 'Long Event',
+					start: new Date(y, m, d-5),
+					end: new Date(y, m, d-2)
+				},
+				{
+					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
+				},
+				{
+					title: 'Meeting',
+					start: new Date(y, m, d, 10, 30),
+					allDay: false
+				},
+				{
+					title: 'Lunch',
+					start: new Date(y, m, d, 12, 0),
+					end: new Date(y, m, d, 14, 0),
+					allDay: false
+				},
+				{
+					title: 'Birthday Party',
+					start: new Date(y, m, d+1, 19, 0),
+					end: new Date(y, m, d+1, 22, 30),
+					allDay: false
+				},
+				{
+					title: 'Click for Google',
+					start: new Date(y, m, 28),
+					end: new Date(y, m, 29),
+					url: 'http://google.com/'
+				}
+			]
+		});
+		
+	});
+
+</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>
+<div id='calendar'></div>
+</body>
 </html>

examples/gcal.html

@@ -37,8 +37,11 @@
 			},
 			
 			loading: function(bool) {
-				if (bool) $('#loading').show();
-				else $('#loading').hide();
+				if (bool) {
+					$('#loading').show();
+				}else{
+					$('#loading').hide();
+				}
 			}
 			
 		});

examples/theme.html

@@ -30,46 +30,63 @@
 
 	$(document).ready(function() {
 	
-		var d = new Date();
-		var y = d.getFullYear();
-		var m = d.getMonth();
+		var date = new Date();
+		var d = date.getDate();
+		var m = date.getMonth();
+		var y = date.getFullYear();
 		
 		$('#calendar').fullCalendar({
 			theme: true,
+			header: {
+				left: 'prev,next today',
+				center: 'title',
+				right: 'month,agendaWeek,agendaDay'
+			},
 			editable: true,
 			events: [
 				{
-					id: 1,
-					title: "Long Event",
-					start: new Date(y, m, 6, 14, 0),
-					end: new Date(y, m, 11),
+					title: 'All Day Event',
+					start: new Date(y, m, 1)
+				},
+				{
+					title: 'Long Event',
+					start: new Date(y, m, d-5),
+					end: new Date(y, m, d-2)
+				},
+				{
+					id: 999,
+					title: 'Repeating Event',
+					start: new Date(y, m, d-3, 16, 0),
 					allDay: false
 				},
 				{
-					id: 2,
-					title: "Repeating Event",
-					start: new Date(y, m, 2),
-					allDay: true
-				},
-				{
-					id: 2,
-					title: "Repeating Event",
-					start: new Date(y, m, 9),
-					allDay: true
-				},
-				{
-					id: 3,
-					title: "Meeting",
-					start: new Date(y, m, 20, 9, 0),
+					id: 999,
+					title: 'Repeating Event',
+					start: new Date(y, m, d+4, 16, 0),
 					allDay: false
 				},
 				{
-					id: 4,
-					title: "Click for Facebook",
-					start: new Date(y, m, 27, 16),
+					title: 'Meeting',
+					start: new Date(y, m, d, 10, 30),
+					allDay: false
+				},
+				{
+					title: 'Lunch',
+					start: new Date(y, m, d, 12, 0),
+					end: new Date(y, m, d, 14, 0),
+					allDay: false
+				},
+				{
+					title: 'Birthday Party',
+					start: new Date(y, m, d+1, 19, 0),
+					end: new Date(y, m, d+1, 22, 30),
+					allDay: false
+				},
+				{
+					title: 'Click for Google',
+					start: new Date(y, m, 28),
 					end: new Date(y, m, 29),
-					url: "http://facebook.com/",
-					allDay: false
+					url: 'http://google.com/'
 				}
 			]
 		});

src/agenda.js

@@ -63,6 +63,7 @@ function Agenda(element, options, methods) {
 		renderEvents: renderEvents,
 		rerenderEvents: rerenderEvents,
 		updateSize: updateSize,
+		shown: resetScroll,
 		defaultEventEnd: function(event) {
 			var start = cloneDate(event.start);
 			if (event.allDay) {
@@ -115,7 +116,6 @@ function Agenda(element, options, methods) {
 		
 		var d0 = rtl ? addDays(cloneDate(view.visEnd), -1) : cloneDate(view.visStart),
 			d = cloneDate(d0),
-			scrollDate = cloneDate(d0),
 			today = clearTime(new Date());
 		
 		if (!head) { // first time rendering, build from scratch
@@ -219,15 +219,20 @@ function Agenda(element, options, methods) {
 		}
 		
 		updateSize();
-		
-		scrollDate.setHours(options.firstHour);
-		body.scrollTop(timePosition(d0, scrollDate) + 1); // +1 for the border
-		
+		resetScroll();
 		fetchEvents(renderEvents);
 		
 	};
 	
 	
+	function resetScroll() {
+		var d0 = new Date(1970, 0, 1),
+			scrollDate = cloneDate(d0);
+		scrollDate.setHours(options.firstHour);
+		body.scrollTop(timePosition(d0, scrollDate) + 1); // +1 for the border
+	}
+	
+	
 	function updateSize() {
 		
 		bodyTable.width('');

src/css/main.css

@@ -244,10 +244,11 @@ table.fc-header {
 	/* Use the 'className' CalEvent property and the following
 	 * example CSS to change event color on a per-event basis:
 	 *
-	 * .my-event-class,
-	 * .my-event-class a {
-	 *     border-color: black;
+	 * .myclass,
+	 * .fc-agenda .myclass .fc-event-time,
+	 * .myclass a {
 	 *     background-color: black;
+	 *     border-color: black;
 	 *     color: red;
 	 *     }
 	 */

src/main.js

@@ -12,9 +12,9 @@ var defaults = {
 	defaultView: 'month',
 	aspectRatio: 1.35,
 	header: {
-		left: 'prev,next today',
-		center: 'title',
-		right: 'month,agendaWeek,agendaDay'
+		left: 'title',
+		center: '',
+		right: 'today prev,next'
 	},
 	
 	// editing
@@ -54,8 +54,8 @@ var defaults = {
 	buttonText: {
 		prev: ' ◄ ',
 		next: ' ► ',
-		prevYear: 'prev year',
-		nextYear: 'next year',
+		prevYear: ' << ',
+		nextYear: ' >> ',
 		today: 'today',
 		month: 'month',
 		week: 'week',
@@ -74,13 +74,15 @@ var defaults = {
 // right-to-left defaults
 var rtlDefaults = {
 	header: {
-		left: 'agendaDay,agendaWeek,month',
-		center: 'title',
-		right: 'today next,prev'
+		left: 'next,prev today',
+		center: '',
+		right: 'title'
 	},
 	buttonText: {
 		prev: ' ► ',
-		next: ' ◄ '
+		next: ' ◄ ',
+		prevYear: ' >> ',
+		nextYear: ' << '
 	}
 };
 
@@ -180,6 +182,9 @@ $.fn.fullCalendar = function(options) {
 				}
 				if (viewInstances[v]) {
 					(view = viewInstances[v]).element.show();
+					if (view.shown) {
+						view.shown();
+					}
 				}else{
 					view = viewInstances[v] = $.fullCalendar.views[v](
 						$("<div class='fc-view fc-view-" + v + "'/>").appendTo(content),
@@ -569,7 +574,10 @@ $.fn.fullCalendar = function(options) {
 								buttonClick = publicMethods[buttonName];
 							}
 							else if (views[buttonName]) {
-								buttonClick = function() { changeView(buttonName) };
+								buttonClick = function() {
+									button.removeClass(tm + '-state-hover');
+									changeView(buttonName)
+								};
 							}
 							if (buttonClick) {
 								if (prevButton) {
@@ -594,17 +602,24 @@ $.fn.fullCalendar = function(options) {
 											}
 										})
 										.mousedown(function() {
-											button.addClass(tm + '-state-down');
+											button
+												.not('.' + tm + '-state-active')
+												.not('.' + tm + '-state-disabled')
+												.addClass(tm + '-state-down');
 										})
 										.mouseup(function() {
 											button.removeClass(tm + '-state-down');
 										})
 										.hover(
 											function() {
-												button.addClass(tm + '-state-hover');
+												button
+													.not('.' + tm + '-state-active')
+													.not('.' + tm + '-state-disabled')
+													.addClass(tm + '-state-hover');
 											},
 											function() {
-												button.removeClass(tm + '-state-hover')
+												button
+													.removeClass(tm + '-state-hover')
 													.removeClass(tm + '-state-down');
 											}
 										)

tests/default.html

@@ -7,56 +7,62 @@
 
 	$(document).ready(function() {
 	
-		var d = new Date();
-		var y = d.getFullYear();
-		var m = d.getMonth();
+		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'
 			},
 			editable: true,
 			events: [
 				{
-					id: 1,
-					title: "Long Event",
-					start: new Date(y, m, 6, 14, 0),
-					end: new Date(y, m, 11)
-					//allDay: false
+					title: 'All Day Event',
+					start: new Date(y, m, 1)
 				},
 				{
-					id: 2,
-					title: "Repeating Event111",
-					start: new Date(y, m, 8),
-					allDay: true
+					title: 'Long Event',
+					start: new Date(y, m, d-5),
+					end: new Date(y, m, d-2)
 				},
 				{
-					id: 2,
-					title: "Repeating Event222",
-					start: new Date(y, m, 9, 5, 0),
+					id: 999,
+					title: 'Repeating Event',
+					start: new Date(y, m, d-3, 16, 0),
 					allDay: false
 				},
 				{
-					id: 345,
-					title: "Hey Hey",
-					start: new Date(y, m, 9, 4, 0),
-					allDay: false,
-					className: 'adam shaw'
-				},
-				{
-					id: 3,
-					title: "Meeting",
-					start: new Date(y, m, 20, 9, 0),
+					id: 999,
+					title: 'Repeating Event',
+					start: new Date(y, m, d+4, 16, 0),
 					allDay: false
 				},
 				{
-					id: 4,
-					title: "Click for Facebook",
-					start: new Date(y, m, 27, 16),
+					title: 'Meeting',
+					start: new Date(y, m, d, 10, 30),
+					allDay: false
+				},
+				{
+					title: 'Lunch',
+					start: new Date(y, m, d, 12, 5),
+					end: new Date(y, m, d, 14, 43),
+					allDay: false
+				},
+				{
+					title: 'Birthday Party',
+					start: new Date(y, m, d+1, 19, 0),
+					end: new Date(y, m, d+1, 22, 30),
+					allDay: false
+				},
+				{
+					title: 'Click for Google',
+					start: new Date(y, m, 28),
 					end: new Date(y, m, 29),
-					url: "http://facebook.com/",
-					allDay: false
+					url: 'http://google.com/'
 				}
 			]
 		});

tests/gcal.html

@@ -4,13 +4,16 @@
 <script type='text/javascript' src='loader.js'></script>
 <script type='text/javascript'>
 
-	var d = new Date();
-	var y = d.getFullYear();
-	var m = d.getMonth();
+	var date = new Date();
+	var d = date.getDate();
+	var m = date.getMonth();
+	var y = date.getFullYear();
 
 	$(document).ready(function() {
 		$('#calendar').fullCalendar({
 			header: {
+				left: 'prev,next today',
+				center: 'title',
 				right: 'month,agendaWeek,basicWeek,agendaDay,basicDay'
 			},
 			editable: true,
@@ -30,53 +33,48 @@
 				),*/
 				[
 					{
-						id: 1,
-						title: "Long Event",
-						start: new Date(y, m, 6),
-						end: new Date(y, m, 10)
+						title: 'All Day Event',
+						start: new Date(y, m, 1)
 					},
 					{
-						id: 2,
-						title: "Repeating",
-						start: new Date(y, m, 2)
+						title: 'Long Event',
+						start: new Date(y, m, d-5),
+						end: new Date(y, m, d-2)
 					},
 					{
-						id: 2,
-						title: "Repeating",
-						start: new Date(y, m, 9)
-					},
-					{
-						id: 3,
-						title: "Meeting",
-						start: new Date(y, m, 20, 9, 0),
-						end: new Date(y, m, 20, 10, 0),
+						id: 999,
+						title: 'Repeating Event',
+						start: new Date(y, m, d-3, 16, 0),
 						allDay: false
 					},
 					{
-						id: 4,
-						title: "Click for Facebook",
-						start: new Date(y, m, 27),
-						end: new Date(y, m, 28),
-						url: "http://facebook.com/"
-					},
-					{
-						id: 5,
-						title: "timed event1",
-						start: new Date (y, m, 31, 17, 30),
+						id: 999,
+						title: 'Repeating Event',
+						start: new Date(y, m, d+4, 16, 0),
 						allDay: false
 					},
 					{
-						id: 6,
-						title: "timed event1",
-						start: new Date (y, m+1, 2, 14, 15),
+						title: 'Meeting',
+						start: new Date(y, m, d, 10, 30),
 						allDay: false
 					},
 					{
-						id: 7,
-						title: "timed event1",
-						start: new Date (y, m+1, 4, 15, 00),
-						end: new Date(y, m+1, 4, 17, 00),
+						title: 'Lunch',
+						start: new Date(y, m, d, 12, 0),
+						end: new Date(y, m, d, 14, 0),
 						allDay: false
+					},
+					{
+						title: 'Birthday Party',
+						start: new Date(y, m, d+1, 19, 0),
+						end: new Date(y, m, d+1, 22, 30),
+						allDay: false
+					},
+					{
+						title: 'Click for Google',
+						start: new Date(y, m, 28),
+						end: new Date(y, m, 29),
+						url: 'http://google.com/'
 					}
 				]
 			]
@@ -87,9 +85,11 @@
 <style>
 
 	.holiday,
+	.fc-agenda .holiday .fc-event-time,
 	.holiday a {
 		background: green;
 		border-color: green;
+		color: yellow;
 		}
 		
 	.maddog,

tests/locale.html

@@ -4,15 +4,17 @@
 <script type='text/javascript' src='loader.js'></script>
 <script type='text/javascript'>
 
-	var d = new Date();
-	var y = d.getFullYear();
-	var m = d.getMonth();
+	var date = new Date();
+	var d = date.getDate();
+	var m = date.getMonth();
+	var y = date.getFullYear();
 
 	$(document).ready(function() {
 		$('#calendar').fullCalendar({
 		
 			header: {
-				left: 'month,agendaWeek,basicWeek,agendaDay,basicDay'
+				center: 'month,agendaWeek,basicWeek,agendaDay,basicDay',
+				left: 'nextYear,next,prev,prevYear today'
 			},
 			
 			editable: true,
@@ -25,12 +27,10 @@
 			dayNames: ['zondag', 'maandag', 'dinsdag', 'woensdag','donderdag', 'vrijdag', 'zaterdag'],
 			dayNamesShort: ["zo", "ma", "di", "wo", "do", "vr", "za", "zo"],
 			
-			timeFormat: 'H(:mm)t',
+			//timeFormat: 'H(:mm)t',
 			
 			weekMode: 'variable',
 			
-			// TODO: add drag & resize tests
-			
 			dayClick: function(dayDate, view) {
 				console.log('dayClick - ' + dayDate + ' - ' + view.title);
 			},
@@ -51,53 +51,48 @@
 			
 			events: [
 				{
-					id: 1,
-					title: "Long Event",
-					start: new Date(y, m, 6),
-					end: new Date(y, m, 10)
+					title: 'All Day Event',
+					start: new Date(y, m, 1)
 				},
 				{
-					id: 2,
-					title: "Repeating",
-					start: new Date(y, m, 2)
+					title: 'Long Event',
+					start: new Date(y, m, d-5),
+					end: new Date(y, m, d-2)
 				},
 				{
-					id: 2,
-					title: "Repeating",
-					start: new Date(y, m, 9)
-				},
-				{
-					id: 3,
-					title: "Meeting",
-					start: new Date(y, m, 20, 9, 0),
-					end: new Date(y, m, 20, 10, 0),
+					id: 999,
+					title: 'Repeating Event',
+					start: new Date(y, m, d-3, 16, 0),
 					allDay: false
 				},
 				{
-					id: 4,
-					title: "Click for Facebook",
-					start: new Date(y, m, 27),
-					end: new Date(y, m, 28),
-					url: "http://facebook.com/"
-				},
-				{
-					id: 5,
-					title: "timed event1",
-					start: new Date (y, m, 31, 17, 30),
+					id: 999,
+					title: 'Repeating Event',
+					start: new Date(y, m, d+4, 16, 0),
 					allDay: false
 				},
 				{
-					id: 6,
-					title: "timed event1",
-					start: new Date (y, m+1, 2, 14, 15),
+					title: 'Meeting',
+					start: new Date(y, m, d, 10, 30),
 					allDay: false
 				},
 				{
-					id: 7,
-					title: "timed event1",
-					start: new Date (y, m+1, 4, 15, 00),
-					end: new Date(y, m+1, 4, 17, 00),
+					title: 'Lunch',
+					start: new Date(y, m, d, 12, 0),
+					end: new Date(y, m, d, 14, 0),
 					allDay: false
+				},
+				{
+					title: 'Birthday Party',
+					start: new Date(y, m, d+1, 19, 0),
+					end: new Date(y, m, d+1, 22, 30),
+					allDay: false
+				},
+				{
+					title: 'Click for Google',
+					start: new Date(y, m, 28),
+					end: new Date(y, m, 29),
+					url: 'http://google.com/'
 				}
 			]
 		});

tests/methods.html

@@ -4,17 +4,19 @@
 <script type='text/javascript' src='loader.js'></script>
 <script type='text/javascript'>
 
-	var cal;
-	var d = new Date();
-	var y = d.getFullYear();
-	var m = d.getMonth();
+	var cal, staticEvents;
 	
-	var staticEvents;
+	var date = new Date();
+	var d = date.getDate();
+	var m = date.getMonth();
+	var y = date.getFullYear();
 
 	$(document).ready(function() {
 		cal = $('#calendar').fullCalendar({
 			editable: true,
 			header: {
+				left: 'prev,next today',
+				center: 'title',
 				right: 'month,agendaWeek,basicWeek,agendaDay,basicDay'
 			},
 			loading: function(bool) {
@@ -26,60 +28,56 @@
 			},
 			events: staticEvents = [
 				{
-					id: 1,
-					title: "Long Event",
-					start: new Date(y, m, 6),
-					end: new Date(y, m, 10)
+					title: 'All Day Event',
+					start: new Date(y, m, 1)
 				},
 				{
-					id: 2,
-					title: "Repeating",
-					start: new Date(y, m, 2)
+					title: 'Long Event',
+					start: new Date(y, m, d-5),
+					end: new Date(y, m, d-2)
 				},
 				{
-					id: 2,
-					title: "Repeating",
-					start: new Date(y, m, 9)
-				},
-				{
-					id: 3,
-					title: "Meeting",
-					start: new Date(y, m, 20, 9, 0),
-					end: new Date(y, m, 21, 0, 0),
+					id: 999,
+					title: 'Repeating Event',
+					start: new Date(y, m, d-3, 16, 0),
 					allDay: false
 				},
 				{
-					id: 4,
-					title: "Click for Facebook",
-					start: new Date(y, m, 27),
-					end: new Date(y, m, 28),
-					url: "http://facebook.com/"
-				},
-				{
-					id: 5,
-					title: "timed event1",
-					start: new Date (y, m, 31, 17, 30),
+					id: 999,
+					title: 'Repeating Event',
+					start: new Date(y, m, d+4, 16, 0),
 					allDay: false
 				},
 				{
-					id: 6,
-					title: "timed event1",
-					start: new Date (y, m+1, 2, 14, 15),
+					title: 'Meeting',
+					start: new Date(y, m, d, 10, 30),
 					allDay: false
 				},
 				{
-					id: 7,
-					title: "timed event1",
-					start: new Date (y, m+1, 4, 15, 00),
-					end: new Date(y, m+1, 4, 17, 00),
+					id: 777,
+					title: 'Lunch',
+					start: new Date(y, m, d, 12, 0),
+					end: new Date(y, m, d, 14, 0),
 					allDay: false
+				},
+				{
+					title: 'Birthday Party',
+					start: new Date(y, m, d+1, 19, 0),
+					end: new Date(y, m, d+1, 22, 30),
+					allDay: false
+				},
+				{
+					title: 'Click for Google',
+					start: new Date(y, m, 28),
+					end: new Date(y, m, 29),
+					url: 'http://google.com/'
 				}
 			]
 		});
 	});
 	
 	function updateEventStart() {
-		var event = cal.fullCalendar('clientEvents', 3)[0];
+		var event = cal.fullCalendar('clientEvents', 777)[0];
 		event.start = new Date(y, m, 25, 10, 30);
 		event.end = new Date(y, m, 26);
 		//event.allDay = true;
@@ -87,7 +85,7 @@
 	}
 	
 	function updateRepeatingEvent() {
-		var event = cal.fullCalendar('clientEvents', 2)[0];
+		var event = cal.fullCalendar('clientEvents', 999)[0];
 		event.start = new Date(y, m, 4, 13, 30);
 		event.end = new Date(y, m, 5, 2, 0);
 		event.allDay = false;
@@ -136,10 +134,10 @@
 <br />
 
 <button onclick="cal.fullCalendar('removeEvents')">remove all</button>
-<button onclick="cal.fullCalendar('removeEvents', 2)">remove repeating events</button>
+<button onclick="cal.fullCalendar('removeEvents', 999)">remove repeating events</button>
 <button onclick="cal.fullCalendar('removeEvents', function(e){return !e.allDay})">remove timed events</button>
 <button onclick="console.log(cal.fullCalendar('clientEvents'))">log events</button>
-<button onclick="console.log(cal.fullCalendar('clientEvents', '2'))">log repeating events</button>
+<button onclick="console.log(cal.fullCalendar('clientEvents', '999'))">log repeating events</button>
 <button onclick="console.log(cal.fullCalendar('clientEvents', function(e){return e.allDay}))">log all-day events</button>
 <br />
 

tests/options.html

@@ -4,9 +4,10 @@
 <script type='text/javascript' src='loader.js'></script>
 <script type='text/javascript'>
 
-	var d = new Date();
-	var y = d.getFullYear();
-	var m = d.getMonth();
+	var date = new Date();
+	var d = date.getDate();
+	var m = date.getMonth();
+	var y = date.getFullYear();
 
 	$(document).ready(function() {
 		$('#calendar').fullCalendar({
@@ -23,18 +24,26 @@
 			
 			header: {
 				left: 'title',
-				center: 'prev,month,agendaWeek,basicWeek,agendaDay,basicDay,next',
-				right: 'today'
+				center: 'month,agendaWeek,basicWeek,agendaDay,basicDay',
+				right: 'today prevYear,prev,next,nextYear'
 			},
 			
 			editable: true,
 			//disableDragging: true,
 			//disableResizing: true,
 			dragOpacity: .5,
+			//dragOpacity: { agendaWeek: .1 },
 			dragRevertDuration: 100,
 			
 			weekMode: 'variable',
 			
+			//allDaySlot: false,
+			allDayText: 'ALLDAY',
+			firstHour: 10,
+			slotMinutes: 15,
+			defaultEventMinutes: 30,
+			//axisFormat: "Hmm",
+			
 			//allDayDefault: false,
 			
 			/*
@@ -48,56 +57,53 @@
 			},
 			
 			timeFormat: "h(:mm)[T]{ - h(:mm)T}",
+			//timeFormat: { agendaWeek: "'YO'" },
 			
 			events: [
 				{
-					id: 1,
-					title: "Long Event",
-					start: new Date(y, m, 6),
-					end: new Date(y, m, 10)
+					title: 'All Day Event',
+					start: new Date(y, m, 1)
 				},
 				{
-					id: 2,
-					title: "Repeating",
-					start: new Date(y, m, 2)
+					title: 'Long Event',
+					start: new Date(y, m, d-5),
+					end: new Date(y, m, d-2)
 				},
 				{
-					id: 2,
-					title: "Repeating",
-					start: new Date(y, m, 9)
-				},
-				{
-					id: 3,
-					title: "Meeting",
-					start: new Date(y, m, 20, 9, 0),
-					end: new Date(y, m, 20, 10, 0),
+					id: 999,
+					title: 'Repeating Event',
+					start: new Date(y, m, d-3, 16, 0),
 					allDay: false
 				},
 				{
-					id: 4,
-					title: "Click for Facebook",
-					start: new Date(y, m, 27),
-					end: new Date(y, m, 28),
-					url: "http://facebook.com/"
-				},
-				{
-					id: 5,
-					title: "timed event1",
-					start: new Date (y, m, 31, 17, 30),
+					id: 999,
+					title: 'Repeating Event',
+					start: new Date(y, m, d+4, 16, 0),
 					allDay: false
 				},
 				{
-					id: 6,
-					title: "timed event1",
-					start: new Date (y, m+1, 2, 14, 15),
+					title: 'Meeting',
+					start: new Date(y, m, d, 10, 30),
 					allDay: false
 				},
 				{
-					id: 7,
-					title: "timed event1",
-					start: new Date (y, m+1, 4, 15, 00),
-					end: new Date(y, m+1, 4, 17, 00),
+					id: 777,
+					title: 'Lunch',
+					start: new Date(y, m, d, 12, 0),
+					end: new Date(y, m, d, 14, 0),
 					allDay: false
+				},
+				{
+					title: 'Birthday Party',
+					start: new Date(y, m, d+1, 19, 0),
+					end: new Date(y, m, d+1, 22, 30),
+					allDay: false
+				},
+				{
+					title: 'Click for Google',
+					start: new Date(y, m, 28),
+					end: new Date(y, m, 29),
+					url: 'http://google.com/'
 				}
 			]
 		});

tests/sources.html

@@ -5,9 +5,11 @@
 <script type='text/javascript'>
 
 	var cal;
-	var d = new Date();
-	var y = d.getFullYear();
-	var m = d.getMonth();
+
+	var date = new Date();
+	var d = date.getDate();
+	var m = date.getMonth();
+	var y = date.getFullYear();
 	
 	var gcalFeed = $.fullCalendar.gcalFeed("http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic");
 	
@@ -15,57 +17,51 @@
 	
 	var staticEvents = [
 		{
-			id: 1,
-			title: "Long Event",
-			date: new Date(y, m, 6), //!
-			end: new Date(y, m, 10),
-			className: 'red-event'
+			title: 'All Day Event',
+			start: new Date(y, m, 1)
 		},
 		{
-			id: 2,
-			title: "Repeating",
-			start: new Date(y, m, 2)
+			title: 'Long Event',
+			start: new Date(y, m, d-5),
+			end: new Date(y, m, d-2)
 		},
 		{
-			id: 2,
-			title: "Repeating",
-			start: new Date(y, m, 9)
+			id: 999,
+			title: 'Repeating Event',
+			start: new Date(y, m, d-3, 16, 0),
+			allDay: false
 		},
 		{
-			id: 3,
-			title: "Meeting",
-			start: new Date(y, m, 20, 9, 0),
-			end: new Date(y, m, 21, 0, 0),
+			id: 999,
+			title: 'Repeating Event',
+			start: new Date(y, m, d+4, 16, 0),
+			allDay: false
+		},
+		{
+			title: 'Meeting',
+			start: new Date(y, m, d, 10, 30),
+			allDay: false
+		},
+		{
+			id: 777,
+			title: 'Lunch',
+			start: new Date(y, m, d, 12, 0),
+			end: new Date(y, m, d, 14, 0),
 			allDay: false,
 			//className: 'yellow-event black-text-event',
-			className: ['yellow-event', 'black-text-event'],
-			editable: true
+			className: ['yellow-event', 'black-text-event']
 		},
 		{
-			id: 4,
-			title: "Click for Facebook",
-			start: new Date(y, m, 27),
-			end: new Date(y, m, 28),
-			url: "http://facebook.com/"
-		},
-		{
-			id: 5,
-			title: "timed event1",
-			start: new Date (y, m, 31, 17, 30),
+			title: 'Birthday Party',
+			start: new Date(y, m, d+1, 19, 0),
+			end: new Date(y, m, d+1, 22, 30),
 			allDay: false
 		},
 		{
-			id: 6,
-			title: "timed event1",
-			start: new Date (y, m+1, 2, 14, 15),
-			allDay: false
-		},
-		{
-			id: 7,
-			title: "timed event1",
-			start: new Date (y, m+1, 4, 15, 00),
-			end: new Date(y, m+1, 4, 17, 00),
-			allDay: false
+			title: 'Click for Google',
+			start: new Date(y, m, 28),
+			end: new Date(y, m, 29),
+			url: 'http://google.com/'
 		}
 	];
 	
@@ -86,6 +82,8 @@
 		cal = $('#calendar').fullCalendar({
 			editable: true,
 			header: {
+				left: 'prev,next today',
+				center: 'title',
 				right: 'month,agendaWeek,basicWeek,agendaDay,basicDay'
 			},
 			//events: staticEvents,

tests/theming.html

@@ -5,9 +5,10 @@
 <script type='text/javascript' src='loader.js'></script>
 <script type='text/javascript'>
 
-	var d = new Date();
-	var y = d.getFullYear();
-	var m = d.getMonth();
+	var date = new Date();
+	var d = date.getDate();
+	var m = date.getMonth();
+	var y = date.getFullYear();
 
 	$(document).ready(function() {
 		$('#calendar').fullCalendar({
@@ -18,6 +19,8 @@
 			//isRTL: true,
 			
 			header: {
+				left: 'prev,next today',
+				center: 'title',
 				right: 'month,agendaWeek,basicWeek,agendaDay,basicDay'
 			},
 			
@@ -29,53 +32,51 @@
 			
 			events: [
 				{
-					id: 1,
-					title: "Long Event",
-					start: new Date(y, m, 6),
-					end: new Date(y, m, 10)
+					title: 'All Day Event',
+					start: new Date(y, m, 1)
 				},
 				{
-					id: 2,
-					title: "Repeating",
-					start: new Date(y, m, 2)
+					title: 'Long Event',
+					start: new Date(y, m, d-5),
+					end: new Date(y, m, d-2)
 				},
 				{
-					id: 2,
-					title: "Repeating",
-					start: new Date(y, m, 9)
-				},
-				{
-					id: 3,
-					title: "Meeting",
-					start: new Date(y, m, 20, 9, 0),
-					end: new Date(y, m, 20, 10, 0),
+					id: 999,
+					title: 'Repeating Event',
+					start: new Date(y, m, d-3, 16, 0),
 					allDay: false
 				},
 				{
-					id: 4,
-					title: "Click for Facebook",
-					start: new Date(y, m, 27),
-					end: new Date(y, m, 28),
-					url: "http://facebook.com/"
-				},
-				{
-					id: 5,
-					title: "timed event1",
-					start: new Date (y, m, 31, 17, 30),
+					id: 999,
+					title: 'Repeating Event',
+					start: new Date(y, m, d+4, 16, 0),
 					allDay: false
 				},
 				{
-					id: 6,
-					title: "timed event1",
-					start: new Date (y, m+1, 2, 14, 15),
+					title: 'Meeting',
+					start: new Date(y, m, d, 10, 30),
 					allDay: false
 				},
 				{
-					id: 7,
-					title: "timed event1",
-					start: new Date (y, m+1, 4, 15, 00),
-					end: new Date(y, m+1, 4, 17, 00),
+					id: 777,
+					title: 'Lunch',
+					start: new Date(y, m, d, 12, 0),
+					end: new Date(y, m, d, 14, 0),
+					allDay: false,
+					//className: 'yellow-event black-text-event',
+					className: ['yellow-event', 'black-text-event']
+				},
+				{
+					title: 'Birthday Party',
+					start: new Date(y, m, d+1, 19, 0),
+					end: new Date(y, m, d+1, 22, 30),
 					allDay: false
+				},
+				{
+					title: 'Click for Google',
+					start: new Date(y, m, 28),
+					end: new Date(y, m, 29),
+					url: 'http://google.com/'
 				}
 			]
 		});

tests/triggers.html

@@ -4,13 +4,16 @@
 <script type='text/javascript' src='loader.js'></script>
 <script type='text/javascript'>
 
-	var d = new Date();
-	var y = d.getFullYear();
-	var m = d.getMonth();
+	var date = new Date();
+	var d = date.getDate();
+	var m = date.getMonth();
+	var y = date.getFullYear();
 
 	$(document).ready(function() {
 		$('#calendar').fullCalendar({
 			header: {
+				left: 'prev,next today',
+				center: 'title',
 				right: 'month,agendaWeek,basicWeek,agendaDay,basicDay'
 			},
 			editable: true,
@@ -31,17 +34,18 @@
 			
 			dayClick: function(dayDate, allDay, ev, view) {
 				console.log('dayClick - ' + dayDate + ', allDay:' + allDay + ' - ' + view.title);
+				//console.log(ev);
 				//console.log(this);
 			},
 			
 			eventRender: function(event, element, view) {
-				if (event.id == 555) {
+				if (event.id == 888) {
 					return false;
 				}
-				else if (event.id == 666) {
+				else if (event.id == 777) {
 					return $("<div style='background:green'/>").text(event.title);
 				}
-				else if (event.id == 1) {
+				else if (event.id == 999) {
 					element.css('border-color', 'red');
 					//console.log('renderEvent (' + event.title + ') - ' + view.title);
 				}
@@ -77,10 +81,11 @@
 				console.log('DRAG STOP ' + event.title);
 				//console.log(this);
 			},
-			eventDrop: function(event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view) {
+			eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {
 				console.log('DROP ' + event.title);
 				console.log(dayDelta + ' days');
 				console.log(minuteDelta + ' minutes');
+				console.log('allday: ' + allDay);
 				/*setTimeout(function() {
 					revertFunc();
 				}, 2000);*/
@@ -113,64 +118,49 @@
 			
 			events: [
 				{
-					id: 555,
-					title: "Rejected Event",
-					start: new Date(y, m, 5)
+					title: 'All Day Event',
+					start: new Date(y, m, 1)
 				},
 				{
-					id: 666,
-					title: "Homemade Elm Event",
-					start: new Date(y, m, 6)
+					title: 'Long Event',
+					start: new Date(y, m, d-5),
+					end: new Date(y, m, d-2)
 				},
 				{
-					id: 1,
-					title: "Long Event",
-					start: new Date(y, m, 6),
-					end: new Date(y, m, 10)
-				},
-				{
-					id: 2,
-					title: "Repeating",
-					start: new Date(y, m, 2)
-				},
-				{
-					id: 2,
-					title: "Repeating",
-					start: new Date(y, m, 9),
-					end: new Date(y, m, 10)
-				},
-				{
-					id: 3,
-					title: "Meeting",
-					start: new Date(y, m, 20, 9, 0),
-					end: new Date(y, m, 20, 10, 0),
+					id: 999,
+					title: 'Repeating Event',
+					start: new Date(y, m, d-3, 16, 0),
 					allDay: false
 				},
 				{
-					id: 4,
-					title: "Click for Google",
-					start: new Date(y, m, 27),
-					end: new Date(y, m, 28),
-					url: "http://google.com/"
-				},
-				{
-					id: 5,
-					title: "timed event1",
-					start: new Date (y, m, 31, 17, 30),
+					id: 999,
+					title: 'Repeating Event',
+					start: new Date(y, m, d+4, 16, 0),
 					allDay: false
 				},
 				{
-					id: 6,
-					title: "timed event1",
-					start: new Date (y, m+1, 2, 14, 15),
+					id: 888,
+					title: 'Meeting',
+					start: new Date(y, m, d, 10, 30)
+				},
+				{
+					id: 777,
+					title: 'Lunch',
+					start: new Date(y, m, d, 12, 0),
+					end: new Date(y, m, d, 14, 0),
 					allDay: false
 				},
 				{
-					id: 7,
-					title: "timed event1",
-					start: new Date (y, m+1, 4, 15, 00),
-					end: new Date(y, m+1, 4, 17, 00),
+					title: 'Birthday Party',
+					start: new Date(y, m, d+1, 19, 0),
+					end: new Date(y, m, d+1, 22, 30),
 					allDay: false
+				},
+				{
+					title: 'Click for Google',
+					start: new Date(y, m, 28),
+					end: new Date(y, m, 29),
+					url: 'http://google.com/'
 				}
 			]
 		});