1.4, getting there, still need testing+docs

examples/basic.html

@@ -4,12 +4,14 @@
 <!--<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>-->

examples/gcal.html

@@ -4,9 +4,11 @@
 <!--<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/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>
 <script type='text/javascript' src='../src/gcal.js'></script>

examples/json.html

@@ -4,12 +4,14 @@
 <!--<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>-->

examples/theme.html

@@ -5,12 +5,14 @@
 <!--<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>-->
@@ -35,11 +37,6 @@
 		$('#calendar').fullCalendar({
 			theme: true,
 			editable: true,
-			header: {
-				left: 'prev,next today',
-				center: 'title',
-				right: 'month,basicWeek,basicDay'
-			},
 			events: [
 				{
 					id: 1,

examples/views.html

@@ -4,12 +4,14 @@
 <!--<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>-->
@@ -34,9 +36,15 @@
 		$('#calendar').fullCalendar({
 			editable: true,
 			header: {
-				left: 'prev,next today',
+				left: 'title',
-				center: 'title',
+				center: 'month,agendaWeek,basicWeek,agendaDay,basicDay',
-				right: 'month,basicWeek,basicDay'
+				right: 'today prev,next'
+			},
+			buttonText: {
+				agendaWeek: 'agendaWeek',
+				basicWeek: 'basicWeek',
+				agendaDay: 'agendaDay',
+				basicDay: 'basicDay'
 			},
 			events: [
 				{
@@ -85,7 +93,6 @@
 		text-align: center;
 		font-size: 14px;
 		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
-		text-align: left;
 		}
 
 	#calendar {

src/agenda.js

@@ -1,18 +1,14 @@
 
-// todo: scrolling
-// todo: check all other options
-// cleanup CSS
-// optimize moveEvent/resizeEvent, to return revert function
-
-
 /* Agenda Views: agendaWeek/agendaDay
 -----------------------------------------------------------------------------*/
 
 setDefaults({
 	allDayHeader: true,
+	allDayText: 'all-day',
 	slotMinutes: 30,
 	defaultEventMinutes: 120,
-	axisFormat: 'htt',
+	defaultScrollHour: 6,
+	axisFormat: 'h(:mm)tt',
 	timeFormat: {
 		agenda: 'h:mm{ - h:mm}'
 	},
@@ -119,6 +115,7 @@ 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
@@ -143,7 +140,7 @@ function Agenda(element, options, methods) {
 			s+= "<th class='" + tm + "-state-default'>&nbsp;</th></tr>";
 			if (options.allDayHeader) {
 				s+= "<tr class='fc-all-day'>" +
-						"<th class='fc-axis fc-leftmost " + tm + "-state-default'>all day</th>" +
+						"<th class='fc-axis fc-leftmost " + tm + "-state-default'>" + options.allDayText + "</th>" +
 						"<td colspan='" + colCnt + "' class='" + tm + "-state-default'>" +
 							"<div class='fc-day-content'><div>&nbsp;</div></div></td>" +
 						"<th class='" + tm + "-state-default'>&nbsp;</th>" +
@@ -222,6 +219,10 @@ function Agenda(element, options, methods) {
 		}
 		
 		updateSize();
+		
+		scrollDate.setHours(options.defaultScrollHour);
+		body.scrollTop(timePosition(d0, scrollDate) + 1); // +1 for the border
+		
 		fetchEvents(renderEvents);
 		
 	};
@@ -350,18 +351,19 @@ function Agenda(element, options, methods) {
 				levelHeight,
 				j, seg,
 				event,
-				eventClasses,
+				className,
 				leftDay, leftRounded,
 				rightDay, rightRounded,
 				left, right,
-				eventElement, anchorElement;
+				eventElement, anchorElement,
+				triggerRes;
 			for (i=0; i<len; i++) {
 				level = segRow[i];
 				levelHeight = 0;
 				for (j=0; j<level.length; j++) {
 					seg = level[j];
 					event = seg.event;
-					eventClasses = ['fc-event', 'fc-event-hori'];
+					className = 'fc-event fc-event-hori ';
 					if (rtl) {
 						leftDay = seg.end.getDay() - 1;
 						leftRounded = seg.isEnd;
@@ -374,22 +376,31 @@ function Agenda(element, options, methods) {
 						rightRounded = seg.isEnd;
 					}
 					if (leftRounded) {
-						eventClasses.push('fc-corner-left');
+						className += 'fc-corner-left ';
 						left = bg.find('td:eq('+(((leftDay-firstDay+colCnt)%colCnt)*dis+dit)+') div div').position().left + timeWidth;
 					}else{
 						left = timeWidth;
 					}
 					if (rightRounded) {
-						eventClasses.push('fc-corner-right');
+						className += 'fc-corner-right ';
 						right = bg.find('td:eq('+(((rightDay-firstDay+colCnt)%colCnt)*dis+dit)+') div div');
 						right = right.position().left + right.width() + timeWidth;
 					}else{
 						right = timeWidth + bg.width();
 					}
-					eventElement = $("<div class='" + eventClasses.join(' ') + "'/>")
+					eventElement = $("<div class='" + className + event.className.join(' ') + "'/>")
 						.append(anchorElement = $("<a/>")
 							.append($("<span class='fc-event-title' />")
-								.text(event.title)))
+								.text(event.title)));
+					if (event.url) {
+						anchorElement.attr('href', event.url);
+					}
+					triggerRes = view.trigger('eventRender', event, event, eventElement);
+					if (triggerRes !== false) {
+						if (triggerRes && typeof triggerRes != 'boolean') {
+							eventElement = $(triggerRes);
+						}
+						eventElement
 							.css({
 								position: 'absolute',
 								top: top,
@@ -398,13 +409,17 @@ function Agenda(element, options, methods) {
 							})
 							.appendTo(head);
 						setOuterWidth(eventElement, right-left, true);
+						view.eventElementHandlers(event, eventElement);
+						if (event.editable || event.editable == undefined && options.editable) {
+							draggableDayEvent(event, eventElement, seg.isStart);
 							if (seg.isEnd) {
 								view.resizableDayEvent(event, eventElement, colWidth);
 							}
-					draggableDayEvent(event, eventElement, seg.isStart);
+						}
 						view.reportEventElement(event, eventElement);
 						levelHeight = Math.max(levelHeight, eventElement.outerHeight(true));
 					}
+				}
 				top += levelHeight;
 				rowHeight += levelHeight;
 			}
@@ -426,7 +441,9 @@ function Agenda(element, options, methods) {
 			top, bottom,
 			tdInner,
 			width, left,
-			eventElement, anchorElement, timeElement, titleElement;
+			className,
+			eventElement, anchorElement, timeElement, titleElement,
+			triggerRes;
 		for (colI=0; colI<colLen; colI++) {
 			col = segCols[colI];
 			for (levelI=0; levelI<col.length; levelI++) {
@@ -454,22 +471,18 @@ function Agenda(element, options, methods) {
 					left = timeWidth + tdInner.position().left +       // leftmost possible
 						(availWidth / (levelI + forward + 1) * levelI) // indentation
 						* dis + (rtl ? availWidth - width : 0);        // rtl
-					eventElement = $("<div class='fc-event fc-event-vert' />")
+					className = 'fc-event fc-event-vert ';
+					if (seg.isStart) {
+						className += 'fc-corner-top ';
+					}
+					if (seg.isEnd) {
+						className += 'fc-corner-bottom ';
+					}
+					eventElement = $("<div class='" + className + event.className.join(' ') + "' />")
 						.append(anchorElement = $("<a><span class='fc-event-bg'/></a>")
 							.append(titleElement = $("<span class='fc-event-title'/>")
 								.text(event.title)))
-						.css({
-							position: 'absolute',
-							zIndex: 8,
-							top: top,
-							left: left
-						})
-						.appendTo(bodyContent);
-					if (event.url) {
-						anchorElement.attr('href', event.url);
-					}
 					if (seg.isStart) {
-						eventElement.addClass('fc-corner-top');
 						// add the time header
 						anchorElement
 							.prepend(timeElement = $("<span class='fc-event-time'/>")
@@ -477,10 +490,22 @@ function Agenda(element, options, methods) {
 					}else{
 						timeElement = null;
 					}
-					if (seg.isEnd) {
+					if (event.url) {
-						eventElement.addClass('fc-corner-bottom');
+						anchorElement.attr('href', event.url);
-						resizableSlotEvent(event, eventElement, timeElement);
 					}
+					triggerRes = view.trigger('eventRender', event, event, eventElement);
+					if (triggerRes !== false) {
+						if (triggerRes && typeof triggerRes != 'boolean') {
+							eventElement = $(triggerRes);
+						}
+						eventElement
+							.css({
+								position: 'absolute',
+								zIndex: 8,
+								top: top,
+								left: left
+							})
+							.appendTo(bodyContent);
 						setOuterWidth(eventElement, width, true);
 						setOuterHeight(eventElement, bottom-top, true);
 						if (timeElement && eventElement.height() - titleElement.position().top < 10) {
@@ -488,7 +513,14 @@ function Agenda(element, options, methods) {
 							timeElement.text(formatDate(event.start, view.option('timeFormat')) + ' - ' + event.title);
 							titleElement.remove();
 						}
+						view.eventElementHandlers(event, eventElement);
+						if (event.editable || event.editable == undefined && options.editable) {
 							draggableSlotEvent(event, eventElement, timeElement);
+							if (seg.isEnd) {
+								resizableSlotEvent(event, eventElement, timeElement);
+							}
+						}
+					}
 					view.reportEventElement(event, eventElement);
 				}
 			}
@@ -506,14 +538,18 @@ function Agenda(element, options, methods) {
 	// when event starts out FULL-DAY
 	
 	function draggableDayEvent(event, eventElement, isStart) {
+		if (!options.disableDragging && eventElement.draggable) {
 			var origPosition, origWidth,
 				resetElement,
 				allDay=true,
 				matrix;
 			eventElement.draggable({
 				zIndex: 9,
-			opacity: view.option('month'), // use whatever the month view was using
+				opacity: view.option('dragOpacity', 'month'), // use whatever the month view was using
-			start: function(ev) {
+				revertDuration: options.dragRevertDuration,
+				start: function(ev, ui) {
+					view.hideEvents(event, eventElement);
+					view.trigger('eventDragStart', eventElement, event, ev, ui);
 					origPosition = eventElement.position();
 					origWidth = eventElement.width();
 					resetElement = function() {
@@ -549,7 +585,6 @@ function Agenda(element, options, methods) {
 							view.hideOverlay();
 						}
 					});
-				view.hideEvents(event, eventElement);
 					matrix.row(head.find('td'));
 					bg.find('td').each(function() {
 						matrix.col(this);
@@ -562,6 +597,7 @@ function Agenda(element, options, methods) {
 				},
 				stop: function(ev, ui) {
 					view.hideOverlay();
+					view.trigger('eventDragStop', eventElement, event, ev, ui);
 					var cell = matrix.cell,
 						dayDelta = dis * (
 							allDay ? // can't trust cell.colDelta when using slot grid
@@ -573,6 +609,7 @@ function Agenda(element, options, methods) {
 						resetElement();
 						view.showEvents(event, eventElement);
 					}else{
+						//eventElement.find('a').removeAttr('href'); // prevents safari from visiting the link
 						view.eventDrop(
 							this, event, dayDelta,
 							allDay ? 0 : // minute delta
@@ -585,12 +622,14 @@ function Agenda(element, options, methods) {
 				}
 			});
 		}
+	}
 	
 	
 	
 	// when event starts out IN TIMESLOTS
 	
 	function draggableSlotEvent(event, eventElement, timeElement) {
+		if (!options.disableDragging && eventElement.draggable) {
 			var origPosition,
 				resetElement,
 				prevSlotDelta, slotDelta,
@@ -602,7 +641,10 @@ function Agenda(element, options, methods) {
 				grid: [colWidth, rowHeight],
 				axis: colCnt==1 ? 'y' : false,
 				opacity: view.option('dragOpacity'),
+				revertDuration: options.dragRevertDuration,
 				start: function(ev, ui) {
+					view.hideEvents(event, eventElement);
+					view.trigger('eventDragStart', eventElement, event, ev, ui);
 					if ($.browser.msie) {
 						eventElement.find('span.fc-event-bg').hide(); // nested opacities mess up in IE, just hide
 					}
@@ -647,7 +689,6 @@ function Agenda(element, options, methods) {
 					});
 					matrix.row(body);
 					matrix.mouse(ev.pageX, ev.pageY);
-				view.hideEvents(event, eventElement);
 				},
 				drag: function(ev, ui) {
 					slotDelta = Math.round((ui.position.top - origPosition.top) / rowHeight);
@@ -668,6 +709,7 @@ function Agenda(element, options, methods) {
 				},
 				stop: function(ev, ui) {
 					view.hideOverlay();
+					view.trigger('eventDragStop', eventElement, event, ev, ui);
 					var cell = matrix.cell,
 						dayDelta = dis * (
 							allDay ? // can't trust cell.colDelta when using slot grid
@@ -684,6 +726,7 @@ function Agenda(element, options, methods) {
 						eventElement.css(origPosition); // sometimes fast drags make event revert to wrong position
 						view.showEvents(event, eventElement);
 					}else{
+						//TODO: eventElement.find('a').removeAttr('href'); // prevents safari from visiting the link
 						view.eventDrop(
 							this, event, dayDelta,
 							allDay ? 0 : slotDelta * options.slotMinutes, // minute delta
@@ -692,7 +735,7 @@ function Agenda(element, options, methods) {
 					}
 				}
 			});
-		
+		}
 	}
 	
 	
@@ -704,18 +747,20 @@ function Agenda(element, options, methods) {
 	// for TIMESLOT events
 
 	function resizableSlotEvent(event, eventElement, timeElement) {
+		if (!options.disableResizing && eventElement.resizable) {
 			var slotDelta, prevSlotDelta;
 			eventElement
 				.resizable({
 					handles: 's',
 					grid: rowHeight,
-				start: function() {
+					start: function(ev, ui) {
 						slotDelta = prevSlotDelta = 0;
 						view.hideEvents(event, eventElement);
 						if ($.browser.msie && $.browser.version == '6.0') {
 							eventElement.css('overflow', 'hidden');
 						}
 						eventElement.css('z-index', 9);
+						view.trigger('eventResizeStart', this, event, ev, ui);
 					},
 					resize: function(ev, ui) {
 						// don't rely on ui.size.height, doesn't take grid into account
@@ -735,6 +780,7 @@ function Agenda(element, options, methods) {
 						}
 					},
 					stop: function(ev, ui) {
+						view.trigger('eventResizeStop', this, event, ev, ui);
 						if (slotDelta) {
 							view.eventResize(this, event, 0, options.slotMinutes*slotDelta, ev, ui);
 						}else{
@@ -746,6 +792,7 @@ function Agenda(element, options, methods) {
 				})
 				.find('div.ui-resizable-s').text('=');
 		}
+	}
 	
 	
 	// ALL-DAY event resizing w/ 'view' methods...

src/css/agenda.css

@@ -1,33 +1,14 @@
 
-/*.fc-event,
+/* Agenda Week View, Agenda Day View
-.fc-event a,
+------------------------------------------------------------------------*/
-.fc-agenda .fc-event-time {
-	color: #fff;
-	border-style: solid;
-	border-color: blue;
-	background-color: blue;
-	}*/
-
-
-.fc .fc-axis {
-	width: 50px;
-	padding: 0 4px 0 0;
-	vertical-align: middle;
-	white-space: nowrap;
-	text-align: right;
-	font-weight: normal;
-	}
-	
-	
-	
 
 .fc .fc-agenda th,
 .fc .fc-agenda td {
 	border-width: 1px 0 0 1px;
 	}
 	
-.fc-agenda-head tr.fc-all-day th {
+.fc .fc-agenda .fc-leftmost {
-	height: 35px;
+	border-left: 0;
 	}
 	
 .fc-agenda tr.fc-first th,
@@ -35,125 +16,53 @@
 	border-top: 0;
 	}
 	
-.fc .fc-agenda .fc-leftmost {
+.fc-agenda-head tr.fc-last th {
-	border-left: 0;
+	border-bottom-width: 1px;
 	}
 	
-	
-	
-
 .fc .fc-agenda-head td,
 .fc .fc-agenda-body td {
 	background: none;
 	}
 	
-.fc .fc-agenda-body td div {
+.fc-agenda-head th {
-	height: 20px;
+	text-align: center;
 	}
 	
+/* the time axis running down the left side */
 	
-
+.fc-agenda .fc-axis {
-	
+	width: 50px;
-.fc .fc-agenda-body tr.fc-minor th,
+	padding: 0 4px;
-.fc .fc-agenda-body tr.fc-minor td {
+	vertical-align: middle;
-	border-top-style: dotted;
+	white-space: nowrap;
+	text-align: right;
+	font-weight: normal;
 	}
 	
+/* all-day event cells at top */
 	
+.fc-agenda-head tr.fc-all-day th {
+	height: 35px;
+	}
+	
+.fc-agenda-head td {
+	padding-bottom: 10px;
+	}
 	
 .fc .fc-divider div {
 	font-size: 1px; /* for IE6/7 */
 	height: 2px;
 	}
 	
-	
-	
 .fc .fc-divider .fc-state-default {
-	background: #eee;
+	background: #eee; /* color for divider between all-day and time-slot events */
 	}
 
+/* body styles */
 	
-	
+.fc .fc-agenda-body td div {
-.fc-agenda-head tr.fc-last th {
+	height: 20px; /* slot height */
-	border-bottom-width: 1px;
-	}
-	
-	
-	
-	
-.fc-agenda .fc-day-content {
-	padding: 2px 2px 0;
-	}
-	
-.fc-agenda-head .fc-day-content {
-	padding-bottom: 10px;
-	}
-
-	
-	
-	
-	
-/* header styles */
-/*	
-.fc .fc-agenda-head th.fc-first {
-	border-left: 0;
-	}
-	
-.fc .fc-agenda-head th,
-.fc .fc-agenda-head td {
-	border-width: 1px 0 0 1px;
-	}
-
-.fc-agenda-head tr.fc-first th {
-	border-width: 0 0 0 1px;
-	}
-	
-.fc-agenda-head tr.fc-last th,
-.fc-agenda-head tr.fc-last td {
-	border-bottom-width: 2px;
-	}
-	
-.fc-agenda-head tr.fc-last th {
-	#border-width: 1px 0 1px 1px;
-	background-image: none;
-	}
-	
-.fc-agenda-head tr.fc-last th.fc-first {
-	#border-width: 0 2px 1px 0;
-	}
-	
-.fc-agenda-head tr.fc-last th.fc-last {
-	#border-width: 0 0 0 3px;
-	}
-	
-.fc .fc-agenda-head td {
-	#border-width: 3px 0 3px 1px;
-	background: none;
-	}
-	
-.fc-agenda-body {
-	#width: 100%;
-	overflow: auto;
-	}
-*/
-	
-	
-
-/*
-.fc .fc-agenda-body th {
-	border-width: 1px 0 0 0;
-	background-image: none;
-	text-align: right;
-	font-weight: normal;
-	vertical-align: middle;
-	width: 48px;
-	height: 22px;
-	padding-right: 2px;
-	}
-	
-.fc .fc-agenda-body td {
-	border-width: 1px 0 0 1px;
-	background: none;
 	}
 	
 .fc .fc-agenda-body tr.fc-minor th,
@@ -161,34 +70,14 @@
 	border-top-style: dotted;
 	}
 	
-.fc .fc-agenda-body tr.fc-first th,
-.fc .fc-agenda-body tr.fc-first td {
-	border-top: 0;
-	}
-	
-	
-	
-.fc .fc-agenda-bg td {
-	border-style: double;
-	border-width: 0 0 0 3px;
-	}
-	
-.fc .fc-agenda-bg td.fc-not-today {
-	background: none;
-	}
-	
-	
-	
 .fc-agenda .fc-day-content {
-	padding: 2px 1px 14px;
+	padding: 2px 2px 0; /* distance between events and day edges */
 	}
-*/
 	
 
 
-	
+/* Vertical Events
-	
+------------------------------------------------------------------------*/
-/* vertical events */
 
 .fc-event-vert {
 	border-width: 0 1px;
@@ -198,6 +87,8 @@
 	border-width: 0;
 	}
 	
+/* for fake rounded corners */
+	
 .fc-content .fc-corner-top {
 	margin-top: 1px;
 	}
@@ -216,6 +107,8 @@
 	border-bottom-width: 1px;
 	}
 	
+/* event content */
+	
 .fc-event-vert span {
 	display: block;
 	position: relative;
@@ -226,15 +119,15 @@
 	white-space: nowrap;
 	_white-space: normal;
 	overflow: hidden;
-	font-size: 10px;
 	border: 0;
+	font-size: 10px;
 	}
 	
 .fc-event-vert span.fc-event-title {
 	line-height: 13px;
 	}
 	
-.fc-event-vert span.fc-event-bg {
+.fc-event-vert span.fc-event-bg { /* makes the event lighter w/ a semi-transparent overlay  */
 	position: absolute;
 	z-index: 1;
 	top: 0;
@@ -243,14 +136,20 @@
 	height: 100%;
 	background: #fff;
 	opacity: .3;
-	filter: alpha(opacity=30);
+	filter: alpha(opacity=30); /* for IE */
 	}
 	
+/* resizable */
+	
 .fc-event-vert .ui-resizable-s {
+	bottom: 0        !important; /* importants override pre jquery ui 1.7 styles */
+	width: 100%      !important;
+	height: 8px      !important;
+	line-height: 8px !important;
+	font-size: 11px  !important;
 	font-family: monospace;
-	height: 8px;
-	font-size: 11px;
-	line-height: 8px;
-	bottom: 0;
 	text-align: center;
+	cursor: s-resize;
 	}
+	
+	

src/css/main.css

@@ -281,7 +281,7 @@ table.fc-header {
 	display: block;
 	position: absolute;
 	z-index: 99999;
-	border: 0; /* important overrides pre jquery ui 1.7 styles */
+	border: 0 !important; /* important overrides pre jquery ui 1.7 styles */
 	background: url(data:image/gif;base64,AAAA) !important; /* hover fix for IE */
 	}
 	

src/grid.js

@@ -241,7 +241,7 @@ function Grid(element, options, methods) {
 		
 		}
 		
-		updateSize();
+		updateSize(); // BUG: quirky widths with weekMode:variable
 		fetchEvents(renderEvents);
 	
 	};
@@ -349,7 +349,7 @@ function Grid(element, options, methods) {
 			levelHeight,
 			k, seg,
 			event,
-			eventClasses,
+			className,
 			startElm, endElm,
 			left, right,
 			eventElement, eventAnchor,
@@ -376,17 +376,7 @@ function Grid(element, options, methods) {
 				for (k=0; k<segs.length; k++) {
 					seg = segs[k];
 					event = seg.event;
-					eventClasses = event.className;
+					className = 'fc-event fc-event-hori ';
-					if (typeof eventClasses == 'object') { // an array
-						eventClasses = eventClasses.slice(0);
-					}
-					else if (typeof eventClasses == 'string') {
-						eventClasses = eventClasses.split(' ');
-					}
-					else {
-						eventClasses = [];
-					}
-					eventClasses.push('fc-event', 'fc-event-hori');
 					startElm = seg.isStart ?
 						tr.find('td:eq('+((seg.start.getDay()-firstDay+colCnt)%colCnt)+') div div') :
 						tbody;
@@ -397,22 +387,22 @@ function Grid(element, options, methods) {
 						left = endElm.position().left;
 						right = startElm.position().left + startElm.width();
 						if (seg.isStart) {
-							eventClasses.push('fc-corner-right');
+							className += 'fc-corner-right ';
 						}
 						if (seg.isEnd) {
-							eventClasses.push('fc-corner-left');
+							className += 'fc-corner-left ';
 						}
 					}else{
 						left = startElm.position().left;
 						right = endElm.position().left + endElm.width();
 						if (seg.isStart) {
-							eventClasses.push('fc-corner-left');
+							className += 'fc-corner-left ';
 						}
 						if (seg.isEnd) {
-							eventClasses.push('fc-corner-right');
+							className += 'fc-corner-right ';
 						}
 					}
-					eventElement = $("<div class='" + eventClasses.join(' ') + "'/>")
+					eventElement = $("<div class='" + className + event.className.join(' ') + "'/>")
 						.append(eventAnchor = $("<a/>")
 							.append(event.allDay || !seg.isStart ? null :
 								$("<span class='fc-event-time'/>")
@@ -443,7 +433,7 @@ function Grid(element, options, methods) {
 								eventElement.css('left', left + rtlLeftDiff);
 							}
 						}
-						eventElementHandlers(event, eventElement);
+						view.eventElementHandlers(event, eventElement);
 						if (event.editable || event.editable == undefined && options.editable) {
 							draggableEvent(event, eventElement);
 							if (seg.isEnd) {
@@ -461,23 +451,6 @@ function Grid(element, options, methods) {
 		}
 	}
 	
-	function eventElementHandlers(event, eventElement) {
-		eventElement
-			.click(function(ev) {
-				if (!eventElement.hasClass('ui-draggable-dragging')) {
-					return view.trigger('eventClick', this, event, ev);
-				}
-			})
-			.hover(
-				function(ev) {
-					view.trigger('eventMouseover', this, event, ev);
-				},
-				function(ev) {
-					view.trigger('eventMouseout', this, event, ev);
-				}
-			);
-	}
-	
 	
 	
 	/* Event Dragging
@@ -493,6 +466,8 @@ function Grid(element, options, methods) {
 				opacity: view.option('dragOpacity'),
 				revertDuration: options.dragRevertDuration,
 				start: function(ev, ui) {
+					view.hideEvents(event, eventElement);
+					view.trigger('eventDragStart', eventElement, event, ev, ui);
 					matrix = new HoverMatrix(function(cell) {
 						eventElement.draggable('option', 'revert', !cell || !cell.rowDelta && !cell.colDelta);
 						if (cell) {
@@ -511,8 +486,6 @@ function Grid(element, options, methods) {
 					tds.each(function() {
 						matrix.col(this);
 					});
-					view.hideEvents(event, eventElement);
-					view.trigger('eventDragStart', eventElement, event, ev, ui);
 					matrix.mouse(ev.pageX, ev.pageY);
 				},
 				drag: function(ev) {

src/main.js

@@ -12,9 +12,9 @@ var defaults = {
 	defaultView: 'month',
 	aspectRatio: 1.35,
 	header: {
-		left: 'title',
+		left: 'prev,next today',
-		center: '',
+		center: 'title',
-		right: 'today prev,next'
+		right: 'month,agendaWeek,agendaDay'
 	},
 	
 	// editing
@@ -72,9 +72,9 @@ var defaults = {
 // right-to-left defaults
 var rtlDefaults = {
 	header: {
-		left: 'next,prev today',
+		left: 'agendaDay,agendaWeek,month',
-		center: '',
+		center: 'title',
-		right: 'title'
+		right: 'today next,prev'
 	},
 	buttonText: {
 		prev: ' ► ',
@@ -542,8 +542,7 @@ $.fn.fullCalendar = function(options) {
 					}
 					var prevButton;
 					$.each(this.split(','), function(j) {
-						var buttonName = this,
+						var buttonName = this;
-							buttonNameShort = this.replace(/^(basic|agenda)/, '').toLowerCase();
 						if (buttonName == 'title') {
 							tr.append("<td><h2 class='fc-header-title'/></td>");
 							if (prevButton) {
@@ -552,8 +551,8 @@ $.fn.fullCalendar = function(options) {
 							prevButton = null;
 						}else{
 							var buttonClick;
-							if (publicMethods[buttonNameShort]) {
+							if (publicMethods[buttonName]) {
-								buttonClick = publicMethods[buttonNameShort];
+								buttonClick = publicMethods[buttonName];
 							}
 							else if (views[buttonName]) {
 								buttonClick = function() { changeView(buttonName) };
@@ -563,8 +562,8 @@ $.fn.fullCalendar = function(options) {
 									prevButton.addClass(tm + '-no-right');
 								}
 								var button,
-									icon = options.theme ? options.buttonIcons[buttonNameShort] : null,
+									icon = options.theme ? viewOption(options, 'buttonIcons', buttonName) : null,
-									text = options.buttonText[buttonNameShort];
+									text = viewOption(options, 'buttonText', buttonName);
 								if (icon) {
 									button = $("<div class='fc-button-" + buttonName + " ui-state-default'>" +
 										"<a><span class='ui-icon ui-icon-" + icon + "'/></a></div>");
@@ -575,6 +574,7 @@ $.fn.fullCalendar = function(options) {
 								}
 								if (button) {
 									button
+										.click(buttonClick)
 										.mousedown(function() {
 											button.addClass(tm + '-state-down');
 										})
@@ -591,14 +591,6 @@ $.fn.fullCalendar = function(options) {
 											}
 										)
 										.appendTo($("<td/>").appendTo(tr));
-									if (publicMethods[buttonNameShort]) {
-										button.click(publicMethods[buttonNameShort]);
-									}
-									else if (views[buttonName]) {
-										button.click(function() {
-											changeView(buttonName);
-										});
-									}
 									if (prevButton) {
 										prevButton.addClass(tm + '-no-right');
 									}else{
@@ -685,6 +677,29 @@ $.fn.fullCalendar = function(options) {
 
 
 
+// TODO: rename
+
+function viewOption(options, property, viewName) {
+	var v = options[property];
+	if (typeof v == 'object') {
+		if (v[viewName] != undefined) {
+			return v[viewName];
+		}
+		var parts = viewName.split(/(?=[A-Z])/),
+			i=parts.length-1, res;
+		for (; i>=0; i--) {
+			res = v[parts[i].toLowerCase()];
+			if (res != undefined) {
+				return res;
+			}
+		}
+		return v[''];
+	}
+	return v;
+}
+
+
+
 /* Important Event Utilities
 -----------------------------------------------------------------------------*/
 
@@ -707,5 +722,12 @@ function normalizeEvent(event, options) {
 	if (event.allDay == undefined) {
 		event.allDay = options.allDayDefault;
 	}
+	if (event.className) {
+		if (typeof event.className == 'string') {
+			event.className = event.className.split(/\s+/);
+		}
+	}else{
+		event.className = [];
+	}
 }
 

src/view.js

@@ -212,7 +212,8 @@ var viewMethods = {
 				handles: view.options.isRTL ? 'w' : 'e',
 				grid: colWidth,
 				minWidth: colWidth/2, // need this or else IE throws errors when too small
-				containment: view.element,
+				containment: view.element.parent().parent(), // the main element...
+				             // ... a fix. wouldn't allow extending to last column in agenda views (jq ui bug?)
 				start: function(ev, ui) {
 					eventElement.css('z-index', 9);
 					view.hideEvents(event, eventElement);
@@ -235,22 +236,33 @@ var viewMethods = {
 	
 	
 	
+	// attaches eventClick, eventMouseover, eventMouseout
+	
+	eventElementHandlers: function(event, eventElement) {
+		var view = this;
+		eventElement
+			.click(function(ev) {
+				if (!eventElement.hasClass('ui-draggable-dragging') &&
+					!eventElement.hasClass('ui-resizable-resizing')) {
+						return view.trigger('eventClick', this, event, ev);
+					}
+			})
+			.hover(
+				function(ev) {
+					view.trigger('eventMouseover', this, event, ev);
+				},
+				function(ev) {
+					view.trigger('eventMouseout', this, event, ev);
+				}
+			);
+	},
+	
+	
+	
 	// get a property from the 'options' object, using smart view naming
 	
-	option: function(name) {
+	option: function(name, viewName) {
-		var v = this.options[name];
+		return viewOption(this.options, name, this.name || viewName);
-		if (typeof v == 'object') {
-			var parts = this.name.split(/(?=[A-Z])/),
-				i=parts.length-1, res;
-			for (; i>=0; i--) {
-				res = v[parts[i].toLowerCase()];
-				if (res != undefined) {
-					return res;
-				}
-			}
-			return v[''];
-		}
-		return v;
 	},
 	
 	
@@ -331,7 +343,6 @@ function stackSegs(segs) {
 		}else{
 			levels[j] = [seg];
 		}
-		//seg.after = 0;
 	}
 	return levels;
 }

tests/basic.html

@@ -12,20 +12,10 @@
 		var m = d.getMonth();
 		
 		$('#calendar').fullCalendar({
-			slotMinutes: 30,
-			//allDayHeader: false,
-			//weekMode: 'variable',
-			//theme: true,
-			//firstDay: 1,
-			//isRTL: true,
-			editable: true,
-			//dragOpacity: .5,
-			defaultView: 'agendaWeek',
 			header: {
-				left: 'prev,next today',
+				right: 'month,agendaWeek,basicWeek,agendaDay,basicDay'
-				center: 'title',
-				right: 'month,agendaWeek,agendaDay'
 			},
+			editable: true,
 			events: [
 				{
 					id: 1,
@@ -50,7 +40,8 @@
 					id: 345,
 					title: "Hey Hey",
 					start: new Date(y, m, 9, 4, 0),
-					allDay: false
+					allDay: false,
+					className: 'adam shaw'
 				},
 				{
 					id: 3,
@@ -66,10 +57,7 @@
 					url: "http://facebook.com/",
 					allDay: false
 				}
-			],
+			]
-			dayClick: function(date, allDay) {
-				alert(date + ' allDay:' + allDay);
-			}
 		});
 		
 	});
@@ -85,7 +73,7 @@
 		}
 
 	#calendar {
-		width: 80%;
+		width: 900px;
 		margin: 0 auto;
 		}
 

tests/gcal.html

@@ -10,6 +10,9 @@
 
 	$(document).ready(function() {
 		$('#calendar').fullCalendar({
+			header: {
+				right: 'month,agendaWeek,basicWeek,agendaDay,basicDay'
+			},
 			editable: true,
 			eventSources: [
 				$.fullCalendar.gcalFeed(

tests/locale.html

@@ -12,7 +12,7 @@
 		$('#calendar').fullCalendar({
 		
 			header: {
-				center: 'month,basicWeek,basicDay'
+				left: 'month,agendaWeek,basicWeek,agendaDay,basicDay'
 			},
 			
 			editable: true,

tests/methods.html

@@ -15,9 +15,7 @@
 		cal = $('#calendar').fullCalendar({
 			editable: true,
 			header: {
-				left: 'prev,next today',
+				right: 'month,agendaWeek,basicWeek,agendaDay,basicDay'
-				center: 'title',
-				right: 'month,basicWeek,basicDay'
 			},
 			loading: function(bool) {
 				if (bool) {

tests/options.html

@@ -23,7 +23,7 @@
 			
 			header: {
 				left: 'title',
-				center: 'prev,month,basicWeek,basicDay,next',
+				center: 'prev,month,agendaWeek,basicWeek,agendaDay,basicDay,next',
 				right: 'today'
 			},
 			

tests/sources.html

@@ -86,9 +86,7 @@
 		cal = $('#calendar').fullCalendar({
 			editable: true,
 			header: {
-				left: 'prev,next today',
+				right: 'month,agendaWeek,basicWeek,agendaDay,basicDay'
-				center: 'title',
-				right: 'month,basicWeek,basicDay'
 			},
 			//events: staticEvents,
 			eventSources: [

tests/theming.html

@@ -18,7 +18,7 @@
 			//isRTL: true,
 			
 			header: {
-				center: 'month,basicWeek,basicDay'
+				right: 'month,agendaWeek,basicWeek,agendaDay,basicDay'
 			},
 			
 			buttonIcons: {

tests/triggers.html

@@ -11,9 +11,7 @@
 	$(document).ready(function() {
 		$('#calendar').fullCalendar({
 			header: {
-				left: 'prev,next today',
+				right: 'month,agendaWeek,basicWeek,agendaDay,basicDay'
-				center: 'title',
-				right: 'month,basicWeek,basicDay'
 			},
 			editable: true,
 			weekMode: 'variable',
@@ -31,8 +29,8 @@
 				//console.log(this);
 			},
 			
-			dayClick: function(dayDate, view) {
+			dayClick: function(dayDate, allDay, ev, view) {
-				console.log('dayClick - ' + dayDate + ' - ' + view.title);
+				console.log('dayClick - ' + dayDate + ', allDay:' + allDay + ' - ' + view.title);
 				//console.log(this);
 			},