From 4b47e5de83163e9c9bf38b7d2e20c1859c54d210 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Mon, 30 Mar 2015 15:11:20 -0400
Subject: [PATCH] Calendar module: initial AngularJS-based templates

---
 UI/Templates/SchedulerUI/UIxCalDayTable.wox   |   3 +
 UI/Templates/SchedulerUI/UIxCalMainView.wox   | 224 ++++++++++--------
 UI/Templates/SchedulerUI/UIxCalWeekView.wox   |  42 ++--
 .../SchedulerUI/UIxCalendarSelector.wox       |  45 +---
 UI/Templates/UIxSidenavToolbarTemplate.wox    |  30 +++
 .../scss/components/checkbox/checkbox.scss    |   8 +-
 .../scss/components/sidenav/sidenav.scss      |   5 +-
 .../scss/views/SchedulerUI.scss               | 124 ++++++++++
 UI/WebServerResources/scss/views/_view.scss   |   1 +
 9 files changed, 306 insertions(+), 176 deletions(-)
 create mode 100644 UI/Templates/UIxSidenavToolbarTemplate.wox
 create mode 100644 UI/WebServerResources/scss/views/SchedulerUI.scss

diff --git a/UI/Templates/SchedulerUI/UIxCalDayTable.wox b/UI/Templates/SchedulerUI/UIxCalDayTable.wox
index 8f687d181..998128ea5 100644
--- a/UI/Templates/SchedulerUI/UIxCalDayTable.wox
+++ b/UI/Templates/SchedulerUI/UIxCalDayTable.wox
@@ -101,6 +101,9 @@
                   <span class="minutes45"><!-- space --></span>
                 </div>
               </var:foreach>
+              <sg-calendar-day-table
+                  sg-blocks="calendar.blocks"
+                  var:sg-day="currentTableDay.shortDateString" />
             </div>
             <div class="events"><!-- space --></div>
           </div>
diff --git a/UI/Templates/SchedulerUI/UIxCalMainView.wox b/UI/Templates/SchedulerUI/UIxCalMainView.wox
index 4e937be09..ccb0d6e5f 100644
--- a/UI/Templates/SchedulerUI/UIxCalMainView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalMainView.wox
@@ -9,7 +9,7 @@
   className="UIxPageFrame"
   const:userDefaultsKeys="SOGoRefreshViewCheck, SOGoCalendarCategoriesColors,SOGoDefaultCalendar"
   const:userSettingsKeys="Calendar,ShowCompletedTasks"
-  const:jsFiles="SchedulerUIDnD.js,jquery-ui.js"
+  const:jsFiles="Common/resource.js, Common/user-model.js, Common/acl-model.js, Contacts/card-model.js, Contacts/addressbook-model.js, Appointments/component-model.js, Appointments/calendar-model.js"
   title="title">
   <script type="text/javascript">
     var firstDayOfWeek = <var:string value="firstDayOfWeek"/>;
@@ -17,6 +17,7 @@
     var currentView = '<var:string value="currentView"/>';
     var localeCode = '<var:string value="localeCode" />';
   </script>
+  <var:component className="UIxCalendarSelector" />
   <style type="text/css">
   <var:if condition="horizontalDragHandleStyle">
     DIV#verticalDragHandle, DIV#rightPanel
@@ -31,6 +32,8 @@
      { height: <var:string value="eventsListViewStyle" />; }
   </var:if>
   </style>
+
+  <!--
   <div class="preload" style="visibility: hidden;">
     <img rsrc:src="event-gradient.png"/>
   </div>
@@ -56,12 +59,12 @@
     <ul>
       <li><var:string label:value="New Event..."/></li>
       <li><var:string label:value="New Task..."/></li>
-      <li><!-- separator --></li>
+      <li>!- separator -</li>
       <li><var:string label:value="Edit Selected Event..."/></li>
       <li><var:string label:value="Delete Selected Event"/></li>
