Google Calendar in Lectora

by Jonathan Shoaf

I'm a big fan of Google and I use Google's online applications on a daily basis. I've found the Google Calendar to be easy to use and easy to access at home, at work, and on the go. When I was recently asked to teach a class on how to use Google Calendar I started thinking about how to integrate it with Lectora. Having a calendar in your training can be useful for a variety of reasons. Embedding a calendar in your Lectora training can be done through Lectora's External HTML object. This lesson shows you how to do this.

Prerequisites

This lesson assumes you have a Google Account and that you have created a Google Calendar. To set up an account go to http://calendar.google.com.

1. Start in Lectora

First, create a blank project in Lectora or create a new page in an existing project.

2. Grab Code Snippet from Google Calendar

Log-in to Google Calendar. Click on the down arrow next to the calendar you want to embed in Lectora.



In calendar settings, scroll down the the Embed This Calendar section. You could use the code in the text box to embed the calendar in the Lectora project. However, we want to customize the code so that it is the correct size for our project. Click on the link Customize the color, size, and other options.



For this project the width should be adjusted to 600 and the height should be adjusted to 450 so that the calendar will fit correctly on the Lectora page.



When you have entered the width and height, click Update HTML then select and copy the code from the text box (see below). You will paste this code in Lectora in an upcoming step.



3. Paste Code Snippet into Lectora

Go back to the Lectora program. From the Add menu choose Object then External HTML. You'll see the following dialog box.



Give the object a name, in this case "Google Calendar". The object type should be set to "Other". Next is the important part. Paste the code block from Google Calendar in to the text box for Custom HTML.

Next, go to the Position and Size tab to adjust the width and height. Based on the settings we gave the calendar in Google, the width should be 600 and the height 450. Click OK to accept the changes.



Finally, position the External HTML in your Lectora project. You should see something similar to the following screen shot. Notice the Google Calendar is not visible in edit mode. It will not be visible until it is previewed in a web browser.



4. Preview in a Web Browser

Previewing the project in a web browser will result in something similar to the following screen shot. The calendar is interactive so the user can change the date, view mode, and see details on events.