A Pen by James Barnett.

Github-style-Daily-Activity-Chart.markdown

Github-style Daily Activity Chart

Creates a calendar similar to Github's contribution calendar. Uses moment.js with a bit of CSS & JavaScript to tie it together.

A Pen by James Barnett on CodePen.

License.

index.html

<div class = "activity-chart">
  <h1>Daily Activity Chart</h1>
    <ol class = "days-of-week">
      <li>M</li>
      <li>W</li>
      <li>F</li>
    </ol>
  <div id = "month" class = "month"></div>
  <div id = "days" class = "days"></div>
</div>

script.js

$(document).ready(function() {
  
 /*** draw months ***/ 
  
  var month = moment();
  var outputMonth = "<ol class = 'month'>";
  for (i = 0; i <= 12; i++) {
    var durationMonth = moment.duration({'months' : 1});
    outputMonth += "<li>";
    outputMonth += moment(month).format("MMM");
    outputMonth += "</li>";
    console.log(moment(month).format("MMM YY"));
    month = moment(month).subtract(durationMonth);
  }
  outputMonth += "</ol>";
  
  var output = "<ol><div class = 'week'>";
  var day = moment();
  
  /*** day of week ***/
  
  var dayOfWeekOffset = 0;
  /* Find the day of the week the month starting on 
  so we can calculate the offset for days of the week to line up correctly */
  var startOfMonth = moment().startOf('month');
  dayOfWeekOffset = 7 - (parseInt(moment(startOfMonth).format("d"),10));
  
  /* draw offset */
  for (i = 0; i < (dayOfWeekOffset); i++) { output += "<li class = 'offset'></li>"; }
  
  /*** draw calendar ***/
  
  //console.log(moment(day).format("MM-DD-YY"));
  for (i = 365; i >= 0; i--) {
    //console.log(moment(day).format("MM-DD-YY"));
    output += "<li>";
    output += '<span class = "tooltip">' + moment(day).format("MM-DD-YY")  +  '</span>';
    output += "</li>";
    
    var duration = moment.duration({'days' : 1});
    day = moment(day).subtract(duration);
    
  }
  
  output += "</div></ol>";
  document.getElementById("month").innerHTML = outputMonth;
  document.getElementById("days").innerHTML = output;
});

style.css

ol, li { padding: 0; margin: 0; list-style: none;}
h1 { 
  font-size: 1.5em; 
  margin: 70px 175px;
}

.activity-chart, h1 {color: #525252;}
.days li { background: #ebebeb; }
.activity-chart {
  width: 725px; 
  padding-left: 110px; /* center in container */
  margin: 50px;
  position: relative;
  
  /*outline: solid;
  height: 200px;*/
}

/*** day of week heading ***/

.days-of-week {
  width: 15px;
  position: absolute;
  left: 25px;
  top: 80px;
}

.days-of-week { font-size: 0.7em; }
.days-of-week li:nth-child(2) {
  margin: 13px 0;
}

/*** month headings ***/

.month ol {
  position: absolute;
  top: 40px;
  left: 25px;
}

.month li {
  float: right;
  margin-left: 35px;
  font-size: 0.75em;
}

/*** draw days ***/

.days { 
  font-size: 0.75em;
  margin-top: 15px;
  float: right;  /* needed to float onto screen */
}

/* offset so days of the week line up
over-specified to win specificity battle */
.activity-chart .offset:hover { outline: none; }
.activity-chart .offset { background: white; }

/* create vertical weeks */
.week { 
  width: 108px;
  transform: rotate(90deg);
}

.days li {
  width: 12px;
  height: 12px;
  float: right; /* order days starting at the bottom right */
  
  margin: 1px 1.5px;
}

/*** tooltips ***/

.days li .tooltip { display: none; }
.days li:hover
{  
  outline: 1px solid;
  position: relative;
  z-index: 3;
}

.days li:hover .tooltip {
  transform: rotate(-90deg);
  display: block;
  position: absolute;
  top: -10px;
  left: -85px;
  min-width: 75px;
  padding: 5px 20px;
  text-align: center;
  background-color: #333; 
  color: #f1f1f1;
}

/*** little triangle on the tooltip ***/
.tooltip:before {
  content: "";
  position: absolute;
  width: 0; 
  height: 0; 
  
  bottom: -7px;
  right: 51px;
  
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 9px solid #333;
}