Added postrender callback for calendar rendering. In the test system this is used to extend the week

containers horizontally to accommodate the width of a scrollbar if necessary.

Added datepicker to pop-up form, and added date_changed parameter to the rendering callback from
the pop-up dialog handler "rc_event_edit"

Author: geekbrit

css/test.css

@@ -1,3 +1,6 @@
+h1 {
+  margin-left: 180px; }
+
 .rc_bodyweek {
   height: 400px;
   overflow-y: scroll;
@@ -8,9 +11,21 @@
 
 .event_palette {
   position: fixed;
-  top: 10px;
+  top: 50px;
   left: 10px; }
 
+.unassigned {
+  top: 300px;
+  background: #FFD;
+  width: 160px;
+  min-height: 180px;
+  border: 1px solid #888800;
+  text-align: center; }
+  .unassigned h2 {
+    font-size: 18px;
+    margin: 0;
+    padding: 0; }
+
 .ip_spacing {
   margin: 4px; }
 
@@ -59,3 +74,12 @@
   height: 1em;
   width: auto;
   margin-left: 14px; }
+
+.pf-form .pf-heading {
+  width: auto;
+  height: 160px; }
+
+.form_datepicker {
+  font-size: 80%;
+  position: absolute;
+  left: 230px; }

js/rc_calendar.js

@@ -9,6 +9,8 @@
         startdate       : new moment().valueOf(),
         render          : 'view_week',
         render_event    : 'view_week_render_event',
+        postcalrender   : function(){},
+
         get_time_offset : function( evt, ui ){return ui.offset.top + $(evt.target).parent().scrollTop() - evt.target.offsetTop;},
 
         // persistent event storage accessor functions
@@ -193,6 +195,9 @@ function Calendar( element, options )
                 }
             }
         });
+
+        // let the application do any required post-render cleanup:
+        t.options.postcalrender();
     }
 
     t.view_week = function( date, resources )
@@ -205,14 +210,24 @@ function Calendar( element, options )
     }
 
 
