1. Google Calendar Integration Guideline Powered by DonorCommunity TM DonorCommunity eLearning Series v1.2, February 2012 Google Calendar Integration Guideline Google Calendar Integration Guideline Embedding Google Calendar On Your Site

2. Google Calendar Integration Guideline Powered by DonorCommunity TM DonorCommunity eLearning Series v1.2, February 2012 Topics Covered 1.Setup Google Calendar 2.Embedding Google Calendar 3.Need Assistance?Contents = Go to Topic Next Page

3. Google Calendar Integration Guideline Powered by DonorCommunity TM DonorCommunity eLearning Series v1.2, February 2012  Login to Google Calendar 1.To learn about Google Calendar go to: http://support.google.com/calendar/bin/answer.py?hl=en&answer=2465776 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 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 Calendar Back to Contents

4. Google Calendar Integration Guideline Powered by DonorCommunity TM DonorCommunity eLearning Series v1.2, February 2012  Enable Public Viewing 1.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 Setup Google Calendar

5. Google Calendar Integration Guideline Powered by DonorCommunity TM DonorCommunity eLearning Series v1.2, February 2012  Enable Public Viewing 1.Share this Calendar settings Check the Make this calendar public checkbox and Save your changes. Back to Contents Setup Google Calendar

6. Google Calendar Integration Guideline Powered by DonorCommunity TM DonorCommunity eLearning Series v1.2, February 2012  Setup Your Calendar & Copy the HTML Code 1.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 Setup Google Calendar

7. Google Calendar Integration Guideline Powered by DonorCommunity TM DonorCommunity eLearning Series v1.2, February 2012 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 Google Calendar  Setup Your Calendar & Copy the HTML Code Use the HTML code from the tool, NOT the HTML code displayed on this page

8. Google Calendar Integration Guideline Powered by DonorCommunity TM DonorCommunity eLearning Series v1.2, February 2012 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 Google Calendar  Setup Your Calendar & Copy the HTML Code Copy the HTML code displayed on this page

9. Google Calendar Integration Guideline Powered by DonorCommunity TM DonorCommunity eLearning Series v1.2, February 2012 Back to Contents Embedding Google Calendar  Paste the HTML Code Into Your DonorCommunity Site 1.Login to your site with content admin rights Navigate 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

10. Google Calendar Integration Guideline Powered by DonorCommunity TM DonorCommunity eLearning Series v1.2, February 2012 Back to Contents Embedding Google Calendar  Test and Update Your Calendar 1.Logout and view the calendar If 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

11. Google Calendar Integration Guideline Powered by DonorCommunity TM DonorCommunity eLearning Series v1.2, February 2012 If you need any assistance, please contact us at support@donorcommunity.com Back to Contents