4 files changed, 77 insertions, 27 deletions
diff --git a/www/js/calendar.js b/www/js/calendar.js
index 8bdf033..c6b4f61 100644
--- a/www/js/calendar.js
+++ b/www/js/calendar.js
@@ -21,6 +21,8 @@
 
 'use strict';
 
+var current_week_offset = -4;
+
 function getLastMonday() {
   var d = new Date();
   d.setHours(0, 0, 0, 0);
@@ -55,13 +57,13 @@ function addWeekClass(row, week) {
   }
 }
 
-function calendar_redraw() {
+function calendar_redraw(weekstart) {
   var cal = $('#calendar');
   cal.find("tr:gt(0)").remove();
 
   var date = getLastMonday();
-  date = addDeltaDays(date, -28);
-  for(var w = 0; w < 42; w++) {
+  date = addDeltaDays(date, weekstart * 7);
+  for(var w = 0; w < 20; w++) {
     var week = get_rd_week(date.valueOf());
     var row = $('<tr>');
     addWeekClass(row, week);
@@ -82,5 +84,17 @@ function calendar_redraw() {
 }
 
 function calendar_init() {
-  calendar_redraw()
+  $('#btn-earlier').click(calendar_prev);
+  $('#btn-later').click(calendar_next);
+  calendar_redraw(current_week_offset)
+}
+
+function calendar_prev() {
+  current_week_offset--;
+  calendar_redraw(current_week_offset)
+}
+
+function calendar_next() {
+  current_week_offset++;
+  calendar_redraw(current_week_offset)
 }
diff --git a/www/styles/main.css b/www/styles/main.css
index 65b04de..638f4d2 100644
--- a/www/styles/main.css
+++ b/www/styles/main.css
@@ -21,6 +21,7 @@
 
 body {
   background-color: #eee;
+  font-family: Sans-Serif;
 }
 
 #container {
diff --git a/www/styles/week.css b/www/styles/week.css
index 5ff75cd..211f1ad 100644
--- a/www/styles/week.css
+++ b/www/styles/week.css
@@ -19,7 +19,32 @@
  *  along with rhrdweb. If not, see <http://www.gnu.org/licenses/>.
  */
 
+#leftcol {
+  float: left;
+  width: 42%;
+  min-width: 25em;
+  margin-top: 5em;
+  margin-bottom: 5em;
+}
+
+#buttons {
+  margin-top: 3em;
+}
+
+#buttons input[type=button] {
+  font-size: 1.3em;
+  font-weight: bold;
+  padding: 0.3em 3em;
+}
+
+#rightcol {
+  float: left;
+  width: 58%;
+  min-width: 25em;
+}
+
 #calendar {
+  margin-top: 2em;
   border-collapse: collapse;
 }
 
@@ -47,4 +72,3 @@
   border-left: 2px solid white;
   border-right: 2px solid white;
 }
-
diff --git a/www/weeks.html b/www/weeks.html
index 13ee0e5..42c8e29 100644
--- a/www/weeks.html
+++ b/www/weeks.html
@@ -15,33 +15,44 @@
  </head>
  <body>
    <div id="container">
-     <div id="clock">
-       <span class="current-week"></span>
-       <span class="clock-date"></span>
-       <span class="clock-time"></span>
-     </div>
+     <div id="leftcol">
+       <div id="title">
+         <h1>Rivendell Wochenplan</h1>
+       </div>
 
-   </div>
+       <div id="clock">
+         <h2>aktuelle Woche:</h2>
+         <span class="current-week"></span>
+         <span class="clock-date"></span>
+         <span class="clock-time"></span>
+       </div>
 
-   <div id="weeks">
-     <table id="calendar">
-       <tr>
-         <th></th>
-         <th></th>
-         <th>Mo</th>
-         <th>Di</th>
-         <th>Mi</th>
-         <th>Do</th>
-         <th>Fr</th>
-         <th>Sa</th>
-         <th>So</th>
-         <th></th>
-       </tr>
-     </table>
+       <div id="buttons">
+         <input id="btn-earlier" type="button" value="Früher"></input>
+         <input id="btn-later" type="button" value="Später"></input>
+       </div>
+     </div>
+
+     <div id="rightcol">
+       <table id="calendar">
+         <tr>
+           <th></th>
+           <th></th>
+           <th>Mo</th>
+           <th>Di</th>
+           <th>Mi</th>
+           <th>Do</th>
+           <th>Fr</th>
+           <th>Sa</th>
+           <th>So</th>
+           <th></th>
+         </tr>
+       </table>
+     </div>
    </div>
 
   <script type="text/javascript">
-    <!-- clock_init(); -->
+    clock_init();
     calendar_init();
   </script>