GitHub-Style Contribution Heatmap — Free HTML CSS JS Calendar Snippet

<div class="chm-card">
  <div class="chm-head">
    <div>
      <h3>Contribution activity</h3>
      <p id="chmTotal">— contributions in the last year</p>
    </div>
    <div class="chm-legend">
      <span>Less</span>
      <span class="chm-swatch" data-level="0"></span>
      <span class="chm-swatch" data-level="1"></span>
      <span class="chm-swatch" data-level="2"></span>
      <span class="chm-swatch" data-level="3"></span>
      <span class="chm-swatch" data-level="4"></span>
      <span>More</span>
    </div>
  </div>
  <div class="chm-scroll">
    <div class="chm-months" id="chmMonths"></div>
    <div class="chm-body">
      <div class="chm-days">
        <span>Mon</span><span></span><span>Wed</span><span></span><span>Fri</span><span></span><span></span>
      </div>
      <div class="chm-grid" id="chmGrid"></div>
    </div>
  </div>
  <div class="chm-tooltip" id="chmTooltip" hidden></div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0d1117;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.chm-card{background:#161b22;border:1px solid #30363d;border-radius:12px;padding:20px;width:100%;max-width:760px;position:relative}
.chm-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.chm-head h3{font-size:14px;font-weight:700;color:#e6edf3}
.chm-head p{font-size:12px;color:#7d8590;margin-top:2px}
.chm-legend{display:flex;align-items:center;gap:4px;font-size:11px;color:#7d8590}
.chm-swatch{width:11px;height:11px;border-radius:2px;background:#161b22;border:1px solid rgba(240,246,252,.08)}
.chm-swatch[data-level="0"]{background:#161b22}
.chm-swatch[data-level="1"]{background:#0e4429}
.chm-swatch[data-level="2"]{background:#006d32}
.chm-swatch[data-level="3"]{background:#26a641}
.chm-swatch[data-level="4"]{background:#39d353}
.chm-scroll{overflow-x:auto;padding-bottom:4px}
.chm-months{display:grid;grid-auto-flow:column;grid-auto-columns:11px;gap:3px;margin-left:28px;margin-bottom:4px;font-size:10px;color:#7d8590;white-space:nowrap}
.chm-body{display:flex;gap:6px}
.chm-days{display:grid;grid-template-rows:repeat(7,11px);gap:3px;font-size:9px;color:#7d8590;width:22px;text-align:right;line-height:11px}
.chm-grid{display:grid;grid-template-rows:repeat(7,11px);grid-auto-flow:column;gap:3px}
.chm-cell{width:11px;height:11px;border-radius:2px;background:#161b22;border:1px solid rgba(240,246,252,.06);cursor:pointer;transition:outline .1s}
.chm-cell[data-level="1"]{background:#0e4429}
.chm-cell[data-level="2"]{background:#006d32}
.chm-cell[data-level="3"]{background:#26a641}
.chm-cell[data-level="4"]{background:#39d353}
.chm-cell:hover{outline:1px solid #e6edf3}
.chm-tooltip{position:fixed;background:#1c2128;border:1px solid #30363d;color:#e6edf3;font-size:11.5px;padding:6px 10px;border-radius:6px;pointer-events:none;white-space:nowrap;z-index:10;box-shadow:0 8px 20px rgba(0,0,0,.4)}
.chm-tooltip[hidden]{display:none}

(function(){
  var DAY = 24 * 60 * 60 * 1000;
  var WEEKS = 53;
  var today = new Date();
  today.setHours(0,0,0,0);
  var start = new Date(today.getTime() - (WEEKS * 7 - 1) * DAY);
  // align start to a Sunday so weeks stack into clean 7-row columns
  start = new Date(start.getTime() - start.getDay() * DAY);

  var grid = document.getElementById('chmGrid');
  var monthsRow = document.getElementById('chmMonths');
  var tooltip = document.getElementById('chmTooltip');
  var totalEl = document.getElementById('chmTotal');
  var monthNames = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];

  var days = [];
  var cursor = new Date(start);
  while (cursor <= today) {
    // pseudo-random but deterministic-looking activity: weekday bias + occasional bursts
    var isWeekend = cursor.getDay() === 0 || cursor.getDay() === 6;
    var r = Math.random();
    var count = 0;
    if (cursor > today) count = 0;
    else if (r < (isWeekend ? 0.55 : 0.3)) count = 0;
    else if (r < 0.6) count = Math.floor(Math.random() * 3) + 1;
    else if (r < 0.85) count = Math.floor(Math.random() * 6) + 3;
    else count = Math.floor(Math.random() * 12) + 8;
    days.push({ date: new Date(cursor), count: cursor > today ? -1 : count });
    cursor = new Date(cursor.getTime() + DAY);
  }

  function levelFor(count) {
    if (count <= 0) return 0;
    if (count <= 2) return 1;
    if (count <= 5) return 2;
    if (count <= 10) return 3;
    return 4;
  }

  var total = 0;
  var lastMonthLabel = -1;
  var weekIndex = 0;
  days.forEach(function (d, i) {
    var dow = i % 7;
    if (dow === 0 && i !== 0) weekIndex++;
    var cell = document.createElement('div');
    cell.className = 'chm-cell';
    if (d.count >= 0) {
      cell.setAttribute('data-level', String(levelFor(d.count)));
      total += d.count;
    } else {
      cell.style.visibility = 'hidden';
    }
    var label = d.date.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
    cell.addEventListener('mouseenter', function (e) {
      if (d.count < 0) return;
      tooltip.hidden = false;
      tooltip.textContent = (d.count === 0 ? 'No contributions' : d.count + ' contribution' + (d.count === 1 ? '' : 's')) + ' on ' + label;
      positionTooltip(e);
    });
    cell.addEventListener('mousemove', positionTooltip);
    cell.addEventListener('mouseleave', function () { tooltip.hidden = true; });
    grid.appendChild(cell);

    if (dow === 0 && d.date.getMonth() !== lastMonthLabel) {
      lastMonthLabel = d.date.getMonth();
      var m = document.createElement('span');
      m.style.gridColumn = String(weekIndex + 1);
      m.textContent = monthNames[d.date.getMonth()];
      monthsRow.appendChild(m);
    }
  });

  function positionTooltip(e) {
    tooltip.style.left = (e.clientX + 12) + 'px';
    tooltip.style.top = (e.clientY - 30) + 'px';
  }

  totalEl.textContent = total.toLocaleString() + ' contributions in the last year';
})();