The multiColumns view

UI/Scheduler/English.lproj/Localizable.strings

@@ -542,6 +542,12 @@ vtodo_class2 = "(Confidential task)";
 "tagWasRemoved" = "If you remove this calendar from synchronization, you'll need to reload the data on your mobile device.\nContinue?";
 "DestinationCalendarError" = "The source and destination calendars are the same. Please try to copy to a different calendar.";
 "EventCopyError" = "The copy failed. Please try to copy to a difference calendar.";
+"Please select at least one calendar" = "Please select at least one calendar";
+"notice:" = "notice:";
+"error:" = "error:";
+"success:" = "success:";
+"warning:" = "warning:";
+
 
 "Open Task..." = "Open Task...";
 "Mark Completed" = "Mark Completed";

UI/Scheduler/Toolbars/SOGoAppointmentFolders.toolbar

@@ -21,12 +21,11 @@
       onclick = "return onDayOverview();";
       image = "day-view.png";
       tooltip = "Switch to day view"; },
-    /* disabled until we fix the view */
+    { link = "#";
-    /*    { link = "#";
+      label="Multi-Columns View";
-            label="Multicolumn Day View";
       onclick = "return onMulticolumnDayOverview();";
       image = "day-view-multicolumn.png";
-            tooltip = ""; }, */
+      tooltip = "Switch to multi-columns day view"; },
     { link = "#";
       label="Week View";
       onclick = "return onWeekOverview();";

UI/Scheduler/UIxCalDayTable.h

@@ -35,27 +35,27 @@
 
 @interface UIxCalDayTable : UIxCalView
 {
-  unsigned int numberOfDays;
-  NSCalendarDate *startDate;
-  NSCalendarDate *currentTableDay;
-  NSString *currentTableHour;
-  NSMutableArray *daysToDisplay;
-  NSMutableArray *hoursToDisplay;
-  NSArray *weekDays;
   SOGoDateFormatter *dateFormatter;
-  NSString *timeFormat;
+  NSArray *weekDays;
+  NSString *currentView, *timeFormat, *currentTableHour;
+  NSCalendarDate *startDate, *currentTableDay;
+  NSMutableArray *daysToDisplay, *calendarsToDisplay,  *currentCalendar, *hoursToDisplay;
+  unsigned int numberOfDays;
 }
 
 - (void) setNumberOfDays: (NSNumber *) aNumber;
 - (NSNumber *) numberOfDays;
+- (NSString *) currentView;
 
 - (void) setStartDate: (NSCalendarDate *) aStartDate;
 - (NSCalendarDate *) startDate;
 - (NSCalendarDate *) endDate;
 
 - (NSArray *) daysToDisplay;
+- (NSArray *) calendarsToDisplay;
 - (void) setCurrentTableDay: (NSCalendarDate *) aTableDay;
 - (NSCalendarDate *) currentTableDay;
+- (NSMutableArray *) currentCalendar;
 
 @end
 

UI/Scheduler/UIxCalDayTable.m

@@ -55,9 +55,12 @@
       ASSIGN (timeFormat, [ud timeFormat]);
 
       daysToDisplay = nil;
+      calendarsToDisplay = nil;
       hoursToDisplay = nil;
       numberOfDays = 1;
       startDate = nil;
+      currentView = nil;
+      currentCalendar = nil;
       currentTableDay = nil;
       currentTableHour = nil;
       weekDays = [locale objectForKey: NSShortWeekDayNameArray];
@@ -75,6 +78,9 @@
 //     [allAppointments release];
   [weekDays release];
   [daysToDisplay release];
+  [calendarsToDisplay release];
+  [currentView release];
+  [currentCalendar release];
   [hoursToDisplay release];
   [dateFormatter release];
   [timeFormat release];
@@ -119,6 +125,16 @@
   return [endDate endOfDay];
 }
 
