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;