nice hint appearing when trying to edit an event

media/css/dates/home.css

@@ -73,3 +73,8 @@
 .small-link {
   font-size:.8em;
 }
+
+#dialog-edit a {
+  font-weight: bold;
+  text-decoration: underline;
+}

media/css/libs/jquery_ui/redmond/jquery-ui-1.8.19.datepicker.autocomplete.css → media/css/libs/jquery_ui/redmond/jquery-ui-1.8.20.datepicker.autocomplete.dialog.css

@@ -1,5 +1,5 @@
 /*!
- * jQuery UI CSS Framework 1.8.19
+ * jQuery UI CSS Framework 1.8.20
  *
  * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
  * Dual licensed under the MIT or GPL Version 2 licenses.
@@ -39,7 +39,7 @@
 
 
 /*!
- * jQuery UI CSS Framework 1.8.19
+ * jQuery UI CSS Framework 1.8.20
  *
  * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
  * Dual licensed under the MIT or GPL Version 2 licenses.
@@ -285,7 +285,7 @@
 /* Overlays */
 .ui-widget-overlay { background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); }
 .ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }/*!
- * jQuery UI Autocomplete 1.8.19
+ * jQuery UI Autocomplete 1.8.20
  *
  * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
  * Dual licensed under the MIT or GPL Version 2 licenses.
@@ -299,7 +299,7 @@
 * html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */
 
 /*
- * jQuery UI Menu @VERSION
+ * jQuery UI Menu 1.8.20
  *
  * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
  * Dual licensed under the MIT or GPL Version 2 licenses.
@@ -338,7 +338,28 @@
 	margin: -1px;
 }
 /*!
- * jQuery UI Datepicker 1.8.19
+ * jQuery UI Dialog 1.8.20
+ *
+ * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Dialog#theming
+ */
+.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }
+.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative;  }
+.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; } 
+.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
+.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
+.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
+.ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
+.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
+.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; }
+.ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; }
+.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
+.ui-draggable .ui-dialog-titlebar { cursor: move; }
+/*!
+ * jQuery UI Datepicker 1.8.20
  *
  * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
  * Dual licensed under the MIT or GPL Version 2 licenses.

media/js/dates/home.js

@@ -48,6 +48,12 @@ $(function() {
       url = '/notify/?start=' + start_ts + '&end=' + end_ts;
       location.href = url;
       //calendar.fullCalendar('unselect');
+    },
+    eventClick: function(event) {
+      if (!event.mine) return;
+      $('#dialog-edit a')
+        .attr('href', '/notify/?start=' + event.start.getTime() + '&end=' + event.end.getTime());
+      $('#dialog-edit').dialog('open');
     }
   });
 
@@ -63,4 +69,9 @@ $(function() {
       .addClass('anchor')
         .prependTo($('#content'));
 
+  $('#dialog-edit').dialog({
+     autoOpen: false
+  });
+
+
 });

pto/apps/dates/templates/dates/home.html

@@ -7,6 +7,7 @@
 #}
 
 {% block extra_site_css %}
+{{ css('jquery_ui') }}
 {{ css('dates.home') }}
 {% endblock %}
 
@@ -31,6 +32,11 @@
 
 <p><a name="calendarurl"></a>
 
+<div id="dialog-edit" title="Want to edit this?">
+<p>You can't edit the event but you can
+<a href="">Add a new one on top?</a></p>
+</div>
+
 <a href="{{ calendar_url }}"><img src="{{ media('img/calendar-icon.png') }}" alt="Calendar"></a>
 To add this to an external calendar (e.g. iCal or Outlook) you need this URL:
 <a href="{{ calendar_url }}">{{ calendar_url }}</a>
@@ -141,5 +147,6 @@ <h2>Who's on PTO right now?</h2>
 <script>
 var CALENDAR_FIRST_DAY = {{ first_day }}; // 0=Sunday, 1=Monday
 </script>
+{{ js('jquery_ui') }}
 {{ js('dates.home') }}
 {% endblock %}

pto/apps/dates/templates/dates/hours.html

@@ -13,7 +13,7 @@
 {% endblock %}
 
 {% block extra_site_js %}
-{{ js('dates.hours') }}
+{{ js('jquery_ui') }}
 {% endblock %}
 
 

pto/apps/dates/views.py

@@ -319,6 +319,7 @@ def can_see_details(user):
           'start': entry.start.strftime('%Y-%m-%d'),
           'end': entry.end.strftime('%Y-%m-%d'),
           'color': colors[entry.user.pk],
+          'mine': entry.user.pk == request.user.pk,
         })
 
     colors = [dict(name=x, color=y) for (pk, x, y) in colors_fullnames

pto/settings/base.py

@@ -17,7 +17,7 @@
             'css/style.css',
         ),
         'jquery_ui': (
-            'css/libs/jquery_ui/redmond/jquery-ui-1.8.19.datepicker.autocomplete.css',
+            'css/libs/jquery_ui/redmond/jquery-ui-1.8.20.datepicker.autocomplete.dialog.css',
         ),
         'libs/jquery_mobile': (
             'css/libs/jquery.mobile-1.1.0.min.css',
@@ -71,7 +71,7 @@
             'js/dates/emails_sent.js',
         ),
         'jquery_ui': (
-            'js/libs/jquery-ui-1.8.19.datepicker.autocomplete.min.js',
+            'js/libs/jquery-ui-1.8.20.datepicker.autocomplete.dialog.min.js',
         ),
         'dates.notify': (
             'js/dates/notify.js',