Added application callback for resource availability / opening times

Author: geekbrit

css/rc_calendar.css

@@ -11,6 +11,16 @@
 
 .rc_day_target {
   overflow: auto; }
+  .rc_day_target .pre_day {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    background: rgba(0, 0, 0, 0.1); }
+  .rc_day_target .post_day {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    background: rgba(0, 0, 0, 0.1); }
 
 .rc_event {
   width: 99%;

js/rc_calendar.js

@@ -30,6 +30,7 @@
         render_event    : 'view_week_render_event',
         postcalrender   : function(){},
 
+        // get_time_offset calculates distance in pixels of booking from start-of-day
         get_time_offset : function( draggable, droppable ){         
                                 return draggable.offset.top - droppable.offset().top;
                           },
@@ -45,6 +46,9 @@
 
         min_time        : '07:00',   // 7am
         max_time        : '20:00',   // 8pm
+
+        get_open_time   : function( date_ms, resource ){ return ['07:00','20:00']; },
+
         interval        : 20,        // minutes
         intervalpixels  : 24, 
         weekends        : false,
@@ -386,11 +390,14 @@ function Calendar( element, options )
     //      Called during dragging and on drop, this function returns the id of a div beneath
     //      the draggable object, if that div is visible and a droppable target.
     //
+    //  [TODO - problem dragging new event onto scrolled Narwhal, ends up in Orca]
+    //
     function findDroppable( ui )
     {
         retval = false;
+        var pos = ui.offset;
 
-        // [TODO] should cache this selection...
+        // [TODO] should probably cache this selection...
         $('.ui-droppable').each(function(){
 
             var parent = $(this).parent();
@@ -399,8 +406,6 @@ function Calendar( element, options )
             var viewableTop = parent.position().top + adjust_scroll;
             var viewableBottom = viewableTop + parent.height() + adjust_scroll;
 
-            var pos = ui.position;
-
             if( pos.top  > viewableTop &&
                 pos.top  < viewableBottom &&
                 (pos.left + 20) > $(this).position().left &&
@@ -421,6 +426,8 @@ function Calendar( element, options )
             params.months = [];
             params.dows = [];
             params.dates = [];
+            params.opentime = [];
+            params.closetime = [];
             params.min_time = t.options.min_time;
             params.max_time = t.options.max_time;
             params.inc_time = t.options.interval;
@@ -443,6 +450,11 @@ function Calendar( element, options )
         //--- header ---
         for(var i = 0; i < params.col_count; i++ ) {
             params.dates[i] = dcalc.valueOf();
+
+            var openclose = t.options.get_open_time( params.dates[i], resource );
+            params.opentime[i]  = ((diffMinutes_timeOfDay( t.options.min_time, openclose[0] )/ t.options.interval) * t.options.intervalpixels);
+            params.closetime[i] = ((diffMinutes_timeOfDay( openclose[1], params.max_time )/ t.options.interval) * t.options.intervalpixels);
+
             params.dows[i]  = t.options.days[ (i+t.options.startweek) % 7 ];
             params.months[i]= (1+dcalc.getMonth());
             params.days[i]  = dcalc.getDate();

sass/rc_calendar.scss

@@ -30,6 +30,18 @@ $col_7days_width : 595/7 - 1px;
 
 .rc_day_target {
     overflow:auto;
+    .pre_day{
+    	position:absolute;
+    	top:0;
+    	width:100%;
+    	background:rgba(0,0,0,0.1);
+    }
+    .post_day{
+    	position:absolute;
+    	bottom:0;
+    	width:100%;
+    	background:rgba(0,0,0,0.1);
+    }
 }
 
 

test.html

@@ -183,6 +183,8 @@ <h3>Resource Calendar</h3>
 
     {{ for(var i = 0; i < it.col_count; i++ ) { }}
       <div class="rc_day_target {{=it.col_class}}" id="{{= it.resource_name+'_'+it.months[i]+'_'+it.days[i] }}" data-date="{{=it.dates[i]}}">
+      <div class="pre_day" style="height:{{=it.opentime[i]}}px"></div>
+      <div class="post_day" style="height:{{=it.closetime[i]}}px"></div>
         {{ for(var j = 0; j < hrcount; j++ ) { }}
           {{? it.inc_time == 15 }}
             <div class="rc_quarters_slot"></div>
@@ -335,12 +337,35 @@ <h3>Resource Calendar</h3>
 			$('.calendar').rc_calendar( 'render', moment(date).valueOf() );
 		}
 
+		//
+		// This function returns the opening and closing times for any given date
+		//  and resource (resources may have different availability, but this isn't 
+		//  shown in the example). In a real system this would be a server AJAX call,
+		//  which would include a lookup for holidays, vacations and company shutdowns
+		//
+		function openTimes( date_ms, resource )
+		{
+			var times = [
+				 ['10:00','16:30'],
+				 ['09:00','18:30'],
+				 ['08:00','19:00'],
+				 ['10:00','18:00'],
+				 ['08:00','19:00'],
+				 ['08:00','20:00'],
+				 ['09:30','18:30']
+						];
+			var d = new Date( date_ms );
+			return times[d.getDay()];
+		}
+
+
 		$(document).ready(function() {
 			$('.calendar').rc_calendar({
 				persist 		: saveEvent,
 				retrieve 		: loadEvents,
 				remove  		: removeEvent,
-				postcalrender 	: adjust_calendar_width, 
+				postcalrender 	: adjust_calendar_width,
+				get_open_time   : openTimes, 
 			});
 			$('.calendar').rc_calendar( 'external_events_init', $('.in_palette') );
 		});