Add Google Calendar Widget On Blogger Sidebar.

On the edge of the New Year we all redesign our timetables, and shred the old ones. Impeccable timing for another Blogger Sidebar Widget, that shows occasions from your Google Calendar widget in your sidebar.

It is anything but difficult to introduce, so try it out!

Install Widget

Go to the Widgets & Downloads Page and click the Add Calendar Widget To Blog button.

This will bring up a pop-up window, where you can customize the settings of the widget, before instlling it to one of your blogs.

Change the settings, then click Customize, and then click Add Widget to my Blog.

Preparing you Google Calendar

Before adding the Widget to your Blog, you need to prepare your Google Calendar to share events. Your calendar has to be public; private ones will not be shown in the widget.

You will find your Google calendars at http://calendar.google.com. On the left-hand side of the screen you can see the list of all your calendars, the ones owned by you, and the ones you have subscribed to. Each calendar has a small drop down menu. Open this drop down menu for the calendar you want to share, and select "Calendar Settings". On the second tab, select the radio button to indicate that you want to share all calendar information with everyone. Now go to the first tab, and copy the calendar ID from this page; you will find it close to the bottom, between parentheses, following the XML/ICAL/HTML-buttons. You will need this ID to customize the widget. The ID will look like v4tfgsl4n3la@group.calendar.google.com.

If you feel insecure about this, create a test-calendar, and give it a try before sharing your real calendar.

Customizing the Widget

Go to the Widgets & Downloads Page and click the Add Calendar Widget To Blog button. This will bring up the customization-window.

You need to enter the following settings.

Widget Title

This sets the heading of the Widget in your Blogger sidebar.

Calendar ID

The ID of your public Google Calendar, that you copied from the Calendar Settings page. It is best to copy-paste this ID, to avoid typing errors.

Number of events

This is the number of events that will be displayed in the sidebar. Be aware that a maximum of 25 events can be displayed.

Calendar Owner Label

If you want the name of the calendar owner to be displayed, you can enter the label that you want to use here. The label is displayed in front of the owner name. Change it tou anything you like, or leave it blank.

Event Location Label

If you want the location of te event to be displayed, you can enter the label you want to use here. The label precedes the event location. Change it to anything you like, or leave it blank.

Date Label

The date label precedes the date of the event. Change it to anything you like, or leave it blank.

Time Label

The time label precedes the date of the event. Change it to anything you like, or leave it blank.

From Label and To Label

The from- and to-label precede the starttime and endtime of the event. Change them to anything you like, or leave it blank.

Whole Day Label

The Whole Day Label is displayed if an event takes an entire day. Change it to anything you like, or leave it blank.

Checkboxes

With the checkboxes you can select which information you want to display. If you uncheck all boxes, only the eventnames, dates and times will be displayed.

If you make a mistake, click Reset to reset to the defaults.

Adding the Widget to your Blog

Click Customize to create the Widget Code, then click Add to Blog to add the widget to your blog. This brings up a Blogger-window, where you can select the blog that you want to add the widget to.

Styling the Widget

If you want to style the widget, you can use the following custom CSS classes:

.bbcalbox : wraps around the widget

.bbcalname: the calendar name

.bbcaldescription: the calendar description

.bbcalowner: the calendar owner name

.bbcaleventname: the title of the calendar event

.bbcaleventdescription: the description of the calendar event

.bbcaleventlocation: the location of the event

.bbcaleventdatetime: the date/time information of the event

.bbwidgetfooter: the widgetfooter

Opinion! Please let me know if this widget is useful via our comment section. Thanks.