95 How to create a calendar widget for your blog
October 08, 2007 /

In this template, I use a calendar style widget to display the posting date of my posts. This style has recently cropped up in many Web 2.0 style Wordpress blogs, and is easily reproduced in Blogger layouts blogs too. Here I will show you how to create your own calendar widgets to feature at the top of each post.

This Blogger hack uses a combination of javascript, CSS and some slight modification to your template to display the date a post was published over a calendar-style background. There are only three main steps to change your date header to a calendar widget, so don't worry if my explanation seems rather complicated! Here is what you should do:

  1. First, go to Settings>Formatting, and change the date header format to YYYY-MM-DD like this: This enables the script we will be using to correctly parse the date header format.
  2. Next, go to Template>Edit HTML and ensure you have checked the "expand widget templates" box. Now, find the <data:post.dateHeader> section in the posts widget (if you search for "dateHeader" you should be able to find this quickly).
    The "data:post.dateHeader" line may also be wrapped in headings tags (eg: <h2> or <h3> etc.). Instead, we need to wrap this in <div> tags with a class of "date-header", so the line will look like this:
    <div class="date-header"><data:post.dateHeader/></div>
    . Once you have changed this line, save your template.
  3. Finally, open up the Edit HTML section again (no need to expand widget templates this time). Just before the closing </head> tag, add this section of code:
    <!-- calendar widget -->
    <script src='http://bloggerbuster.com/scripts/fastinit.js'/>
    <script src='http://bloggerbuster.com/scripts/prototype-1.5.0.js'/>
    <script src='http://bloggerbuster.com/calendar.js'/>
    <link href='http://bloggerbuster.com/calendar.css' rel='stylesheet' type='text/css'/>
    <!-- end calendar widget -->
    Save your template and view your blog to see the new calendar widget in place!

I originally found a tutorial for this Blogger hack over at Orangevolt which uses a script to parse date headers wrapped in <H2> tags. However, I decided to modify both the code and the image used which ensures greater flexibility over where the widget can be placed.

Customizing the calendar widget

If you would prefer to customize the calendar widget to suit your own taste and style, you can do this by modifying the CSS styling used for this hack.

There are two ways of doing this: you can either download the CSS file, modify and upload to your own server, or copy the styling below into the b:skin section of your template to change the style from within the template itself.

This is the styling I used for the calendar widget:

span.cal {
background:transparent url('images/calendar.jpg') no-repeat scroll 0%;
float:left;
margin-right: 10px;
height:36px;
width:35px;
font-family:"Helvetica",Tahoma,Arial;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
}
span.cal_month {
color:#FFFFFF;
display:block;
font-size:10px;
line-height:11px;
margin-left:1px;
padding-top:1px;
text-align:center;
text-transform:uppercase;
}
span.cal_day {
color:#999999;
display:block;
font-size:18px;
line-height:18px;
margin-left:1px;
padding-top:4px;
text-align:center;
text-transform:uppercase;
}
.sidebar {
margin-bottom: 20px;
}
As you can see, there are many ways the calendar widget may be styled, including:
  • The image background (use the full url if you decide to change this image!)
  • The height and width of the calendar icon
  • The alignment of the calendar (change "float: left" to "float: right" if you would prefer the widget to appear on the right of the page, for example).
  • The font and text sizes
plus many more examples than I can list here.

I would suggest that it is better to link to a css file on an external server than to use this styling inside the template. This is because I often noticed problems with the styling in Internet Explorer when I experimented with the styling in the b:skin area. There seem to be no problems at all when linking to the external style sheet.

You may also like to experiment with the positioning of the date header in your template. In this blog for example, I placed the date header code directly before the post title section, which ensures it appears to the left of the post title.

Why doesn't the calendar appear on some of my posts on the main/archive pages?

The date header will only appear on the top most item which is posted on a given day. So if you post say, three times in a single day, only the newest post will feature the calendar widget. So far, I haven't figured out a way to make this appear for each and every post!

Note: This post has now been edited to correct an error in the code which may have prevented this hack from working in your blogs. I do apologize for this problem guys! Everything should work fine for you now!

Please let me know what you think of the calendar widget by leaving your comments and opinions below.

Technorati Tags: | | | | |

Author: Amanda Kennedy

Amanda is a professional blogger and web designer living in Sheffield, United Kingdom.

In addition to curating Blogger Buster, you can find Amanda on Twitter, Facebook or add her to your circle on Google+.

Like to share?

