Added support for 'unassigned events' stash

Author: geekbrit

js/rc_calendar.js

@@ -119,6 +119,7 @@ function Calendar( element, options )
     element.find('resource').each( function(i,element) {
         t.resources[$(this).attr('id')] = new Resource( $(this), t.options.insert_policy );
     });
+    t.resources['unassigned_event_resource'] = new Resource( $('#unassigned_event_resource'), function(){} );
 
     t.initialize_events = function(){
         t.eventmanager = new rc_EventManager( t.options.retrieve,
@@ -197,7 +198,7 @@ function Calendar( element, options )
         });
 
         // let the application do any required post-render cleanup:
-        t.options.postcalrender();
+        t.options.postcalrender( t );
     }
 
     t.view_week = function( date, resources )
@@ -219,7 +220,8 @@ function Calendar( element, options )
         }
 
         // find new parent if the date has changed
-        if( date_changed ){ 
+        // not a valid operation if the event is in the unassigned resource
+        if( date_changed && "unassigned_event_resource" != evt.attr.resource ){ 
             $('#'+evt.attr.resource+' > .rc_day_target').each( function(){
                 if( evt.attr.date == $(this).attr('data-date') ){
                     evt.attr.parent = $(this).attr('id');
@@ -273,11 +275,14 @@ function Calendar( element, options )
                 handles: 's',
 
                 stop: function( event, ui ){
-                    var snapheight = ~~(ui.size.height/t.options.intervalpixels);
+                    var snapheight = ~~((ui.size.height+(t.options.intervalpixels/2))/t.options.intervalpixels);
                     var total_mins = snapheight*t.options.interval;
 
                     evt.attr.duration = total_mins - (evt.attr.prep_time + evt.attr.cleanup_time);
                     ui.helper.css('height',snapheight * t.options.intervalpixels -2 + 'px');
+                    t.view_week_render_event(evt);
+                    t.options.persist(evt);
+
                 }
             })
         }
@@ -293,6 +298,9 @@ function Calendar( element, options )
         return false;   // this is a fix for form submit callback
     }
 
+    //
+    //  External Events Initialization
+    //
     t.external_events_init = function( events ) {
         for( var event = 0; event < events.length; event++ )
         {
@@ -549,6 +557,9 @@ function Resource( resource_element, insert_policy ) {
     //      This test can be as complex as you like, but should at least
     //      perform basic sanity checking such as ensuring that (for example)
     //      a room can accommodate all of the attendees for a meeting
+
+    // [TODO - fix this so that Resources do not have to specify validation]
+
     t.attr.validateFn = window[resource_element.attr('data-validate')];
     t.attr.validateParams = $.parseJSON(resource_element.attr('data-params'));
 
@@ -574,7 +585,7 @@ function Resource( resource_element, insert_policy ) {
     //      false: unable to add the event
     //
     t.addEvent = function( event, no_confirm ){
-        if( reason = t.attr.validateFn( event.attr, t.attr.validateParams ) ) {
+        if( $.isFunction( t.attr.validateFn ) && (reason = t.attr.validateFn( event.attr, t.attr.validateParams )) ) {
             rc_notify('Unable to add the event','The '+reason+' requirement was not met', 'error');
             return false;
         }
@@ -608,10 +619,8 @@ function Resource( resource_element, insert_policy ) {
         return t.eventpool[date];
     }
 
-    //t.findCollisions = function( event )
-
     return t;
-    }
+  }
 
 }(jQuery))
 

templates/week.template.js

@@ -66,7 +66,9 @@ var render_week = doT.template((function(){/*
 // This function is registered as "postcalrender", a callback to be executed
 //  after every rerender of the calendars
 //
-function adjust_calendar_width()
+//  calendar_state gives access to the public state of the calendar
+//
+function adjust_calendar_width( calendar_state )
 {
   // expand width of containers to accommodate pesky scrollbar
   // this is specific to the template used in the test system, but the techniques used
@@ -85,11 +87,16 @@ function adjust_calendar_width()
 //  Template for an event in the calendar
 //
 var render_week_event = doT.template((function(){/*
-<div class="rc_event event {{=it.attr.ev_type}}"
-     style="top:{{=it.attr.t_offset}}px;height:{{=it.attr.t_height}}px;"
-     id="{{=it.attr.id}}">
-  <div class="rc_event_prepad" style="height:{{=it.attr.t_prepad}}px;"></div>
-  <div class="rc_event_head">{{=it.attr.start}} - {{=it.attr.end}}<div class='deleteevent'>X</div></div>
+<div class="rc_event event {{=it.attr.ev_type}}" id="{{=it.attr.id}}"
+{{? it.attr.resource == "unassigned_event_resource"}}
+    style="height:40px;margin:4px auto;">
+    <div class="rc_event_head">Unassigned
+{{??}}
+    style="top:{{=it.attr.t_offset}}px;height:{{=it.attr.t_height}}px;">
+    <div class="rc_event_prepad" style="height:{{=it.attr.t_prepad}}px;"></div>
+    <div class="rc_event_head">{{=it.attr.start}} - {{=it.attr.end}}
+{{?}}
+  <div class='deleteevent'>X</div></div>
   <div class="rc_event_body">{{=it.attr.ev_text}}
     {{? it.attr.locked }}<img class='lockedevent' alt='locked' src='img/padlock.png'></img>{{?}}
   </div>

test.html

@@ -16,8 +16,11 @@ <h1>Resource Calendar Demo Page</h1>
 		<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 id='unassigned_event_resource' data-validate ='void' data-params ='{}' data-attr ='{}';>
+		<div class='event_palette rc_day_target unassigned' id='unassigned_events' data-date='unassigned'>
+			<h2>Unassigned Events</h2>
+			<p>You can drag events here to save them until room, date, and time have been finalized.</p>
+		</div>
 	</div>
 
 	<!-- This is a container class that will hold a calendar for each of the resources defined within it -->
@@ -115,7 +118,8 @@ <h3>Resource Calendar</h3>
 	<script src="js/rc_utilities.js" type="text/javascript"></script>
 	<script src="templates/week.template.js" type="text/javascript"></script>
 	<script src="js/rc_calendar.js" type="text/javascript"></script>
-<script type="text/javascript">
+
+    <script type="text/javascript">
 		//
 		//  Example function to verify that a resource can accept an event dropped onto it
 		//