Back-ported events listing calendar

Re: https://github.com/ixc/agsa/issues/13

icekit_events/page_types/eventlistingfordate/templates/eventlistingfordate/layouts/default.html

@@ -4,6 +4,10 @@
 
 {% block title %}{{ page.get_title }} {{ start|date }}{% endblock %}
 
+{% block css %}
+    <link rel="stylesheet" href="{% static 'icekit_events/css/events_datepicker.css' %}">
+{% endblock %}
+
 {% block content %}
     <div class="container">
         <h1>{{ page.get_title }}</h1>
@@ -28,3 +32,11 @@ <h2>{{ start|date }}</h2>
         <div class="events-datepicker" id="datepicker" data-period="{{ days }}" data-start="{{ start|date:'Y-m-d' }}"></div>
     </div>
 {% endblock %}
+
+{% block js %}
+    {{ block.super }}
+    <script src="{% static 'icekit_events/js/jquery-querystring.js' %}"></script>
+    <script src="{% static 'icekit_events/bower_components/jquery-ui/jquery-ui.min.js' %}"></script>
+    <script src="{% static 'icekit_events/js/events_datepicker.js' %}"></script>
+{% endblock %}
+

icekit_events/static/icekit_events/css/events_datepicker.css

@@ -0,0 +1,17 @@
+.events-datepicker {
+	max-width: 272px;
+	margin-top: 14px;
+	text-align: center;
+}
+.events-datepicker .ui-datepicker-next {
+	margin-left: 10px;
+}
+.events-datepicker td,
+.events-datepicker th {
+	padding: 10px;
+	text-align: center;
+}
+.events-datepicker .ui-datepicker-title {
+	font-size: 2em;
+	font-weight: bold;
+}

icekit_events/static/icekit_events/js/events_datepicker.js

@@ -0,0 +1,19 @@
+$(function() {
+	var datepicker = $('#datepicker');
+
+	datepicker.datepicker({
+		dateFormat: 'yy-mm-dd',
+		onSelect: function(date) {
+			var queryParams = $.querystring(window.location.toString());
+			queryParams.date = date;
+			window.location = window.location.pathname + '?' + $.querystring(queryParams);
+		}
+	});
+
+	datepicker.datepicker('setDate', datepicker.data('start'));
+
+	// Hack this a little to get the date range selected
+	var datepickerCells = $('.ui-datepicker-calendar td');
+	var index = datepickerCells.index($('.ui-datepicker-current-day'));
+	datepickerCells.slice(index, index + parseInt(datepicker.data("period"))).addClass('active');
+});