Design a Calendar for your Blog and Website using HTML5 CSS3 and JavaScript

In this project we will make a simple calendar using HTML5 CSS3 and JavaScript.

Click here to learn how to create a calendar for your blog and website using dyCalendarJS.

Requirement

For this project we can use any text editor like Notepad++, SublimeText, gEdit, TextMate, Coda, Brackets etc.

In the above video Brackets has been used which is an open source software and can be downloaded from their website brackets.io

Files

For this project we will need three files

index.html
script.js
style.js

JavaScript Date functions used

To work with date we have to create a Date object.

var d = new Date();

To get the current date in javascript, we use the getDate() function.

So, we will write d.getDate();

Similarly, to get the current day we write d.getDay();

And, to get the current year we write, d.getYear();

Note! getYear() will return value like 114 for the year 2014. So to get 2014 we have to add 1900 to the value returned by getYear() function.

We can also use the getFullYear() function. This will return the value 2014.

index.html


<!DOCTYPE html>
<html>
    <head>
        <title>Calendar</title>
        <link type="text/css" rel="stylesheet" href="style.css">
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <div id="calendar-container">
            <div id="calendar-header">
                <span id="calendar-month-year"></span>
            </div>
            <div id="calendar-dates">
            </div>
        </div>
    </body>
</html>

script.js


window.onload = function(){
    var d = new Date();
    var month_name = ['January','February','March','April','May','June','July','August','September','October','November','December'];
    var month = d.getMonth();   //0-11
    var year = d.getFullYear(); //2014
    var first_date = month_name[month] + " " + 1 + " " + year;
    //September 1 2014
    var tmp = new Date(first_date).toDateString();
    //Mon Sep 01 2014 ...
    var first_day = tmp.substring(0, 3);    //Mon
    var day_name = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
    var day_no = day_name.indexOf(first_day);   //1
    var days = new Date(year, month+1, 0).getDate();    //30
    //Tue Sep 30 2014 ...
    var calendar = get_calendar(day_no, days);
    document.getElementById("calendar-month-year").innerHTML = month_name[month]+" "+year;
    document.getElementById("calendar-dates").appendChild(calendar);
}

function get_calendar(day_no, days){
    var table = document.createElement('table');
    var tr = document.createElement('tr');
    
    //row for the day letters
    for(var c=0; c<=6; c++){
        var td = document.createElement('td');
        td.innerHTML = "SMTWTFS"[c];
        tr.appendChild(td);
    }
    table.appendChild(tr);
    
    //create 2nd row
    tr = document.createElement('tr');
    var c;
    for(c=0; c<=6; c++){
        if(c == day_no){
            break;
        }
        var td = document.createElement('td');
        td.innerHTML = "";
        tr.appendChild(td);
    }
    
    var count = 1;
    for(; c<=6; c++){
        var td = document.createElement('td');
        td.innerHTML = count;
        count++;
        tr.appendChild(td);
    }
    table.appendChild(tr);
    
    //rest of the date rows
    for(var r=3; r<=7; r++){
        tr = document.createElement('tr');
        for(var c=0; c<=6; c++){
            if(count > days){
                table.appendChild(tr);
                return table;
            }
            var td = document.createElement('td');
            td.innerHTML = count;
            count++;
            tr.appendChild(td);
        }
        table.appendChild(tr);
    }
    return table;
}

style.css


#calendar-container{
    padding: 10px;
    width: 210px;
    height: 240px;
    text-align: center;
    border: 1px solid #eee;
    border-radius: 10px;
    font-size: 16px;
    font-family: Arial;
    background-image: linear-gradient(#fff, #d3d3d3);
}

#calendar-container>div{
    padding: 0;
    margin-bottom: 10px;
}

#calendar-month-year{
    margin: 5px;
}

#calendar-dates>table>tr>td{
    padding: 5px;
}