diff options
| -rw-r--r-- | www/js/calendar.js | 22 | ||||
| -rw-r--r-- | www/styles/main.css | 1 | ||||
| -rw-r--r-- | www/styles/week.css | 26 | ||||
| -rw-r--r-- | www/weeks.html | 55 |
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> |