Set the events/tasks list collapsable

UI/Templates/SchedulerUI/UIxCalDayView.wox

@@ -1,63 +1,43 @@
 <?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">
-    <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>
-  <a href="#"
-    class="leftNavigationArrow"
-    var:date="prevDayQueryParameters.day"
-    onclick="return onCalendarGotoDay(this);"
-    ><img rsrc:src="arrow-left.png"/></a>
-  <span class="daysHeader">
-    <span class="day2"><a href="#"
-	var:date="dayBeforePrevDayQueryParameters.day"
-	onclick="return onCalendarGotoDay(this);"
-	><var:string value="dayBeforeYesterdayName"
-	  /></a></span
-      ><span class="day1"><a href="#"
-	var:date="prevDayQueryParameters.day"
-	onclick="return onCalendarGotoDay(this);"
-	><var:string value="yesterdayName"
-	  /></a></span
-      ><span class="day0"><var:string value="currentDayName" /></span
-      ><span class="day1"><a href="#"
-	var:date="nextDayQueryParameters.day"
-	onclick="return onCalendarGotoDay(this);"
-	><var:string value="tomorrowName"
-	  /></a></span
-      ><span class="day2"><a href="#"
-	var:date="dayAfterNextDayQueryParameters.day"
-	onclick="return onCalendarGotoDay(this);"
-	><var:string value="dayAfterTomorrowName"
-	  /></a></span
-      ></span>
-  <a href="#"
-    class="rightNavigationArrow"
-    var:date="nextDayQueryParameters.day"
-    onclick="return onCalendarGotoDay(this);"
-    ><img rsrc:src="arrow-right.png"/></a>
-  <div id="calendarContent">
-    <var:component
-      className="UIxCalDayTable"
-      startDate="startDate"
-      const:CSSClass="dayOverview"
-      const:numberOfDays="1" />
-  </div>
-</container>
+    <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>
+    <span class="daysHeader">
+      <span class="day1">
+        <a href="#"
+           var:date="prevDayQueryParameters.day"
+           onclick="return onCalendarGotoDay(this);"><img rsrc:src="arrow-left.png"/></a>
+      </span>
+      <span class="day0"><var:string value="currentDayName"/></span>
+      <span class="day1">
+        <a href="#"
+           var:date="nextDayQueryParameters.day"
+           onclick="return onCalendarGotoDay(this);"><img rsrc:src="arrow-right.png"/></a>
+      </span>
+      <a href="#" id="listCollapse"><img var:class="collapseBtnClass" rsrc:src="collapse.png"/></a>
+    </span>
+    <div id="calendarContent">
+      <var:component
+          className="UIxCalDayTable"
+          startDate="startDate"
+          const:CSSClass="dayOverview"
+          const:numberOfDays="1" />
+    </div>
+  </container>

UI/Templates/SchedulerUI/UIxCalMainView.wox

@@ -147,7 +147,7 @@
   <div id="verticalDragHandle" class="dragHandle"><!-- space --></div>
 
   <div id="rightPanel">
-    <div class="tabsContainer" id="schedulerTabs">
+    <div class="tabsContainer" id="schedulerTabs" var:style="listStateStyle">
       <ul>
         <li target="eventsListView" var:class="eventsTabClass"
           ><span><var:string label:value="Events" /></span></li>
@@ -202,7 +202,7 @@
         </div>
       </div>
     </div>
-    <div id="rightDragHandle" class="dragHandle"><!-- space --></div>
-    <div id="calendarView"><!-- space --></div>
+    <div id="rightDragHandle" class="dragHandle" var:style="listStateStyle"><!-- space --></div>
+    <div id="calendarView" var:style="listStateStyle"><!-- space --></div>
   </div>
 </var:component>

UI/Templates/SchedulerUI/UIxCalMonthView.wox

@@ -1,77 +1,58 @@
 <?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">