-      <li><!-- separator --></li>
+      <li>!- separator -</li>
       <li><var:string label:value="Select All"/></li>
-      <li><!-- separator --></li>
+      <li>!- separator -</li>
       <li><var:string label:value="Workweek days only"/></li>
       <li><var:string label:value="Tasks in View"/></li>
     </ul>
@@ -71,10 +74,10 @@
     <ul>
       <li><var:string label:value="Open Task..."/></li>
       <li><var:string label:value="New Task..."/></li>
-      <li><!-- separator --></li>
+      <li>!- separator -</li>
       <li><var:string label:value="Mark Completed"/></li>
       <li><var:string label:value="Delete Task"/></li>
-      <li><!-- separator --></li>
+      <li>!- separator -</li>
       <li><var:string label:value="View Raw Source"/></li>
     </ul>
   </div>
@@ -82,28 +85,28 @@
   <div class="menu" id="calendarsMenu">
     <ul>
       <li><var:string label:value="Properties"/></li>
-      <li><!-- separator --></li>
+      <li>!- separator -</li>
       <li><var:string label:value="New Calendar..."/></li>
       <li id="deleteCalendarMenuItem"><var:string label:value="Delete Calendar"/></li>
-      <li><!-- separator --></li>
+      <li>!- separator -</li>
       <li><var:string label:value="Export Calendar..."/></li>
       <li><var:string label:value="Import Events..."/></li>
       <li><var:string label:value="Publish Calendar..."/></li>
-      <li><!-- separator --></li>
+      <li>!- separator -</li>
       <li><var:string label:value="Reload Remote Calendars"/></li>
-      <li><!-- separator --></li>
+      <li>!- separator -</li>
       <li><var:string label:value="Sharing..." /></li>
     </ul>
   </div>
   
   <div id="eventDialog" style="display: none;" class="dialog">
     <div>
-      <h1><!-- space --></h1>
-      <p><span><!-- space --></span></p>
-      <p><span class="label"><var:string label:value="Calendar:" /></span> <span><!-- space --></span></p>
-      <p><span class="label"><var:string label:value="Location:" /></span> <span><!-- space --></span></p>
-      <p><span class="label"><var:string label:value="Created by:" /></span> <span><!-- space --></span></p>
-      <p class="description"><!-- space --></p>
+      <h1>!- space -</h1>
+      <p><span>!- space -</span></p>
+      <p><span class="label"><var:string label:value="Calendar:" /></span> <span>!- space -</span></p>
+      <p><span class="label"><var:string label:value="Location:" /></span> <span>!- space -</span></p>
+      <p><span class="label"><var:string label:value="Created by:" /></span> <span>!- space -</span></p>
+      <p class="description">!- space -</p>
     </div>
   </div>
 
@@ -129,97 +132,110 @@
   <div id="uploadResults" style="display: none" class="dialog left">
     <div>
       <h3><var:string label:value="Import Events"/></h3>
-      <p><span id="uploadResultsContent"><!-- empty --></span>
+      <p><span id="uploadResultsContent">!- empty -</span>
       <a href="#" class="button" const:id="uploadOK">
           <span><var:string label:value="Done" /></span></a></p>
       <hr/>
     </div>
