Search Tips
Account Management Apps Attendance Call Alerts Classroom Data Imports Directory Services Google Classroom Integration Grade Export Gradebook Groups Implementation Lockers LoopMail
Mobile School Loop Partner Gradebooks Portals Publishing Registration Sections School Settings Student Record Student Tracker Unification Webmaster Websites
Frequently Asked Questions Document Library Design Services Gallery of Sample Sites Help & Support
Free Webinars Website Accessibility Course Outlines On-Site Training Website Training
Account Management Grade Submission Gradebook LoopMail Trackers Miscellaneous
New Release Blog Replace Locker Files Teacher Usage Stats

Google Calendar

If your school has already created a Google Calendar, you can easily embed it on your School's website

Instructions and Recommended Settings

  1. Go to your Google Calendar.
  2. On the right side of the page, click the Gear icon and choose Settings from the pull-down menu.
  3. Under Calendar Settings, click the link for the calendar you want to embed.
  4. Look for the Embed This Calendar section and click the Customize the color, size, and other options link.

  1. Choose your desired settings in the Embeddable Calendar Helper, click the Update HTML button near the top of the page, and copy the HTML code for your calendar. (See below for some recommended settings)

GoogleCalendarEmbedHelper.png
 

  1. Paste this code into a Custom HTML element on the page of your site where you wish the calendar to appear.

Google Embeddable Calendar Helper Settings

The default settings contain a lot of features that may not fit properly depending on the column width.

You can experiment with unchecking some or all of the items under Show on the left side of the Calendar Helper. This example shows a Month view with only the title selected. It is meant for use in the center column of a 3 column homepage. Note the width is 460px.


 

Agenda Calendar for Narrow Columns

For narrow columns, you will definitely want to uncheck most if not all of the extra items under Show, because they just won't fit properly. The Agenda view  is a nice look for narrow columns. This calendar is set to 220px width which works in the right column of a 3 column layout.

AgendaCalendarfornarrowcolumn.png