1. Google Calendar This tutorial is best viewed as a slideshow to better use the links provided.

2. Sign In To Google 1.Go to: http://calendar.google.com http://calendar.google.com 2.Sign in using your schools kit email address !!! Please do not use another account as we won’t be able to retrieve the password should you be unreachable.

3. Subscribe to FCPS Standard School Year Calendar To avoid having to update the standard calendar events every year, it is suggested to Subscribe to the FCPS Standard School Year Calendar Go to: http://www.fcps.edu/about/ events.shtml http://www.fcps.edu/about/ events.shtml Click the drop down button (Top-right of calendar) Uncheck “FCPS Calendar of Events” Click Subscribe button (Bottom-right of calendar)

4. Finding Calendar Settings 1.Your calendar is located on the bottom right of the screen’ 2.Mouse over your calendar until you see the drop down arrow on the right 3.Click the drop down arrow 4.Select “Calendar settings”

5. Make Calendar Public 1.In Calendar Settings Click the “Share this Calendar” link 2.Check the “Make this calendar public” 3.Click the “Save” button This will return you to the calendar Your calendar is now able to be viewed on the public web

6. Embedding Calendar Return to “Calendar Settings”Calendar Settings Scroll down to the “Embed this calendar” section Click the “Customize the color, size…” link

7. Click the Setting You Need: Agenda View Settings – This is the calendar viewed normally on your website home page (index.html) Calendar View Settings – This the full calendar with all settings and is found usually on your calendar.html webpage (this page is a pare of the FCPS template)

8. Agenda View Settings 1 1.Calendar Title: Upcoming Events 2.Show – Check “Title” – Uncheck all other options 3.Default View – Agenda Continued on next slide

9. Agenda View Settings 2 1.Width: – 300 pixels 2.Height: – 400 pixels 3.Calendars to Display – Check the calendars you wish to display – Choose the color with the drop down next to the calendar If you have subscribed to the “FCPS Standard Calendar”, you’ll want to check that one as well as your own calendar

10. Agenda View Settings 3 On the right side above the preview: 1.Click the Update Code button 2.Select ALL the code (Click in the code and Ctrl A on your keyboard) 3.COPY the code (Ctrl C on your keyboard)

11. Agenda View Settings 4 In Dreamweaver: 1.Open your index.html page 2.Scroll Down to the gray box that represents your calendar 3.Click on the gray box

12. Agenda View Settings 5 In Dreamweaver (con’t’d): 1.Click the “Code” button 2.Delete/Backspace the code that is selected by you clicking the gray box 3.Paste (Ctrl V) the code you copied from Google Calendar

13. Agenda View Settings 6 In Dreamweaver (con’t’d): 1.Save index.html 2.Upload index.html 3.Go to your website and check that the homepage agenda has updated (You might not see any events since your calendar may not have any yet)

14. Calendar View Settings 1 1.Calendar Title: Upcoming Events 2.Show – Check “Title” – Uncheck all other options 3.Default View – Agenda Continued on next slide

15. Calendar View Settings 2 1.Width: – 300 pixels 2.Height: – 400 pixels 3.Calendars to Display – Check the calendars you wish to display – Choose the color with the drop down next to the calendar If you have subscribed to the “FCPS Standard Calendar”, you’ll want to check that one as well as your own calendar

16. Calendar View Settings 3 On the right side above the preview: 1.Click the Update Code button 2.Select ALL the code (Click in the code and Ctrl A on your keyboard) 3.COPY the code (Ctrl C on your keyboard)

17. Calendar View Settings 4 In Dreamweaver: 1.Open your calendar.html page 2.Scroll Down to the gray box that represents your calendar 3.Click on the gray box

18. Calendar View Settings 5 In Dreamweaver (con’t’d): 1.Click the “Code” button 2.Delete/Backspace the code that is selected by you clicking the gray box 3.Paste (Ctrl V) the code you copied from Google Calendar

19. Calendar View Settings 6 In Dreamweaver (con’t’d): 1.Save index.html 2.Upload calendar.html 3.Go to your website and check that the homepage agenda has updated (You might not see any events since your calendar may not have any yet)

20. Finished! You should now see your new calendar and agenda on your home page (index.html) and your calendar page (calendar.html)