-    t.view_week_render_event = function( evt )
+    t.view_week_render_event = function( evt, date_changed )
     // evt : event object
     {
         // Delete the old copy of this element if it exists
         if( $('#'+evt.attr.id).length) {
             $('#'+evt.attr.id).remove( );
         }
 
+        // find new parent if the date has changed
+        if( date_changed ){ 
+            $('#'+evt.attr.resource+' > .rc_day_target').each( function(){
+                if( evt.attr.date == $(this).attr('data-date') ){
+                    evt.attr.parent = $(this).attr('id');
+                    return;
+                }
+            });
+        }
+
         var elapsed_mins= evt.attr.prep_time + evt.attr.duration + evt.attr.cleanup_time;
 
         evt.attr.end    = addMinutes_timeOfDay(
@@ -268,8 +283,8 @@ function Calendar( element, options )
         }
 
         newev.click( function(){
-            rc_event_edit( evt, function(evt){
-                t.view_week_render_event(evt);
+            rc_event_edit( evt, function(evt, date_changed){
+                t.view_week_render_event(evt, date_changed);
                 t.options.persist(evt);
                 return false;
             });

js/rc_utilities.js

@@ -46,6 +46,9 @@ function rc_event_edit( evt, callback ) {
         styling: 'jqueryui'
     });
 
+    var datepick = notice.find('.form_datepicker');
+    datepick.datepicker({defaultDate:new Date(evt.attr.date)});
+
     // populate form fields
     notice.find('.pf-field').each( function(){
         var t = $(this);
@@ -63,6 +66,9 @@ function rc_event_edit( evt, callback ) {
 
     notice.find('form.pf-form').submit(function() {
 
+        // recover date
+        var old_date  = evt.attr.date;
+        evt.attr.date = datepick.datepicker("getDate").valueOf();
 
         //!!!! [TO DO] Validate form here
 
@@ -93,6 +99,7 @@ function rc_event_edit( evt, callback ) {
         });
 
         // Close the form
+        $('#nodupe-'+evt.attr.id).remove();
         notice.pnotify({
             title: 'Thank you',
             text: 'Record successfully updated',
@@ -105,7 +112,7 @@ function rc_event_edit( evt, callback ) {
             styling: 'jqueryui'
         });
 
-        return  callback( evt );        // Rerender the event
+        return  callback( evt, evt.attr.date != old_date );        // Rerender the event
     });
 }
 

sass/test.scss

@@ -1,3 +1,5 @@
+h1{ margin-left:180px; }
+
 .rc_bodyweek{
 	height: 400px;
 	overflow-y:scroll;
@@ -11,10 +13,20 @@
 
 .event_palette {
     position: fixed;
-	top: 10px;
+	top: 50px;
 	left: 10px;
 }
 
+.unassigned {
+	top: 300px;
+	h2 { font-size:18px; margin:0; padding:0; }
+	background: #FFD;
+	width:160px;
+	min-height:180px;
+	border: 1px solid #880;
+	text-align:center;
+}
+
 .ip_spacing{ margin:4px; }
 
 .in_palette {
@@ -71,3 +83,14 @@
 	width:auto;
 	margin-left:14px;
 }
+
+.pf-form .pf-heading{
+	width:auto;
+	height: 160px;
+}
+.form_datepicker{
+	font-size:80%;
+	position:absolute;
+	left:230px;
+
+}

templates/week.template.js

@@ -62,9 +62,24 @@ var render_week = doT.template((function(){/*
 */}).heredoc());
 
 
-
-// Compiled on http://olado.github.io/doT/
-
+//
+// This function is registered as "postcalrender", a callback to be executed
+//  after every rerender of the calendars
+//
+function adjust_calendar_width()
+{
+  // expand width of containers to accommodate pesky scrollbar
+  // this is specific to the template used in the test system, but the techniques used
+  // may be useful in similar templates where the calendar is scrollable
+  var first_week = $('.rc_bodyweek').first();
+  var days  = $(first_week).find('.rc_day_target');
+  var first = $(days).first();
+  var last  = $(days).last();
+  var retries = 5;
+  while( --retries && $(first).offset().top != $(last).offset().top ){
+    $('.rc_week').animate({width: "+=10px"},0);
+  }
+}
 
 //
 //  Template for an event in the calendar

test.html

@@ -9,12 +9,17 @@
 	<link rel="stylesheet" type="text/css" href="css/test.css">
 </head>
 <body>
+	<h1>Resource Calendar Demo Page</h1>
 	<div class='event_palette'>
 		<div class='ip_spacing'><div class='rc_event client event in_palette' data-evtype='client'   ><p>Client Meeting</p></div></div>
 		<div class='ip_spacing'><div class='rc_event internal event in_palette' data-evtype='internal' ><p>Internal Meeting</p></div></div>
 		<div class='ip_spacing'><div class='rc_event vendor event in_palette' data-evtype='vendor'   ><p>Vendor Meeting</p></div></div>
 	</div>
 
+	<div class='event_palette unassigned'>
+		<h2>Unassigned Events</h2>
+	</div>
+
 	<!-- This is a container class that will hold a calendar for each of the resources defined within it -->
 	<div class='calendar'>
 	    <!-- Declare resources, set up validation function and parameters-->
@@ -42,6 +47,7 @@
 	<!-- This form is displayed by Pine Notify when editing Event details -->
 	<div id="form_event_edit" style="display: none;">
 		<form class="pf-form pform_custom" action="" method="post">
+		    <div class='form_datepicker'></div>
 			<div class="pf-element pf-heading">
 				<h3>Resource Calendar</h3>
 				<p>Edit event details here.</p>
@@ -184,24 +190,12 @@ <h3>Resource Calendar</h3>
 
 		$(document).ready(function() {
 			$('.calendar').rc_calendar({
-				persist 	: saveEvent,
-				retrieve 	: loadEvents,
-				remove  	: removeEvent,
+				persist 		: saveEvent,
+				retrieve 		: loadEvents,
+				remove  		: removeEvent,
+				postcalrender 	: adjust_calendar_width, 
 			});
 			$('.calendar').rc_calendar( 'external_events_init', $('.in_palette') );
-
-		    // expand width of containers to accommodate pesky scrollbar
-		    // this is specific to the template used in the test system, but the techniques used
-		    // may be useful in similar templates where the calendar is scrollable
-		    var first_week = $('.rc_bodyweek').first();
-		    var days  = $(first_week).find('.rc_day_target');
-		    var first = $(days).first();
-		    var last  = $(days).last();
-		    var retries = 5;
-		    while( --retries && $(first).offset().top != $(last).offset().top ){
-		    	$('.rc_week').animate({width: "+=10px"});
-		    }
-
 		});