-    <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>
-  </div>
-  <a href="#"
-    class="leftNavigationArrow"
-    var:date="prevMonthQueryParameters.month"
-    onclick="return onCalendarGotoDay(this);"
-    ><img rsrc:src="arrow-left.png"/></a>
-  <span class="monthsHeader">
-    <span class="month2"><a href="#"
-        var:date="monthBeforePrevMonthQueryParameters.month"
-        onclick="return onCalendarGotoDay(this);"
-        ><var:string value="monthNameOfTwoMonthAgo"
-          /></a></span
-      ><span class="month1"><a href="#"
-        var:date="prevMonthQueryParameters.month"
-        onclick="return onCalendarGotoDay(this);"
-        ><var:string value="monthNameOfOneMonthAgo"
-          /></a></span
-      ><span class="month0"><var:string value="monthNameOfThisMonth" /></span
-      ><span class="month1"><a href="#"
-        var:date="nextMonthQueryParameters.month"
-        onclick="return onCalendarGotoDay(this);"
-        ><var:string value="monthNameOfNextMonth"
-          /></a></span
-      ><span class="month2"><a href="#"
-        var:date="monthAfterNextMonthQueryParameters.month"
-        onclick="return onCalendarGotoDay(this);"
-        ><var:string value="monthNameOfTheMonthAfterNextMonth"
-          /></a></span
-      ></span>
-  <a href="#"
-    class="rightNavigationArrow"
-    var:date="nextMonthQueryParameters.month"
-    onclick="return onCalendarGotoDay(this);"
-    ><img rsrc:src="arrow-right.png"/></a>
-
-  <div id="calendarContent">
-    <div class="monthView">
-      <var:foreach list="headerDaysToDisplay" item="currentTableDay"
-        ><div var:class="headerDayCellClasses"
-          ><var:string value="labelForCurrentDayToDisplay"
-            /></div></var:foreach>
-      <div class="days" const:id="monthDaysView"
-        ><var:foreach list="weeksToDisplay" item="currentWeek"
-          ><var:foreach list="currentWeek" item="currentTableDay"
-            ><div var:class="dayCellClasses"
-              var:day="currentTableDay.shortDateString"
-              var:day-number="currentDayNumber"
-              var:id="currentDayId"
+    <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 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>
+    </div>
+    <span class="monthsHeader">
+      <span class="month1">
+        <a href="#"
+           var:date="prevMonthQueryParameters.month"
+           onclick="return onCalendarGotoDay(this);"
+           ><img rsrc:src="arrow-left.png"/></a>
+      </span>
+      <span class="month0"><var:string value="monthNameOfThisMonth" /></span>
+      <span class="month1">
+        <a href="#"
+           var:date="nextMonthQueryParameters.month"
+           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">
+      <div class="monthView">
+        <var:foreach list="headerDaysToDisplay" item="currentTableDay"
+                     ><div var:class="headerDayCellClasses"
+                           ><var:string value="labelForCurrentDayToDisplay"
+                           /></div></var:foreach>
+        <div class="days" const:id="monthDaysView"
+          ><var:foreach list="weeksToDisplay" item="currentWeek"
+            ><var:foreach list="currentWeek" item="currentTableDay"
+              ><div var:class="dayCellClasses"
+                    var:day="currentTableDay.shortDateString"
+                    var:day-number="currentDayNumber"
+                    var:id="currentDayId"
               ><div class="dayHeader"><var:string value="dayHeaderNumber"/></div
-		></div>
+              ></div>
+            </var:foreach>
           </var:foreach>
-        </var:foreach>
+        </div>
       </div>
     </div>
-  </div>
-</container>
+  </container>

UI/Templates/SchedulerUI/UIxCalWeekView.wox

@@ -1,63 +1,43 @@
 <?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">
+      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 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>
-    <a href="#"
-      class="leftNavigationArrow"
-      var:date="prevWeekQueryParameters.day"
-      onclick="return onCalendarGotoDay(this);"
-      ><img rsrc:src="arrow-left.png"/></a>
+    <div class="menu" id="currentViewMenu">
+      <ul>
+        <li><var:string label:value="New Event..."/></li>
+        <li><var:string label:value="New Task..."/></li>
+        <li><!-- separator --></li>
+        <li><var:string label:value="Previous 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>
     <span class="weeksHeader">
-      <span class="week2"><a href="#"
-          var:date="weekBeforePrevWeekQueryParameters.day"
-          onclick="return onCalendarGotoDay(this);"
-          ><var:string value="weekBeforeLastWeekName"
-            /></a></span
-        ><span class="week1"><a href="#"
-          var:date="prevWeekQueryParameters.day"
-          onclick="return onCalendarGotoDay(this);"
-          ><var:string value="lastWeekName"
-            /></a></span
-        ><span class="week0"><var:string value="currentWeekName" /></span
-        ><span class="week1"><a href="#"
-          var:date="nextWeekQueryParameters.day"
-          onclick="return onCalendarGotoDay(this);"
-          ><var:string value="nextWeekName"
-            /></a></span
-        ><span class="week2"><a href="#"
-          var:date="weekAfterNextWeekQueryParameters.day"
-          onclick="return onCalendarGotoDay(this);"
-          ><var:string value="weekAfterNextWeekName"
-            /></a></span
-        ></span>
-    <a href="#"
-      class="rightNavigationArrow"
-      var:date="nextWeekQueryParameters.day"
-      onclick="return onCalendarGotoDay(this);"
-      ><img rsrc:src="arrow-right.png"/></a>
-
+      <span class="week1">
+        <a href="#"
+           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="#"
+           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"
-        startDate="startDate"
-        const:CSSClass="weekOverview"
-        const:numberOfDays="7" />
+          className="UIxCalDayTable"
+          startDate="startDate"
+          const:CSSClass="weekOverview"
+          const:numberOfDays="7" />
     </div>
   </container>