improve tournament calendar

public/stylesheets/tournament_calendar.css

@@ -1,8 +1,13 @@
 #tournament_calendar {
-  position: relative;
   -moz-user-select: none;
   -webkit-user-select: none;
-  padding-top: 30px;
+}
+#tournament_calendar group {
+  width: 100%;
+  position: relative;
+  display: flex;
+  flex-flow: column;
+  padding-top: 20px;
 }
 #tournament_calendar days {
 }
@@ -103,8 +108,11 @@
   position: absolute;
   top: 0;
   left: 0;
+  right: 0;
+  bottom: 0;
   height: 100%;
   width: 100%;
+  border-top: 1px solid rgba(128,128,128,0.3);
 }
 #tournament_calendar .timeheader {
   position: absolute;

ui/tournamentCalendar/src/view.ts

@@ -86,16 +86,29 @@ function makeLanes(tours: Tournament[]): Lanes {
 }
 
 function renderDay(ctrl: Ctrl) {
-  return function(day: Date): VNode | undefined {
+  return function(day: Date): VNode {
     const dayEnd = addDays(day, 1);
     const tours = ctrl.data.tournaments.filter(t =>
       t.bounds.start < dayEnd && t.bounds.end > day
     );
     return h('day', [
-      h('date', [format(day, 'DD/MM')]),
+      h('date', {
+        attrs: {
+          title: format(day, 'dddd, DD/MM/YYYY')
+        }
+      }, [format(day, 'DD/MM')]),
       h('lanes', makeLanes(tours).map(l => renderLane(ctrl, l, day)))
     ]);
-  }
+  };
+}
+
+function renderGroup(ctrl: Ctrl) {
+  return function(group: Date[]): VNode {
+    return h('group', [
+      renderTimeline(),
+      h('days', group.map(renderDay(ctrl)))
+    ]);
+  };
 }
 
 function renderTimeline() {
@@ -113,9 +126,15 @@ function timeString(hour) {
   return ('0' + hour).slice(-2);
 }
 
-export default function(ctrl) {
-  return h('div#tournament_calendar', [
-    renderTimeline(),
-    h('days', eachDay(new Date(ctrl.data.since), new Date(ctrl.data.to)).map(renderDay(ctrl)))
-  ]);
+function makeGroups(days: Date[]): Date[][] {
+  const groups: Date[][] = [];
+  let i,j,temparray,chunk = 10;
+  for (i=0,j=days.length; i<j; i+=chunk) groups.push(days.slice(i,i+chunk));
+  return groups;
+}
+
+export default function(ctrl) {
+  const days = eachDay(new Date(ctrl.data.since), new Date(ctrl.data.to));
+  const groups = makeGroups(days);
+  return h('div#tournament_calendar', h('groups', groups.map(renderGroup(ctrl))));
 }