google calendar integration guideline powered by donorcommunity tm donorcommunity elearning series...

Google Calendar Integration Guideline Google Calendar Integration Guideline Powered by DonorCommunity TM

DonorCommunityeLearning Series

v1.2, February 2012v1.2, February 2012

Google Calendar Integration GuidelineGoogle Calendar Integration GuidelineEmbedding Google Calendar On Your Site




Topics CoveredTopics Covered

1.Setup Google Calendar

2.Embedding Google Calendar

3.Need Assistance?

ContentsContents

= Go to Topic

Next Page




Login to Google Calendar1. To learn about Google Calendar go to:

http://support.google.com/calendar/bin/answer.py?hl=en&answer=2465776

2. Sign-in to Google Calendar using your Google account (GMail

admin account) or click the red Sign Up box to create an account.

1. To learn about Google Calendar go to:

http://support.google.com/calendar/bin/answer.py?hl=en&answer=2465776

2. Sign-in to Google Calendar using your Google account (GMail

admin account) or click the red Sign Up box to create an account.

Setup Google CalendarSetup Google Calendar

Back to Contents




Enable Public Viewing1. Share this Calendar

Select the dropdown arrow to the right of the calendar you wish to display on your site, then

select Share this Calendar

Back to Contents





Enable Public Viewing1. Share this Calendar settings

Check the Make this calendar public checkbox and Save your changes.

Back to Contents





Setup Your Calendar & Copy the HTML Code1. Calendar settings

Select the dropdown arrow to the right of the calendar you wish to display on your site, then

select "Calendar Settings"

Back to Contents





1. Setup your calendar name, time zone and get the HTML code

Back to Contents

Change the Calendar Name to the desired name.

Click the "Customize the color, size and opther options" link to customize the size, look and feel of your calendar.

Copy the HTML code from the tool page so you can paste it into your DonorCommunity site. .


Setup Your Calendar & Copy the HTML Code

Use the HTML code from the tool, NOT the HTML code displayed on this

page




Your NPO Name

1. Copy the HTML code

Back to Contents

Make any adjustments to the Title, Show Settings and size of the calendar.

Copy the HTML code from the tool page so you can paste it into your DonorCommunity site. .


Setup Your Calendar & Copy the HTML Code

Copy the HTML code displayed on this page




Back to Contents

Embedding Google CalendarEmbedding Google Calendar

Paste the HTML Code Into Your DonorCommunity Site1. Login to your site with content admin rightsNavigate to the page where you want to display the calendar and use the Add Application tool to add a Web Content Display component to your page. Drop it into position.

Click the Edit Web Content icon for the new component, then click the Source button in the editor interface.

Paste the html code into the editor and then click Save and Approve if using new component or just Save if using an existing component.

Click to change the component Title:•Select Look and Feel•Check Custom Title and enter the title.

Click to change the component Title:•Select Look and Feel•Check Custom Title and enter the title.

Your NPO Name




Back to Contents

Embedding Google CalendarEmbedding Google Calendar

Test and Update Your Calendar1. Logout and view the calendarIf the calendar does not display, check your Google Calendar settings and confirm the Calendar has been set to Public.

Remember to add/update events and manage their visibility on your Calendar using your Google Calendar account.

Your NPO Name




If you need any assistance, If you need any assistance, please contact us atplease contact us at

[email protected] [email protected]

Back to Contents

google calendar integration guideline powered by donorcommunity tm donorcommunity elearning series...

Documents