Tutorial: Embedding Google Calendar

January 1, 2011

Tutorial: Embedding Google Calendar

January 1, 2011
Happy New Year! In keeping with the holiday, I thought I would write about calendars today…digital ones, that is! These calendars are great tools to embed on your website or blog. And, if you already have a GoogleDocs account, setting up a calendar is a snap.

And in a few short steps, you can customize your calendar and let your students and families know about upcoming tests, fieldtrips, project deadlines, and more.

The first thing you’ll need to do is get a free GoogleDocs account, if you don’t have one already. This is important not just for the calendar, but also so you can download files here on Ladybug’s Teacher Files! 🙂

Then, head to Google Calendar. You will be able to start adding events right away. You can have multiple calendars if you’d like. You can also choose colors for events and tasks.

Once you have finished entering your events, you are ready to try embedding the calendar.

First, head to Calendar Settings (located in the drop down menu at the very top, right-hand corner of the page):

You will see a page that looks like the image to the right. There are more options for your calendar here.

To get the code to embed your calendar, click on the Calendar tab (next to the General tab at the top of the page).

You will see a list of calendars you can share. Choose the calendar you would like to embed on your website (mine is Calendar Sample):

Now, be sure you are on the Calendar Details tab:

Scroll down this page until you see Embed this Calendar:

The code is already all set for you to embed right into your website, or you can click the Customize the color, size, and other options link. I had to do this for my calendar, to make it a bit smaller (so it could fit on my blog page).

If you choose to customize your calendar further before embedding it on your website, here are some things you can alter.

This menu will let you select what you’d like to show on your calendar.

You can choose how the calendar will display (weekly, monthly, or an agenda format).

You can alter the size as well, as mentioned above.

There are must customizations available. There is also a preview image of your calendar, so you can see how these alterations look.

Once you have finished customizing, be sure to click the Update HTML button (top, right-hand corner of the page). Then your code will be all set to embed in your website.

If you are using Blogger, all you will have to do is enter your HTML code under the Edit HTML tab in your posting box:

Would you like to know what the best part is??

Once you have embedded the calendar into your webpage or blog, you don’t have to alter it again.

When you want to add events or tasks, you just have to go to your Google Calendar and enter everything there. It will automatically transfer over to your embedded calendar. How cool is that?!

Best wishes for a Happy New Year! Thanks for reading everyone!

No Comments

Leave a Reply


Instagram did not return a 200.

Follow @ladybugsteacherfiles