Calendar Icon Creator

fiddle.css

#colorpickers {
    display: inline-table;
}
#colorpickers:before, #colorpickers:after {
    content:"";
    display: table;
}
#colorpickers:after {
    clear:both;
}
.colorpicker {
    display: block;
    float: right;
    clear: right;
}
#formsize {
    width: 300px;
}

fiddle.html

<div>Date:
    <input type="date" id="formdate"></input>
    <br/>TBD:
    <input type="checkbox" id="formtbd"></input>
    <br/>
    <div id="colorpickers">
        <div class="colorpicker">Header Color:
            <input type="color" id="headercolor" value="#c80000"></input>
        </div>
        <div class="colorpicker">Header Text Color:
            <input type="color" id="headertextcolor" value="#ffffff"></input>
        </div>
        <div class="colorpicker">Body Color:
            <input type="color" id="bodycolor" value="#ffffff"></input>
        </div>
        <div class="colorpicker">Body Text Color:
            <input type="color" id="bodytextcolor" value="#000000"></input>
        </div>
        <div class="colorpicker">Border Color:
            <input type="color" id="bordercolor" value="#969696"></input>
        </div>
    </div>
    <br/>Image Size:
    <input type="range" min="30" max="500" value="150" id="formsize"></input> <span id="imagesize">150</span> pixels
    <br/>
    <button type="button" onclick="draw();">Update Image</button>
    <button type="button" onclick="save();">Save Image</button>
</div>
<p>
    <canvas id="canvas" width="150" height="150"></canvas>
</p>

fiddle.js

function hexToRgb(hex) {
    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    hex = hex.replace(shorthandRegex, function (m, r, g, b) {
        return r + r + g + g + b + b;
    });

    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}

var months = ["Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"];

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

var draw = function () {
    var size = $("#formsize").val();
    canvas.width = size;
    canvas.height = size;
    var headerColor = document.getElementById('headercolor').value;
    var bodyColor = document.getElementById('bodycolor').value;
    var borderColor = document.getElementById('bordercolor').value;
    var date = document.getElementById('formdate').valueAsDate;
    var width = canvas.width;
    var height = canvas.height;
    var headerHeight = height * .33;
    var border = height * (2 / 150);
    //draw shadow
    var rbg = hexToRgb(borderColor);
    ctx.fillStyle = "rgba(" + rbg.r + ", " + rbg.b + ", " + rbg.g + ", 0.5)";
    ctx.fillRect(border, border, width - border, height - border);
    //draw border
    ctx.fillStyle = borderColor;
    ctx.fillRect(0, 0, width - border, height - border);
    //draw header
    ctx.fillStyle = headerColor;
    ctx.fillRect(border, border, width - border * 3, headerHeight - border);
    //draw body
    ctx.fillStyle = bodyColor;
    ctx.fillRect(border, headerHeight, width - border * 3, (height - headerHeight) - (border * 2));
    //draw month
    ctx.fillStyle = "#ffffff";
    ctx.textAlign = "center";
    ctx.font = (headerHeight * .9) + "px Calibri";
    ctx.fillText(months[date.getMonth()], width / 2, headerHeight - (headerHeight * .25));
    //draw day
    var dayText = document.getElementById('formtbd').checked ? "TBD" : date.getDate() + 1;
    ctx.fillStyle = "#000000";
    ctx.textAlign = "center";
    ctx.font = ((height - headerHeight) * .85) + "px Calibri";
    ctx.fillText(dayText, width / 2, height / 2 + ((height - headerHeight) * .9) / 2);
};

$("#formsize").on("input", function () {
    $("#imagesize").text(this.value);
});

var save = function () {
    window.open(canvas.toDataURL());
};

document.getElementById('formdate').valueAsDate = new Date();

draw();

fiddle.manifest

name: Calender Icon Creator
description: A simple HTML5 app for creating calendar icons.
authors:
  - Chris Gonzales
wrap: b
resources:
normalize_css: no