Display all-day events in day & week views

All-day events are now displayed and the day/week views are now built using flexbox.
2026-02-28 20:56:24 +00:00 · 2015-09-18 16:11:31 -04:00
parent fab9e938fc
commit 2ea2edbccd
7 changed files with 134 additions and 79 deletions
--- a/UI/Scheduler/UIxCalDayTable.h
+++ b/UI/Scheduler/UIxCalDayTable.h
@@ -39,7 +39,7 @@
  NSArray *weekDays;
  NSString *currentView, *timeFormat, *currentTableHour;
  NSCalendarDate *startDate, *currentTableDay;
-  NSMutableArray *daysToDisplay, *calendarsToDisplay,  *currentCalendar, *hoursToDisplay;
+  NSMutableArray *daysToDisplay, *calendarsToDisplay, *currentCalendar, *hoursToDisplay;
  unsigned int numberOfDays;
 }

--- a/UI/Scheduler/UIxCalDayTable.m
+++ b/UI/Scheduler/UIxCalDayTable.m
@@ -37,6 +37,9 @@
 #import <SOGo/SOGoUserDefaults.h>
 #import <SOGo/WOResourceManager+SOGo.h>

+#import <SoObjects/Appointments/SOGoAppointmentFolder.h>
+#import <SoObjects/Appointments/SOGoAppointmentFolders.h>
+
 #import "UIxCalDayTable.h"

@class SOGoAppointment;
@@ -292,6 +295,28 @@
  return [weekDays objectAtIndex: [currentTableDay dayOfWeek]];
 }

+- (NSString *) labelForMonth
+{
+  NSCalendarDate *nextDay;
+  BOOL isLastOrFirstDay;
+
+  isLastOrFirstDay = NO;
+  if ([currentTableDay dayOfMonth] == 1)
+    {
+      isLastOrFirstDay = YES;
+    }
+  else if ([currentTableDay dayOfMonth] > 27)
+    {
+      nextDay = [currentTableDay dateByAddingYears: 0
+                                            months: 0
+                                              days: 1];
+      if ([nextDay dayOfMonth] == 1)
+        isLastOrFirstDay = YES;
+    }
+
+  return isLastOrFirstDay? [currentTableDay descriptionWithCalendarFormat: @"%b" locale: locale] : nil;
+}
+
 - (NSString *) labelForDate
 {
  return [dateFormatter shortFormattedDate: currentTableDay];
@@ -410,6 +435,11 @@
  return daysView;
 }

+- (NSString *) daysViewHeaderClasses
+{
+  return [NSString stringWithFormat: @"%@ daysHeader", [self daysViewClasses]];
+}
+
 - (NSString *) dayClasses
 {
  NSMutableString *classes;
@@ -468,4 +498,9 @@
  return NO;
 }

+- (BOOL) isWeekView
+{
+  return [currentView isEqualToString:@"weekview"];
+}
+
@end
--- a/UI/Templates/SchedulerUI/UIxCalDayTable.wox
+++ b/UI/Templates/SchedulerUI/UIxCalDayTable.wox
@@ -6,7 +6,7 @@
  xmlns:const="http://www.skyrix.com/od/constant"
  xmlns:rsrc="OGo:url"
  xmlns:label="OGo:label">
-  <div var:class="daysViewClasses">
+  <div var:class="daysViewHeaderClasses">

 <!-- MultiColumnView -->
    <!-- Display the name of the calendar -->
@@ -18,7 +18,7 @@
          </div>
        </var:foreach>
      </div>
-      
+
      <!-- Display today abreviation and date -->
      <div class="days dayLabels">
        <var:foreach list="daysToDisplay" item="currentTableDay">
@@ -28,7 +28,7 @@
          </div>
        </var:foreach>
      </div>
-      
+
      <!-- All day cells -->
      <div class="days">
        <var:foreach list="calendarsToDisplay" item="currentCalendar">
@@ -45,24 +45,33 @@
      <div class="days dayLabels">
        <var:foreach list="daysToDisplay" item="currentTableDay">
          <div var:class="dayClasses">
-            <var:string value="labelForDate"/><br/>
-            <span class="dayOfWeek"><var:string value="labelForDay"/></span>
+            <var:if condition="isWeekView"><div><var:string value="labelForDay"/></div></var:if>
+            <var:if condition="currentTableDay.isToday">
+              <div class="sg-md-display-2 md-default-theme md-fg md-accent md-hue-2"><var:string value="currentTableDay.dayOfMonth"/></div>
+            </var:if>
+            <var:if condition="currentTableDay.isToday" const:negate="YES">
+              <div class="sg-md-display-2 md-default-theme md-fg md-hue-1"><var:string value="currentTableDay.dayOfMonth"/></div>
+            </var:if>
+            <div class="md-default-theme md-fg md-primary md-hue-2"><var:string value="labelForMonth"/></div>
          </div>
        </var:foreach>
      </div>
