Calendar module: add month view

This commit is contained in:
Francis Lachapelle
2015-04-08 16:01:52 -04:00
parent a2c469d46a
commit 8f47e62dd2
6 changed files with 137 additions and 34 deletions
+34 -29
View File
@@ -7,7 +7,7 @@
xmlns:rsrc="OGo:url"
xmlns:label="OGo:label">
<div class="menu" id="currentViewMenu">
<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>
@@ -20,39 +20,44 @@
<li><var:string label:value="View Raw Source"/></li>
</ul>
</div>
<span class="monthsHeader">
<span class="month1">
<a href="#"
id="leftNavigationArrow"
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="#"
id="rightNavigationArrow"
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 layout="row" layout-align="center">
<h5>
<md-button
class="iconButton"
label:aria-label="Previous Month"
var:date="prevMonthQueryParameters.day"
ng-click="calendar.changeView($event)"><i class="md-icon-chevron-left"><!--icon--></i></md-button>
<var:string value="monthNameOfThisMonth" />
<md-button
class="iconButton"
label:aria-label="Next Month"
var:date="nextMonthQueryParameters.day"
ng-click="calendar.changeView($event)"><i class="md-icon-chevron-right"><!--icon--></i></md-button>
</h5>
</div>
<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"
<div id="calendarHeader" layout="row" layout-align="center center">
<var:foreach list="headerDaysToDisplay" item="currentTableDay">
<div class="md-flex"><var:string value="labelForCurrentDayToDisplay"/></div>
</var:foreach>
</div>
<div id="monthDaysView">
<var:foreach list="weeksToDisplay" item="currentWeek">
<div layout="row">
<var:foreach list="currentWeek" item="currentTableDay">
<div class="md-flex"
var:day="currentTableDay.shortDateString"
var:day-number="currentDayNumber"
var:id="currentDayId"
><div class="dayHeader"><var:string value="dayHeaderNumber"/></div
></div>
var:id="currentDayId">
<div class="dayHeader"><var:string value="dayHeaderNumber"/></div>
<sg-calendar-month-day
sg-blocks="calendar.blocks"
var:sg-day="currentTableDay.shortDateString" />
</div>
</var:foreach>
</div>
</var:foreach>
</div>
</div>