From fcba6f2ddbd2f1b98491a6ee1b5450df030e0c3b Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Wed, 23 Sep 2015 15:19:39 -0400
Subject: [PATCH] Improve Calendar views

Moved toolbars inside "list" and "detail" views, like we do in the other
modules. With this change, it was possible to move the navitation button
(chevrons) inside the top toolbar of the detail view. Also move the view
headers inside a toolbar. The all-day events of the day and week views
have also been moved inside this toolbar.
---
 UI/Scheduler/UIxCalDayTable.m                 |  54 +++---
 UI/Templates/SchedulerUI/UIxCalDayTable.wox   | 173 ++++++++++--------
 UI/Templates/SchedulerUI/UIxCalDayView.wox    |  83 ++++-----
 UI/Templates/SchedulerUI/UIxCalMainView.wox   |  38 ++--
 UI/Templates/SchedulerUI/UIxCalMonthView.wox  | 134 +++++++-------
 UI/Templates/SchedulerUI/UIxCalWeekView.wox   |  70 +++----
 .../scss/views/SchedulerUI.scss               | 154 ++++++++++------
 7 files changed, 380 insertions(+), 326 deletions(-)

diff --git a/UI/Scheduler/UIxCalDayTable.m b/UI/Scheduler/UIxCalDayTable.m
index de1f9ab98..08c3dceac 100644
--- a/UI/Scheduler/UIxCalDayTable.m
+++ b/UI/Scheduler/UIxCalDayTable.m
@@ -187,7 +187,6 @@
 {
   if (!calendarsToDisplay)
   {
-    int max=0, i;
     NSArray *folders;
     SOGoAppointmentFolders *co;
     SOGoAppointmentFolder *folder;
@@ -298,23 +297,34 @@
 - (NSString *) labelForMonth
 {
   NSCalendarDate *nextDay;
+  NSString *calendarFormat;
   BOOL isLastOrFirstDay;
 
   isLastOrFirstDay = NO;
-  if ([currentTableDay dayOfMonth] == 1)
+  calendarFormat = @"%b";
+
+  if ([currentView isEqualToString:@"dayview"])
     {
       isLastOrFirstDay = YES;
+      calendarFormat = @"%B";
     }
-  else if ([currentTableDay dayOfMonth] > 27)
+  else
     {
-      nextDay = [currentTableDay dateByAddingYears: 0
-                                            months: 0
-                                              days: 1];
-      if ([nextDay dayOfMonth] == 1)
-        isLastOrFirstDay = YES;
+      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;
+  return isLastOrFirstDay? [currentTableDay descriptionWithCalendarFormat: calendarFormat locale: locale] : nil;
 }
 
 - (NSString *) labelForDate
@@ -422,23 +432,23 @@
                    numberOfDays];
 }
 
-- (NSString *) daysViewClasses
-{
-  NSString *daysView;
+// - (NSString *) daysViewClasses
+// {
+//   NSString *daysView;
   
-  if ([currentView isEqualToString:@"multicolumndayview"])
-    daysView = @"daysView daysViewForMultipleDays";
+//   if ([currentView isEqualToString:@"multicolumndayview"])
+//     daysView = @"daysView daysViewForMultipleDays";
 
-  else
-    daysView = [NSString stringWithFormat: @"daysView daysViewFor%dDays", numberOfDays];
+//   else
+//     daysView = [NSString stringWithFormat: @"daysView daysViewFor%dDays", numberOfDays];
   
-  return daysView;
-}
+//   return daysView;
+//}
 
-- (NSString *) daysViewHeaderClasses
-{
-  return [NSString stringWithFormat: @"%@ daysHeader", [self daysViewClasses]];
-}
+// - (NSString *) daysViewHeaderClasses
+// {
+//   return [NSString stringWithFormat: @"%@ daysHeader", [self daysViewClasses]];
+// }
 
 - (NSString *) dayClasses
 {
diff --git a/UI/Templates/SchedulerUI/UIxCalDayTable.wox b/UI/Templates/SchedulerUI/UIxCalDayTable.wox
index 34f2a6e54..47d0ace4d 100644
--- a/UI/Templates/SchedulerUI/UIxCalDayTable.wox
+++ b/UI/Templates/SchedulerUI/UIxCalDayTable.wox
@@ -1,14 +1,14 @@
 <?xml version="1.0" standalone="yes"?>
 <!DOCTYPE container>
 <container
-  xmlns="http://www.w3.org/1999/xhtml"
-  xmlns:var="http://www.skyrix.com/od/binding"
-  xmlns:const="http://www.skyrix.com/od/constant"
-  xmlns:rsrc="OGo:url"
-  xmlns:label="OGo:label">
-  <div var:class="daysViewHeaderClasses">
+    xmlns="http://www.w3.org/1999/xhtml"
+    xmlns:var="http://www.skyrix.com/od/binding"
+    xmlns:const="http://www.skyrix.com/od/constant"
+    xmlns:rsrc="OGo:url"
+    xmlns:label="OGo:label">
+  <md-toolbar class="daysView md-hue-1" md-scroll-shrink="true" var:sg-view="currentView">
 
-<!-- MultiColumnView -->
+    <!-- MultiColumnView -->
     <!-- Display the name of the calendar -->
     <var:if condition="isMultiColumnView">
       <div class="calendarLabels">
@@ -39,89 +39,110 @@
       </div>
     </var:if>
 
-<!-- DayView or WeekView -->
+    <!-- DayView or WeekView -->
     <var:if condition="isNotMultiColumnView">
       <!-- Display today abreviation and date -->
       <div class="days dayLabels">
         <var:foreach list="daysToDisplay" item="currentTableDay">
           <div var:class="dayClasses">
-            <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>
+            <!-- Week view day header -->
+            <var:if condition="isWeekView">
+              <div class="sg-md-caption"><var:string value="labelForDay"/></div>
+              <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-2"><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>
             </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>
+            <!-- Day view header -->
+            <var:if condition="isWeekView" const:negate="YES">
+              <var:if condition="currentTableDay.isToday">
+                <div class="sg-md-display-4 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-4 md-default-theme md-fg md-hue-2"><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>
             </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 allDays">
-        <var:foreach list="daysToDisplay" item="currentTableDay">
-          <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 -->
-    <div class="hours">
-      <var:foreach list="hoursToDisplay" item="currentTableHour">
-        <div class="hour" var:id="currentHourId">
-          <var:string value="currentTableHour"/>
-        </div>
-      </var:foreach>
-    </div>
-
-  <!-- The hours cells -->
-  <div var:class="daysViewClasses">
-    <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:calendar="currentCalendar.folder" 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">
+    <!-- All day cells -->
+    <div class="allDaysView md-default-theme md-background md-bg">
+      <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>
-              <sg-calendar-day-table
-                  sg-blocks="calendar.blocks"
-                  sg-click="list.openEvent(event, component)"
-                  var:sg-day="currentTableDay.shortDateString" />
-            </div>
-            <div class="events"><!-- 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>
-      </var:if>
+      </div>
     </div>
-  </div>
+  </md-toolbar>
+
+  <md-content class="md-flex" md-scroll-y="md-scroll-y">
+    <div class="calendarView">
+
+      <!-- The hours -->
+      <div class="hours">
+        <var:foreach list="hoursToDisplay" item="currentTableHour">
+          <div class="hour" var:id="currentHourId">
+            <var:string value="currentTableHour"/>
+          </div>
+        </var:foreach>
+      </div>
+
+      <!-- The hours cells -->
+      <div class="daysView">
+        <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:calendar="currentCalendar.folder" 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>
+          <!-- DayView and WeekView -->
+          <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>
+                  <sg-calendar-day-table
+                      sg-blocks="calendar.blocks"
+                      sg-click="list.openEvent(event, component)"
+                      var:sg-day="currentTableDay.shortDateString" />
+                </div>
+                <div class="events"><!-- space --></div>
+              </div>
+            </var:foreach>
+          </var:if>
+        </div>
+      </div>
+    </div>
+  </md-content>
 </container>
diff --git a/UI/Templates/SchedulerUI/UIxCalDayView.wox b/UI/Templates/SchedulerUI/UIxCalDayView.wox
index 111b04294..02f52d6ce 100644
--- a/UI/Templates/SchedulerUI/UIxCalDayView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalDayView.wox
@@ -1,47 +1,40 @@
 <?xml version="1.0" standalone="yes"?>
-  <container
-      xmlns="http://www.w3.org/1999/xhtml"
-      xmlns:var="http://www.skyrix.com/od/binding"
-      xmlns:const="http://www.skyrix.com/od/constant"
-      xmlns:rsrc="OGo:url"
-      xmlns:label="OGo:label">
+<!DOCTYPE container>
+<container
+    xmlns="http://www.w3.org/1999/xhtml"
+    xmlns:var="http://www.skyrix.com/od/binding"
+    xmlns:const="http://www.skyrix.com/od/constant"
+    xmlns:rsrc="OGo:url"
+    xmlns:label="OGo:label">
 
-    <!-- <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>-->
-    <md-content>
-      <div layout="row" layout-align="center">
-        <h5>
-          <md-button
-              class="sg-icon-button"
-              label:aria-label="Previous Day"
-              var:date="prevDayQueryParameters.day"
-              ng-click="calendar.changeView($event)"><md-icon>chevron_left</md-icon></md-button>
-          <var:string value="currentDayName" />
-          <md-button
-              class="sg-icon-button"
-              label:aria-label="Next Day"
-              var:date="nextDayQueryParameters.day"
-              ng-click="calendar.changeView($event)"><md-icon>chevron_right</md-icon></md-button>
-        </h5>
-      </div>
-      <div id="calendarContent">
-        <var:component
-            className="UIxCalDayTable"
-            startDate="startDate"
-            const:CSSClass="dayOverview"
-            const:numberOfDays="1"
-            const:currentView="dayview"/>
-      </div>
-    </md-content>
-  </container>
+  <md-toolbar hide-sm="hide-sm">
+    <div class="md-toolbar-tools">
+      <md-button class="md-icon-button"
+                 label:aria-label="Previous Day"
+                 var:date="prevDayQueryParameters.day"
+                 ng-click="calendar.changeView($event)"><md-icon>chevron_left</md-icon></md-button>
+      <div><var:string value="currentDayName" /></div>
+      <md-button class="md-icon-button"
+                 label:aria-label="Next Day"
+                 var:date="nextDayQueryParameters.day"
+                 ng-click="calendar.changeView($event)"><md-icon>chevron_right</md-icon></md-button>
+      <div class="md-flex"><!-- spacer --></div>
+      <md-button class="md-icon-button md-accent"
+                 label:aria-label="Today"
+                 ng-click="app.today()"><md-icon>today</md-icon></md-button>
+      <a class="md-icon-button md-button"
+         label:aria-label="Week"
+         href="#/calendar/week"><md-icon>view_week</md-icon></a>
+      <a class="md-icon-button md-button"
+         label:aria-label="Month"
+         href="#/calendar/month"><md-icon>view_module</md-icon></a>
+    </div>
+  </md-toolbar>
+
+  <var:component
+      className="UIxCalDayTable"
+      startDate="startDate"
+      const:CSSClass="dayOverview"
+      const:numberOfDays="1"
+      const:currentView="dayview"/>
+</container>
diff --git a/UI/Templates/SchedulerUI/UIxCalMainView.wox b/UI/Templates/SchedulerUI/UIxCalMainView.wox
index 0a02c0214..b98b93578 100644
--- a/UI/Templates/SchedulerUI/UIxCalMainView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalMainView.wox
@@ -366,8 +366,10 @@
              </md-button>
              </div> -->
       </md-toolbar>
-      <div layout="row">
-        <md-toolbar class="view-list" ng-show="list.component.$selectedCount() == 0">
+      <div layout="row" class="md-flex">
+      <div class="view-list" layout="column">
+
+        <md-toolbar ng-show="list.component.$selectedCount() == 0">
           <!-- sort/filter mode (default) -->
           <div class="md-toolbar-tools" layout="row" ng-hide="list.mode.search">
             <md-button class="sg-icon-button" label:aria-label="Search"
@@ -565,7 +567,7 @@
         </md-toolbar>
 
         <!-- multiple-selection mode -->
-        <md-toolbar class="view-list md-hue-1 sg-toolbar-secondary" ng-show="list.component.$selectedCount() > 0">
+        <md-toolbar class="md-hue-1 sg-toolbar-secondary" ng-show="list.component.$selectedCount() > 0">
           <div class="md-toolbar-tools">
             <md-button class="sg-icon-button" ng-click="list.unselectComponents()">
               <md-icon>arrow_back</md-icon>
@@ -582,28 +584,7 @@
           </div>
         </md-toolbar>
 
-        <!-- day/week/month views -->
-        <md-toolbar class="view-detail" hide-sm="hide-sm">
-          <div class="md-toolbar-tools">
-            <md-button class="md-icon-button"
-                       label:aria-label="Today"
-                       ng-click="app.today()"><md-icon>today</md-icon></md-button>
-            <div class="md-flex"><!-- spacer --></div>
-            <a class="md-icon-button md-button"
-               label:aria-label="Day"
-               href="#/calendar/day"><md-icon>view_day</md-icon></a>
-            <a class="md-icon-button md-button"
-               label:aria-label="Week"
-               href="#/calendar/week"><md-icon>view_week</md-icon></a>
-            <a class="md-icon-button md-button"
-               label:aria-label="Month"
-               href="#/calendar/month"><md-icon>view_module</md-icon></a>
-          </div>
-        </md-toolbar>
-      </div>
-
-      <md-content layout="row" class="md-flex">
-        <md-content class="view-list md-flex" layout="column">
+        <md-content layout="column" class="view-list">
           <md-tabs md-dynamic-height="true"
                    md-selected="list.selectedList">
             <!-- Events list -->
@@ -674,8 +655,11 @@
             <md-icon>add</md-icon>
           </md-button>
         </md-content>
-        <div id="detailView" class="view-detail" hide-sm="hide-sm" layout="column" ui-view="calendarView"><!-- calendar view --></div>
-      </md-content>
+        </div>
+        <div id="detailView" class="view-detail" hide-sm="hide-sm" layout="column" ui-view="calendarView">
+          <!-- calendar view -->
+        </div>
+      </div>
     </section>
   </script>
 
diff --git a/UI/Templates/SchedulerUI/UIxCalMonthView.wox b/UI/Templates/SchedulerUI/UIxCalMonthView.wox
index 05ec682a2..3a4521916 100644
--- a/UI/Templates/SchedulerUI/UIxCalMonthView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalMonthView.wox
@@ -1,71 +1,75 @@
 <?xml version="1.0" standalone="yes"?>
 <!DOCTYPE container>
-  <container
-      xmlns="http://www.w3.org/1999/xhtml"
-      xmlns:var="http://www.skyrix.com/od/binding"
-      xmlns:const="http://www.skyrix.com/od/constant"
-      xmlns:rsrc="OGo:url"
-      xmlns:label="OGo:label">
+<container
+    xmlns="http://www.w3.org/1999/xhtml"
+    xmlns:var="http://www.skyrix.com/od/binding"
+    xmlns:const="http://www.skyrix.com/od/constant"
+    xmlns:rsrc="OGo:url"
+    xmlns:label="OGo:label">
 
-    <div class="menu" id="currentViewMenu" ng-hide="true">
-      <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 Month"/></li>
-        <li><var:string label:value="Next Month"/></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>
+  <md-toolbar hide-sm="hide-sm">
+    <div class="md-toolbar-tools">
+      <md-button class="md-icon-button"
+                 label:aria-label="Previous Month"
+                 var:date="prevMonthQueryParameters.day"
+                 ng-click="calendar.changeView($event)"><md-icon>chevron_left</md-icon></md-button>
+      <div><var:string value="monthNameOfThisMonth" /> <var:string value="selectedDate.yearOfCommonEra" /></div>
+      <md-button class="md-icon-button"
+                 label:aria-label="Next Month"
+                 var:date="nextMonthQueryParameters.day"
+                 ng-click="calendar.changeView($event)"><md-icon>chevron_right</md-icon></md-button>
+      <div class="md-flex"><!-- spacer --></div>
+      <md-button class="md-icon-button md-accent"
+                 label:aria-label="Today"
+                 ng-click="app.today()"><md-icon>today</md-icon></md-button>
+      <a class="md-icon-button md-button"
+         label:aria-label="Day"
+         href="#/calendar/day"><md-icon>view_day</md-icon></a>
+      <a class="md-icon-button md-button"
+         label:aria-label="Week"
+         href="#/calendar/week"><md-icon>view_week</md-icon></a>
     </div>
+  </md-toolbar>
 
-    <md-content>
-      <div layout="row" layout-align="center">
-        <h5>
-          <md-button
-              class="sg-icon-button"
-              label:aria-label="Previous Month"
-              var:date="prevMonthQueryParameters.day"
-              ng-click="calendar.changeView($event)"><md-icon>chevron_left</md-icon></md-button>
-          <var:string value="monthNameOfThisMonth" />
-          <md-button
-              class="sg-icon-button"
-              label:aria-label="Next Month"
-              var:date="nextMonthQueryParameters.day"
-              ng-click="calendar.changeView($event)"><md-icon>chevron_right</md-icon></md-button>
-        </h5>
-      </div>
-      <div class="monthView">
-        <div layout="row" layout-align="center center">
-          <var:foreach list="headerDaysToDisplay" item="currentTableDay">
-            <div class="md-flex-fix dayLabels"><var:string value="labelForCurrentDayToDisplay"/></div>
+  <md-toolbar md-scroll-shrink="true" class="monthView md-hue-1">
+    <div layout="row" layout-align="center center"
+         class="md-flex md-default-theme md-fg md-hue-2">
+      <var:foreach list="headerDaysToDisplay" item="currentTableDay">
+        <div class="md-flex-fix dayLabels"><var:string value="labelForCurrentDayToDisplay"/></div>
+      </var:foreach>
+    </div>
+  </md-toolbar>
+
+  <md-content class="md-flex" md-scroll-y="md-scroll-y">
+    <div class="calendarView monthView">
+      <md-grid-list
+          md-cols="7"
+          md-row-height="1:1">
+        <var:foreach list="weeksToDisplay" item="currentWeek">
+          <var:foreach list="currentWeek" item="currentTableDay">
+            <md-grid-tile
+                md-rowspan="1"
+                md-colspan="1"
+                class="day"
+                var:day="currentTableDay.shortDateString"
+                var:day-number="currentDayNumber"
+                var:id="currentDayId">
+              <div layout="column" layout-fill="true">
+                <var:if condition="currentTableDay.isToday">
+                  <div class="sg-calendar-tile-header md-default-theme md-fg md-accent md-hue-2"><var:string value="dayHeaderNumber"/></div>
+                </var:if>
+                <var:if condition="currentTableDay.isToday" const:negate="YES">
+                  <div class="sg-calendar-tile-header md-default-theme md-fg md-hue-2"><var:string value="dayHeaderNumber"/></div>
+                </var:if>
+                <sg-calendar-month-day
+                    sg-blocks="calendar.blocks"
+                    sg-click="list.openEvent(event, component)"
+                    var:sg-day="currentTableDay.shortDateString"><!-- day's events --></sg-calendar-month-day>
+              </div>
+            </md-grid-tile>
           </var:foreach>
-        </div>
-        <md-grid-list
-            md-cols="7"
-            md-row-height="1:1">
-          <var:foreach list="weeksToDisplay" item="currentWeek">
-            <var:foreach list="currentWeek" item="currentTableDay">
-              <md-grid-tile
-                  md-rowspan="1"
-                  md-colspan="1"
-                  class="day"
-                  var:day="currentTableDay.shortDateString"
-                  var:day-number="currentDayNumber"
-                  var:id="currentDayId">
-                <div layout="column" layout-fill="true">
-                  <div class="sg-calendar-tile-header"><var:string value="dayHeaderNumber"/></div>
-                  <sg-calendar-month-day
-                      sg-blocks="calendar.blocks"
-                      sg-click="list.openEvent(event, component)"
-                      var:sg-day="currentTableDay.shortDateString"><!-- day's events --></sg-calendar-month-day>
-                </div>
-              </md-grid-tile>
-            </var:foreach>
-          </var:foreach>
-        </md-grid-list>
-      </div>
-    </md-content>
-  </container>
+        </var:foreach>
+      </md-grid-list>
+    </div>
+  </md-content>
+</container>
diff --git a/UI/Templates/SchedulerUI/UIxCalWeekView.wox b/UI/Templates/SchedulerUI/UIxCalWeekView.wox
index 51447ef68..765459be9 100644
--- a/UI/Templates/SchedulerUI/UIxCalWeekView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalWeekView.wox
@@ -1,34 +1,40 @@
 <?xml version="1.0" standalone="yes"?>
-  <container
-      xmlns="http://www.w3.org/1999/xhtml"
-      xmlns:var="http://www.skyrix.com/od/binding"
-      xmlns:const="http://www.skyrix.com/od/constant"
-      xmlns:rsrc="OGo:url"
-      xmlns:label="OGo:label">
+<!DOCTYPE container>
+<container
+    xmlns="http://www.w3.org/1999/xhtml"
+    xmlns:var="http://www.skyrix.com/od/binding"
+    xmlns:const="http://www.skyrix.com/od/constant"
+    xmlns:rsrc="OGo:url"
+    xmlns:label="OGo:label">
 
-    <md-content>
-      <div layout="row" layout-align="center">
-        <h5>
-          <md-button
-              class="sg-icon-button"
-              label:aria-label="Previous Week"
-              var:date="prevWeekQueryParameters.day"
-              ng-click="calendar.changeView($event)"><md-icon>chevron_left</md-icon></md-button>
-          <var:string value="currentWeekName" />
-          <md-button
-              class="sg-icon-button"
-              label:aria-label="Next Week"
-              var:date="nextWeekQueryParameters.day"
-              ng-click="calendar.changeView($event)"><md-icon>chevron_right</md-icon></md-button>
-        </h5>
-      </div>
-      <div id="calendarContent">
-        <var:component
-            className="UIxCalDayTable"
-            startDate="startDate"
-            const:CSSClass="weekOverview"
-            const:numberOfDays="7"
-            const:currentView="weekview"/>
-      </div>
-    </md-content>
-  </container>
+  <md-toolbar hide-sm="hide-sm">
+    <div class="md-toolbar-tools">
+      <md-button class="md-icon-button"
+                 label:aria-label="Previous Week"
+                 var:date="prevWeekQueryParameters.day"
+                 ng-click="calendar.changeView($event)"><md-icon>chevron_left</md-icon></md-button>
+      <div><var:string value="currentWeekName" /></div>
+      <md-button class="md-icon-button"
+                 label:aria-label="Next Week"
+                 var:date="nextWeekQueryParameters.day"
+                 ng-click="calendar.changeView($event)"><md-icon>chevron_right</md-icon></md-button>
+      <div class="md-flex"><!-- spacer --></div>
+      <md-button class="md-icon-button md-accent"
+                 label:aria-label="Today"
+                 ng-click="app.today()"><md-icon>today</md-icon></md-button>
+      <a class="md-icon-button md-button"
+         label:aria-label="Day"
+         href="#/calendar/day"><md-icon>view_day</md-icon></a>
+      <a class="md-icon-button md-button"
+         label:aria-label="Month"
+         href="#/calendar/month"><md-icon>view_module</md-icon></a>
+    </div>
+  </md-toolbar>
+
+  <var:component
+      className="UIxCalDayTable"
+      startDate="startDate"
+      const:CSSClass="weekOverview"
+      const:numberOfDays="7"
+      const:currentView="weekview"/>
+</container>
diff --git a/UI/WebServerResources/scss/views/SchedulerUI.scss b/UI/WebServerResources/scss/views/SchedulerUI.scss
index 385d41f29..40111f2e0 100644
--- a/UI/WebServerResources/scss/views/SchedulerUI.scss
+++ b/UI/WebServerResources/scss/views/SchedulerUI.scss
@@ -1,7 +1,18 @@
 /// SchedulerUI.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
 $hours_margin: 50px;
+$scrollbar_width: 16px;
+
+/**
+ * Affected templates:
+ * - SchedulerUI/UIxCalDayView.wox
+ * - SchedulerUI/UIxCalWeekView.wox
+ * - SchedulerUI/UIxCalDayTable.wox
+ * - SchedulerUI/UIxCalMonthView.wox
+ */
 
 [ui-view=calendars] {
+
+  // Decrease with of middle column (list of events and tasks)
   $listView-width: grid-step(5) !global;
   $detailView-width: grid-step(11) !global;
 
@@ -21,31 +32,73 @@ $hours_margin: 50px;
       @include flex-col(md, 10);
     }
     @include from(lg) {
-      @include flex-col(lg, 11, 2, 1);
+      @include flex-col(lg, 11, 1, 1);
     }
   }
 
-  .sg-draggable {
-    cursor: move;
+  // The calendar view container
+  .calendarView {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
   }
 
-  .dayLabels {
-    //color: sg-color($sogoBlue, 700);
-    overflow: hidden;
-    .day {
-      text-align: center;
+  // The days labels appear in the toolbar
+  md-toolbar {
+    &.daysView {
+      overflow: hidden;
+      z-index: $z-index-toolbar - 1;
+      .days {
+        margin-left: $hours_margin;
+        margin-right: $scrollbar_width; // scrollbar
+        &.dayLabels {
+          .day {
+            padding-left: 1%;
+          }
+        }
+      }
     }
+    &[sg-view=dayview] {
+      .dayLabels {
+        .day {
+          display: flex;
+          align-items: center;
+        }
+      }
+    }
+//    &.monthView {
+//      > div {
+//        margin-right: $scrollbar_width;
+//      }
+//    }
   }
 
-  .allDays {
+  // The all-day events appear in the shrinkable toolbar, bellow the days labels
+  .allDaysView {
     border-bottom: 1px solid sg-color($sogoPaper, 300);
+    max-height: $sg-font-size-4 * 6;
+
+    .sg-event {
+      margin: 2%; // See sgCalendarDayBlock.directive.js
+      line-height: initial;
+      position: relative;
+    }
+
+    .gradient, .text {
+      position: relative;
+    }
   }
 
+  // Days row
   .days {
     display: flex;
     flex-direction: row;
     align-items: stretch;
     .day {
+      flex-grow: 1;
+      flex-basis: 0;
       border-left: 1px solid sg-color($sogoPaper, 300);
       .clickableHourCell {
         height: 40px;
@@ -54,26 +107,18 @@ $hours_margin: 50px;
     }
   }
 
-  .daysViewFor1Days,
-  .daysViewFor7Days {
-    margin-left: $hours_margin;
-    .day {
-      flex-grow: 1;
-      flex-basis: 0;
-    }
-  }
-
+  // Header of month tiles
   .sg-calendar-tile-header {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    color: sg-color($sogoPaper, 800);
     font-size: $sg-font-size-2;
-    font-weight: $sg-font-light;
+    //font-weight: $sg-font-light;
     overflow: hidden;
     padding: 2px;
   }
 
+  // The left column of hours
   .hours {
     color: sg-color($sogoBlue, 700);
     display: inline-block;
@@ -97,6 +142,12 @@ $hours_margin: 50px;
     }
   }
 
+  // A container for a day-long (column) of hour cells
+  .hourCells {
+    position: relative;
+  }
+
+  // The outer event container
   .sg-event {
     font-size: $sg-font-size-2;
     &, md-icon {
@@ -105,41 +156,28 @@ $hours_margin: 50px;
     .material-icons {
       font-size: $sg-font-size-2;
     }
-    .allDays & {
-      margin: 2%; // See sgCalendarDayBlock.directive.js
-      line-height: initial;
-    }
   }
 
-  .daysView {
-    bottom: 0;
-    overflow-x: hidden;
-    overflow: auto;
-    top: 0;
-    .hourCells {
-      position: relative;
+  // Events from editable calendars are draggable
+  .sg-draggable {
+    cursor: move;
+  }
+
+  .sg-event {
+    border-radius: 3px;
+    position: absolute;
+    left: 0;
+    right: 0;
+    opacity: 0.9; // When events from a same calendar overlap, it creates a border to help distinguish the events
+    overflow: hidden;
+    $i: 0;
+    @while $i < 96 { // number of 15-minutes blocks in a day
+      &.starts#{$i} { top: 10px * $i; }
+      &.lasts#{$i} { height: 10px * $i; }
+      $i: $i + 1;
     }
-    .sg-event {
-      border-radius: 3px;
-      position: absolute;
-      left: 0;
-      right: 0;
-      opacity: 0.9; // When events from a same calendar overlap, it creates a border to help distinguish the events
+    .eventInside {
       overflow: hidden;
-      $i: 0;
-      @while $i < 96 { // number of 15-minutes blocks in a day
-        &.starts#{$i} { top: 10px * $i; }
-        &.lasts#{$i} { height: 10px * $i; }
-        $i: $i + 1;
-      }
-      .eventInside {
-        overflow: hidden;
-      }
-    }
-    &.daysHeader {
-      .sg-event {
-        position: relative;
-      }
     }
   }
 
@@ -149,10 +187,11 @@ $hours_margin: 50px;
       overflow: auto;
     }
     .sg-event {
+      position: relative;
       border-radius: 1px;
       overflow: hidden;
-      padding: 2px;
-      margin-bottom: 1px;
+      padding: 2%;
+      margin: 2%;
       text-overflow: ellipsis;
       white-space: nowrap;
       span { // hours
@@ -177,9 +216,6 @@ $hours_margin: 50px;
     right: 2px;
     bottom: 1px;
     overflow: hidden;
-    .allDays & {
-      position: relative;
-    }
   }
 
   .gradient > IMG {
@@ -218,9 +254,9 @@ $hours_margin: 50px;
     &:hover {
       background-color: initial;
     }
-//      img {
-//        margin-right: $mg/4;
-//      }
+    //      img {
+    //        margin-right: $mg/4;
+    //      }
   }
   .md-tile-left {
     height: initial;