-  </div>
-
-  <div id="leftPanel">
-    <div id="dateSelectorView" class=""
-         ><var:component className="UIxCalDateSelector"
-         selectedDate="thisMonth"
-         /></div>
-    <div id="calendarSelectorView"
-         ><var:component className="UIxCalendarSelector"
-         var:calendarFolders="calendarFolders" /></div>
-  </div>
-
-  <div id="verticalDragHandle" class="dragHandle"><!-- space --></div>
-
-  <div id="rightPanel">
-    <div class="tabsContainer" id="schedulerTabs" var:style="listStateStyle">
-      <ul>
-        <li target="eventsListView" var:class="eventsTabClass"
-          ><span><var:string label:value="Events" /></span></li>
-        <li target="tasksListView" var:class="tasksTabClass"
-          ><span><var:string label:value="Tasks" /></span></li>
-      </ul>
-      <div class="tabs">
-        <div id="eventsListView" class="tab">
-          <var:component className="UIxCalFilterPanel" />
-          <table id="eventsList" cellspacing="0">
-            <thead>
-              <tr>
-                <td id="eventTitleHeader" class="headerCell headerTitle sortableTableHeader"><var:string label:value="Title"/></td>
-                <td id="eventStartHeader" class="headerCell headerDateTime sortableTableHeader"><var:string label:value="Start"/></td>
-                <td id="eventEndHeader" class="headerCell headerDateTime sortableTableHeader"><var:string label:value="End"/></td>
-                <td id="eventLocationHeader" class="headerCell headerLocation sortableTableHeader"><var:string label:value="Location"/></td>
-                <td id="eventCategoryHeader" class="headerCell headerCategory sortableTableHeader"><var:string label:value="Category"/></td>
-                <td id="eventCalendarNameHeader" class="headerCell headerCalendarName sortableTableHeader"><var:string label:value="Calendar"/></td>
-              </tr>
-            </thead>
-            <tbody><!-- events list --></tbody>
-          </table>
-        </div>
-        <div id="tasksListView" class="tab">
-          <div class="filterPanel" search="tasks">
-            <div class="menu" id="taskSearchMenu">
-              <ul class="choiceMenu">
-                <li option="title"><var:string label:value="Title"/></li>
-                <li option="title_Category_Location"><var:string label:value="Title, category or location"/></li>
-                <li option="entireContent"><var:string label:value="Entire content"/></li>
-              </ul>
-            </div>
-            <span class="searchBox" style="float: right">
-              <input name="criteria" type="hidden" />
-              <input name="search" class="textField"
-                     autocomplete="off" type="text"
-                     menuid="taskSearchMenu" />
-            </span>
-            <span>
-              <var:string label:value="View:" />
-              <var:popup list="tasksFilters"
-                const:id="tasksFilterpopup"
-                item="taskFilter" string="tasksFilterLabel" value="taskFilter"
-                selection="selectedTasksFilter"
-                const:name="tasksFilterpopup"
-                const:onchange="return onTasksListFilterChange();" />
-            </span>
-            <span>
-              <input id="showHideCompletedTasks" type="checkbox" class="checkBox" var:checked="showCompletedTasks"/>
-              <var:string label:value="Show completed tasks" />
-            </span>
-          </div>
-          <table id="tasksList" cellspacing="0">
-            <thead>
-              <tr>
-                <td id="taskCompletedHeader" class="headerCell"><entity name="nbsp"/></td>
-                <td id="taskPriorityHeader" class="headerCell headerPriority sortableTableHeader"><var:string label:value="Priority"/></td>
-                <td id="taskTitleHeader" class="headerCell headerTitle sortableTableHeader"><var:string label:value="Title"/></td>
-                <td id="taskEndHeader" class="headerCell headerDateTime sortableTableHeader"><var:string label:value="Due Date"/></td>
-                <td id="taskLocationHeader" class="headerCell headerLocation sortableTableHeader"><var:string label:value="Location"/></td>
-                <td id="taskCategoryHeader" class="headerCell headerCategory sortableTableHeader"><var:string label:value="Category"/></td>
-                <td id="taskCalendarNameHeader" class="headerCell headerCalendarName sortableTableHeader"><var:string label:value="Calendar"/></td>
-              </tr>
-            </thead>
-            <tbody><!-- tasks list --></tbody>
-          </table>
-        </div>
-      </div>
     </div>
