How to add a basic calendar to your Blogger

If you need a simple, elegant calendar to display the current days of the month, Basic Calendar is an excellent script for the purpose. Uses CSS to allow easy changing to its appearance, everything from calendar dimensions, colors, down to the font used to highlight the current day.

Click here to see the demo

Steps to follow:

1. Login into your Blogger dashboard > Layouts > Edit HTML

2. Insert the following section code below into your template right before the closing of head. </head>

<style type="text/css">
.main {
width:200px;
border:1px solid black;
}
.month {
background-color:black;
font:bold 12px verdana;
color:white;
}
.daysofweek {
background-color:gray;
font:bold 12px verdana;
color:white;
}
.days {
font-size: 12px;
font-family:verdana;
color:black;
background-color: lightyellow;
padding: 2px;
}
.days #today{
font-weight: bold;
color: red;
}
</style>
<script type="text/javascript" src="basiccalendar.js">
</script>

Note: The above references an external .js file. Download basiccalendar.js (by right clicking, and selecting "Save As"), and upload to your webpage directory.

Note: Within the above code, you may customize the CSS rules to change all visual aspects of the calendar.

3. Next, go to Layouts > Page Elements > and Add an HTML/JavaScript Gadget. Insert the following section code below as the HTML and after saving, move the gadget where you want the calendar to appear.

<script type="text/javascript">

var todaydate=new Date()
var curmonth=todaydate.getMonth()+1 //get current month (1-12)
var curyear=todaydate.getFullYear() //get current year

document.write(buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1));
</script> 

** Tutorial completed