You may also like to subscribe to Blogger Buster's RSS feed or receive free email updates of our latest posts.

95 comments:

  1. Many Thanks. I am using this in my blog after I found your tutorial.

    ReplyDelete
  2. Thanks so much.
    I'm actually browsing for a sidebar calendar widget for my blog when I stumbled upon your tutorial. But this one is also very helpful.

    ReplyDelete
  3. You're both very welcome :)

    Sometime next week, I'll be uploading some different colored "calendars" you could use instead of this default Grey one if you prefer. If anyone has any color preferences, do let me know.

    Thanks,

    Amanda

    ReplyDelete
  4. Great stuff, Thanks!

    Since you asked about color prefs, I'd like a blue one that matched with my black and blue blog at http://billspondering.blogspot.com.

    ReplyDelete
  5. Amanda, the calendar can appear if the javascript is used for timestamp.

    ReplyDelete
  6. Hi Amanda,you can ignore the email I sent you earlier. I found your tutorial just after I sent it :) Thank you SO much for this, this is the first time I have been able to get a calendar thing to work for me. Your instructions were clear and complete. I would also love this in blue, if you decide to do that.

    Happy New Year!

    ReplyDelete
  7. Does anyone have any ideas why this widget wouldn't work in IE ?
    I've gone over the instructions many times, and I still can't get it to work in IE 6 or 7, yet it looks fine in FF and Safari.

    ReplyDelete
  8. Hi. This is a great tutorial by the way, thanks so much.
    Only one problem, the date text isnt aligning properly with the image,the text is farther right than the image. I haven't changed any of the css except for the background image. Do you know of an easy solution?
    Thanks alot in advance
    Heres my url:
    http://www.testlayout-bobspotdesign.blogspot.com/

    ReplyDelete
  9. For Adam,

    I just emailed you about this widget. To be honest, I noticed a few problems displaying background images in IE these past few days. For some unknown reason, shorthand background statements don't work as they previously did, and I wonder if this is part of the problem..? I'll do some more research and will write this up shortly.

    For Bobby,

    Wow, I love your design! Did you also download the CSS for the background image? If so, the best way to modify this would be to decrease the margin to the left of the month and date statements in the style sheet. It may be necessary to make these negative numbers (eg: margin-left: -5px).

    If you need some help, feel free to send me your files and I'll fix this for you ASAP then send you the files back.

    Best wishes,
    Amanda

    ReplyDelete
  10. thanks for a great tutorial. However, need to verify with you regarding this (i know u havent found the way to have the calendar widget to appear on each post but really hope u could help me out as I have more than one entries per day and this keeps on showing on the other entries posted on one same day..

    Orangevolt Calendar : Parsing date ' ' using pattern '/(\d\d\d\d)-(\d\d)-(\d\d)/' failed.<- in red font, at the position where the calender widget is supposed to be. Why is this happening?

    ReplyDelete
  11. Hi Amanda,

    Wanted to just say thanks for the date calendar. Its up and working at a new site where I used a really nice new Template that did not have code for author, date etc...It happens.

    Anyway I managed to code the author stuff in but still could not get the date in the thing. So I came here and found your calendar. I like this work around better. It was flawless.

    Thanks, your hard work is a blessing.

    Vanessa

    ReplyDelete
  12. Hi Amanda, I am just wondering if you have uploaded other color options for this cool calendar? I would love one in blue! Thanks.

    ReplyDelete
  13. Any color options for the calendar widget? I just installed the gray one, and although it's okay, I'd prefer one in color - blue would be my choice (as it seems to be everyone else's choice on this post, lol).

    Thanks for such a great site! :-)

    ReplyDelete
  14. tks for the calendar ;)
    nice job :)

    and i have a question, the bug with IE? any news?

    i have it working on first displayed post, but not the following.. :(

    ReplyDelete
  15. thanks for this calendar widget! it looks good in my blog and i love it! your post is really useful! Keep it up and more power! :)

    ReplyDelete
  16. If I put it on the left, how can I create a space between it and the Post Title? Right now if I put it on the left, it's flush up against the title.

    Thanks for this. I found this on another site but it didn't work. I think it's because they didn't say to change the h2 class to div class. After doing that, it worked!

    ReplyDelete
  17. For Phillychief:

    You could try adding these lines of code just before the closing </b:skin> tag in your Blogger template:

    span.cal {
    margin-right: 10px;
    }

    Preview your blog before saving just to make sure this works for you :)

    Chances are, if you've used the script from another site, the author may not have attached a CSS file to the widget (the one I've posted uses CSS to prevent this happening), but hopefully these few lines of code should solve the problem for you.

    Best wishes,

    Amanda

    ReplyDelete
  18. i made it. im sure all of us who get the code have the same colors..lol can u make a calendar for us? thanks

    ReplyDelete
  19. Wonderful. Did the changes in my test blog first. Soon I'll update my real blog!
    Thank you very much!

    Patricia Anzanello

    ReplyDelete
  20. Amanda, right?
    The calandar post date didn't work for a few of my posts and showed this really annoying text instead:

    Orangevolt Calendar : Parsing date ' ' using pattern '/(\d\d\d\d)-(\d\d)-(\d\d)/' failed.

    Help! Here's my blog address:

    http://hellolurve.blogspot.com

    ReplyDelete
  21. Thanks for this widget it work nicely in my page.

    Thanks a lot

    ReplyDelete
  22. Hello! Thanks for this, it works great. It's the one feature I have wanted that Wordpress has.
    One question, When I edit the installed CSS, it will not change anything. What is the reason I can't and is there something I can do to change stuff?
    Thanks!

    http://onthebricks.blogspot.com

    ReplyDelete
  23. HI AMANDA..I USE YOUR TEMPLATE AT.www.reduceri-imbracaminte.blogspot.com and i saw today my template was changed..i mean the bookmark button was changed in share button..why this?? when u change the template html this change appers in my template too??? plss send me an mail and explane me..plss

    ReplyDelete
  24. Hi, Amanda -- I used this hack on the Minima template (changed the h2 line as suggested) but it isn't showing up at all. Any suggestions?

    ReplyDelete
  25. Thank you so much! I was finally able to get the widget to work. Your fabulous!

    ReplyDelete
  26. Amanda - Help! This doesn't seem to work for me.....
    Corinne

    ReplyDelete
  27. Hi Amanda - I used this in your template at http://www.everydaygyaan.com and it didn't seem to work.....any suggestions?

    Regards

    Corinne
    PS: Incidentally your blog is fantastic - I've blogrolled it.
    PPS: I changed the date format back again.

    ReplyDelete
  28. Hello Amanda,

    Thank you for your script. It works at my blog except for one small area.

    There is a black bar in the background. It wasn't there before I placed the script in the template.

    Could you tell me what I have possibly done wrong to have caused that black background bar to appear.

    I would not wish to display the black bar background.

    Blog URL is : http://www.lainyonline.com/

    ReplyDelete
  29. Hi Amanda,

    Please ignore my earlier Comment regarding how to fix the black background behind the Date widget.

    I was able to hide the black background by using "transparent" in the CSS code at my template.

    Just as an aside - the black background is caused the the Div for the Class.

    All's well that ends well.

    Thank You once again.

    ReplyDelete
  30. Hi! Amanda,

    May I know why after uploading the CSS file to my webhost and initiating my webhost link for it at my blogspot template, it does not display the calendar date.

    However, when I return to use the link that you provide, the calendar date is displayed.

    Please advise. Thank You,

    ReplyDelete
  31. Amanda, I'm another coding-blonk with not much idea what I'm doing.

    But I can't get your widget to work, though I think I followed your instructions properly.

    Is it possible for other page elements to interfere with the widget?

    ReplyDelete
  32. Can't seem to work for my blog.. It just display the date and didn't do any formatting

    For example : 2009-05-06

    ReplyDelete
  33. Same.

    Did closely follow the instructions but no results...

    ReplyDelete
  34. Same.

    Did properly follow the instructions but no results.

    ReplyDelete
  35. Finally it did work but this isn't what I was looking for.

    Sorry.

    ReplyDelete
  36. Hello Amanda. Your calendar is working great on my blog (rowerowewypady.blogspot.com). But still I have one question. Is there possibility to change the name of month? My blog is in polish and I would like to use polish month names. How can I do that?

    ReplyDelete
  37. Amanda,

    I tried everything, but because i'm using Minima Stretch, it doesn't even post the date at the top. I can't get anything to appear even after I followed your scripts.

    I'm not familiar with css, but I tried moving things around, and it still didn't work. Instead it gave me the following warning at the top of each post:

    Orangevolt Calendar : Parsing date ' ' using pattern '/(\d\d\d\d)-(\d\d)-(\d\d)/' failed.

    Please help. thanks. bess.fung@gmail.com

    ReplyDelete
  38. Please help. Script not working on blog.
    http://GreatCompassionBodhi.blogspot.com

    ReplyDelete
  39. i just want to change the color of the calendar from grey to blue....how can i do that??

    http://didizekid.blogspot.com/

    ReplyDelete
  40. Hi Amanda,
    great efforts! But there is a small problem as chanteuse mentioned:
    When we post more than one post a day, we have this message on the blog:"
    Orangevolt Calendar : Parsing date ' ' using pattern '/(\d\d\d\d)-(\d\d)-(\d\d)/' failed."
    It would be great if you can help with removing this message at least..
    I appreciate your nice tips.
    Keep up the good work

    ReplyDelete
  41. Hello Amanda I have uploaded the js files on my a/c & linked back to them, however the date is showing only for 1 or 2 posts in the calendar format whenever there are more than 2 posts. THis happens even when all posts have different dates. Please help me. This happens even when I link the iles from ur server.

    ReplyDelete
  42. Hi, Amanda
    I too have the problem with "Orangevolt Calendar" message. Would appreciate any help removing this.
    jtertullian@gmail.com

    ReplyDelete
  43. Hi,
    i am looking for a calendar to add as a gadget to my blog (not a post header) prefereably with a month view and dates with content (such as events) bolded and able to be viewed by clicking on. Have you got any ideas??? Thanks!

    ReplyDelete
  44. I also have the problem with Orangevolt Calendar : Parsing date 'Wednesday, November 25, 2009' using pattern '/(\d\d\d\d)-(\d\d)-(\d\d)/' failed.

    Email me at alcurtsinger@hotmail.com

    ReplyDelete
  45. This webpage is prompting people to give you their twitter username and password.

    ReplyDelete
  46. Not working even after several tries!! :(
    http://thepagesofmind.blogspot.com/

    ReplyDelete
  47. For some reason it doesn't work any more.
    I got a JS error, i think the scripts URLs are no longer valid

    ReplyDelete
  48. Amanda:

    The links to all the scripts are not working. Surfing to them directly shows a godaddy hold page. Could you please provide a link where we might download the files for hosting on our own homepage? Thanks.

    ReplyDelete
  49. amanda..

    kok postingannya ngak nongol sih,,
    coddingannya da yg salah atau saya yg salah copas ??

    ReplyDelete
  50. I am thoroughly convinced in this said post. I am currently searching for ways in which I could enhance my knowledge in this said topic you have posted here. It does help me a lot knowing that you have shared this information here freely. I love the way the people here interact and shared their opinions too. I would love to track your future posts pertaining to the said topic we are able to read.

    ReplyDelete
  51. Thanks for taking the time to discuss this, I feel strongly about information and love learning more on this. If possible, as you gain expertise, It is extremely helpful for me. would you mind updating your blog with more information

    ReplyDelete
  52. I didn't realize how old of a post this was until after I followed the instructions to create the calendar. Nothing happened and, seeing as I'm a complete novice, I don't know what to do now. Is all the "code" (or whatever gobblie-gook it is) now just lurking in the background waiting to devour my blog?

    I don't know how I could have screwed up simple "cut and paste" but it definitely doesn't appear on the blog. Can anyone help me?

    ReplyDelete
  53. Nice article, thanks for the information.

    ReplyDelete
  54. Just as Bryan above, I'm also having trouble and don't see a change. Any help would be greatly appreciated!

    ReplyDelete
  55. Very Nice Post, thanks for sharing such an useful information with us...thanks a lot!....

    ReplyDelete
  56. is this a free javascript for a calendar?

    ReplyDelete
  57. Nice information,Ankara escort
    many thanks to the author.Ankara escort
    It is incomprehensible to me nowAnkara escort
    , but in general,Escort ankara bayan
    the usefulness and significance is overwhelming.Ankara escort
    Thanks again and good luck!
    Ankara escort
    became the first designer in Wimbledon's 133-year history to create official uniforms for the tournamentescort bayan ankara
    As part of this year's event, which starts next week.
    will introduces the first ...Escort ankara
    determinationEscort ankara
    to maintain and enhance the values for which our two brands are famous throughout the world.Escort ankara
    The rugby ralph lauren brand brings to Wimbledon the look of timeless elegance,Escort ankara
    drawing on our rich history and traditionsEscort ankara
    expert and i like your blog and the information you have
    mentioned in this post about the Google tools is really great!
    escort bayan
    escort bayan ankara
    escort bayan ankara
    escort bayan ankara kızılay
    Escort ankara bayan
    escort bayan ankara çankaya
    Ankara escort bayan
    Ankara escort bayan
    Ankara Escort

    Thanks for sharing. Very impressive

    ReplyDelete
  58. I enjoy reading through your article post, I wanted to write a little comment to support you and wish you a good continuation All the best for all your blogging efforts. Appreciate the recommendation! Let me try it out. Keep working ,great job!
    mesin fotocopy| rental sound | rumah dijual | perlengkapan bayi | toko bunga | bengkel mobil | party organizer | parfum

    ReplyDelete
  59. Only one problem, the date text isnt aligning properly with the image,the text is farther right than the image. I haven't changed any of the css except for the background image. Do you know of an easy solution?
    LED Tube Light

    ReplyDelete
  60. I was looking for this information. pellet mill

    ReplyDelete
  61. Thanks to share with us the information. I wish you good luck!

    ReplyDelete
  62. I like all your post. I will keep visiting this blog very often. It is good to see you verbalize from the heart and your clarity on this important subject can be easily observed.

    ReplyDelete
  63. Looks great, much better than the original. Thanks!

    ReplyDelete
  64. From what I can tell, the way to customize the appearance is to add the class prefix ".mobile " to additional style statements in order to customize the appearance in mobile browsers. Not had time to try it much yet, but will do my best over the holidays so I can write up a post.

    sex video
    asian sex tube
    free teen
    latin sex porn
    secret porn
    cute porn
    sexy teen
    cd porn
    hot porn tube
    sex video
    fac sex
    sex movies
    xxx videos
    teen sex
    porn movies
    porn videos
    search porn tube
    redtube
    red tube
    xnxx
    porno
    lesben porno

    ReplyDelete
  65. Great article, wanted to just say thanks for the date calendar

    ReplyDelete
  66. Fist thanks for writing this important tutorial. This calendar widget help the reader for easily navigate the blog and it also make your blog more professional. I am going to use it on my blog. Thanks for publishing important tutorials for beginner

    ReplyDelete
  67. This comment has been removed by the author.

    ReplyDelete
  68. This comment has been removed by the author.

    ReplyDelete
  69. Fabulous article writing. Your article delivers varied passion therefore I bookmarked this science system for future visit that i hope can get a current content from your post and every one content unit progressing to be pleasant to scan with some new things.
    web development dubai
    dubai web design

    ReplyDelete
  70. What a great post, i enjoying reading your post, this give me a lot of idea especially for my next presentation. Thanks a lot for sharing dude.Butik Baju Wanita Online

    ReplyDelete
  71. ankara escort bayan ilanları ve bir birinden güzel kaliteli bayanların sitesidir..
    ankara escort
    escort ankara
    escort bayan ankara

    ReplyDelete
  72. Türkiye'nin bir çok ilin kapsayan geniş bir escort bayan sitesi olup başta, İstanbul escort ilan sitesidir.
    escort bayan
    bayan escort
    istanbul escort

    ReplyDelete
  73. Escort bayan'a
    ulaşmanın en iyi yolu Ankara escort sitesinden geçer.
    Ankara geceleri ve gündüzleri ile değil günün 24 saatinde bile ayrı bir güzelliğe sahiptir.Günün stresini atmak için
    ankara escort sitelerinde bulacağınız neşeli ve eğlenceli
    Ankara escort ile eğlenceli anlar geçireceksiniz
    Ankara escort siteleri ile bulacaınız escort kızlar
    ile yalnızlığınıza son vereceksiniz.Dilerseniz Yabancı Escort
    bayanlarda bulabilirsiniz. Türkiyede İzmit escort,
    Gaziantep escort,
    Kuşadası escort ve tabikide
    İstanbul escort bulabilirsiniz.
    İstanbul escort apayrı bi konu onu sonra açıklıcam...

    ReplyDelete

Great! You've decided to leave a comment! Please bear in mind that comments are often moderated and that rel="nofollow" is in use and spammy comments will be deleted. Let's have a meaningful conversation instead. Thanks for stopping by!

Advertise on Blogger Buster

Browse through the Archives

All existing posts are still available to view while I'm working on the site, albeit seen in a much simpler interface. Feel free to browse through the archives to find tutorials, templates and articles to help you build a better blog:

Blog Archive

© Blogger Buster 2010 Home | About | Contact | Hire Me | Privacy Policy