+- (void) setCurrentView: (NSString *) aView
+{
+  currentView = [NSString stringWithString:aView];
+}
+
+- (NSString *) currentView
+{
+  return currentView;
+}
+
 - (NSArray *) hoursToDisplay
 {
   unsigned int currentHour, lastHour;
@@ -154,6 +170,7 @@
     daysToDisplay = [NSMutableArray new];
     currentDate = [[self startDate] hour: [self dayStartHour]
                                   minute: 0];
+    
     for (count = 0; count < numberOfDays; count++)
     {
       [daysToDisplay addObject: currentDate];
@@ -164,6 +181,50 @@
   return daysToDisplay;
 }
 
+- (NSArray *) calendarsToDisplay
+{
+  if (!calendarsToDisplay) {
+    int max=0, i;
+    NSArray *folders;
+    SOGoAppointmentFolders *co;
+    SOGoAppointmentFolder *folder;
+    NSMutableDictionary *calendar;
+    unsigned int count, foldersCount;
+    NSString *folderName, *fDisplayName;
+    NSNumber *isActive;
+
+    co = [self clientObject];
+    folders = [co subFolders];
+    foldersCount = [folders count];
+    calendarsToDisplay = [[NSMutableArray alloc] initWithCapacity: foldersCount];
+    for (count = 0; count < foldersCount; count++)
+    {
+      folder = [folders objectAtIndex: count];
+      isActive = [NSNumber numberWithBool: [folder isActive]];
+      if ([isActive intValue] != 0) {
+        calendar = [NSMutableDictionary dictionary];
+        folderName = [folder nameInContainer];
+        fDisplayName = [folder displayName];
+        if (fDisplayName == nil)
+          fDisplayName = @"";
+        if ([fDisplayName isEqualToString: [co defaultFolderName]])
+          fDisplayName = [self labelForKey: fDisplayName];
+        [calendar setObject: [NSString stringWithFormat: @"/%@", folderName]
+                     forKey: @"id"];
+        [calendar setObject: fDisplayName forKey: @"displayName"];
+        [calendar setObject: folderName forKey: @"folder"];
+        [calendar setObject: [folder calendarColor] forKey: @"color"];
+        [calendar setObject: isActive forKey: @"active"];
+        [calendar setObject: [folder ownerInContext: context]
+                     forKey: @"owner"];
+        [calendarsToDisplay addObject: calendar];
+      }
+    }
+  }
+  
+  return calendarsToDisplay;
+}
+
 - (void) setCurrentTableDay: (NSCalendarDate *) aTableDay
 {
   currentTableDay = aTableDay;
@@ -174,6 +235,16 @@
   return currentTableDay;
 }
 
+- (void) setCurrentCalendar: (NSMutableArray *) aCalendar
+{
+  currentCalendar = aCalendar;
+}
+
+- (NSMutableArray *) currentCalendar
+{
+  return currentCalendar;
+}
+
 - (void) setCurrentTableHour: (NSString *) aTableHour
 {
   currentTableHour = aTableHour;
@@ -226,6 +297,16 @@
   return [dateFormatter shortFormattedDate: currentTableDay];
 }
 
+- (NSString *) labelForCalendar
+{
+  return [NSString stringWithFormat:[currentCalendar objectForKey:@"displayName"]];
+}
+
+- (NSString *) colorForCalendar
+{
+  return [NSString stringWithFormat:[currentCalendar objectForKey:@"color"]];
+}
+
 // - (NSDictionary *) _adjustedAppointment: (NSDictionary *) anAppointment
 //                                forStart: (NSCalendarDate *) start
 //                                  andEnd: (NSCalendarDate *) end
@@ -318,7 +399,15 @@
 
 - (NSString *) daysViewClasses
 {
-  return [NSString stringWithFormat: @"daysView daysViewFor%dDays", numberOfDays];
+  NSString *daysView;
+  
+  if ([currentView isEqualToString:@"multicolumndayview"])
+    daysView = @"daysView daysViewForMultipleDays";
+
+  else
+    daysView = [NSString stringWithFormat: @"daysView daysViewFor%dDays", numberOfDays];
+  
+  return daysView;
 }
 
 - (NSString *) dayClasses
@@ -326,11 +415,16 @@
   NSMutableString *classes;
   unsigned int currentDayNbr, realDayOfWeek;
   
+  classes = [NSMutableString string];
+  if ([currentView isEqualToString:@"multicolumndayview"])
+    [classes appendFormat:@"day dayColumn"];
+
+  else {
     currentDayNbr = [daysToDisplay indexOfObject: currentTableDay];
     realDayOfWeek = [currentTableDay dayOfWeek];
     
-  classes = [NSMutableString string];
     [classes appendFormat: @"day day%d", currentDayNbr];
+    
     if (numberOfDays > 1)
     {
       if (realDayOfWeek == 0 || realDayOfWeek == 6)
@@ -338,6 +432,7 @@
       if ([currentTableDay isToday])
         [classes appendString: @" dayOfToday"];
     }
+  }
        
   return classes;
 }
@@ -358,4 +453,24 @@
   return cellClass;
 }
 
+- (BOOL) isMultiColumnView
+{
+  BOOL flag = NO;
+  
+  if ([currentView isEqualToString:@"multicolumndayview"])
+    flag = YES;
+  
+  return flag;
+}
+
+- (BOOL) isNotMultiColumnView
+{
+  BOOL flag = NO;
+  
+  if ([currentView isEqualToString:@"dayview"] || [currentView isEqualToString:@"weekview"])
+    flag = YES;
+  
+  return flag;
+}
+
 @end

UI/Scheduler/UIxCalListingActions.h

@@ -43,6 +43,7 @@
   NSString *value;
   NSString *criteria;
   NSString *userLogin;
+  NSString *currentView;
   BOOL dayBasedView;
   WORequest *request;
   SOGoDateFormatter *dateFormatter;

UI/Scheduler/UIxCalListingActions.m

@@ -78,6 +78,8 @@ static NSArray *tasksFields = nil;
 #define maxBlocks (offsetBlocks * 2)    // maximum number of blocks to search
 // for a free slot (10 days)
 
+@class SOGoAppointment;
+
 @implementation UIxCalListingActions
 
 + (void) initialize
@@ -121,6 +123,7 @@ static NSArray *tasksFields = nil;
     ASSIGN (dateFormatter, [user dateFormatterInContext: context]);
     ASSIGN (userTimeZone, [[user userDefaults] timeZone]);
     dayBasedView = NO;
+    currentView = nil;
   }
   
   return self;
@@ -239,6 +242,7 @@ static NSArray *tasksFields = nil;
       endDate = nil;
     
     param = [request formValueForKey: @"view"];
+    currentView = param;
     dayBasedView = ![param isEqualToString: @"monthview"];
   }
 }
@@ -1044,19 +1048,89 @@ _computeBlocksPosition (NSArray *blocks)
   /* ... _computeBlocksMultiplier() ... */
 }
 