-    <div id="rightDragHandle" class="dragHandle" var:style="listStateStyle"><!-- space --></div>
-    <div id="calendarView" var:style="listStateStyle"><!-- space --></div>
-  </div>
+    -->
+
+  <main class="view md-layout-fill" ui-view="calendars" layout="row" ng-controller="navController"><!-- calendars list --></main>
+
+  <script type = "text/ng-template" id="UIxCalMainFrame">
+    <!-- Sidenav -->
+    <md-sidenav id="left-sidenav" class="md-sidenav-left" md-component-id="left" md-is-locked-open="isGtMedium" layout="column">
+      <var:component className="UIxSidenavToolbarTemplate" />
+      <md-content md-scroll-y="md-scroll-y" class="md-flex">
+        <md-list ng-repeat="calendar in calendars.list">
+          <md-item>
+            <md-item-content>
+              <md-checkbox ng-model="calendar.active"
+                           ng-true-value="1"
+                           ng-false-value="0"
+                           aria-label="Enable"
+                           class="md-button md-flex sg-item-name">{{calendar.name}}</md-checkbox>
+            </md-item-content>
+          </md-item>
+        </md-list>
+      </md-content>
+    </md-sidenav>
+
+    <!-- Main section -->
+    <section layout="column" class="sg-app-content md-layout-fill"
+             ng-controller="CalendarListController as list">
+      <md-toolbar layout="column" layout-align="space-between start" class="md-tall toolbar-main">
+        <div class="md-toolbar-tools md-toolbar-tools-top" layout="row" layout-align="space-between start">
+          <div class="sg-toolbar-group-1" layout="row">
+            <md-button ng-click="toggleLeft()" class="md-hide-gt-md sg-button-navicon iconButton" label:aria-label="Toggle Menu">
+              <span class="md-icon-menu"></span>
+            </md-button>
+            <div class="sg-date-group" layout="column" layout-align="space-between end">
+              <p class="sg-day" ng-bind="currentDay.weekday"><!-- weekday --></p>
+              <p class="sg-month" ng-bind="currentDay.month"><!-- month --></p>
+              <p class="sg-year" ng-bind="currentDay.year"><!-- year --></p>
+            </div>
+            <p class="sg-md-display-3 sg-date-today" ng-bind="currentDay.day"><!-- day --></p>
+          </div>
+          <div class="sg-toolbar-group-2">
+            <md-button class="iconButton" label:aria-label="Search">
+              <i class="md-icon-search"><!--icon--></i>
+            </md-button>
+          </div>
+        </div><!-- .md-toolbar-tools -->
+        <div layout="row" layout-align="space-between center" class="md-toolbar-tools md-toolbar-tools-bottom">
+          <div class="cols-6" layout="row" layout-align="space-between center" style="padding-right: 16px"
+               sg-search="list.component.$filter(list.componentType, { value: searchText, search: searchField })">
+            <md-input-container class="sg-search-field-container">
+              <label style="color: white"><i class="md-icon-search"><!--icon--></i><var:string label:value="Search"/></label>
+              <input name="folderSearch" type="search" style="color: white"/>
+            </md-input-container>
+            <div class="sg-toolbar-group">
+              <md-select>
+                <md-option value="title_Category_Location"><var:string label:value="Title, category or location"/></md-option>
+                <md-option value="entireContent"><var:string label:value="Entire content"/></md-option>
+              </md-select>
+              <span class="md-icon-create"><!-- icon --></span>
+            </div>
+          </div>
+          <div class="spacer cols-8"><!-- spacer -->
+            <a class="iconButton md-button md-default-theme" label:aria-label="Week" href="#/calendar/weekView"><i class="md-icon-view-week"><!-- week view --></i>
+            </a>
+          </div>
+        </div>
+      </md-toolbar>
+      <md-content layout="row">
+        <md-content id="componentsList"
+                    flex="33"
+                    md-scroll-y="md-scroll-y">
+          <md-tabs md-selected="list.selectedList">
+            <md-tab label:label="Events"
+                    md-on-select="list.selectComponentType('events')">
+              <md-list>
+                <md-item ng-repeat="event in list.component.$events">
+                  <md-item-content>
+                    <span>{{event.c_title}}</span>
+                    <span class="right">{{event.formatted_startdate}}</span>
+                  </md-item-content>
+                </md-item>
+              </md-list>
+            </md-tab>
+            <md-tab label:label="Tasks"
+                    md-on-select="list.selectComponentType('tasks')">
+              <md-list>
+                <md-item ng-repeat="task in list.component.$tasks">
+                  <md-item-content>
+                    <span>{{task.c_title}}</span>
+                    <span class="right">{{task.formatted_enddate}}</span>
+                  </md-item-content>
+                </md-item>
+              </md-list>
+            </md-tab>
+          </md-tabs>
+        </md-content>
+        <md-content flex="67" ui-view="calendarView"><!-- calendar view --></md-content>
+      </md-content>
+    </section>
+  </script>
+
 </var:component>
