Added support for scrollable calendars. Started adding support for insert policies

Author: geekbrit

css/test.css

@@ -1,3 +1,8 @@
+.rc_bodyweek {
+  height: 400px;
+  overflow-y: scroll;
+  overflow-x: hidden; }
+
 .calendar {
   margin-left: 180px; }
 

js/rc_calendar.js

@@ -9,14 +9,17 @@
         startdate       : new moment().valueOf(),
         render          : 'view_week',
         render_event    : 'view_week_render_event',
-        get_time_offset : function( evt, ui ){return ui.offset.top - evt.target.offsetTop;},
+        get_time_offset : function( evt, ui ){return ui.offset.top + $(evt.target).parent().scrollTop() - evt.target.offsetTop;},
 
         // persistent event storage accessor functions
         // (override with application functions in rc_calendar constructor call)
         persist         : function( evt ){},
         retrieve        : function(){ return [] },
         remove          : function(){},
 
+                          // default insert_policy is simple - allow overlaps:
+        insert_policy   : function( event_list, evt ){event_list[evt.attr.id] = evt;}, 
+
         min_time        : '07:00',   // 7am
         max_time        : '20:00',   // 8pm
         interval        : 20,        // minutes
@@ -112,7 +115,7 @@ function Calendar( element, options )
     //
     t.resources = [];
     element.find('resource').each( function(i,element) {
-        t.resources[$(this).attr('id')] = new Resource($(this),'localtest');
+        t.resources[$(this).attr('id')] = new Resource( $(this), t.options.insert_policy );
     });
 
     t.initialize_events = function(){
@@ -240,6 +243,12 @@ function Calendar( element, options )
                 helper   : 'clone',
                 zIndex   : 9999,
     /*          drag     : function( event, ui ){
+
+        // [TODO]
+        //      Update Time in helper during drag
+        //      Add "next week, previous week" drag zones?
+        //
+
                             var time_offset = t.options.get_time_offset( event, ui );
                             var start_time  = nearest_time( time_offset );
                             ui.helper.find(".rc_event_head").text(start_time);
@@ -498,8 +507,16 @@ function rc_EventManager( retrieve_events, save_event, delete_event, resources,
 //      3: live Ajax + localStorage for offline working
 
 
+//
+// [TODO] - register per-day availability times for each resource
+//      This accommodates different open/close times on different days, or
+//      worker shifts, or holiday/vacation times.
+//
+//  Implement regular hours function, and specific overrides
+//
+
 
-function Resource( resource_element, init_mode ) {
+function Resource( resource_element, insert_policy ) {
     var t = this;
 
     //
@@ -509,6 +526,7 @@ function Resource( resource_element, init_mode ) {
     t.eventpool = {};
 
     t.id   = resource_element.attr('id');
+    t.insert_policy = insert_policy;
     t.attr = $.parseJSON(resource_element.attr('data-attr'));
 
     //
@@ -547,15 +565,14 @@ function Resource( resource_element, init_mode ) {
         }
         else {
 
-                // [TODO - add in policy code for overlapping events, locked events]
-
-
-
             if( "undefined" == typeof( t.eventpool[event.attr.date] ) ){
                 t.eventpool[event.attr.date] = [];
             }
 
-            t.eventpool[event.attr.date][event.attr.id] = event;
+            //
+            // Policy code for overlapping events, locked events
+            //
+            t.insert_policy( t.eventpool[event.attr.date], event );
 
             if( undefined == no_confirm ){
                 var formatted_date = new moment( event.attr.date ).format("dddd, Do MMM YYYY");

js/rc_utilities.js

@@ -255,4 +255,23 @@ function confirm(message, callback, param) {
             $('#confirm').remove();
         }
     });
-}
+}
+
+
+//
+//  insert_shuffle_meeting
+//  ======================
+//      This is an example callback function that is called when an event is dropped onto
+//      a resource calendar day. Parameters are a list of all events for that resource on
+//      that day, the event that has been dropped onto the calendar, 
+///?????and the function that
+//      is called to rerender moved events.????? 
+//
+//      This example attempts to insert the new event; if the new event overlaps an earlier
+//      event, then it is bumped forward to the end of the existing meeting. Any existing
+//      meetings starting at or after the new meeting are bumped forward, with gaps between
+//      meetings being reduced to minimize disruptions to existing meetings.
+//
+//      The insert will fail if it would require a locked meeting to be bumped, or if a moved
+//      meeting would be pushed beyond the end-of-day for the calendar.
+//

sass/test.scss

@@ -1,3 +1,10 @@
+.rc_bodyweek{
+	height: 400px;
+	overflow-y:scroll;
+	overflow-x:hidden;
+}
+
+
 .calendar {
 	margin-left:180px;
 }

templates/week.template.js

@@ -21,7 +21,8 @@ var render_week = doT.template((function(){/*
   {{ for(var i = 0; i < it.col_count; i++ ) { }}
     <div class="{{=it.col_class}}">{{=it.dows[i]+' '+it.months[i]+'/'+it.days[i]}}</div>
   {{ } }}
-  <div class="rc_bodyweek" id='{{=it.resource_id}}'>
+  </div>
+  <div class="rc_bodyweek clearfix" id='{{=it.resource_id}}'>
   <div class="rc_gutter">
   {{var hrcount =0; var t = it.min_time; do { }}
   	<div class='rc_hour_slot'>{{=t}}</div>
@@ -54,7 +55,10 @@ var render_week = doT.template((function(){/*
   {{ } }}
   </div>
 </div>
-{{ $('.calimg').click(function(){ $(this).datepicker( "dialog", {{= it.baseDate }}, dateSelect ) }); }}
+{{
+    $('.calimg').click(function(){ $(this).datepicker( "dialog", {{= it.baseDate }}, dateSelect ) });
+}}
+
 */}).heredoc());
 
 

test.html

@@ -189,8 +189,22 @@ <h3>Resource Calendar</h3>
 				remove  	: removeEvent,
 			});
 			$('.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"});
+		    }
+
 		});
 
+
 	</script>
 </body>
 </html>