updated examples

2009-09-15 06:19:43 +00:00 · 2009-09-15 06:19:43 +00:00 · beeed3af1a
parent 54229b518f
commit beeed3af1a
8 changed files with 332 additions and 249 deletions
--- a/changelog.txt
+++ b/changelog.txt
@ -1,4 +1,67 @@

+version 1.3 (9/15/09)
+	- different 'views': month/basicWeek/basicDay
+	- more flexible 'header' system for buttons
+	- themable by jQuery UI themes
+	- resizable events (require jQuery UI resizable plugin)
+	- reworked options/API to support idea of multiple views / be consistent with jQuery UI datepicker
+	- refactoring of entire codebase for future of development
+		- broken into different JS files, assembled w/ build scripts
+		- new test suite for new features, uses firebug-lite
+	- Options
+		- added:
+			date
+			defaultView
+			aspectRatio
+			disableResizing
+			monthNames (use instead of $.fullCalendar.monthNames)
+			monthNamesShort (use instead of $.fullCalendar.monthAbbrevs)
+			dayNames (use instead of $.fullCalendar.dayNames)
+			dayNamesShort (use instead of $.fullCalendar.dayAbbrevs)
+			theme
+			buttonText
+			buttonIcons
+		- superseded:
+			editable/disableDragging <- draggable
+			weekMode <- fixedWeeks
+			columnFormat <- abbrevDayHeadings
+			header <- buttons/title 
+			dragOpacity <- eventDragOpacity
+			dragRevertDuration <- eventRevertDuration
+			firstDay <- weekStart
+			isRTL <- rightToLeft
+		- removed:
+			showTime (use 'allDay' CalEvent property instead)
+	- Triggered Actions
+		- added:
+			eventResizeStart
+			eventResizeStop
+			eventResize
+		- superseded:
+			viewDisplay <- monthDisplay
+			windowResize <- resize
+	- CalEvent Properties
+		- superseded:
+			allDay <- showTime
+			editable <- draggable
+		- 'end' is now INCLUSIVE when allDay=true
+	- Methods:
+		- added:
+			renderEvent
+		- superseded:
+			prev <- prevMonth
+			next <- nextMonth
+			moveDate <- prevYear/nextYear
+			rerenderEvents/refetchEvents <- refresh
+			removeEvents <- removeEvent
+			clientEvents <- getEventsByID
+	- Utilities:
+		- 'formatDate' format string completely changed (inspired by jqueryui datepicker + datejs)
+		- 'formatDates' added to support date-ranges
+	- gcalFeed Options:
+		- superseded:
+			draggable <- editable
+
 version 1.2.1 (6/29/09)
 	- bugfixes
 		- allows and corrects invalid end dates for events
@ -55,4 +118,3 @@ version 1.1 (5/10/09)
 		- for THEAD and TBODY (in 1.0, just used TBODY, restructured in 1.1)
 		- IF UPGRADING FROM FULLCALENDAR 1.0, YOU MUST UPGRADE FULLCALENDAR.CSS
 		  !!!!!!!!!!!
-		  
--- a/examples/basic.html
+++ b/examples/basic.html
@ -1,6 +1,79 @@
 <!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/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.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 {
@ -16,58 +89,8 @@
 		}

 </style>
-<link rel='stylesheet' type='text/css' href='../fullcalendar/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='../fullcalendar/fullcalendar.js'></script>
-<script type='text/javascript'>
-
-	$(document).ready(function() {
-	
-		var d = new Date();
-		var y = d.getFullYear();
-		var m = d.getMonth();
-	
-		$('#calendar').fullCalendar({
-			draggable: true,
-			events: [
-				{
-					id: 1,
-					title: "Long Event",
-					start: new Date(y, m, 6, 14, 0),
-					end: new Date(y, m, 11)
-				},
-				{
-					id: 2,
-					title: "Repeating Event",
-					start: new Date(y, m, 2)
-				},
-				{
-					id: 2,
-					title: "Repeating Event",
-					start: new Date(y, m, 9)
-				},
-				{
-					id: 3,
-					title: "Meeting",
-					start: new Date(y, m, 20, 9, 0)
-				},
-				{
-					id: 4,
-					title: "Click for Facebook",
-					start: new Date(y, m, 27, 16),
-					end: new Date(y, m, 29),
-					url: "http://facebook.com/"
-				}
-			]
-		});
-		
-	});
-
-</script>
 </head>
 <body>
 <div id='calendar'></div>
 </body>
