bugfixes and final touches for 1.3

changelog.txt

@@ -1,5 +1,5 @@
 
-version 1.3 (9/15/09)
+version 1.3 (9/21/09)
 	- different 'views': month/basicWeek/basicDay
 	- more flexible 'header' system for buttons
 	- themable by jQuery UI themes

docs/methods.txt

@@ -74,5 +74,5 @@ jQuery object:
 	Rerenders all events on the screen.
 
 **refetchEvents** - .fullCalendar(``'refetchEvents'``)
-	Refetches events from all event sources and rerenders them on the screen.
+	Refetches events from all sources and rerenders them on the screen.
 	

examples/basic.html

@@ -20,7 +20,7 @@
 <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.js'></script>
+<script type='text/javascript' src='../fullcalendar.min.js'></script>
 </dist>
 -->
 <script type='text/javascript'>
@@ -78,7 +78,7 @@
 	body {
 		margin-top: 40px;
 		text-align: center;
-		font-size: 14px;
+		font-size: 13px;
 		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
 		}
 

examples/gcal.html

@@ -15,7 +15,7 @@
 <dist>
 <link rel='stylesheet' type='text/css' href='../fullcalendar.css' />
 <script type='text/javascript' src='../jquery/jquery.js'></script>
-<script type='text/javascript' src='../fullcalendar.js'></script>
+<script type='text/javascript' src='../fullcalendar.min.js'></script>
 <script type='text/javascript' src='../gcal.js'></script>
 </dist>
 -->
@@ -29,6 +29,7 @@
 			events: $.fullCalendar.gcalFeed('http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic'),
 			
 			eventClick: function(event) {
+				// opens events in a popup window
 				window.open(event.url, 'gcalevent', 'width=700,height=600');
 				return false;
 			},
@@ -48,7 +49,7 @@
 	body {
 		margin-top: 40px;
 		text-align: center;
-		font-size: 14px;
+		font-size: 13px;
 		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
 		}
 		

examples/json-events.php

