Author: Eric McHenry (#2242), Santa Clara Unit, Region 12eric.mchenry@wbcci.net

How To:• Configure your Unit website to take advantage of your new Unit google calendar.

This document is for you if:• You are your Unit webmaster• You are the person who will be entering and updating your Region event information.

Skill Level Required:• Very little: If you are managing your Unit website, then this will be easy.

What you need:• You will need the Google Calendar feed URL from whomever configured your Unit

Google Calendar.

Table of ContentsOverview! 3

Configure your Google Calendar (for Unit or Region)! 3

Configure your Google Calendar Plug-in on your wbcci.net site! 3

Create a new page with your Calendar on it! 3

Create a left-navigation calendar Widget! 3

Calendar Examples! 4

Region 12 website (www.region12.wbcci.net).! 4

Santa Clara Unit (www.santaclara.wbcci.net)! 4

Configure your Google Calendar (for Unit or Region)! 5

Setup your Google Calendar! 5

Add entries to your Google Calendar! 5

Share your Calendar! 6

FInd the Calendar URL for your “feed”! 6

1

Note for a Region webmaster! 7

Configure your Google Calendar Plug-in! 7

Configure the Google Calendar Events plug-in! 7

Create a new page with your Calendar on it! 9

Create a left-navigation calendar (Widget)! 10

Step #1: Activate the Google Calendar Widget! 10

Step #2: Configure the Widget! 11

Step #3: Re-build your site left-navigation! 11

2

OverviewConfigure your Google Calendar (for Unit or Region)• This may already have been done by

the person managing your Unit events. If so, just get the Google Calendar URL feed for your Unit from whomever set it up.

Configure your Google Calendar Plug-in on your wbcci.net site• Login to your wbcci.net site• Configure the Google Calendar Events

plug-in

Create a new page with your Calendar on it• Create a new page called “Calendar”• Add the following text to insert your

Google Calendar

Create a left-navigation calendar Widget• Note: this may make a DRAMATIC

change in your site layout. Don’t panic - you can go back to your older layout of you wish!

• Activate and configure the Google Calendar Event Widget

• Fix your left-navigation by turning on other Widgets

3

Calendar Examples

Region 12 website (www.region12.wbcci.net). • Notice calendar showing all Region activity in the upper left hand side navigation.

This is a “Widget” appearing across all pages on the R12 site.• Region 12 Rally Calendar (http://region12.wbcci.net/region-12-calendar/). This is an

example of a “page” dedicated to a calendar. • Note: All calendar data is pulled from the Region 12 Google Calendar. Updating it

once via Google Calendar automatically changes the data on the Region 12 website.

Santa Clara Unit (www.santaclara.wbcci.net)• Same as Region 12 website with “widgets” in the left hand navigation, plus a

dedicated Calendar page (http://santaclara.wbcci.net/rally/calendar/)• Since the Santa Clara Unit is part of Region 12, they have chosen to also read in the

Region 12 calendar (Region Rally, Special Region-events) into their calendar also.

4

Configure your Google Calendar (for Unit or Region)Setup your Google Calendar• Go to Google Calendar (https://www.google.com/calendar/)• Log in with your Google Account (xxxxxx@wbcci.net)

Add entries to your Google Calendar• Click “Create” to add a new event.

• Start adding events. Be sure to complete the basics of• Event Name• Where (location)• Optional: use the “Description” area to put in specifics, such as links to the Rally

coupon, updated information about parking, who to contact, etc.

5

Share your Calendar• Find “calendar settings”• Click on “Share this calendar with others”. Set to “Make this calendar public”

FInd the Calendar URL for your “feed”• This is how wbcci.net will be able to read your calendar.• Under Calendar settings, find the “Calendar Address” area towards the bottom (see

screenshot). • Select the orange “XML” box• Copy the URL. This will need to be copied into wbcci.net as you configure your

calendar.• It should resemble something like this: http://www.google.com/calendar/feeds/region12%40wbcci.net/public/basic

6

Configure your Google Calendar Plug-in• Login to your wbcci.net site

Configure the Google Calendar Events plug-in• Under “Settings”, click on “Google Calendar Events”• Click on “Add a New Feed” at the top of the screen• Name the Feed (typically the name of the calendar you want to show)• Insert the “Feed URL” you captured from the Google Calendar URL (above)• As a starting point use the following settings for each feed:

• Use the defaults with the following exceptions• Retrieve events from “The beginning of time”• Select box for “Show multiple day events on each day”• Paste in the following into the Event Display Builder HTML and Shortcodes”. This

configures the pop-up box when you hover over a calendar event.

<div class="gce-list-event gce-tooltip-event">[event-title]</div><div><span>[feed-title]</div><div><span>Starts:</span> [start-date]</div><div><span>Ends:</span> [end-date]</div>[if-location]<div><span>Location:</span> [location]</div>[/if-location]<div>[link newwindow="true"]More details...[/link]</div>

7

8

Create a new page with your Calendar on it• Create a new page called “Calendar”• Add the following text to your new page. When you preview the page you’ll see your

calendar!

[google-­‐calendar-­‐events  type="ajax"]

9

Create a left-navigation calendar (Widget)• Note: A “widget” is the small calendar stuck to the left-hand navigation.• Taking this step is reversible, but may cause a big change in your left hand navigation,

requiring you to manually implement the other “widgets” such as “Pages”, “Recent Posts”, “Archives”, etc. It’s not difficult.

Step #1: Activate the Google Calendar Widget• Under “Dashboard” > “Appearance”, select “Widgets”

• Enable the widget within your site by dragging the “Google Calendar Events” widget to the right “Sidebar” within the “Widgets Menu”.

10

Step #2: Configure the Widget• Configure it by using the drop-down arrow to change the name, etc.• Select “Calendar Grid - with AJAX”

Step #3: Re-build your site left-navigation• Save your changes and go look at your site now. You’ll probably have lost all your left-

navigation, with the exception of the Calendar widget - this is expected. Remember you can get the old left-navigation back by deleting the widget if you wish. But if you want to continue, let’s add back in your other widgets that were there before.

• Just as you did the the “Google Calendar Events” widget, enable other desired widgets by dragging them to the right hand “Sidebar” of the Widget menu. In the example shown, I’ve enabled “Pages”, “Related Posts” and “Archives” making a nice left-hand navigation again, very similar to what you got “out of the box” with your theme.

11