diff --git a/UI/Templates/SchedulerUI/UIxCalWeekView.wox b/UI/Templates/SchedulerUI/UIxCalWeekView.wox
index 6e36775ef..db32215db 100644
--- a/UI/Templates/SchedulerUI/UIxCalWeekView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalWeekView.wox
@@ -6,35 +6,21 @@
       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 Week"/></li>
-        <li><var:string label:value="Next Week"/></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 layout="row" layout-align="center">
+      <h5>
+        <md-button
+            class="iconButton"
+            label:aria-label="Previous Week"
+            var:date="prevWeekQueryParameters.day"
+            ng-click="calendar.changeView($event)"><i class="md-icon-chevron-left"><!--icon--></i></md-button>
+        <var:string value="currentWeekName" />
+        <md-button
+            class="iconButton"
+            label:aria-label="Next Week"
+            var:date="nextWeekQueryParameters.day"
+            ng-click="calendar.changeView($event)"><i class="md-icon-chevron-right"><!--icon--></i></md-button>
+      </h5>
     </div>
-    <span class="weeksHeader">
-      <span class="week1">
-        <a href="#"
-           id="leftNavigationArrow"
-           var:date="prevWeekQueryParameters.day"
-           onclick="return onCalendarGotoDay(this);"><img rsrc:src="arrow-left.png"/></a>
-      </span>
-      <span class="week0"><var:string value="currentWeekName" /></span>
-      <span class="week1">
-        <a href="#"
-           id="rightNavigationArrow"
-           var:date="nextWeekQueryParameters.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>
     <div id="calendarContent">
       <var:component
           className="UIxCalDayTable"
diff --git a/UI/Templates/SchedulerUI/UIxCalendarSelector.wox b/UI/Templates/SchedulerUI/UIxCalendarSelector.wox
index ebe31f660..c443e3553 100644
--- a/UI/Templates/SchedulerUI/UIxCalendarSelector.wox
+++ b/UI/Templates/SchedulerUI/UIxCalendarSelector.wox
@@ -6,46 +6,7 @@
   xmlns:const="http://www.skyrix.com/od/constant"
   xmlns:rsrc="OGo:url"
   xmlns:label="OGo:label">