@@ -6,14 +6,14 @@
 	echo json_encode(array(
 	
 		array(
-			'id' => 1,
+			'id' => 111,
 			'title' => "Event1",
 			'start' => "$year-$month-10",
 			'url' => "http://yahoo.com/"
 		),
 		
 		array(
-			'id' => 2,
+			'id' => 222,
 			'title' => "Event2",
 			'start' => "$year-$month-20",
 			'end' => "$year-$month-22",

examples/json.html

@@ -20,7 +20,7 @@
 <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.js'></script>
+<script type='text/javascript' src='../fullcalendar.min.js'></script>
 </dist>
 -->
 <script type='text/javascript'>
@@ -53,7 +53,7 @@
 	body {
 		margin-top: 40px;
 		text-align: center;
-		font-size: 14px;
+		font-size: 13px;
 		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
 		}
 		

examples/theme.html

@@ -21,7 +21,7 @@
 <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.js'></script>
+<script type='text/javascript' src='../fullcalendar.min.js'></script>
 </dist>
 -->
 <script type='text/javascript'>
@@ -85,7 +85,7 @@
 	body {
 		margin-top: 40px;
 		text-align: center;
-		font-size: 14px;
+		font-size: 13px;
 		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
 		}
 

examples/views.html

@@ -20,7 +20,7 @@
 <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.js'></script>
+<script type='text/javascript' src='../fullcalendar.min.js'></script>
 </dist>
 -->
 <script type='text/javascript'>
@@ -83,7 +83,7 @@
 	body {
 		margin-top: 40px;
 		text-align: center;
-		font-size: 14px;
+		font-size: 13px;
 		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
 		text-align: left;
 		}

src/css/main.css

@@ -275,7 +275,7 @@ table.fc-header {
 	display: block;
 	position: absolute;
 	z-index: 99999;
-	border: 0 !important; /* important overrides pre jquery ui 1.7 styles */
+	border: 0; /* important overrides pre jquery ui 1.7 styles */
 	background: url(data:image/gif;base64,AAAA) !important; /* hover fix for IE */
 	}
 	
@@ -314,10 +314,6 @@ table.fc-header {
 	}
 	
 /* resizable */
-
-.fc-event-hori .ui-resizable-handle {
-	_height: 14px !important; /* IE6 had 0 height */
-	}
 	
 .fc-event-hori .ui-resizable-e {
 	top: 0           !important; /* importants override pre jquery ui 1.7 styles */
@@ -335,4 +331,8 @@ table.fc-header {
 	cursor: w-resize;
 	}
 	
+.fc-event-hori .ui-resizable-handle {
+	_padding-bottom: 14px; /* IE6 had 0 height */
+	}
+	
 	

src/grid.js

@@ -256,15 +256,12 @@ function Grid(element, options, methods) {
 	
 	
 	function updateSize() {
-		var width = element.width(),
+	
-			height = Math.round(width / options.aspectRatio),
+		var height = Math.round(element.width() / options.aspectRatio),
 			leftTDs = tbody.find('tr td:first-child'),
 			tbodyHeight = height - thead.height(),
 			rowHeight1, rowHeight2;
-		setOuterWidth(
+		
-			thead.find('th').slice(0, -1),
-			colWidth = Math.floor(width / colCnt)
-		);
 		if (options.weekMode == 'variable') {
 			rowHeight1 = rowHeight2 = Math.floor(tbodyHeight / (rowCnt==1 ? 2 : 6));
 		}else{
@@ -283,6 +280,7 @@ function Grid(element, options, methods) {
 			trTopBug = trTop != tdTop;
 			tbodyTopBug = tbody.position().top != trTop;
 		}
+		
 		if (tdHeightBug == undefined) {
 			// bug in firefox where cell height includes padding
 			td.height(rowHeight1);
@@ -296,6 +294,12 @@ function Grid(element, options, methods) {
 			setOuterHeight(leftTDs.slice(0, -1), rowHeight1);
 			setOuterHeight(leftTDs.slice(-1), rowHeight2);
 		}
+		
+		setOuterWidth(
+			thead.find('th').slice(0, -1),
+			colWidth = Math.floor(element.width() / colCnt)
+		);
+		
 	}
 	
 	
@@ -370,10 +374,16 @@ function Grid(element, options, methods) {
 				for (k=0; k<segs.length; k++) {
 					seg = segs[k];
 					event = seg.event;
-					eventClasses = event.className || [];
+					eventClasses = event.className;
-					if (typeof eventClasses == 'string') {
+					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.fc-day-content div') :
@@ -434,7 +444,9 @@ function Grid(element, options, methods) {
 						eventElementHandlers(event, eventElement);
 						if (event.editable || event.editable == undefined && options.editable) {
 							draggableEvent(event, eventElement);
-							resizableEvent(event, eventElement);
+							if (seg.isEnd) {
+								resizableEvent(event, eventElement);
+							}
 						}
 						view.reportEventElement(event, eventElement);
 						levelHeight = Math.max(levelHeight, eventElement.outerHeight(true));
@@ -475,7 +487,7 @@ function Grid(element, options, methods) {
 			var matrix;
 			eventElement.draggable({
 				zIndex: 3,
-				delay: 100,
+				delay: 50,
 				opacity: options.dragOpacity,
 				revertDuration: options.dragRevertDuration,
 				start: function(ev, ui) {
@@ -535,7 +547,8 @@ function Grid(element, options, methods) {
 		if (!options.disableResizing && eventElement.resizable) {
 			eventElement.resizable({
 				handles: rtl ? 'w' : 'e',
-				grid: [colWidth, 0],
+				grid: colWidth,
+				minWidth: colWidth/2, // need this or else IE throws errors when too small
 				containment: element,
 				start: function(ev, ui) {
 					eventElement.css('z-index', 3);

src/main.js

@@ -215,14 +215,21 @@ $.fn.fullCalendar = function(options) {
 					}
 				}
 			}
+			else if (view.sizeDirty) {
+				view.updateSize();
+				view.rerenderEvents();
+			}
 			else if (view.eventsDirty) {
 				// ensure events are rerendered if another view messed with them
-				view.rerenderEvents();
+				// pass in 'events' b/c event might have been added/removed
+				view.clearEvents();
+				view.renderEvents(events);
 			}
 			if (header) {
 				// update title text
 				header.find('h2.fc-header-title').html(view.title);
 			}
+			view.sizeDirty = false;
 			view.eventsDirty = false;
 			view.trigger('viewDisplay', _element);
 		}
@@ -236,6 +243,15 @@ $.fn.fullCalendar = function(options) {
 			});
 		}
 		
+		// marks other views' sizes as dirty
+		function sizesDirtyExcept(exceptView) {
+			$.each(viewInstances, function() {
+				if (this != exceptView) {
+					this.sizeDirty = true;
+				}
+			});
+		}
+		
 		// called when any event objects have been added/removed/changed, rerenders
 		function eventsChanged() {
 			view.clearEvents();
@@ -399,6 +415,7 @@ $.fn.fullCalendar = function(options) {
 							e.end = null;
 						}
 						e.title = event.title;
+						e.url = event.url;
 						e.allDay = event.allDay;
 						e.className = event.className;
 						e.editable = event.editable;
@@ -612,6 +629,7 @@ $.fn.fullCalendar = function(options) {
 							elementWidth = newWidth;
 							view.updateSize();
 							view.rerenderEvents(true);
+							sizesDirtyExcept(view);
 							view.trigger('windowResize', _element);
 						}
 					}

tests/gcal.html

@@ -15,8 +15,8 @@
 				$.fullCalendar.gcalFeed(
 					"http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic",
 					{
-						//editable: true,
+						editable: true,
-						className: 'holiday'
+						className: ['holiday']
 					}
 				),
 				/*$.fullCalendar.gcalFeed(

tests/loader.js

@@ -84,7 +84,7 @@ if (_build) {
 }
 
 var _userAgent = navigator.userAgent.toLowerCase();
-if (!/mozilla/.test(_userAgent) || /(compatible|webkit)/.test(_userAgent)) {
+if (!/mozilla/.test(_userAgent) || /(compatible|webkit)/.test(_userAgent) || !window.console || !window.console.log) {
 	includeJS('firebug-lite/firebug-lite-compressed.js');
 }
 

tests/locale.html

@@ -10,16 +10,45 @@
 
 	$(document).ready(function() {
 		$('#calendar').fullCalendar({
+		
 			header: {
 				center: 'month,basicWeek,basicDay'
 			},
+			
 			editable: true,
 			
 			isRTL: true,
+			firstDay: 1,
+			
+			monthNames: ["januari", "februari", "maart", "april", "mei", "juni","juli", "augustus", "september", "oktober", "november", "december"],
+			monthNamesShort: ["jan", "feb", "maa", "apr", "mei", "jun", "jul", "aug","sep", "okt", "nov", "dec"],
+			dayNames: ['zondag', 'maandag', 'dinsdag', 'woensdag','donderdag', 'vrijdag', 'zaterdag'],
+			dayNamesShort: ["zo", "ma", "di", "wo", "do", "vr", "za", "zo"],
+			
+			timeFormat: 'H(:mm)t',
+			
 			weekMode: 'variable',
 			
 			// TODO: add drag & resize tests
 			
+			dayClick: function(dayDate, view) {
+				console.log('dayClick - ' + dayDate + ' - ' + view.title);
+			},
+			
+			eventDrop: function(event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view) {
+				console.log('DROP ' + event.title);
+				console.log(dayDelta + ' days');
+				console.log(event.start);
+				//console.log(minuteDelta + ' minutes');
+			},
+			
+			eventResize: function(event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view) {
+				console.log('RESIZE!! ' + event.title);
+				console.log(dayDelta + ' days');
+				console.log(event.end);
+				//console.log(minuteDelta + ' minutes');
+			},
+			
 			events: [
 				{
 					id: 1,
@@ -76,7 +105,7 @@
 
 </script>
 </head>
-<body style='font-size:14px'>
+<body style='font-size:12px'>
 <div id='calendar' style='width:900px;margin:20px auto 0;font-family:arial'></div>
 </body>
 </html>

tests/methods.html

@@ -19,6 +19,13 @@
 				center: 'title',
 				right: 'month,basicWeek,basicDay'
 			},
+			loading: function(bool) {
+				if (bool) {
+					$('#loading').show();
+				}else{
+					$('#loading').hide();
+				}
+			},
 			events: staticEvents = [
 				{
 					id: 1,
@@ -77,17 +84,20 @@
 		var event = cal.fullCalendar('clientEvents', 3)[0];
 		event.start = new Date(y, m, 25, 10, 30);
 		event.end = new Date(y, m, 26);
+		//event.allDay = true;
 		cal.fullCalendar('updateEvent', event);
 	}
 	
 	function updateRepeatingEvent() {
 		var event = cal.fullCalendar('clientEvents', 2)[0];
 		event.start = new Date(y, m, 4, 13, 30);
-		event.end = new Date(y, m, 5, 1, 0);
+		event.end = new Date(y, m, 5, 2, 0);
 		event.allDay = false;
 		event.title = "repeat yo";
+		//event.editable = false;
+		event.url = "http://google.com/";
 		cal.fullCalendar('updateEvent', event);
-		console.log(cal.fullCalendar('clientEvents', 2));
+		//console.log(cal.fullCalendar('clientEvents', 2));
 	}
 	
 	function renderEvent(stick) {
@@ -99,7 +109,7 @@
 	
 	var gcalFeed = $.fullCalendar.gcalFeed("http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic");
 	
-	var jsonFeed = "../examples/json_events.php";
+	var jsonFeed = "../examples/json-events.php";
 
 </script>
 <style>
@@ -117,8 +127,8 @@
 <button onclick="cal.fullCalendar('next')">next</button>
 <button onclick="cal.fullCalendar('today')">today</button>
 <button onclick="cal.fullCalendar('gotoDate', 1999, 9, 31)">Oct 31 1999</button>
-<button onclick="cal.fullCalendar('moveDate', 1, 1, 1)">+1 +1 +1</button>
+<button onclick="cal.fullCalendar('incrementDate', 1, 1, 1)">+1 +1 +1</button>
-<button onclick="cal.fullCalendar('moveDate', -1, -1, -1)">-1 -1 -1</button>
+<button onclick="cal.fullCalendar('incrementDate', -1, -1, -1)">-1 -1 -1</button>
 
 <button onclick="updateEventStart()">update event start</button>
 <button onclick="updateRepeatingEvent()">update repeating event</button>
@@ -145,6 +155,7 @@
 <button onclick="cal.fullCalendar('refetchEvents')">refetch</button>
 
 </p>
+<div id='loading' style='position:absolute;display:none'>loading...</div>
 <div id='calendar' style='width:900px;margin:20px auto 0;font-family:arial'></div>
 </body>
 </html>

tests/options.html

@@ -13,8 +13,8 @@
 		
 			/*
 			year: 2010,
-			month: 2,
+			month: 0,
-			date: 1,
+			date: 0,
 			
 			defaultView: 'basicDay',
 			
@@ -33,7 +33,7 @@
 			dragOpacity: .5,
 			dragRevertDuration: 100,
 			
-			//weekMode: 'liquid', //'variable'
+			weekMode: 'variable',
 			
 			/*
 			titleFormat: {

tests/sources.html

@@ -39,7 +39,7 @@
 			allDay: false,
 			//className: 'yellow-event black-text-event',
 			className: ['yellow-event', 'black-text-event'],
-			editable: false
+			editable: true
 		},
 		{
 			id: 4,

tests/theming.html

@@ -15,6 +15,8 @@
 			theme: true,
 			editable: true,
 			
+			//isRTL: true,
+			
 			header: {
 				center: 'month,basicWeek,basicDay'
 			},

tests/triggers.html

@@ -94,11 +94,11 @@
 			
 			eventResizeStart: function(event, jsEvent, ui, view) {
 				console.log('RESIZE START ' + event.title);
-				console.log(this);
+				//console.log(this);
 			},
 			eventResizeStop: function(event, jsEvent, ui, view) {
 				console.log('RESIZE STOP ' + event.title);
-				console.log(this);
+				//console.log(this);
 			},
 			eventResize: function(event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view) {
 				console.log('RESIZE!! ' + event.title);