How do you create a Google Calendar and place it on the webpage?

Calendar Examples:

Steps:

  1. Create a Google Account
  2. Create a Calendar(s) / Invite others to edit calendar (s)
  3. Editing events (individually and with an Excel template)
  4. Embed your calendar with DNN (HTML module or Live Tabs)

Create a Google Account

Create a Calendar(s)/Invite others to edit calendar(s)

  • Log into google.com
  • Click on the 'CALENDAR' link
  • You may already have a calendar created by default.  This calendar cannot be deleted, this is a personal calendar.
  • Click the arrow to the right of My Calendars and select Create New Calendar


  • Fill in the blanks:  Note the ability to SHARE WITH SPECIFIC PEOPLE if you want others to be able to edit the calendar


  • Click Create, you may receive a message saying the individual you want to share with does not have a Google account...select INVITE so they will receive an invitation to edit.

  • Once invited, invitee will receive an email.  They will click the link provided and create their Google account


  • Once main calendar is created, do not add anything to it.  Leave the default calendar untouched and create multiple calendars.

Multiple Calendars

  • For each new calendar you want, click on the arrow to the right of the calendar names and select NEW CALENDAR
Example:   Middle School Sports Calendars:


Example:  Liberty Calendar


Editing Events (Individually and with and Excel template)

Now you have to add some events.  If you only have 5 or fewer events you may just want to add them individually within your Google account.  More than 5 events, you may want to use an Excel template (explained below) to create your events and in turn import all events at one time.

Individually:
  • Click on the square in the calendar date where you want to add an event
  • Type the Event Name
  • Select the calendar you want to add it to

  • If you click create event, this will be an 'all day' event
  • Click edit event, to give it specific times, location, more details, etc.


  • You can even check the REPEAT box for recurring events:

  • Do not forget to click SAVE at the top of the page

*Now the event will appear in the date you selected (you can see multiple events on the calendar below):

If visitors to your calendar click on the event, they will have some options of more details or copying to their calendar if they use Google calendar (Note the link to a map for location):


Adding MULTIPLE EVENTS with a Template

  • Open MS Excel:
  • Create the following headers for columns (They do not need to wrap)

  • Self-explanatory from here.  Fill in the needed data


TIMES are best entered in 24 hour time (Military time)

  • Note the events without times will appear on the calendar as all day events.  Items with location information will give a link to a map within your calendar.
  • Note vague location like BHS GYM don't always produce good results for location.
  • Description can be left blank, or you can copy the subjet column and paste it into the description.  You can also add very detailed information if you like.

After you have edited your events, you will want to import them into your online Google calendar.  You need to save the Excel document as a Comma Separated Value file (.csv).

File > Save as > Comma Separated Values (.csv)

You will be asked to save multiple times before Excel quits.

After quitting Excel, open your Google account and click on the Calendar link.

  • Now click on the arrow to the right of My Calendars and select Settings

  • Scroll down to the area below your calendars and select IMPORT CALENDAR



You will see the following window:
  • Use this window to select your .csv file (Excel file(
  • Select the calendar you want to import to
  • Click Import

You should receive a message window telling you that you successfully imported "#" of events.  If the Excel document was set up incorrectly, you may receive an error message telling you 'Failed to Import.'


Embedding Google Calendars in DNN

You can now embed your Google calendars into DNN modules:  HTML or Live Tabs

You can display one or more calendars at a time on a single calendar via your selections in Google.

Examples:

1 Calendar per Live Tab:  Each sport is displayed on it's own tab

2 Caledars in one Live Tab:


  • To embed individual calendars as a tab in Live Tabs (like the Middle School Sports Page), you would retrieve the embed code within your Google calendar (you need to be logged into Google) by mousing over the arrow to the right of 'My Calendars' and click on Settings.

  • You will then see a new page with a list of all of your calendars.  Click on the individual calendar you want embedded.  Let's say for example:  Boys Basketball, the newly opened page will look like the one below.


  • 2/3 down the page, look for Embed this Calendar
  • Copy the code 'as is' to embed this code into your DNN HTML module or Live Tabs.
If you click the link to customize the color, size, and other options, you can embed more than one calendar into a ‘single calendar’ to embed. (As mentioned above with the Cycle Day Calendar and Liberty Teacher Calendar)

To embed the two calendars into one, click the link to customize the calendars and select the calendars you plan to embed into one.....for example, with the Liberty School Calendar, I have the
Liberty Cycle Day Calendar and the Liberty Teacher Calendar I did so by :


After selecting the calendars I want to embed, I copy the embed code at the top of the page and paste into my DNN module:  HTML or Live Tabs. (paste in the rich text editor space)


Add Feedback