<script type="text/javascript" src="https://syui.ai/bower_components/d3/d3.min.js"></script>
<script type="text/javascript" src="https://syui.ai/bower_components/cal-heatmap/cal-heatmap.min.js"></script>
<link rel="stylesheet" href="https://syui.ai/bower_components/cal-heatmap/cal-heatmap.css" />
<div id="example-b"></div>
<script type="text/javascript">
	var currentTime = new Date();
	var year = currentTime.getFullYear()
	var cal = new CalHeatMap();
	cal.init({
		itemSelector: "#example-b",
		domain: "month",
		data: "https://syui.ai/json/cal.json",
		start: new Date(year, 0),
		cellSize: 9,
		range: 13,
		legendColors: ["#fff700", "#817d01"],
		previousSelector: "#example-b-PreviousDomain-selector",
		nextSelector: "#example-b-NextDomain-selector",
		legend: [2, 4, 6, 8],
	});
</script>

<style>
div#example-b{
	background: #f1f1f1;
	margin-right: auto;
	margin-left: auto;
}
.cal-heatmap-container {
	width: 100%;
}
</style>