-    
+
      <!-- All day cells -->
-      <div class="days">
+      <div class="days allDays">
        <var:foreach list="daysToDisplay" item="currentTableDay">
-          <div var:class="dayClasses" var:day="currentTableDay.shortDateString" var:id="currentAllDayId" hour="allday"><!-- space --></div>
+          <div var:class="dayClasses" var:day="currentTableDay.shortDateString" var:id="currentAllDayId" hour="allday">
+              <sg-calendar-day-table
+                  sg-blocks="calendar.allDayBlocks"
+                  sg-click="list.openEvent(event, component)"
+                  var:sg-day="currentTableDay.shortDateString" />
+          </div>
        </var:foreach>
      </div>
    </var:if>
  </div>
-  
-  
-  <!-- The hours cells -->
-  <div var:class="daysViewClasses">
+
+  <!-- The hours -->
    <div class="hours">
      <var:foreach list="hoursToDisplay" item="currentTableHour">
        <div class="hour" var:id="currentHourId">
@@ -70,6 +79,9 @@
        </div>
      </var:foreach>
    </div>
+
+  <!-- The hours cells -->
+  <div var:class="daysViewClasses">
    <div class="days">
      <!-- MultiColumnView -->
      <var:if condition="isMultiColumnView">
--- a/UI/WebServerResources/js/Scheduler/CalendarController.js
+++ b/UI/WebServerResources/js/Scheduler/CalendarController.js
@@ -10,13 +10,15 @@
  function CalendarController($scope, $state, $stateParams, $timeout, $interval, $log, focus, Calendar, Component, stateEventsBlocks) {
    var vm = this;

-    vm.blocks = stateEventsBlocks;
+    vm.blocks = stateEventsBlocks.blocks;
+    vm.allDayBlocks = stateEventsBlocks.allDayBlocks;
    vm.changeView = changeView;

    // Refresh current view when the list of calendars is modified
    $scope.$on('calendars:list', function() {
      Component.$eventsBlocksForView($stateParams.view, $stateParams.day.asDate()).then(function(data) {
-        vm.blocks = data;
+        vm.blocks = data.blocks;
+        vm.allDayBlocks = data.allDayBlocks;
      });
    });

--- a/UI/WebServerResources/js/Scheduler/Component.service.js
+++ b/UI/WebServerResources/js/Scheduler/Component.service.js
@@ -278,7 +278,7 @@
    futureComponentData = this.$$resource.fetch(null, 'eventsblocks', params);
    futureComponentData.then(function(data) {
      Component.$timeout(function() {
-        var components = [], blocks = {};
+        var components = [], blocks = {}, allDayBlocks = {}, dates = [];

        // Instantiate Component objects
        _.reduce(data.events, function(objects, eventData, i) {
@@ -294,18 +294,35 @@
          block.component = components[block.nbr];
        });

-        // Convert array of blocks to object with days as keys
+        // Associate Component objects to all-day blocks positions
+        _.each(_.flatten(data.allDayBlocks), function(allDayBlock) {
+          allDayBlock.component = components[allDayBlock.nbr];
+        });
+
+        // Build array of dates
        for (i = 0; i < data.blocks.length; i++) {
-          blocks[startDate.getDayString()] = data.blocks[i];
+          dates.push(startDate.getDayString());
          startDate.addDays(1);
        }

-        Component.$log.debug('blocks ready (' + _.keys(blocks).length + ')');
+        // Convert array of blocks to object with days as keys
+        for (i = 0; i < data.blocks.length; i++) {
+          blocks[dates[i]] = data.blocks[i];
+        }
+
+        // Convert array of all-day blocks to object with days as keys
+        for (i = 0; i < data.allDayBlocks.length; i++) {
+          allDayBlocks[dates[i]] = data.allDayBlocks[i];
+        }
+
+        Component.$log.debug('blocks ready (' + _.flatten(data.blocks).length + ')');
+        Component.$log.debug('all day blocks ready (' + _.flatten(data.allDayBlocks).length + ')');

        // Save the blocks to the object model
        Component.$blocks = blocks;
+        Component.$allDayBlocks = allDayBlocks;

-        deferred.resolve(blocks);
+        deferred.resolve({ blocks: blocks, allDayBlocks: allDayBlocks });
      });
    }, deferred.reject);

--- a/UI/WebServerResources/js/Scheduler/sgCalendarDayBlock.directive.js
+++ b/UI/WebServerResources/js/Scheduler/sgCalendarDayBlock.directive.js
@@ -34,11 +34,11 @@
        '      </div>',
        '      <div class="text">{{ block.component.c_title }}',
        '        <span class="icons">',
-        // Component has an alarm
+        //         Component has an alarm
        '          <md-icon ng-if="block.component.c_nextalarm" class="material-icons icon-alarm"></md-icon>',
-        // Component is confidential
+        //         Component is confidential
        '          <md-icon ng-if="block.component.c_classification == 1" class="material-icons icon-visibility-off"></md-icon>',
-        // Component is private
+        //         Component is private
        '          <md-icon ng-if="block.component.c_classification == 2" class="material-icons icon-vpn-key"></md-icon>',
        '       </span></div>',
        '    </div>',
--- a/UI/WebServerResources/scss/views/SchedulerUI.scss
+++ b/UI/WebServerResources/scss/views/SchedulerUI.scss
@@ -6,27 +6,19 @@ $hours_margin: 50px;
 }

 .dayLabels {
-  color: sg-color($sogoBlue, 700);
-  height: 35px;
-  left: 0;
+  //color: sg-color($sogoBlue, 700);
  overflow: hidden;
-  position: relative;
  .day {
-    height: 100%;
-    position: absolute;
    text-align: center;
  }
 }

 .days {
-  left: 0;
-  right: 0;
-  top: 0;
-  margin-left: $hours_margin;
-  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
  .day {
    border-left: 1px solid sg-color($sogoPaper, 300);
-    position: absolute;
    .clickableHourCell {
      height: 40px;
      border-bottom: 1px solid sg-color($sogoPaper, 300);
@@ -34,24 +26,12 @@ $hours_margin: 50px;
  }
 }

-.daysViewFor1Days {
-  .day {
-    left: $hours_margin;
-    width: 100%;
-  }
-  .days {
-    margin-left: 0;
-  }
-}
-
+.daysViewFor1Days,
 .daysViewFor7Days {
+  margin-left: $hours_margin;
  .day {
-    width: (100% / 7);
-  }
-  $i: 0;
-  @while $i < 7 {
-    .day#{$i} { left: 1% * 100 / 7 * $i; }
-    $i: $i + 1;
+    flex-grow: 1;
+    flex-basis: 0;
  }
 }

@@ -66,31 +46,35 @@ $hours_margin: 50px;
  padding: 2px;
 }

