A Pen by Gartempe.

Circular-Clalendar.markdown

Circular Clalendar

Circular Calendar, made with Canvas & Javascript. Forked from this source http://jsfiddle.net/m1erickson/Q7S9L/ to make it dynamic and display the current date. Adapted by www.gartempe.com

A Pen by Gartempe on CodePen.

License.

index.html

<script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
<canvas id="canvas" width=900 height=650>Canvas not supported. Get a better web browser!</canvas>
<script>
<!-- Forked from this code: http://jsfiddle.net/m1erickson/Q7S9L/ 
Adapted by www.gartempe.com -->

script.js

function init() {
 var dood = new Date();
 var doodjour = dood.getDate(); var doodmois = dood.getUTCMonth(); var doodannee = dood.getFullYear();
var isLeap = new Date(doodannee, 1, 29).getMonth();


var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var year = doodannee;
var PI2 = Math.PI * 2;
var cx = 450;
var cy = 450;
var radialIncrement = 20;
var rotationIncrement = -Math.PI / 31;

var months = ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'];
var days = [];
if (isLeap == 1) {days = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];}
else {days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];}

var dayNames = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];

var monthsFirstWeekday = []
for (var m = 1; m <= 12; m++) {
    monthsFirstWeekday.push(new Date(m + "/01/" + year).getDay());
}



for (var d = 0; d <= 38; d++) {
    ctx.save();
    ctx.translate(cx, cy);
    ctx.rotate(rotationIncrement * (31 - d) + Math.PI / 2);
    var x = -3;
    var y = -13 * radialIncrement - 150;
if (d == doodjour) { ctx.beginPath(); ctx.fillStyle = '#5071D9';  ctx.arc((x+2), (y-11), 16, 0, 2 * Math.PI, false); ctx.closePath(); ctx.fill(); ctx.fillStyle = "white"; } else {ctx.fillStyle = "#eee";}
    ctx.font = '20px "Ubuntu"';
ctx.textAlign="center";
    ctx.fillText(dayNames[d], x+2, y-4);
    ctx.restore();
}

for (var m = 0; m < months.length; m++) {
    ctx.save();
    ctx.translate(cx, cy + 25);
    ctx.rotate(Math.PI * 3 / 2);
if (m == doodmois) { ctx.beginPath(); ctx.fillStyle = '#5071D9'; ctx.arc((m-8), -(months.length - m) * radialIncrement - 156, 12, 0, 2 * Math.PI, false); ctx.closePath(); ctx.fill(); ctx.fillStyle = "white";} else {ctx.fillStyle = "#555";}
    ctx.font = "16px Ubuntu";ctx.textAlign="center";
    ctx.fillText(months[m], 0, -(months.length - m) * radialIncrement - 150);
    ctx.restore();
}

for (var d = 0; d <= 38; d++) {

    ctx.save();
    ctx.translate(cx, cy);
    ctx.rotate(rotationIncrement * (31 - d) + Math.PI / 2);

    for (var m = 0; m < months.length; m++) {

        var x = 0;
        var y = -(months.length - m) * radialIncrement - 150;

        var dd = d - monthsFirstWeekday[m] + 1;

        if (dd > 0 && dd <= days[m]) {
		if ( m == doodmois) {ctx.fillStyle = '#555';} else {ctx.fillStyle = '#151515';}
		if ((dd == doodjour) && (m == doodmois)) {ctx.fillStyle = '#5071D9';} 
		ctx.beginPath();  ctx.arc((x), (y-4), 10, 0, 2 * Math.PI, false); ctx.closePath(); ctx.fill(); 
		ctx.font = "12px Ubuntu";ctx.textAlign="center";
		if (m == doodmois) {ctx.fillStyle = "white";} else {ctx.fillStyle = '#999';}
		ctx.fillText(dd, x, y);
        } else {
            ctx.beginPath();
            ctx.arc(x, y-4, 1, 0, Math.PI * 2);
            ctx.closePath();
    ctx.font = "16px verdana"; ctx.textAlign="center";
            ctx.fillStyle = "red";
            ctx.fill();
        }

    }
    ctx.restore();
}

}

  WebFont.load({ google: { families: ['Ubuntu::latin'] }, active: function() { init(); } });

style.css

canvas{margin:20px auto 0 auto;color:#fff;}
body {padding:0;margin:0;font-family:'Ubuntu',sans-serif;background:#000;text-align:center;}
div {padding:0;margin:0;}