added a datepicker to the event form

calendar/app/views/Events/add.html

@@ -2,6 +2,7 @@
 #{set title:calendar.name/}
 #{set 'moreStyles'}
 	<link rel="stylesheet" href="@{'/public/stylesheets/event.css'}" type="text/css" media="screen" charset="${_response_encoding}">
+	<link rel="stylesheet" href="@{'/public/stylesheets/jquery-ui-1.8.16.custom.css'}" type="text/css" media="screen" />
 #{/set}
 
 <h2 class="title">Add an event to ${calendar.name}</h2>

calendar/app/views/Events/edit.html

@@ -2,6 +2,7 @@
 #{set title:event.name/}
 #{set 'moreStyles'}
 	<link rel="stylesheet" href="@{'/public/stylesheets/event.css'}" type="text/css" media="screen" charset="${_response_encoding}">
+	<link rel="stylesheet" href="@{'/public/stylesheets/jquery-ui-1.8.16.custom.css'}" type="text/css" media="screen" />
 #{/set}
 
 <h2 class="title">Edit Event</h2>

calendar/app/views/tags/event-form.html

@@ -2,6 +2,8 @@
 
 #{set 'moreScripts'}
 	<script src="@{'/public/javascripts/event.js'}"></script>
+	<script src="@{'/public/javascripts/jquery-ui-1.8.16.custom.min.js'}" ></script>
+	<script src="@{'/public/javascripts/jquery.ui.datepicker-de-CH.js'}" ></script>
 #{/set}
 
 #{ifErrors}
@@ -29,7 +31,7 @@
 <p>
 #{field 'startDay'}
     <label for="startDay">Start</label>
-    <input type="text" name="${field.name}" id="${field.name}" onblur="javascript:checkLocationCollision();checkEventCollision();" value="#{ifErrors}${flash.startDay}#{/ifErrors}#{else}#{if _event}${_event?.startDate?.toString('dd.MM.yyyy')}#{/if}#{else}${String.format("%02d", _selected.getDayOfMonth())}.${String.format("%02d", _selected.getMonthOfYear())}.${_selected.getYear()}#{/else}#{/else}"/>
+    <input class="datepicker" type="text" name="${field.name}" id="${field.name}" onblur="javascript:checkLocationCollision();checkEventCollision();" value="#{ifErrors}${flash.startDay}#{/ifErrors}#{else}#{if _event}${_event?.startDate?.toString('dd.MM.yyyy')}#{/if}#{else}${String.format("%02d", _selected.getDayOfMonth())}.${String.format("%02d", _selected.getMonthOfYear())}.${_selected.getYear()}#{/else}#{/else}"/>
 #{/field}
 #{field 'startTime'}
 	<label for="startTime" class="time">Time</label>
@@ -40,7 +42,7 @@
 <p>
 #{field 'endDay'}
 	<label for="endDay">End</label>
-	<input type="text" name="${field.name}" id="${field.name}" onblur="javascript:checkLocationCollision();checkEventCollision();" value="#{ifErrors}${flash.endDay}#{/ifErrors}#{else}#{if _event}${_event?.endDate?.toString('dd.MM.yyyy')}#{/if}#{else}${String.format("%02d", _selected.plusHours(1).getDayOfMonth())}.${String.format("%02d", _selected.plusHours(1).getMonthOfYear())}.${_selected.plusHours(1).getYear()}#{/else}#{/else}"/>
+	<input class="datepicker" type="text" name="${field.name}" id="${field.name}" onblur="javascript:checkLocationCollision();checkEventCollision();" value="#{ifErrors}${flash.endDay}#{/ifErrors}#{else}#{if _event}${_event?.endDate?.toString('dd.MM.yyyy')}#{/if}#{else}${String.format("%02d", _selected.plusHours(1).getDayOfMonth())}.${String.format("%02d", _selected.plusHours(1).getMonthOfYear())}.${_selected.plusHours(1).getYear()}#{/else}#{/else}"/>
 #{/field}
 #{field 'endTime'}
 	<label for="endTime" class="time">Time</label>

calendar/public/javascripts/event.js

@@ -76,4 +76,15 @@ function setupEventForm() {
 			$('#repeating-details').show('slow');
 		}
 	});
-}
+
+	$.datepicker.setDefaults(
+  		$.extend(
+    		{'dateFormat':'dd.mm.yyyy'},
+    		$.datepicker.regional['de-CH']
+  		)
+	);
+
+	$(function() {
+		$(".datepicker").datepicker();
+	});
+}

calendar/public/javascripts/jquery.ui.datepicker-de-CH.js

@@ -0,0 +1,23 @@
+/* Swiss-German initialisation for the jQuery UI date picker plugin. */
+/* By Douglas Jose & Juerg Meier. */
+jQuery(function($){
+	$.datepicker.regional['de-CH'] = {
+		closeText: 'schliessen',
+		prevText: '<zurück',
+		nextText: 'nächster>',
+		currentText: 'heute',
+		monthNames: ['Januar','Februar','März','April','Mai','Juni',
+		'Juli','August','September','Oktober','November','Dezember'],
+		monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun',
+		'Jul','Aug','Sep','Okt','Nov','Dez'],
+		dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
+		dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'],
+		dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'],
+		weekHeader: 'Wo',
+		dateFormat: 'dd.mm.yy',
+		firstDay: 1,
+		isRTL: false,
+		showMonthAfterYear: false,
+		yearSuffix: ''};
+	$.datepicker.setDefaults($.datepicker.regional['de-CH']);
+});