+- (NSArray *) _selectedCalendars {
+  SOGoAppointmentFolders *co;
+  SOGoAppointmentFolder *folder;
+  NSMutableArray *selectedCalendars;
+  NSArray *folders;
+  NSString *fDisplayName;
+  NSNumber *isActive;
+  unsigned int count, foldersCount;
+  int max=0, i;
+  
+  co = [self clientObject];
+  folders = [co subFolders];
+  foldersCount = [folders count];
+  selectedCalendars = [[NSMutableArray alloc] initWithCapacity: foldersCount];
+  for (count = 0; count < foldersCount; count++)
+  {
+    folder = [folders objectAtIndex: count];
+    isActive = [NSNumber numberWithBool: [folder isActive]];
+    if ([isActive intValue] != 0) {
+      fDisplayName = [folder displayName];
+      if (fDisplayName == nil)
+        fDisplayName = @"";
+      if ([fDisplayName isEqualToString: [co defaultFolderName]])
+        fDisplayName = [self labelForKey: fDisplayName];
+      [selectedCalendars addObject: fDisplayName];
+    }
+  }
+  return selectedCalendars;
+}
+
 - (WOResponse *) eventsBlocksAction
 {
   int count, max;
   NSArray *events, *event, *eventsBlocks;
-  NSMutableArray *allDayBlocks, *blocks, *currentDay;
+  NSMutableArray *allDayBlocks, *blocks, *currentDay, *calendars, *eventsByCalendars, *eventsForCalendar;
   NSNumber *eventNbr;
   BOOL isAllDay;
+  int i, j;
   
   [self _setupContext];
   
+  events = [self _fetchFields: eventsFields forComponentOfType: @"vevent"];
+  
+  if ([currentView isEqualToString: @"multicolumndayview"])
+  {
+    calendars = [self _selectedCalendars];
+    eventsByCalendars = [NSMutableArray arrayWithCapacity:[calendars count]];
+    for (i = 0; i < [calendars count]; i++) // For each calendar
+    {
+      eventsForCalendar = [NSMutableArray array];
+      [self _prepareEventBlocks: &blocks withAllDays: &allDayBlocks];
+      for (j = 0; j < [events count]; j++) {
+        if ([[[events objectAtIndex:j] objectAtIndex:2] isEqualToString:[calendars objectAtIndex:i]]) {
+          [eventsForCalendar addObject: [events objectAtIndex:j]];
+        }
+      }
+      eventsBlocks = [NSArray arrayWithObjects:eventsForCalendar, allDayBlocks, blocks, nil];
+      max = [eventsForCalendar count];
+      for (count = 0; count < max; count++)
+      {
+        event = [eventsForCalendar objectAtIndex: count];
+        eventNbr = [NSNumber numberWithUnsignedInt: count];
+        isAllDay = [[event objectAtIndex: eventIsAllDayIndex] boolValue];
+        if (dayBasedView && isAllDay)
+          [self _fillBlocks: allDayBlocks withEvent: event withNumber: eventNbr];
+        else
+          [self _fillBlocks: blocks withEvent: event withNumber: eventNbr];
+      }
+      max = [blocks count];
+      for (count = 0; count < max; count++)
+      {
+        currentDay = [blocks objectAtIndex: count];
+        [currentDay sortUsingSelector: @selector (compareEventByStart:)];
+        [self _addBlocksWidth: currentDay];
+      }
+      
+      [eventsByCalendars insertObject:eventsBlocks atIndex:i];
+    }
+    return [self _responseWithData: eventsByCalendars];
+  }
+  else
+  {
     [self _prepareEventBlocks: &blocks withAllDays: &allDayBlocks];
-  events = [self _fetchFields: eventsFields
-           forComponentOfType: @"vevent"];
     eventsBlocks = [NSArray arrayWithObjects: events, allDayBlocks, blocks, nil];
     max = [events count];
     for (count = 0; count < max; count++)
@@ -1082,9 +1156,8 @@ _computeBlocksPosition (NSArray *blocks)
       [currentDay sortUsingSelector: @selector (compareEventByStart:)];
       [self _addBlocksWidth: currentDay];
     }
-  
     return [self _responseWithData: eventsBlocks];
-  //   timeIntervalSinceDate:
+  }
 }
 
 - (NSString *) _getStatusClassForStatusCode: (int) statusCode

UI/Scheduler/UIxCalMulticolumnDayView.m

@@ -40,13 +40,13 @@
 {
   if ((self = [super init]))
   {
-//       allAppointments = nil;
+    //       allAppointments = nil;
     subscriptionUsers = nil;
     hoursToDisplay = nil;
     currentTableUser = nil;
     currentTableHour = nil;
-//       dateFormatter = [[SOGoDateFormatter alloc]
+    //       dateFormatter = [[SOGoDateFormatter alloc]
-//                         initWithLocale: [self locale]];
+    //                         initWithLocale: [self locale]];
   }
   
   return self;
@@ -54,10 +54,10 @@
 
 - (void) dealloc
 {
-//   [allAppointments release];
+  //   [allAppointments release];
   [subscriptionUsers release];
   [hoursToDisplay release];
-//   [dateFormatter release];
+  //   [dateFormatter release];
   [super dealloc];
 }
 
@@ -188,16 +188,6 @@
 
 /* fetching */
 
-// - (NSCalendarDate *) startDate
-// {
-//   return [[self selectedDate] beginOfDay];
-// }
-
-// - (NSCalendarDate *) endDate
-// {
-//   return [[self selectedDate] endOfDay];
-// }
-
 // - (NSArray *) appointmentsForCurrentUser
 // {
 //   NSMutableArray *filteredAppointments;
@@ -292,4 +282,11 @@
                                      * (100.0 / [users count]))];
 }
 
+- (id <WOActionResults>) defaultAction
+{
+  [super setCurrentView: @"multicolumndayview"];
+  
+  return self;
+}
+
 @end

UI/Templates/SchedulerUI/UIxCalDayTable.wox

@@ -7,51 +7,105 @@
   xmlns:rsrc="OGo:url"
   xmlns:label="OGo:label">
   <div id="calendarHeader" var:class="daysViewClasses">
-    <div class="dayLabels"
-      ><var:foreach list="daysToDisplay" item="currentTableDay"
-	><div var:class="dayClasses"
-	  ><var:string value="labelForDate"/><br
-	    /><span class="dayOfWeek"><var:string value="labelForDay"/></span
-	    ></div
-	  ></var:foreach>
-    </div>
-    <div class="days"
-      ><var:foreach list="daysToDisplay" item="currentTableDay"
-	><div var:class="dayClasses"
-	  var:day="currentTableDay.shortDateString"
-          var:id="currentAllDayId"
-	  hour="allday"
-	  ><!-- space --></div
-	  ></var:foreach
-	></div>
-  </div>
 
-  <div id="daysView" var:class="daysViewClasses">
+<!-- MultiColumnView -->
-    <div class="hours"
+    <!-- Display the name of the calendar -->
-      ><var:foreach list="hoursToDisplay" item="currentTableHour"
+    <var:if condition="isMultiColumnView">
-        ><div class="hour" var:id="currentHourId"
+      <div class="calendarLabels">
-          ><var:string value="currentTableHour"/></div
+        <var:foreach list="calendarsToDisplay" item="currentCalendar">
-          ></var:foreach>
+          <div class="calendarsToDisplay">
-    </div>
+            <var:string value="labelForCalendar"/>
-
-    <div class="days">
-      <var:foreach list="daysToDisplay" item="currentTableDay"
-        ><div var:class="dayClasses"
-          var:id="currentDayId"
-          var:day-number="currentDayNumber"
-          var:day="currentTableDay.shortDateString">
-          <div class="hourCells">
-            <var:foreach list="hoursToDisplay" item="currentTableHour"
-              ><div var:class="clickableHourCellClass"
-        	var:day="currentTableDay.shortDateString"
-        	var:hour="currentAppointmentHour">
-              <span class="minutes15"><!-- space --></span>
-              <span class="minutes30"><!-- space --></span>
-              <span class="minutes45"><!-- space --></span>
-            </div></var:foreach></div>
-          <div class="events"><!-- space --></div>
           </div>
         </var:foreach>
       </div>