-  <style type="text/css">
-    <var:foreach list="calendars" item="currentCalendar">
-.calendarFolder<var:string value="currentCalendar.folder" />
-{ background-color: <var:string value="currentCalendar.color" />; color: <var:string value="contrastingTextColor" />; }
-div.colorBox.calendarFolder<var:string value="currentCalendar.folder" />
-{ color: <var:string value="currentCalendar.color" />; }
-.calendarLabels [folder='<var:string value="currentCalendar.folder" />']
-{ border-color: <var:string value="currentCalendar.color" />; }
-    </var:foreach>
-  </style>
-  <div id="calendarSelector">
-    <h6><var:string label:value="Calendars"/></h6>
-    <div id="calendarSelectorButtons">
-      <a href="#" class="smallToolbarButton"
-        ><span><img rsrc:src="add-calendar.png"
-            label:title="New Calendar..."
-            /></span></a>
-      <a href="#" class="smallToolbarButton"
-        ><span><img rsrc:src="add-web-calendar.png"
-            label:title="Subscribe to a web calendar..."
-            /></span></a>
-      <a href="#" class="smallToolbarButton"
-        ><span><img rsrc:src="add-user-calendar.png"
-            label:title="Subscribe to a Calendar..."
-            /></span></a>
-      <a href="#" class="smallToolbarButton"
-        ><span><img rsrc:src="remove-calendar.png"
-            label:title="Remove the selected Calendar"
-            /></span></a>
-    </div>
-    <ul id="calendarList">
-      <var:foreach list="calendars" item="currentCalendar"
-       ><li class="denied" var:id="currentCalendar.id" var:owner="currentCalendar.owner" >
-          <input type="checkbox" class="checkBox" const:disabled="disabled" var:checked="currentCalendar.active" />
-          <div var:class="currentCalendarClass"><entity name="nbsp"/></div>
-          <span><var:string value="currentCalendar.displayName"/></span><var:if
-          condition="currentCalendar.activeTasks"><span class="badge"><var:string value="currentCalendar.activeTasks"/></span
-          ></var:if>
-       </li>
-      </var:foreach>
-    </ul>
-  </div>
+  <script type="text/javascript">
+    var calendarsData = <var:string value="calendars.jsonRepresentation" const:escapeHTML="NO" />;
+  </script>
 </container>
diff --git a/UI/Templates/UIxSidenavToolbarTemplate.wox b/UI/Templates/UIxSidenavToolbarTemplate.wox
new file mode 100644
index 000000000..1b2273da0
--- /dev/null
+++ b/UI/Templates/UIxSidenavToolbarTemplate.wox
@@ -0,0 +1,30 @@
+<?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:label="OGo:label"
+    >
+      <md-toolbar class="md-tall" layout-align="start start">
+        <div class="md-toolbar-tools" layout="row">
+          <md-button
+              class="iconButton sg-button-navicon"
+              label:aria-label="Apps"
+              ng-click="openBottomSheet()">
+            <i class="md-icon-apps"><!-- icon --></i>
+          </md-button>
+          <span class="sg-logo"><!-- logo.svg --></span>
+        </div>
+
+        <div class="md-toolbar-tools" layout="row">
+          <div layout="column">
+            <p class="sg-md-title">{{activeUser.identification}}</p>
+            <!--fixme: implement this with the proper model and actions -->
+            <md-select class="sg-logout" ng-model="accounts.options" var:placeholder="shortUserNameForDisplay">
+              <md-option var:value="relativePreferencesPath"><var:string label:value="Preferences"/></md-option>
+              <var:if condition="canLogoff"><md-option var:value="logoffPath"><var:string label:value="Disconnect" /></md-option></var:if>
+            </md-select>
+          </div>
+        </div>
+      </md-toolbar>
+</container>
diff --git a/UI/WebServerResources/scss/components/checkbox/checkbox.scss b/UI/WebServerResources/scss/components/checkbox/checkbox.scss
index 48c4ab4ca..5610636a8 100644
--- a/UI/WebServerResources/scss/components/checkbox/checkbox.scss
+++ b/UI/WebServerResources/scss/components/checkbox/checkbox.scss
@@ -1 +1,7 @@
-@import 'extends';
\ No newline at end of file
+@import 'extends';
+
+// Checkbox for the sidenav folders list
+// -------------------------------------
+md-sidenav md-checkbox {
+    margin: 0;
+}
diff --git a/UI/WebServerResources/scss/components/sidenav/sidenav.scss b/UI/WebServerResources/scss/components/sidenav/sidenav.scss
index 6bb7d2c5d..68ef0ad96 100644
--- a/UI/WebServerResources/scss/components/sidenav/sidenav.scss
+++ b/UI/WebServerResources/scss/components/sidenav/sidenav.scss
@@ -154,11 +154,14 @@ $i: 1;
     &.sg-loading {
       color: sg-color($sogoBlue, 500);
     }