+.hours {
+  color: sg-color($sogoBlue, 700);
+  display: inline-block;
+  float: left;
+  clear: left;
+  font-weight: $sg-font-light;
+  height: auto;
+  left: 0;
+  position: relative;
+  top: 0;
+  width: $hours_margin;
+  .hour {
+    border-bottom: 1px solid sg-color($sogoPaper, 300);
+    height: 40px;
+    left: 0;
+    padding: 2px;
+    position: relative;
+    right: 0;
+    top: 0;
+  }
+}
+
 .daysView {
  bottom: 0;
  overflow-x: hidden;
  overflow: auto;
-  position: relative;
  top: 0;
-  .hours {
-    color: sg-color($sogoBlue, 700);
-    display: inline-block;
-    float: left;
-    font-weight: $sg-font-light;
-    height: auto;
-    left: 0;
+  .hourCells {
    position: relative;
-    top: 0;
-    width: $hours_margin;
-    .hour {
-      border-bottom: 1px solid sg-color($sogoPaper, 300);
-      height: 40px;
-      left: 0;
-      padding: 2px;
-      position: relative;
-      right: 0;
-      top: 0;
-    }
  }
  .sg-event {
    border-radius: 10px;
@@ -98,6 +82,7 @@ $hours_margin: 50px;
    position: absolute;
    left: 0%;
    right: 0%;
+    overflow: hidden;
    $i: 0;
    @while $i < 96 { // number of 15-minutes blocks in a day
      &.starts#{$i} { top: 10px * $i; }
@@ -105,12 +90,12 @@ $hours_margin: 50px;
      $i: $i + 1;
    }
    .eventInside {
-      position: absolute;
      overflow: hidden;
-      top: 0px;
-      bottom: 0px;
-      left: 0px;
-      right: 0px;
+    }
+  }
+  &.daysHeader {
+    .sg-event {
+      position: relative;
    }
  }
 }
@@ -150,6 +135,9 @@ $hours_margin: 50px;
  right: 1px;
  bottom: 1px;
  overflow: hidden;
+  .allDays & {
+    position: relative;
+  }
 }

 .gradient > IMG {
@@ -166,7 +154,7 @@ $hours_margin: 50px;
 /* Attendees Editor */
 .attendees {
  overflow: hidden;
-  overflow-x: scroll;
+  overflow-x: auto;
  md-content {
    display: table-row;
  }
@@ -180,12 +168,13 @@ $hours_margin: 50px;
      }
    }
    md-list-item {
+      padding-left: 0;
      &:hover {
        background-color: initial;
      }
-      img {
-        margin-right: $mg/4;
-      }
+//      img {
+//        margin-right: $mg/4;
+//      }
    }
    .hours {
      font-size: 9px;