+      
+      <!-- Display today abreviation and date -->
+      <div class="dayLabels">
+        <var:foreach list="daysToDisplay" item="currentTableDay">
+          <div var:class="dayClasses">
+            <var:string value="labelForDate"/><br/>
+            <span class="dayOfWeek"><var:string value="labelForDay"/></span>
+          </div>
+        </var:foreach>
+      </div>
+      
+      <!-- All day cells -->
+      <div class="days">
+        <var:foreach list="calendarsToDisplay" item="currentCalendar">
+          <var:foreach list="daysToDisplay" item="currentTableDay">
+            <div var:class="dayClasses" var:day="currentTableDay.shortDateString" var:id="currentAllDayId" hour="allday"><!-- space --></div>
+          </var:foreach>
+        </var:foreach>
+      </div>
+    </var:if>
+
+<!-- DayView or WeekView -->
+    <var:if condition="isNotMultiColumnView">
+      <!-- Display today abreviation and date -->
+      <div class="dayLabels">
+        <var:foreach list="daysToDisplay" item="currentTableDay">
+          <div var:class="dayClasses">
+            <var:string value="labelForDate"/><br/>
+            <span class="dayOfWeek"><var:string value="labelForDay"/></span>
+          </div>
+        </var:foreach>
+      </div>
+    
+      <!-- All day cells -->
+      <div class="days">
+        <var:foreach list="daysToDisplay" item="currentTableDay">
+          <div var:class="dayClasses" var:day="currentTableDay.shortDateString" var:id="currentAllDayId" hour="allday"><!-- space --></div>
+        </var:foreach>
+      </div>
+    </var:if>
+  </div>
+  
+  
+  <!-- The hours cells -->
+  <div id="daysView" var:class="daysViewClasses">
+    <div class="hours">
+      <var:foreach list="hoursToDisplay" item="currentTableHour">
+        <div class="hour" var:id="currentHourId">
+          <var:string value="currentTableHour"/>
+        </div>
+      </var:foreach>
+    </div>
+    <div class="days">
+      <!-- MultiColumnView -->
+      <var:if condition="isMultiColumnView">
+        <var:foreach list="calendarsToDisplay" item="currentCalendar">
+          <var:foreach list="daysToDisplay" item="currentTableDay">
+            <div var:class="dayClasses" var:id="currentDayId" var:day-number="currentDayNumber" var:day="currentTableDay.shortDateString">
+              <div class="hourCells">
+                <var:foreach list="hoursToDisplay" item="currentTableHour">
+                  <div var:class="clickableHourCellClass" var:day="currentTableDay.shortDateString" var:hour="currentAppointmentHour">
+                    <span class="minutes15"><!-- space --></span>
+                    <span class="minutes30"><!-- space --></span>
+                    <span class="minutes45"><!-- space --></span>
+                  </div>
+                </var:foreach>
+              </div>
+              <div class="events"><!-- space --></div>
+            </div>
+          </var:foreach>
+        </var:foreach>
+      </var:if>
+      <var:if condition="isNotMultiColumnView">
+        <var:foreach list="daysToDisplay" item="currentTableDay">
+          <div var:class="dayClasses" var:id="currentDayId" var:day-number="currentDayNumber" var:day="currentTableDay.shortDateString">
+            <div class="hourCells">
+              <var:foreach list="hoursToDisplay" item="currentTableHour">
+                <div var:class="clickableHourCellClass" var:day="currentTableDay.shortDateString" var:hour="currentAppointmentHour">
+                  <span class="minutes15"><!-- space --></span>
+                  <span class="minutes30"><!-- space --></span>
+                  <span class="minutes45"><!-- space --></span>
+                </div>
+              </var:foreach>
+            </div>
+            <div class="events"><!-- space --></div>
+          </div>
+        </var:foreach>
+      </var:if>
+    </div>
   </div>
 </container>

UI/Templates/SchedulerUI/UIxCalDayView.wox

@@ -40,6 +40,7 @@
           className="UIxCalDayTable"
           startDate="startDate"
           const:CSSClass="dayOverview"
-          const:numberOfDays="1" />
+          const:numberOfDays="1"
+          const:currentView="dayview"/>
     </div>
   </container>

UI/Templates/SchedulerUI/UIxCalMulticolumnDayView.wox

@@ -5,40 +5,33 @@
     xmlns:const="http://www.skyrix.com/od/constant"
     xmlns:rsrc="OGo:url"
     xmlns:label="OGo:label">
-    <a href="#"
-      id="leftNavigationArrow"
-      var:date="prevDayQueryParameters.day"
-      onclick="return onCalendarGotoDay(this);"
-      ><img rsrc:src="arrow-left.png"/></a>
-    <span class="daysHeader">
-      <span class="day2"><a href="#"
-          var:date="dayBeforePrevDayQueryParameters.day"
-          onclick="return onCalendarGotoDay(this);"
-          ><var:string value="dayBeforeYesterdayName"
-            /></a></span
-        ><span class="day1"><a href="#"
-          var:date="prevDayQueryParameters.day"
-          onclick="return onCalendarGotoDay(this);"
-          ><var:string value="yesterdayName"
-            /></a></span
-        ><span class="day0"><var:string value="currentDayName" /></span
-        ><span class="day1"><a href="#"
-          var:date="nextDayQueryParameters.day"
-          onclick="return onCalendarGotoDay(this);"
-          ><var:string value="tomorrowName"
-            /></a></span
-        ><span class="day2"><a href="#"
-          var:date="dayAfterNextDayQueryParameters.day"
-          onclick="return onCalendarGotoDay(this);"
-          ><var:string value="dayAfterTomorrowName"
-            /></a></span
-        ></span>
-    <a href="#"
-      id="rightNavigationArrow"
-      var:date="nextDayQueryParameters.day"
-      onclick="return onCalendarGotoDay(this);"
-      ><img rsrc:src="arrow-right.png"/></a>
     
