Simple Calendar using HTML, CSS and JavaScript

Simple Calendar with HTML, CSS, and JavaScript. This Calendar change date daily with Day, Date, Month, and Year. You can add this small code on your website and it looks simple and minimal.Simple Calendar using HTML, CSS, and JavaScript

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My Calender</title>
    <script type="text/javascript" src="script.js"></script>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
    <div id="calender">
        <p id="calender-day">

        </p>

        <p id="calender-date">

        </p>

        <p id="calender-month-year">

        </p>
    </div>
</body>
</html>

Style.css

#calender{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 130px;
    height: 180px;
    background-color: cornflowerblue;
    border:#fff;
    border-radius: 5%;
    box-shadow: 0 4px 4px 0 rgba(50,50,50,0.4);
}
#calender>p{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    padding: 10px 0;
    margin: 0;
    color:#fff;
    text-align: center;
}

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

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

#calender-date{
    font-size:64px;
    padding-top:10px;
    padding-bottom: 0;
}

Script.js

function calender(){
    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('calender-day',day[d.getDay()]);
    setText('calender-date',d.getDate());
    setText('calender-month-year',month[d.getMonth()]+' '+(1900+d.getYear()));
};

function setText(id, val){
    if(val<10){
        val='0'+val;
    }
    document.getElementById(id).innerHTML=val;  
};

// call calender()

window.onload=calender;

Output

Simple Calendar with HTML, CSS and JavaScript

So, it is a simple calendar using HTML, CSS, and JavaScript. To download the code click on the following download button.Download

ou may also like,

Support CodeSnail

If you appreciate my work, or if it has helped you along your journey. It would mean a lot to me if you could write a message on my wall and share a cup of coffee (or tea) with me.

Buy Me A Coffee
Your subscription could not be saved. Please try again.
Your subscription has been successful.

Newsletter

Subscribe to our newsletter and stay updated.

1 thought on “Simple Calendar using HTML, CSS and JavaScript”

Leave a Comment