Embedding Publisher Spud Code in Websites

Once you have completed the work selecting your calendar views and styling your calendar, you are ready to embed your publisher spud code on a web page.  There are a number of considerations to make before you begin.

1. Where will the calendar reside?

It is customary for the calendar view to have its own web page on the website where you may incorporate both the calendar spud, some control spuds, and possibly a promotion spud.  Once you have determined where your calendar will reside, you will need to edit the Publish Settings and provide the full URL to the new calendar location in the Calendar Address field.

Next, complete the Search group of settings in the Edit Publish Settings dialog box.  Recommended settings include:

Searchable: It is recommended that public-facing calendars set this item to Yes

Search keywords: It is recommended to include a (comma-delimited) list of words and phrases that would help people find your events. Keywords that match words that will be in the event title or the event description will raise the relevance of your events in the major search engines making it easier for people to discover them.  

City and Region: Set to your correct city and region

2. Which spud codes will you use in combination on the calendar's web page?

You will need to copy the Main Calendar Spud code and insert it on the web page.  The Main Calendar Spud will drive your Available Calendar Views, your Event Detail View, your Popup Event Detail Spud, your Mobile Calendar View, and your Mobile Event Detail View

In addition to the Main Calendar Spud, it is customary to make use of a couple of control spuds.  Remember that control spuds grant your calendar's visitors some control over the calendar.  The most commonly used control spuds include:

View Chooser Tabbed 

Used to grant the visitor the ability to switch between the different calendar views being served by the Main Calendar Spud.  If your spud provides for multiple different views (as most do), you should position this spud above the Main Calendar Spud.  Most campuses opt for the View Chooser Tabbed control instead of the View Chooser which is a drop-down list of calendar views.

Month List 

Used to allow the visitor to jump forward or backwards to a specific month's events without having to constantly click the next and back buttons.  This control spud most often is positioned below the View Chooser Tabbed control spud and above the Calendar View spud.

Search 

Used by most campuses to allow the visitor to perform keyword searches for events on the calendar.

Filter

For calendars where you want to guide the searching for events, you might deploy the Filter control spud.  The Filter is capable of filtering on virtually any data passed along via the feed.  You may review the earlier discussion of the Filter control to see its versatility.

Calendar List

Useful if you are building a top-level/sub-calendar or a mixed-in calendar.  The control will allow your visitors to remove the checkmark next to a calendar feed to remove those events from view.

Date Finder

Promotional spuds are not customarily used on the same page as the calendar spud with one notable exception.  Many campuses choose to include the Date Finder promotion spud on the same page as their calendar spud; in those instances, you need to make sure that you check the box labeled Spud will appear on the same page as the main calendar spud.  The Date Finder promotion spud makes use of the Day Summary promotion spud so if you use the Date Finder, be sure that you style both spuds.

3. Structure of a Calendar Page

A typical structure for most calendar pages presently is to have a left pane containing some of the calendar controls and then a right pane (the body region of the document) containing the Calendar View Tabbed control, the Month List control, and the Calendar View spud. 

The HTML markup would look something like the attached HTML file that you may download here,  A couple of things to note, each spud code is in its own container bounded by an opening (<div>) and closing (</div>) division tag.  Each of those divisions is referencing via the id element the campus web page's cascading style sheet and capturing styles to be applied to that particular division.  In most cases, this is positioning for these types of tags but it can include fonts if you are placing text and header text in between each of the control spuds.  Employ your campus's webmaster to assist you in inserting the spud codes into campus web pages.  In most cases, the campus is using a Content Management System (CMS) that will have procedures for inserting JavaScript code snippets.  Your webmaster will know how to navigate those issues and bring your calendar to the public.