+    <div class="menu" id="currentViewMenu">
+      <ul>
+        <li><var:string label:value="New Event..."/></li>
+        <li><var:string label:value="New Task..."/></li>
+        <li><!-- separator --></li>
+        <li><var:string label:value="Previous Day"/></li>
+        <li><var:string label:value="Next Day"/></li>
+        <li><!-- separator --></li>
+        <li><var:string label:value="Delete Event"/></li>
+        <li><var:string label:value="Copy event to my calendar"/></li>
+        <li><var:string label:value="View Raw Source"/></li>
+      </ul>
+    </div>
+    <!-- Navigation header -->
+    <span class="daysHeader">
+      <span class="day1">
+        <a href="#" id="leftNavigationArrow" var:date="prevDayQueryParameters.day" onclick="return onCalendarGotoDay(this);">
+          <img rsrc:src="arrow-left.png"/></a></span>
+      <span class="day0"><var:string value="currentDayName" /></span>
+      <span class="day1">
+        <a href="#" id="rightNavigationArrow" var:date="nextDayQueryParameters.day" onclick="return onCalendarGotoDay(this);">
+          <img rsrc:src="arrow-right.png"/></a></span>
+      <a href="#" id="listCollapse"><img var:class="collapseBtnClass" rsrc:src="collapse.png"/></a>
+    </span>
+
+    <!-- TODO : Move this inside the schedulerUI.css -->
     <style type="text/css">
       DIV.day
       {
@@ -52,68 +45,12 @@
       </var:foreach>
     </style>
     
+    <!-- Display the calendar header and the table view -->
     <div id="calendarContent">
-      <div id="daysView" class="daysView multicolumnDayView">
+      <var:component
-        <div class="hours">
+      className="UIxCalDayTable"
-          <var:foreach list="hoursToDisplay" item="currentTableHour"
+      startDate="startDate"
-            ><div class="hour"><var:string value="currentTableHour" />:00</div
+      const:CSSClass="dayOverview"
-              ></var:foreach>
+      const:currentView="multicolumndayview"/>
-        </div>
-        <div class="hourLines">
-          <div class="hourLine hourLine0"><!-- space --></div
-            ><div class="hourLine hourLine1"><!-- space --></div
-            ><div class="hourLine hourLine2"><!-- space --></div
-            ><div class="hourLine hourLine3"><!-- space --></div
-            ><div class="hourLine hourLine4"><!-- space --></div
-            ><div class="hourLine hourLine5"><!-- space --></div
-            ><div class="hourLine hourLine6"><!-- space --></div
-            ><div class="hourLine hourLine7"><!-- space --></div
-            ><div class="hourLine hourLine8"><!-- space --></div
-            ><div class="hourLine hourLine9"><!-- space --></div
-            ><div class="hourLine hourLine10"><!-- space --></div
-            ><div class="hourLine hourLine11"><!-- space --></div
-            ><div class="hourLine hourLine12"><!-- space --></div
-            ><div class="hourLine hourLine13"><!-- space --></div
-            ><div class="hourLine hourLine14"><!-- space --></div
-            ><div class="hourLine hourLine15"><!-- space --></div
-            ><div class="hourLine hourLine16"><!-- space --></div
-            ><div class="hourLine hourLine17"><!-- space --></div
-            ><div class="hourLine hourLine18"><!-- space --></div
-            ><div class="hourLine hourLine19"><!-- space --></div
-            ><div class="hourLine hourLine20"><!-- space --></div
-            ><div class="hourLine hourLine21"><!-- space --></div
-            ><div class="hourLine hourLine22"><!-- space --></div
-            ><div class="hourLine hourLine23"><!-- space --></div>
-        </div>
-
-        <div class="days" var:day="selectedDate.shortDateString">
-          <var:foreach list="subscriptionUsers" item="currentTableUser"
-            ><div var:class="currentUserClasses"
-              var:user="currentTableUser"
-              ><div class="header"><var:string value="currentTableUser" /></div>
-              <div class="appointments">
-                <var:foreach list="hoursToDisplay" item="currentTableHour"
-                  ><div var:class="clickableHourCellClass"
-                    var:hour="currentAppointmentHour">
-                  </div></var:foreach>
-                <var:foreach list="appointmentsForCurrentUser" item="currentAppointment"
-                  ><var:component className="UIxCalInlineAptView"
-                    dayStartHour="dayStartHour"
-                    dayEndHour="dayEndHour"
-                    appointment="currentAppointment"
-                    formatter="aptFormatter"
-                    tooltipFormatter="aptTooltipFormatter"
-                    url="appointmentViewURL"
-                    const:style="dayoverview"
-                    queryDictionary="currentDateQueryParameters"
-                    referenceDate="selectedDate"
-                    canAccess="canAccessApt"
-                    /></var:foreach
-                  >
-              </div>
-            </div>
-          </var:foreach>
-        </div>
-      </div>
     </div>
   </container>

UI/Templates/SchedulerUI/UIxCalWeekView.wox

@@ -40,6 +40,7 @@
           className="UIxCalDayTable"
           startDate="startDate"
           const:CSSClass="weekOverview"
-          const:numberOfDays="7" />
+          const:numberOfDays="7"
+          const:currentView="weekview"/>
     </div>
   </container>

UI/WebServerResources/SchedulerUI.css

@@ -392,7 +392,7 @@ DIV#daysView
   left: 0px; }
 
 DIV#daysView
