Information Computing and Technology Services

Adding a Calendar Widget to CommonSpot

Tutorial

The University has begun rolling out a new calendaring application called Localist. The new application will replace all the current Common Spot calendar options. ITCS has worked to move all the calendar events stored in the old systems to the new Localist calendar application. You can visit the new calendar at http://calendar.ecu.edu

If you would like to add the calendar events to your Common Spot page, the following tutorial will help you do that.

Localist Widget Builder

https://calendar.ecu.edu/help/widget 

For a list of custom parameters you can add to your widget.
 http://support.localist.com/customer/portal/articles/1288914-building-widgets

To add a calendar of events to your Common Spot website, you will need to create a “Widget”. You are not required to login to this site. For now, you should leave the defaults in place and the only choice you should make is to choose Event Type = University. Once you do that, scroll to the bottom of the page and click the “Generate Widget Code” button. 

calendar - WidgetBuilder

Now that you have generated your Widget Code, click in the box called “Widget JavaScript”, highlight all the text in that box (you can use Ctrl A). Copy the text and paste into a text editor (Notepad works well.). 

Edit the text to remove everything except for the actual URL. For example if I paste the JavaScript as follows: 

I will want to edit out everything but the URL as shown below (including the quotes (“”) at the beginning and end): Your URL should look similar to this.

https://calendar.ecu.edu/widget/view?schools=ecu&days=31&num=50&types=20000 

Now to add the JavaScript, go to the Common Spot page where you want your Calendar of events to reside and insert the “Include Javascript” element from the Custom Elements in the Element Gallery. 

When you are back at the page where your element resides, click on the gear icon so that the dropout menu appears. Choose “New Data” or “Data”. (If you want to edit the javascript that is already there, you will need to choose “Data” as the “New Data” link will generate another occurrence of the calendar.) In the dialog box that appears paste the URL that you created from your Widget JavaScript code into the text box nest to “External Source”. Leave the “Script Input” blank. See screenshot below. Click Save to close the dialog box and your calendar should appear on the web page.

calendar - EnterCustomElementData

Example of Calendar on a web page (image 1). The width of your calendar depends on the size of the container where you insert the javascript element. If you use a two or three column layout, the calendar of events will wrap to fit the width of the column where it is added. (image.2) 

Image 1: 

calendar - CalenderFullPage

Image 2:

calendar - CalendarColumnOnly

Contact Us

ITCS Admin - 252.328.9000
IT Help Desk - 252.328.9866
IT Help Desk - 800.340.7081
Classroom Tech - 252.328.9830
ITCS Leadership - 252.328.9000

Need Help?