Skip to content

Instantly share code, notes, and snippets.

@barnettjw
Created November 8, 2013 00:06
Show Gist options
  • Save barnettjw/7364084 to your computer and use it in GitHub Desktop.
Save barnettjw/7364084 to your computer and use it in GitHub Desktop.
A Pen by James Barnett.

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.

<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>
$(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;
});
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment