Wednesday, June 29, 2011

Blog Calendar Widget for Your Blog

So you're wondering right now how to put a decent calendar on your blog. If you try to Google "calendar widgets", a lot of websites and widget hosting sites will offer you their ideas. I tried each and everyone of them. Not one did what I was looking for - Something simple, no additional unnecessary features, no ads or banners and completely customizable to suit any theme.
And so, with further research, here's my take on a calendar widget for your blog.
This is an easy installation. My post is just long because of my detailed explanation. I only make tutorials for the HTML beginners anyway so, please just bear with me here.
In 5 minutes, you'll have your own calendar, just like the one I have here on my sidebar. Follow me.

First things first,
There are two types of blog calendars.
1.Archive Calendar - This would hold your blog's archive in a calendar form, in place of the generic archive tree/dropdown we have here in blogger.

2. Events Calendar - A planner that would hold your schedule or events. This is great if your blog hosts events. Plus, you can customize this furthermore so that your readers can add an appointment to your calendar - but that's another post.

Today we are doing an Events Calendar. IF you want an Archive Calendar, see phydeaux amazing codes here.

So let's begin.

What you need:
1. InstantCal - This website has a lot of interactive features, but the basic thing it does is it customizes an existing internet calendar you have.
Pros: No annoying ads. No badges. FREE.
Cons: Takes 3 seconds to load. That's it.

2. A public internet calendar - Where you can manage your actual calendar. There are lots of this out  there, but you don't need to go far anymore - we have Google Calendar.
Pros: Easy to make and customize. You can sync it with your iPhone.
Cons: None so far

Go to Google Calendar and make your own calendar. I won't go on details with this since it's fairly easy to make one.
To manage your calendar more, Google Calendar let's you add several different calendars on your account and you can choose to either make them private or public.
Before you get carried away, note though that Instantcal can only read one calendar at a time, and this calendar must be in public view.
To prevent showing your every schedule to all the stalkers out there, here's what you'd want to do:
make a separate calendar for you blog.
This way, you can only show on your blog any schedule you choose from any of your calendars. You can name it whatever you like, but for the sake of this tutorial we'll call it BLOG CALENDAR.  

STEP 2:Click the arrow on the BLOG CALENDAR and choose Calendar settings. On the Share this Calendar tab, check Make this calendar public, if you want further privacy, you can also check Share only my free/busy information. 

This time, click on the Calendar Details tab. On the very end of the widow, get your Calendar Address choosing ICAL as its format. The window that would pop-up would be your calendar address. Copy that address, we will use that later.

Now, let's leave Google Calendar for a moment and go to InstantCal. The link would lead you to InstantCal's Sample Gallery. Take your time to choose which calendar design you want. For my blog, I chose Datepicker (large) - Month (Round). When you've already chosen your design, click the Show HTML Embed Code.
Copy that somewhere, like a notepad, for safe keeping later on. Now, we go to the hardest step.

On your code, look for the following words that are colored red and green.
RED = Name
GREEN = Value
The most important thing that you'll have to change here is the file. Replace the entire link - from http up to .ics, with the Calendar Address we got from Google.

 The others are ones are just for customizing the size and the color of the calendar.

If you open InstantCal's API (Here is where the cheat codes lie), you can customize your calendar to anything you want. Just remember to look for the Name of the attribute you want to change and replace the old Value with the one you like.

theme – this is the color of the calendar header.               
To change the background color/the body of the calendar itself, add &
bcolor=ffffff right after the theme=RE. Remember that you can change the Value ffffff to any color you want. Same as with the RE. Google HEX color codes to get a list of colors.

You're done!
Now all you have to do is to add that HTML to blogger's sidebar.

Go to blogger dashboard and click on design. Choose Page Elements then Add a Gadget. 
Choose HTML/JavaScript and paste there the HTML we just did. Click save and see your blog!

HOW TO USE:There's nothing else to do with an Archive Calendar. As you post, it will automatically update your calendar too.
With Events Calendar, you have to add your schedule and events to GoogleCalendar.

Add your events:

If ever your event is included on one of your private calendars, click on the event you want to share on your blog and choose copy to my calendar.

On the menu that would pop-up, choose BLOG CALENDAR or wherever you want to copy the event for that matter. Then save :)

If you have questions, suggestions or clarifications, don't hesitate to ask me :)

Reese's and Kisses,

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.