Add to Calendar buttons

Online Calendars are this years must have social feature: Even though their sooo dated! Bah-dum!

The tools can be (should be) as simple as snipets of HTML... check this little generator out

Demo

http://sandbox.knarly.com/js/event.htm

QueryString

As each service has its own parameters here's a rough guide...

		Date	Location	Message	Url (TITLE)
Google	http://www.google.com /calenda/event ?action=TEMPLATE&trp=true	dates={START} /{END}	location	text	sprop=website: (sprop=name:)
Yahoo	http://calendar.yahoo.com/ ?v=60&VIEW=d	ST={START} DUR={DUR}	in_loc	TITLE DESC	URL
Microsoft	http://calendar.live.com /calendar/calendar.aspx ?rru=addevent	dtstart={START} dtend={END}	location	summary

Code

<!DOCTYPE html>
<html>
<head>
	<title>Add Event</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
window.onload = (function(){
  $('form#demo_calendar')[0].url.value = window.location.href;
  $('button').click(function(){
  	$('form#demo_calendar')[0].path.value = this.value;
  });

  $('form#demo_calendar').submit(function(e){
	var a = {
		DURATION: (new Date(this.end.value)).getTime()-(new Date(this.start.value)).getTime()
	};
	var form = this;
  	window.open( this.path.value.replace(/\{\$(.*?)\}/ig, function(m,p1){
  		p1 = p1.toLowerCase();

  		if( (p1 in form) )
  			a[p1] = form[p1].value;

	  	if(!(p1 in a)&&!a[p1]){
	  		return '';
	  	}
		return ((p1 in a)?encodeURIComponent(a[p1]):m);
	}));
	
	return false;
  });
});
</script>
<style>
	body{
		white-space:pre;
		font-family:"Lucida Console";
	}
	img{
		height:16px;
	}
</style>
</head>
<body><h1>Add Event</h1><form method="get" id="demo_calendar" target="_blank">	<input type="hidden" name="path" />
	Summary:  <input type="text" name="summary" value="Dance Party"/>
	Message:  <input type="text" name="message" value="Great music, fancy dress and free"/>
	URL:      <input type="text" name="url" value=""/>
	Location: <input type="text" name="location" value="Boogaloo, London"/>
	Start:    <input type="text" name="end" value="20100416T020000"/>
	End:      <input type="text" name="start" value="20100415T180000"/>
	
	<button type="submit" name="calendar" value="http://www.google.com/calendar/event?action=TEMPLATE&text={$SUMMARY}&location={$LOCATION}&dates={$START}Z/{$END}Z&trp=true&sprop=website:{$URL}&details={$MESSAGE}"><img src="https://calendar.google.com/googlecalendar/images/favicon_v2010.ico">Google</button><button type="submit" name="calendar" value="http://calendar.live.com/calendar/calendar.aspx?rru=addevent&dtstart={$START}&dtend={$END}&summary={$SUMMARY}&location={$LOCATION}"><img src="http://gfx2.hotmail.com/cal/11.00/updatebeta/ltr/favicon.ico" />Windows Live</button><button type="submit" name="calendar" value="http://calendar.yahoo.com/?v=60&VIEW=d&in_loc={$LOCATION}&type=20&TITLE={$SUMMARY}&ST={$START}Z&DUR={$DURATION}&URL={$URL}&DESC={$MESSAGE}"><img src="http://calendar.yahoo.com/favicon.ico"> Yahoo </button>
	</form>
</body>
</html>