-{ top: 120px;
+{ top: 97px;
   bottom: 0px;
   border-top: 1px solid #ccc;
   overflow: auto;
@@ -400,11 +400,12 @@ DIV#daysView
   right: 0px;}
 
 DIV#calendarHeader
-{ top: 50px;
+{ top: 25px;
   border: 0px;
-  height: 100px;
+  height: 85px;
   right: 0px; }
 
+DIV#calendarHeader DIV.calendarLabels,
 DIV#calendarHeader DIV.dayLabels,
 DIV#calendarHeader DIV.days
 { position: absolute;
@@ -414,8 +415,16 @@ DIV#calendarHeader DIV.days
   /* 'right' is computed from JS code when daysView is first drawn */
   overflow: hidden; }
 
+DIV#calendarHeader DIV.calendarLabels
+{ top: 11px;
+  height: 20px; 
+  border-left: 1px solid #ccc;
+  text-align: center;
+  font-style:italic;
+  font-size:150%;
+}
 DIV#calendarHeader DIV.dayLabels
-{ top: 0px;
+{ top: 32px;
   height: 35px; }
 
 DIV#calendarHeader DIV.dayLabels DIV.day
@@ -432,7 +441,11 @@ DIV#calendarHeader DIV.dayLabels
 DIV#calendarHeader DIV.days
 { cursor: pointer;
   bottom: 0px;
-  top: 35px; }
+  top: 67px;
+  z-index:0;
+  border-bottom:1px solid #ccc;
+  background:white;
+ }
 
 DIV#calendarHeader DIV.day,
 DIV#daysView DIV.day
@@ -530,7 +543,8 @@ DIV.monthView DIV.dayHeader
   text-align: right;
   cursor: pointer;
   color: #666;
-  -moz-user-select: none; }
+  -moz-user-select: none; 
+  }
 
 DIV#monthDaysView DIV.selectedDay DIV.dayHeader
 { font-weight: bold; }
@@ -540,7 +554,8 @@ DIV.monthView DIV.days
   cursor: pointer;
   bottom: 0px;
   left: 0px;
-  right: 0px; }
+  right: 0px; 
+  }
 
 DIV.monthView DIV.day
 { position: absolute;
@@ -1471,7 +1486,7 @@ DIV.event.draggable:hover DIV.rightDragGrip
 #ghostEndHour
 { bottom: -14px; }
 
-DIV#nowLineDisplay
+DIV.nowLineDisplay
 { position: relative;
   width: 100%;
   height: 2px;
@@ -1486,3 +1501,38 @@ DIV#freeBusyReplicas DIV
 { display: inline-block; height: 2em; }
 TD.attendees A.button
 { float: left; left: 19px; margin-top: 5px; }
+
+DIV#calendarContent .alert-box {
+    color:#555;
+    border-radius:10px;
+    font-family:Tahoma,Geneva,Arial,sans-serif;font-size:11px;
+    padding:10px 10px 10px 36px;
+    margin:10px;
+}
+
+DIV#calendarContent .alert-box span {
+    font-weight:bold;
+    text-transform:uppercase;
+}
+
+.error {
+    background:#ffecec url('error.png') no-repeat 10px 50%;
+    border:1px solid #f5aca6;
+}
+.success {
+    background:#e9ffd9 url('success.png') no-repeat 10px 50%;
+    border:1px solid #a6ca8a;
+}
+.warning {
+    background:#fff8c4 url('warning.png') no-repeat 10px 50%;
+    border:1px solid #f2c779;
+}
+.notice {
+    background:#e3f7fc url('notice.png') no-repeat 10px 50%;
+    border:1px solid #8ed9f6;
+}
+
+
+
+
+

UI/WebServerResources/SchedulerUI.js

@@ -34,6 +34,8 @@ var categoriesStyleSheet = null;
 var clipboard = null;
 var eventsToCopy = [];
 
