diff --git a/app/assets/javascripts/calendar.js.coffee b/app/assets/javascripts/calendar.js.coffee
index d80e0e716ce..ec153f61c2a 100644
--- a/app/assets/javascripts/calendar.js.coffee
+++ b/app/assets/javascripts/calendar.js.coffee
@@ -1,27 +1,75 @@
 class @Calendar
   constructor: (timestamps, starting_year, starting_month, calendar_activities_path) ->
-    cal = new CalHeatMap()
-    cal.init
-      itemName: ["contribution"]
-      data: timestamps
-      start: new Date(starting_year, starting_month)
-      domainLabelFormat: "%b"
-      id: "cal-heatmap"
-      domain: "month"
-      subDomain: "day"
-      range: 12
-      tooltip: true
-      label:
-        position: "top"
-      legend: [
-        0
-        10
-        20
-        30
-      ]
-      legendCellPadding: 3
-      cellSize: $('.user-calendar').width() / 73
-      onClick: (date, count) ->
+    # Get the highest value from the timestampes
+    highestValue = 0
+    _.each timestamps, (count) ->
+      if count > highestValue
+        highestValue = count
+
+    timestamps = _.chain(timestamps)
+      .map (stamp, key) ->
+        {
+          count: stamp
+          date: key
+        }
+      .groupBy (stamp, i) ->
+        Math.floor i / 7
+      .toArray()
+      .value()
+
+    monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+    months = []
+    svg = d3.select '#cal-heatmap'
+      .append 'svg'
+      .attr 'width', 53 * 17
+      .attr 'height', 140
+
+    # Setup each day box
+    svg.selectAll 'g'
+      .data timestamps
+      .enter()
+      .append 'g'
+      .attr 'transform', (group, i) ->
+        _.each group, (stamp) ->
+          month = new Date(parseInt(stamp.date) * 1000).getMonth()
+          x = 17 * i + 1
+          lastMonth = _.last(months)
+
+          # If undefined, push
+          if !lastMonth?
+            months.push
+              month: month
+              x: x
+          else if lastMonth.x is x
+            lastMonth.month = month
+          else if lastMonth.month isnt month
+              months.push
+                month: month
+                x: x
+        "translate(#{17 * i + 1}, 18)"
+      .selectAll 'rect'
+      .data (stamp) ->
+        stamp
+      .enter()
+      .append 'rect'
+      .attr 'x', '0'
+      .attr 'y', (stamp, i) ->
+        17 * i
+      .attr 'width', 15
+      .attr 'height', 15
+      .attr 'title', (stamp) ->
+        "#{stamp.count} contributions<br />#{gl.utils.formatDate parseInt(stamp.date) * 1000}"
+      .attr 'class', (stamp) ->
+        extraClass = ''
+        if stamp.count isnt 0
+          diff = stamp.count / highestValue
+          classNumber = Math.floor (diff / 0.25) + 1
+          extraClass += "user-contrib-cell-#{classNumber}"
+
+        "user-contrib-cell #{extraClass} js-tooltip"
+      .attr 'data-container', 'body'
+      .on 'click', (stamp) ->
+        date = new Date(parseInt(stamp.date) * 1000)
         formated_date = date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate()
         $.ajax
           url: calendar_activities_path
@@ -32,3 +80,17 @@ class @Calendar
           success: (data) ->
             $(".user-calendar-activities").html data
 
+    svg.append 'g'
+      .selectAll 'text'
+      .data months
+      .enter()
+      .append 'text'
+      .attr 'x', (date) ->
+        date.x
+      .attr 'y', 10
+      .attr 'class', 'user-contrib-text'
+      .text (date) ->
+        monthNames[date.month]
+
+    $('#cal-heatmap .js-tooltip').tooltip
+      html: true
diff --git a/app/assets/stylesheets/framework/calendar.scss b/app/assets/stylesheets/framework/calendar.scss
index 11f39d583bd..da03454d807 100644
--- a/app/assets/stylesheets/framework/calendar.scss
+++ b/app/assets/stylesheets/framework/calendar.scss
@@ -68,3 +68,33 @@
     font-weight: 550;
   }
 }
+
+.user-contrib-cell {
+  fill: #ededed;
+  cursor: pointer;
+
+  &:hover {
+    stroke: #000;
+  }
+}
+
+.user-contrib-cell-1 {
+  fill: #acd5f2;
+}
+
+.user-contrib-cell-3 {
+  fill: #7fa8d1;
+}
+
+.user-contrib-cell-4 {
+  fill: #49729b;
+}
+
+.user-contrib-cell-5 {
+  fill: #254e77;
+}
+
+.user-contrib-text {
+  font-size: 12px;
+  fill: #959494;
+}
diff --git a/app/views/users/calendar.html.haml b/app/views/users/calendar.html.haml
index 1de71f37d1a..2abee8be2a6 100644
--- a/app/views/users/calendar.html.haml
+++ b/app/views/users/calendar.html.haml
@@ -6,5 +6,3 @@
       #{@starting_month},
       '#{user_calendar_activities_path}'
     );
-
-.calendar-hint Summary of issues, merge requests, and push events