Rework diary to focus on yearly pages

assets/diary/calendar.html

@@ -1,11 +1,13 @@
-<div class="diary-cal panel panel-sidebar">
+<div class="diary-cal panel panel-sidebar"
+     data-display-year="{{.DisplayYear}}"
+     data-display-month="{{.DisplayMonth}}">
   <div class="panel-header"><a href="{{.DiaryURL}}">Chronological</a></div>
   <div class="diary-cal-nav">
-    <a href="{{.MonthURL}}" class="diary-cal-heading">{{.MonthName}}</a>
+    <a href="{{.DisplayMonthURL}}" class="diary-cal-heading" data-cal-month-link>{{.DisplayMonthName}}</a>
     <div class="dropdown diary-cal-drop">
       <button type="button" class="btn btn-small" data-action="cal-month-drop" aria-expanded="false" title="Monat wählen">▾</button>
       <div class="dropdown-menu scrollable">
-        {{range .AllMonths}}<a class="btn btn-block{{if .IsCurrent}} cal-current{{end}}" href="{{.URL}}">{{.Name}}</a>{{end}}
+        {{range .Months}}<a class="btn btn-block" data-cal-month-jump="{{.Num}}" href="{{.AnchorURL}}">{{.Name}}</a>{{end}}
       </div>
     </div>
     <a href="{{.YearURL}}" class="diary-cal-heading">{{.DisplayYear}}</a>
@@ -16,7 +18,8 @@
       </div>
     </div>
   </div>
-  <table class="diary-cal-grid">
+  {{range .Months}}
+  <table class="diary-cal-grid" data-cal-month="{{.Num}}"{{if ne .Num $.DisplayMonth}} hidden{{end}}>
     <thead>
       <tr><th>Mo</th><th>Di</th><th>Mi</th><th>Do</th><th>Fr</th><th>Sa</th><th>So</th></tr>
     </thead>
@@ -25,5 +28,6 @@
     {{end}}
     </tbody>
   </table>
+  {{end}}
 </div>
 <script src="/_/diary/calendar.js"></script>