+
+// This should probably go in the generic.js
 function printView() {
   
   window.open("printView","","width=660,height=470");
@@ -43,6 +45,9 @@ function printView() {
 
 function newEvent(type, day, hour, duration) {
     var folder = null;
+   /* if (currentView == "multicolumndayview") {
+    	Need to find where the click register is saved
+    }*/
     if (UserDefaults['SOGoDefaultCalendar'] == 'personal')
         folder = $("calendarList").down("li");
     else if (UserDefaults['SOGoDefaultCalendar'] == 'first') {
@@ -911,8 +916,8 @@ function onDaySelect(node) {
                        && day != currentDay);
 
     var td = $(node).getParentWithTagName("td");
-    var table = $(td).getParentWithTagName("table");
     
+    //  var table = $(td).getParentWithTagName("table");
     //   log ("table.selected: " + table.selected);
 
     if (document.selectedDate)
@@ -1589,7 +1594,7 @@ function refreshCalendarEvents(scrollEvent) {
     if (!currentDay)
         currentDay = todayDate.getDayString();
 
-    if (currentView == "dayview") {
+    if (currentView == "dayview" || currentView == "multicolumndayview") {
         sd = currentDay;
         ed = sd;
     }
@@ -1627,9 +1632,34 @@ function refreshCalendarEvents(scrollEvent) {
                               "scrollEvent": scrollEvent});
 }
 
-function _parseEvents(list) {
+function _parseEvents(list, calendars) {
     var newCalendarEvents = {};
 
+    if (currentView == "multicolumndayview") {
+      var list;
+      for (var i = 0; i < calendars.length; i++) {
+    	list = calendars[i][0];
+        for (var j = 0; j < list.length; j++) {
+          var event = list[j];
+          var cname = event[0];
+          var calendar = event[1];
+          // log("parsed cname: " + cname + "; calendar: " + calendar);
+          var calendarDict = newCalendarEvents[calendar];
+          if (!calendarDict) {
+           calendarDict = {};
+           newCalendarEvents[calendar] = calendarDict;
+          }
+          var occurences = calendarDict[cname];
+          if (!occurences) {
+            occurences = [];
+            calendarDict[cname] = occurences;
+          }
+          event.blocks = [];
+          occurences.push(event);
+        }
+      }	
+    }
+    else {
       for (var i = 0; i < list.length; i++) {
         var event = list[i];
         var cname = event[0];
@@ -1649,6 +1679,7 @@ function _parseEvents(list) {
         occurences.push(event);
       }
     	
+    }
     return newCalendarEvents;
 }
 
@@ -1681,14 +1712,27 @@ function refreshCalendarEventsCallback(http) {
         && http.status == 200) {
         if (http.responseText.length > 0) {
         	var eventsBlocks = http.responseText.evalJSON(true);
-            calendarEvents = _parseEvents(eventsBlocks[0]);
+        	
-            if (currentView == "monthview")
+        	if (currentView == "multicolumndayview") {
-                _drawMonthCalendarEvents(eventsBlocks[2], eventsBlocks[0]);
+        		calendarEvents = _parseEvents(null, eventsBlocks);
+        		_drawCalendarAllDayEvents(null, null, eventsBlocks);
+                _drawCalendarEvents(null, null, eventsBlocks);
+                for (var i = 0 ; i < eventsBlocks.length; i++) {
+                	_setupEventsDragAndDrop(eventsBlocks[i][0]);
+                }
+        	}
         	else {
-                _drawCalendarAllDayEvents(eventsBlocks[1], eventsBlocks[0]);
+        		calendarEvents = _parseEvents(eventsBlocks[0], null);
-                _drawCalendarEvents(eventsBlocks[2], eventsBlocks[0]);
+                allDayEventsList = eventsBlocks[1];
+                eventsList = eventsBlocks[2];
+                if (currentView == "monthview")
+                    _drawMonthCalendarEvents(eventsList, eventsBlocks[0], null);
+                else {
+                    _drawCalendarAllDayEvents(allDayEventsList, eventsBlocks[0], null);
+                    _drawCalendarEvents(eventsList, eventsBlocks[0], null);
                 }
                 _setupEventsDragAndDrop(eventsBlocks[0]);
+        	}
             resetCategoriesStyles();
             onWindowResize(null);
         }
@@ -1851,9 +1895,26 @@ function newBaseEventDIV(eventRep, event, eventText) {
     return eventCell;
 }
 
-function _drawCalendarAllDayEvents(events, eventsData) {
+function _drawCalendarAllDayEvents(events, eventsData, columnsData) {
     var headerView = $("calendarHeader");
     var subdivs = headerView.childNodesWithTag("div");
+    
+    if (currentView == "multicolumndayview"){
+      var days = subdivs[2].childNodesWithTag("div");
+    	for (var i = 0; i < days.length; i++) {
+    	  var parentDiv = days[i];
+    	  var calendar = columnsData[i];
+    	  var calendarAllDayEvents = calendar[1][0];
+    	  var calendarAllDayEventsData = calendar[0];
+    	  for (var j = 0; j < calendarAllDayEvents.length; j++) {
+            var eventRep = calendarAllDayEvents[j];
+            var nbr = eventRep.nbr;
+            var eventCell = newAllDayEventDIV(eventRep, calendarAllDayEventsData[nbr]);
+            parentDiv.appendChild(eventCell);
+          }
+      }
+    }
+    else {
       var days = subdivs[1].childNodesWithTag("div");
       for (var i = 0; i < days.length; i++) {
         var parentDiv = days[i];
@@ -1864,7 +1925,7 @@ function _drawCalendarAllDayEvents(events, eventsData) {
           parentDiv.appendChild(eventCell);
         }
       }
-
+    }
     resizeCalendarHeaderDIV();
 }
 
@@ -1876,14 +1937,16 @@ function resizeCalendarHeaderDIV() {
     var daysView = $("daysView");
     if (headerView && daysView) {
         /* consts */
-        var headerViewBaseHeight = 70;
+        var headerViewBaseHeight = 90;
-        var daysViewBaseTop = 120;
+        var daysViewBaseTop = 95;
-        var maxDelta = 80;
         /* /consts */
 
         var maxEventPerDay = 0;
 
         var subdivs = headerView.childNodesWithTag("div");
+        if (currentView == "multicolumndayview")
+          var days = subdivs[2].childNodesWithTag("div");
+        else
           var days = subdivs[1].childNodesWithTag("div");
         for (var i = 0; i < days.length; i++) {
             var parentDiv = days[i];
@@ -1892,16 +1955,31 @@ function resizeCalendarHeaderDIV() {
                 maxEventPerDay = divs.length;
             }
         }
-
+        if (maxEventPerDay > 0 && maxEventPerDay <= 4) {
-        if (maxEventPerDay > 2) {
+          var moveDaysView = (maxEventPerDay * 19.5);
-            var delta = ((maxEventPerDay - 2) * 22) + 10;
+          var expendHeaderHeight = ((maxEventPerDay - 1) * 20);
-            if (delta > maxDelta) {
+          var deltaMax = 60;
-                delta = maxDelta;
+          if (expendHeaderHeight > deltaMax){
+            expendHeaderHeight = deltaMax;
+            moveDaysView = deltaMax;
           }
-            daysView.style.top = String(delta + daysViewBaseTop) + "px";
+          daysView.style.top = String(daysViewBaseTop + moveDaysView) + "px";
-            headerView.style.height = String(delta + headerViewBaseHeight) + "px";
+          headerView.style.height = String(headerViewBaseHeight + expendHeaderHeight) + "px";
+        }
+        	
+        else if (maxEventPerDay > 4) {
+        	var deltaMax = 60;
+            daysView.style.top = String(daysViewBaseTop + deltaMax + 19) + "px";
+            headerView.style.height = String(headerViewBaseHeight + deltaMax) + "px";
         }
         else {
+        	var headerDays = document.getElementsByClassName("days")[0];
+        	headerDays.observe("mouseenter", function(event){
+        		headerDays.style.zIndex = "1";
+        	});	
+        	headerDays.observe("mouseleave", function(event){
+        		headerDays.style.zIndex = "0";
+        	});	
             daysView.style.top = null;
             headerView.style.height = null;
         }
@@ -1916,13 +1994,28 @@ function newAllDayEventDIV(eventRep, event) {
     return eventCell;
 }
 
-function _drawCalendarEvents(events, eventsData) {
+function _drawCalendarEvents(events, eventsData, columnsData) {
     var daysView = $("daysView");
     var subdivs = daysView.childNodesWithTag("div");
     for (var i = 0; i < subdivs.length; i++) {
         var subdiv = subdivs[i];
         if (subdiv.hasClassName("days")) {
             var days = subdiv.childNodesWithTag("div");
+            if (currentView == "multicolumndayview") {
+              for (var j = 0; j < days.length; j++) {
+                  var parentDiv = days[j].childNodesWithTag("div")[0];
+                  var calendar = columnsData[j];
+                  var calendarEvents = calendar[2][0];
+                  var calendarEventsData = calendar[0];
+                  for (var k = 0; k < calendarEvents.length; k++) {
+                    var eventRep = calendarEvents[k];
+                    var nbr = eventRep.nbr;
+                    var eventCell = newEventDIV(eventRep, calendarEventsData[nbr]);
+                    parentDiv.appendChild(eventCell);
+                  }
+                } 
+            }
+            else {
               for (var j = 0; j < days.length; j++) {
                 var parentDiv = days[j].childNodesWithTag("div")[0];
                 for (var k = 0; k < events[j].length; k++) {
@@ -1934,6 +2027,7 @@ function _drawCalendarEvents(events, eventsData) {
               } 	
             }
         }
+    }
 }
 
 function newEventDIV(eventRep, event) {
@@ -2009,7 +2103,8 @@ function adjustCalendarHeaderDIV() {
         var delta = ch.clientWidth - dv.clientWidth - 1;
         var styleElement = document.createElement("style");
         styleElement.type = "text/css";
-        var selectors = ["DIV#calendarHeader DIV.dayLabels",
+        var selectors = ["DIV#calendarHeader DIV.calendarLabels",
+                         "DIV#calendarHeader DIV.dayLabels",
                          "DIV#calendarHeader DIV.days"];
         var rule = ("right: " + delta + "px");
         if (styleElement.styleSheet && styleElement.styleSheet.addRule) {
@@ -2026,6 +2121,37 @@ function adjustCalendarHeaderDIV() {
     }
 }
 
+function adjustMultiColumnCalendarHeaderDIV() {
+	
+    var ch = $("calendarHeader");
+    var calendarLabels = ch.getElementsByClassName("calendarLabels")[0];
+    var calendarsToDisplay = calendarLabels.getElementsByClassName("calendarsToDisplay");
+    var dayLabels = ch.getElementsByClassName("dayLabels")[0].getElementsByClassName("dayColumn")[0];
+    var days = ch.getElementsByClassName("days")[0].getElementsByClassName("dayColumn");
+    var daysView = $("daysView").getElementsByClassName("dayColumn");
+    
+    var nbCalendars = calendarsToDisplay.length;
+    
+    if (nbCalendars > 0) {
+      var width = 100/nbCalendars;
+      var left = 0;
+      var position = "absolute";
+      for(var i=0; i < nbCalendars; i++){
+    	calendarsToDisplay[i].setStyle({ width: width + '%', left: left + '%', position: position}).show();
+    	days[i].setStyle({ width: width + '%', left: left + '%'}).show();
+    	daysView[i].setStyle({ width: width + '%', left: left + '%'}).show();
+        left += width;
+      }
+      dayLabels.setStyle({ width: '100%'}).show();	  
+    }
+    else {
+      $("calendarHeader").remove();
+      $("daysView").remove();
+      var htmlText = "<div class='alert-box notice'><span>" + _("notice:") + "</span>"+_("Please go ahead and select calendars")+"</div>";
+      $("calendarContent").innerHTML = htmlText;
+    }
+}
+
 function calendarDisplayCallback(http) {
     var div = $("calendarView");
     var daysView = $("daysView");
@@ -2055,6 +2181,9 @@ function calendarDisplayCallback(http) {
         if (http.callbackData["day"])
             currentDay = http.callbackData["day"];
         
+        if (currentView == "multicolumndayview")
+        	adjustMultiColumnCalendarHeaderDIV();
+
         // Initialize contextual menu
         var menu = new Array(onMenuNewEventClick,
                              onMenuNewTaskClick,
@@ -2067,10 +2196,7 @@ function calendarDisplayCallback(http) {
                              onMenuRawEvent
                             );
         var observer;
-        if (currentView == 'dayview') {
+        if (currentView == 'dayview' || currentView == 'weekview' || currentView == 'multicolumndayview') {
-            observer = $("daysView");
-        }
-        else if (currentView == 'weekview') {
             observer = $("daysView");
         }
         else {
@@ -3367,25 +3493,43 @@ function drawNowLine() {
             d = "0" + d;
         var day = today.getFullYear() + "" + m + "" + d;
         var targets = $$("DIV#daysView DIV.days DIV.day[day=" + day
-                         + "] DIV.clickableHourCell");
+                         + "] DIV.hourCells");
+    }
+    else if (currentView == "multicolumndayview") {
+      var targets = $$("DIV#daysView DIV.hourCells");
     }
     else if (currentView == "weekview")
-        var targets = $$("DIV#daysView DIV.days DIV.dayOfToday DIV.clickableHourCell");
+        var targets = $$("DIV#daysView DIV.days DIV.dayOfToday DIV.hourCells");
 
-    if (targets) {
+    if (targets[0]) {
-        var target = targets[hours];
+    	if (currentView == "multicolumndayview") {
+    	  var nbCalendars = targets.length;
+    	  for(var i = 0; i < nbCalendars; i++){
+    	    var target = targets[i].getElementsByClassName("clickableHourCell")[hours];
 
             if (target) {
-            var div = $("nowLineDisplay");
+              var div = targets[i].getElementsByClassName("nowLineDisplay")[0];
               if (!div)
-                div = new Element("div", {'id': 'nowLineDisplay'});
+                div = new Element("div", {'class': 'nowLineDisplay'});
 
                 div.style.top = parseInt((minutes * target.offsetHeight / 60) - 1) + "px";
                 target.insertBefore(div, target.firstChild);
-
-            setTimeout("drawNowLine ();", 60000); // 1 min.
         	}
     	  }
+    	}
+    	else {
+    	  var target = targets[0].getElementsByClassName("clickableHourCell")[hours];
+          if (target) {
+            var div = targets[0].getElementsByClassName("nowLineDisplay")[0];
+            if (!div)
+              div = new Element("div", {'class': 'nowLineDisplay'});
+
+              div.style.top = parseInt((minutes * target.offsetHeight / 60) - 1) + "px";
+              target.insertBefore(div, target.firstChild);
+    	  }
+        }
+    	setTimeout("drawNowLine ();", 60000); // 1 min.
+    }
 }
 
 function onListCollapse(event, element) {