HTML_EMBED

The MOST reliable Steps for Embedding a Calendar in your Website!

As always, there is more than one way to accomplish a task. Google has some simple solutions, but often they do not work like they need to. Here is the way I prefer to embed a calendar.

Always the first step in accessing calendars, sites, blogs, etc. is to log into your Google Email. All the QuickStarts begin by doing this first. You access all of your GAFE applications through the Google Grid in the upper right-hand corner

(1) Create A Calendar (QuickStart) - name it short and simple - (Athletics, Cheer, District, Math_Smith, SS_Jones)

(2) Once your calendar is created, you will find it again, by clicking on the the Calendar Icon.

(3) Since I have boocoos of calendars, the next step is very important. Click on the down arrow next to the calendar you need to embed.

and select, "Display only this Calendar". This will make sure you are only issuing commands to that calendar.

(4) Click again on the down arrow and this time select "Calendar Settings" Here is where you Name your Calendar, and select -5:00 Central Time, make the calendar public or shared (change sharing settings) with just a few folks, AND Copy the "Embed This Calendar" iframe script when you are ready to embed. We will come back to this script in a few steps.

(5) Create a Web Page for your calendar to be displayed on.

(6) To Edit the new Calendar Page go to your Google Sites and selecting your site

If you did this correctly, you will get the "edit pencil" in the upper right hand corner of the page.

(7) Click on the pencil. You now can add text, as well as photos, files, tables, etc. We want to add three Xs (XXX) where we are going to embed the calendar. Find the exact place you want the calendar to appear on the page and type XXX.

(8)Keep your page in edit mode. Open a new tab and copy the iframe code from your Calendar settings. Keep that in computer memory while to do step 9.

(9) Click on the <HTML> menu option at the top of your page.

(10) Issue the CTRL-F command (find command) and type 3 Xs (XXX) in the "find command"

(11) Highlight the XXX in the HTML code and PASTE in the iframe code (CTRL-C). Click UPDATE and CLICK save (your page)

Now when you edit your page, you are able to adjust your Calendar settings by clicking on the Calendar

to get to the "Gear" where all the calendar settings are located.

You can play with these settings to see what best fits your application. Be sure and click "Save" for your page after you adjust your calendar settings.