Office of Information Technology

Adding Google Calendar to your website

This "How to" is for including your University of Alaska Google Calendars in your website. To get a UA Google Applications account apply here

Creating an Event

1) Log into your UA Google Applications for Education account

2) On the main page click "Calendar" which is located at the top left corner.

3) On the top left corner under "University of Alaska" logo click "Create event"

a) Write the description, time, etc.
b) You can invite your peers by enlisting emails, they will be sent out after you click "Save and Send emails" (the guests don't have to have a Google account to view the event).
c) You can also create an event by clicking on the calendar itself.

Changing Calendar Settings

Settings can be changed by clicking on the "Settings" link in the My Calendar box on the left.

You can import, export, and create new calendars. Additionally you can change your "Sharing" settings, select people to share this calendar with.

If this calendar is a department or event calendar other owners of the calendar should be set here by entering their email address and choosing "Make changes and manage sharing".

In this details area you can:

a) Set Notifications.
b) Browse for other calendars by selecting the "General" option (next to Calendars and Mobile Settings)
c) The General details area allows you to change the language, time zone, etc.
d) The "Mobile Setup" area is where you can set up notifications to be sent to your phone.


Inserting the Calendar into a Roxen page

In the "My calendars" box (under smaller calendar on the left side), click the down arrow and select "Share this calendar"



Go to "Settings" in the "My calendars" box and click "Share this Calendar". Click on the "Shared: Edit Setting" link for the calendar you want to edit.

Select "Calendar Details"

Click on the "Customize the color, size, and other options" link

1) Make choices on the colors, title, size, language, etc.

2) After making any changes click the Update HTML button.

3) Copy the HTML code from the text box

4) Log into your Roxen website and navigate to the page you want the calendar to appear in.

5) Enter edit mode, click the "Edit" icon and insert a RXML component.

Paste the code in the RXML text box, save the page and check if it looks the way you wanted, you can edit the code back in the Google calendar editing page and paste the new code if any changes are needed

Note: If you have multiple columns or if the calendar doesn't fit into your web page (the calendar is larger than the size of the area), change the width from pixels to percent and remove height.

For example:

<iframe> </code> </blockquote> <br /> would become <br /> <blockquote><code> <iframe src="//" style=" border-width:0 " width="<font color= "red">100%</font>" frameborder="0" scrolling="no" > <iframe> </code></blockquote>
Back to Top