Embedding Publisher Spud Code in Websites

Which versions of Series25 components are you using?

These articles have been prepared for schools using 25Live Pro and 25Live Publisher.

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 you need to make before you start pasting your spud code into a website.

Where will the calendar reside?

The first thing you need to decide is where the calendar view spud code will 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 even 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 page where the calendar will reside.

Edit Publish Settings - Enter the Calendar Address


You will also want to make sure that you complete the Search group of settings in the Edit Publish Settings dialog box.  Specifically, for a public facing calendar you will want the calendar to be Searchable and will want to enter a solid set of Search keywords.  Search keywords is a comma-delimited list of words and phrases that would help people find your events.  When your keywords 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.  You will also want to ensure that you have your City and region properly set.

Edit Publish Settings - Search Settings


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

The second thing you need to decide is which spud codes you will use in combination on the calendar's web page.  Obviously, 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.

Main Calendar Spud

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:

  1. The View Chooser Tabbed control spud is 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.
    Control Spuds - View Chooser Tabbed Control Spud

    View Chooser Tabbed - A Preview of the View Chooser Tabbed
  2. The Month List control spud is 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.
    Control Spuds - Month List Control Spud

    Control Spuds - A Preview of the Month List Control Spud
  3. The Search control spud is also used by most campuses to allow the visitor to perform keyword searches for events on the calendar.
    Control Spuds - Search Control Spud

    Control Spuds - A Preview of the Search Control
  4. 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.
    Control Spuds - Filter Control Spud

    Control Spuds - A Preview of a Filter Control Spud
  5. The Calendar List control spud is only 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.
    Control Spuds - Calendar List Control Spud

    Control Spuds - A Preview of the Calendar List Control

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.

Promotion Spuds - Date Finder Promotion Spud

Promotion Spud - A Preview of the Date Finder Promotion Spud     Promotion Spuds - Date Finder Promotion Spud - Click a Date to Open a Pop-up Day Summary 

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.

Content Management Systems and JavaScript

Most campuses now use a content management system (CMS) to manage their campus website.  Each CMS handles the insertion of JavaScript differently.  Here are links to some major CMS providers used by campuses and their suggestions for successfully inserting JavaScript:

It is fairly easy to find information for other content management systems by performing a quick search of their support and user documentation pages.

PREVIOUSLY:  Configuring Custom Fields and Event Templates
UP NEXT :  Analytics in 25Live Publisher