-    .sg-item-name {
+    .sg-item-name, .md-label {
       text-align: left;
       text-overflow: ellipsis;
       overflow: hidden;
       white-space: nowrap;
     }
+    .md-label {
+      display: inline;
+    }
   }
 }
diff --git a/UI/WebServerResources/scss/views/SchedulerUI.scss b/UI/WebServerResources/scss/views/SchedulerUI.scss
new file mode 100644
index 000000000..55afadf42
--- /dev/null
+++ b/UI/WebServerResources/scss/views/SchedulerUI.scss
@@ -0,0 +1,124 @@
+#calendarHeader {
+    position: relative;
+    top: 0;
+    height: 38px;
+    right: 0px;
+    .dayLabels {
+        height: 35px;
+        left: 0;
+        margin-left: 50px;
+        overflow: hidden;
+        position: relative;
+        .day {
+            height: 100%;
+            position: absolute;
+            text-align: center;
+        }
+    }
+}
+
+.monthView, .daysViewFor7Days {
+    .day {
+        width: 14.2857%;
+    }
+    $i: 0;
+    @while $i < 7 {
+        .day#{$i} { left: 1% * 100 / 7 * $i; }
+        $i: $i + 1;
+    }
+}
+
+#daysView {
+    position: relative;
+    top: 0;
+    bottom: 0;
+    overflow: auto;
+    overflow-x: hidden;
+    .hours {
+        height: auto;
+        display: inline-block;
+        position: relative;
+        float: left;
+        top: 0;
+        left: 0;
+        width: 50px;
+        .hour {
+            border-bottom: 1px solid #ccc;
+            height: 40px;
+            left: 0;
+            padding-right: 2px;
+            //padding-top: 2px;
+            position: relative;
+            right: 0;
+            top: 0;
+        }
+    }
+    .days {
+        left: 0;
+        right: 0;
+        top: 0;
+        margin-left: 50px;
+        position: relative;
+        .day {
+            border-left: 1px solid #ccc;
+            position: absolute;
+            .clickableHourCell {
+                height: 40px;
+                border-bottom: 1px solid #ccc;
+            }
+        }
+    }
+    .event {
+        cursor: default;
+        margin-right: 1px;
+        position: absolute;
+        left: 0%;
+        right: 0%;
+        $i: 0;
+        @while $i < 96 {
+            &.starts#{$i} { top: 10px * $i; }
+            &.lasts#{$i} { height: 10px * $i; }
+            $i: $i + 1;
+        }
+        .eventInside {
+            position: absolute;
+            overflow: hidden;
+            top: 0px;
+            bottom: 0px;
+            left: 0px;
+            right: 0px;
+            -webkit-border-radius: 2px;
+            border-radius: 2px;
+            cursor:move;
+        }
+    }
+}
+
+.minutes15, .minutes30, .minutes45 {
+    display: block;
+    height: 25%;
+}
+
+.minutes30 {
+    border-bottom: 1px dotted #ccc;
+}
+
+.gradient, .text {
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    right: 1px;
+    bottom: 1px;
+    overflow: hidden;
+}
+
+.gradient > IMG {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 100%;
+    min-height: 15px; /* for 15-minute events */
+    width: 100%;
+}
diff --git a/UI/WebServerResources/scss/views/_view.scss b/UI/WebServerResources/scss/views/_view.scss
index f0596677f..850b8fb39 100644
--- a/UI/WebServerResources/scss/views/_view.scss
+++ b/UI/WebServerResources/scss/views/_view.scss
@@ -9,6 +9,7 @@
 @import 'MailerUI.scss';
 @import 'ContactsUI.scss';
 @import 'MessageEditorUI';
+@import 'SchedulerUI';
 
 .view[layout=row] {
   max-height: 100%;