How to create an Analog Clock using HTML5 CSS3 and JavaScriptHTML5 | How to create Guess the next number GameHTML5 | How to create a simple Clock using JavaScriptCreate custom Navigation Bar using HTML5 and CSS3HTML5 | Create custom dialog box like facebookNavigation Tab using HTML5 and CSS3 - No JavaScriptDesign a simple calendar for your blog and website using HTML5 CSS3 and JavaScriptDesign a Calendar for your Blog and Website using HTML5 CSS3 and JavaScriptHow to create a Pie chart using ChartJSHTML5 | How to draw a Doughnut chart using ChartJS

Design a simple calendar for your blog and website using HTML5 CSS3 and JavaScript

Web Project

← PrevNext →

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>
        <script type="text/javascript" src="script.js"></script>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div id="calendar">
            <p id="calendar-day"></p>
            <p id="calendar-date"></p>
            <p id="calendar-month-year"></p>
        </div>
    </body>
</html>

script.js


//this function will find today's date
function calendar(){
    var day=['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
    var month=['January','February','March','April','May','June','July','August','September','October','November','December'];
    var d=new Date();
    setText('calendar-day', day[d.getDay()]);
    setText('calendar-date', d.getDate());
    setText('calendar-month-year', month[d.getMonth()]+' '+(1900+d.getYear()));
};

//this function will set the text value of 
 tags
function setText(id, val){
    if(val < 10){
        val = '0' + val;    //add leading 0 if val < 10
    }
    document.getElementById(id).innerHTML = val;
};

//call calendar() when page load
window.onload = calendar;

style.css


#calendar{
    width: 130px;
    height: 180px;
    background-color: cornflowerblue;
    color: #fff;
    border-radius: 5%;
    box-shadow: 0 4px 4px 0 rgba(50, 50, 50, 0.4);
}

#calendar>p{
    font-family: Verdana, Arial, sans-serif;
    padding: 10px 0;
    margin: 0;
    color: #fff;
    text-align: center;
}

#calendar-day{
    font-size: 16px;
}

#calendar-month-year{
    font-size: 14px;
}

#calendar-date{
    font-size: 64px;
    padding-top: 10px;
    padding-bottom: 0;
}
← PrevNext →