This is one of the most common widgets you can see on a blog. These
are rare in Blogger blogs, as Blogger doesn't directly gives you the facility
to add them.
You can see my previous post, on how to add archive calendar widget, in your blog.
In this post, I will help you to add a Basic calendar. This widget
shows you the entire year calendar dynamically. You can select any month of the
current year with the help of a drop down menu.
You can see the demo by clicking the below button:
How to add this gadget to your blog:
Log in to Blogger.com
Go to Dashboard>Layout
Click on Add a Gadget
Copy and Paste below code
as a HTML/JavaScript widget.
<style type="text/css">
.main {
width:300px;
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="http://dsai.588.googlepages.com/basiccalendar.js">
/***********************************************
* Basic Calendar-By Brian Gosselin at
http://scriptasylum.com/bgaudiodr/
* Script featured on Dynamic Drive
* Via http://wikitechnol.blogspot.com
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<form>
<select onChange="updatecalendar(this.options)">
<script type="text/javascript">
var themonths=['January','February','March','April','May','June',
'July','August','September','October','November','December']
var todaydate=new Date()
var curmonth=todaydate.getMonth()+1 //get current month (1-12)
var curyear=todaydate.getFullYear() //get current year
function updatecalendar(theselection){
var themonth=parseInt(theselection[theselection.selectedIndex].value)+1
var calendarstr=buildCal(themonth, curyear, "main", "month", "daysofweek", "days", 0)
if (document.getElementById)
document.getElementById("calendarspace").innerHTML=calendarstr
}
document.write('<option value="'+(curmonth-1)+'" selected="yes">Current Month</option>')
for (i=0; i<12; i++) //display option for 12 months of the year
document.write('<option value="'+i+'">'+themonths[i]+' '+curyear+'</option>')
</script>
</select>
<div id="calendarspace">
<script>
//write out current month's calendar to start
document.write(buildCal(curmonth, curyear, "main", "month", "daysofweek", "days", 1))
</script>
</div>
</form>
<select onChange="updatecalendar(this.options)">
<script type="text/javascript">
var themonths=['January','February','March','April','May','June',
'July','August','September','October','November','December']
var todaydate=new Date()
var curmonth=todaydate.getMonth()+1 //get current month (1-12)
var curyear=todaydate.getFullYear() //get current year
function updatecalendar(theselection){
var themonth=parseInt(theselection[theselection.selectedIndex].value)+1
var calendarstr=buildCal(themonth, curyear, "main", "month", "daysofweek", "days", 0)
if (document.getElementById)
document.getElementById("calendarspace").innerHTML=calendarstr
}
document.write('<option value="'+(curmonth-1)+'" selected="yes">Current Month</option>')
for (i=0; i<12; i++) //display option for 12 months of the year
document.write('<option value="'+i+'">'+themonths[i]+' '+curyear+'</option>')
</script>
</select>
<div id="calendarspace">
<script>
//write out current month's calendar to start
document.write(buildCal(curmonth, curyear, "main", "month", "daysofweek", "days", 1))
</script>
</div>
</form>
Save the widget, and your blog will be ready with a new calendar!
Note:
You can adjust the width
of the calendar as to fit it exactly you wanted it in you blog. For this you
can change the width pixel above in RED.
Try this out…Enjoy!!
{ 0 comments... read them below or add one }
Post a Comment