Add A JavaScript Calendar To Your BloggSpot Blog

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 !

Leave a Reply

17 Comments on "Add A JavaScript Calendar To Your BloggSpot Blog"

Notify of
avatar
Sort by:   newest | oldest | most voted
Anonymous
Guest

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

View Comment
Divya Sai
Guest

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.

View Comment
David
Guest

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

View Comment
Divya Sai
Guest

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.

View Comment
choco
Guest

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?

View Comment
Divya Sai
Guest

Well when you click “Add a Gadget”, then the third link in the so opened page, will be HTML/JavaScript, simply click on that …. 🙂

View Comment
raj
Guest

well can u help me how do i post written javascript tutorials on my blog http://www.raj-tipstricks.blogspot and written text tutorials on other blog of mine http://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

View Comment
Divya Sai
Guest

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

View Comment
raj
Guest

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.

View Comment
Sai
Guest

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

View Comment
4Hamdalah Nggênjréng Community
Guest

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

View Comment
Otus Screech Owl
Guest

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

View Comment
Teelak Pun
Guest

Thanks……….

View Comment
Peace view
Guest

very useful brother keep it up

View Comment
rental mobil jakarta
Guest

Nice article, thanks for the information.

View Comment
DOWNLOAD BD
Guest

xxxxxx ………. 🙁

View Comment
Azhar Aditya
Guest

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

View Comment
wpDiscuz