-</html>
+</html>
--- a/examples/gcal.html
+++ b/examples/gcal.html
@ -1,6 +1,49 @@
 <!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/main.js'></script>
+<script type='text/javascript' src='../src/grid.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>
+<!--</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='../fullcalendar.js'></script>
+<script type='text/javascript' src='../gcal.js'></script>
+</dist>
+-->
+<script type='text/javascript'>
+
+	$(document).ready(function() {
+	
+		$('#calendar').fullCalendar({
+		
+			// US Holidays
+			events: $.fullCalendar.gcalFeed('http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic'),
+			
+			eventClick: function(event) {
+				window.open(event.url, 'gcalevent', 'width=700,height=600');
+				return false;
+			},
+			
+			loading: function(bool) {
+				if (bool) $('#loading').show();
+				else $('#loading').hide();
+			}
+			
+		});
+		
+	});
+
+</script>
 <style type='text/css'>

 	body {
@ -22,33 +65,6 @@
 		}

 </style>
-<link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar.css' />
-<script type='text/javascript' src='../jquery/jquery.js'></script>
-<script type='text/javascript' src='../fullcalendar/fullcalendar.js'></script>
-<script type='text/javascript' src='../fullcalendar/gcal.js'></script>
-<script type='text/javascript'>
-
-	$(document).ready(function() {
-	
-		$('#calendar').fullCalendar({
-			// US Holidays
-			events: $.fullCalendar.gcalFeed(
-				'http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic',
-				{draggable: false, className: 'mygcal'}
-			),
-			eventClick: function(event) {
-				window.open(event.url, 'gcalevent', 'width=700,height=600');
-				return false;
-			},
-			loading: function(bool) {
-				if (bool) $('#loading').show();
-				else $('#loading').hide();
-			}
-		});
-		
-	});
-
-</script>
 </head>
 <body>
 <div id='loading' style='display:none'>loading...</div>
--- a/examples/json-events.php
+++ b/examples/json-events.php
--- a/examples/json.html
+++ b/examples/json.html
@ -1,6 +1,54 @@
 <!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/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.js'></script>
+</dist>
+-->
+<script type='text/javascript'>
+
+	$(document).ready(function() {
+	
+		$('#calendar').fullCalendar({
+		
+			editable: true,
+			
+			events: "json-events.php",
+			
+			eventDrop: function(event, delta) {
+				alert(event.title + ' was moved ' + delta + ' days\n' +
+					'(should probably update your database)');
+			},
+			
+			loading: function(bool) {
+				if (bool) $('#loading').show();
+				else $('#loading').hide();
+			}
+			
+		});
+		
+	});
+
+</script>
 <style type='text/css'>

 	body {
@ -22,35 +70,10 @@
 		}

 </style>
-<link rel='stylesheet' type='text/css' href='../fullcalendar/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='../fullcalendar/fullcalendar.js'></script>
-<script type='text/javascript'>
-
-	$(document).ready(function() {
-	
-		$('#calendar').fullCalendar({
-			draggable: true,
-			events: "json_events.php",
-			eventDrop: function(event, delta) {
-				alert(event.title + ' was moved ' + delta + ' days\n' +
-					'(should probably update your database)');
-			},
-			loading: function(bool) {
-				if (bool) $('#loading').show();
-				else $('#loading').hide();
-			}
-		});
-		
-	});
-
-</script>
 </head>
 <body>
 <div id='loading' style='display:none'>loading...</div>
 <div id='calendar'></div>
-<p>json_events.php needs to be running in the same directory.</p>
+<p>json-events.php needs to be running in the same directory.</p>
 </body>
-</html>
+</html>
--- a/examples/new.html
+++ b/examples/new.html
@ -1,143 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html>
-<head>
-<link rel='stylesheet' type='text/css' href='redmond/theme.css' />
-<!--<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/view.js'></script>
-<script type='text/javascript' src='../src/util.js'></script>
-<script type='text/javascript' src='../src/gcal.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='../jquery/ui.resizable.js'></script>
-<script type='text/javascript' src='../fullcalendar.js'></script>
-<script type='text/javascript' src='../gcal.js'></script>
-</dist>-->
-<script type='text/javascript'>
-
-	var d = new Date();
-	var y = d.getFullYear();
-	var m = d.getMonth();
-
-	$(document).ready(function() {
-		$('#calendar').fullCalendar({
-			windowResize: function() {
-				//alert('resize');
-			},
-			theme: false,
-			isRTL: false,
-			weekStart: 1,
-			weekMode: 'fixed',
-			//defaultView: 'dayBasic',
-			viewDisplay: function(date, view) {
-				//console.log(date + ', ' + view.name);
-			},
-			dayClick: function(date, view) {
-				//console.log(date + ', ' + view.name);
-			},
-			eventRender: function(event, element) {
-				//console.log(event.title + ' RENDER');
-			},
-			eventMouseover: function(event) {
-				//console.log('OVER ' + event.title);
-			},
-			eventMouseout: function(event) {
-				//console.log('OUT ' + event.title);
-			},
-			eventClick: function(event) {
-				//console.log('CLICK ' + event.title + ' /// ' + this.className);
-				//return false;
-			},
-			eventDragStart: function(event) {
-				//console.log('DRAG START ' + event.title);
-			},
-			eventDragStop: function(event) {
-				//console.log('DRAG STOP ' + event.title);
-			},
-			eventDrop: function(event, dayDelta, minuteDelta) {
-				//console.log(dayDelta + ' ' + minuteDelta + ' --- ' + event.title);
-			},
-			eventResizeStart: function(event) {
-				//console.log('resize START');
-			},
-			eventResizeStop: function(event) {
-				//console.log('resize STOP');
-			},
-			eventResize: function(event, dayDelta, minuteDelta) {
-				//console.log(dayDelta + ' ' + minuteDelta + ' --- ' + event.title);
-			},
-			editable: true,
-			eventSources: [
-				$.fullCalendar.gcalFeed('http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic')
-			],
-			events: [
-				{
-					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)
-				},
-				{
-					id: 3,
-					title: "Meeting",
-					start: new Date(y, m, 20, 9, 0),
-					hasTime: true
-				},
-				{
-					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),
-					hasTime: true
-				},
-				{
-					id: 6,
-					title: "timed event1",
-					start: new Date (y, m+1, 2, 14, 15),
-					hasTime: true
-				},
-				{
-					id: 7,
-					title: "timed event1",
-					start: new Date (y, m+1, 4, 15, 00),
-					end: new Date(y, m+1, 4, 17, 00),
-					hasTime: true
-				}
-			]
-		});
-	});
-
-</script>
-</head>
-<body style='font-size:12px'>
-<div id='calendar' style='width:900px;margin:20px auto 0;font-family:arial'></div>
-</body>
--- a/examples/views.html
+++ b/examples/views.html
@ -0,0 +1,101 @@
+<!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/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.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,
+			header: {
+				left: 'prev,next today',
+				center: 'title',
+				right: 'month,basicWeek,basicDay'
+			},
+			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>
+</html>
--- a/src/css/main.css
+++ b/src/css/main.css
@ -216,6 +216,7 @@ table.fc-header {
 	overflow: hidden;
 	font-size: 11px;
 	text-decoration: none;
+	text-align: left;
 	cursor: pointer;
 	}