Add A JavaScript Calendar To Your BloggSpot Blog

The two most common widgets/gadgets you can see on a blog are clock and calendar. Although you would have seen them in most of the blogs hosted on WordPress, but 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 embed flash clocks, in your blog here.
And this post, I will help you to add a simple calendar.

You can see the live DEMO here.

And here's the code required to add it to your blog:

Log in to Blogger.com
Go to Layout -> Click on "Add a Gadget" -> HTML/JavaScript type.

And copy paste this code in to it:
<style type="text/css">

.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 (http://www.dynamicdrive.com)
* Via http://bloggerstop.net
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>
<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>

Save the widget, and your blog will be ready with a new calendar !

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

17 comments

Write comments
Anonymous
January 24, 2009 2:01 PM delete

This calendar code is effecting the present settings of blog and losing visibility of blog. If any changes for that will help.

Reply
avatar
January 24, 2009 2:53 PM delete

If you see the DEMO

then you'll notice that the calendar is working completely fine in the sidebar, but is disturbing the layout, when added to any post. So just add it to the sidebar, and see if it solves the problem.

NOTE: PLease do not use the "Anonymous" option while posting(use atleast a fake name, so that it makes the conversation more sensible)
And while asking any query it is better to give your blog address, as I can have a quick look on the present status of any widget/hack on your blog.

Reply
avatar
March 24, 2009 5:19 PM delete

Hi, thanks for the link to the clocks and the calendar. The graphic at the top of your post shows a different calendar than the one that gets posted from the code above? Did I do something wrong? jblog.jordan.to and when I posted it to the side bar it moved all the posts to a narrow col instead of taking up the total space betewwn the left margin and the side bar? Any help

Reply
avatar
March 25, 2009 7:47 AM delete

Hi David,

You have done the work correctly, the image in the post is not the one you are going to get, you can see the final calendar in the DEMO page(http://javascript4blogger.blogspot.com/2009/01/embed-javascript-calendar-in-blogger.html)

And regarding the narrowing of the page, I have corrected the code now, you may copy this new code.

Thanks for pointing it out.

Reply
avatar
choco
April 04, 2009 3:48 PM delete

Sorry, this might be stupid but
I did everything you said but after Click on "Add a Gadget" I cannot find HTML/JavaScript type.ed

What should I do?

Reply
avatar
April 04, 2009 4:10 PM delete

Well when you click "Add a Gadget", then the third link in the so opened page, will be HTML/JavaScript, simply click on that .... :)

Reply
avatar
raj
April 06, 2009 9:40 AM delete

well can u help me how do i post written javascript tutorials on my blog www.raj-tipstricks.blogspot and written text tutorials on other blog of mine www.aspdotnettutorials-tips.blogspot.com.please do tell me i want only written text (script) to come as a output not the script output,reply soon.i tried with add a gadget html javascript but was not successful the half output and half text comes out here.really i am in tension how to do it.reply soon urgent

Reply
avatar
April 06, 2009 10:45 AM delete

Hi Raj.....it's really very easy once you know what to do exactly...
Actually there's a website, which can do the work for you in less than a second, read on the post here :)

http://bloggerstop.net/2008/10/blogger-help-how-to-show-html-text-in.html

Regards
Sai

Reply
avatar
raj
April 06, 2009 11:59 AM delete

well i am on cloud nine and dancing after u solved my problem.hip hip hurray.100/100 to you.

can u tell where i can generate free html table online.please reply soon


there are major issues with my 3 blogs with sitemaps,my blogs are not getting indexed at all in google search till now.please help me .can u give me ur email id.my id is rajraj1232@gmail.com.i live in mumbai,can i receive any help in mumbai.please help me it is urgent.

Reply
avatar
Sai
April 06, 2009 1:56 PM delete

For site maps, you may read this post:
http://bloggerstop.net/2008/11/blogger-help-how-to-add-sitemap-to.html
(this will help you to index your blog in Google)

And for HTML tables you can of course Google it !

And to contact me, you can either use the contact me page, or better you can comment at any of the pages of this blog!

Regards
Sai

Reply
avatar
September 04, 2010 7:41 PM delete

Thank's. it's so helpfull for me to add javascript. can u help me for searching javascript all clock on the world?

Reply
avatar
January 06, 2011 12:15 PM delete

Wow Thank you so much!!! this really helped me out!

Reply
avatar
July 05, 2011 8:19 AM delete

very useful brother keep it up

Reply
avatar
October 23, 2011 8:27 AM delete

Nice article, thanks for the information.

Reply
avatar
February 22, 2012 9:52 PM delete

Hi.
I'm not sure how it works... But I can't add it. Anyway thanks. Feel free to visit my blog.
dowmloadazhar.blogspot.com

Reply
avatar

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon