Skip to main content
Stanford
Events Help Documentation for the Stanford Events Calendar

Embeddable Widgets

The simplest way to add a feed of events from the Events Calendar to your website is to build a widget. The main benefits of using a widget are:

  • No web development skills are needed to create the feed and style the content, just administrative access to a website where you can add content. All that is necessary to add the widget to a page is to copy/paste a code snippet that is generated by the Events Calendar site in to a text field on your website.
  • The widget is a “live” connection to the Localist database so any changes to event information will be reflected on your site’s display when an update is made in Localist and your site’s page is refreshed.

All of the options provided come styled in different ways that all reflect Stanford’s visual identity. Follow the steps below to display events on your own site.

1. Build your widget

To start, go to the Events Calendar widget builder page.

The first 3 fields are the basics:

  1. Template – This selection determines the presentation of the events on your website. Selecting “Default” provides some customization options at the very bottom of the form under Display Options which are discussed in the Display Options section below. Otherwise, 5 custom options have been created for a more straightforward approach.
  2. Number of Results – This selection determines how many events you want the embedded widget to display. The maximum is 50. You may want to adjust this to a number that works best with the template you’ve selected above. For instance, if choosing one of the 3 or 4-column options 12 results will provide a balanced grid display of events.
  3. Days Ahead – This selection tells the system how far ahead to look for events that fit your selection criteria. 365 is the max.

If you only make selections in these three fields, a widget will be generated that displays the number of events you’ve chosen (in the Number of Results field) in the system in date order from today forward.

Content selection

The next two group of fields – Content and Excluded Content – allow for very fine-grained control over exactly what events display within your embedded widget. See the How to Create an Event and Best Practices for Classification pages for information on how these fields are used to categorize events entered in to the system.

A basic example

You are responsible for a particular group, department, or place and want to add a page to your website that displays upcoming events. First, enter your events in to the Events Calendar system – if you need publishing access, request it here – being certain to select your group, department, or place in the appropriate field as you create them. Then, on the widget builder page simply select your group, department, or place from either of those fields and that will produce a widget that displays only events for your group, department, or place. As new events are added to the system they will show up where you are displaying the widget as soon as they are saved to the system.

A more complex example

You run a student group that is focused on the arts at Stanford. As part of your website, you’d like to include an events page that displays a list of not just your own, but ALL upcoming student-centered, art-related events. In this case, you can use the Content field selections to narrow in on exactly the types of events you want to include on your site. First, make the appropriate selections for your use case in the first 3 fields (Template, Number of Results, and Days Ahead – details above). Now, in the Content group you want to make selections that pertain to exactly what you want displayed on your site. To best ensure we display only student-related events, select all of the Students designations within the Audience field – Students, Students – Graduates, Students – Undergraduates. Next, to best ensure we display specifically art-related events in the Subject field we’ll select Arts/Media, Music, and Theater/Dance. By making these selections in the Audience and Subject fields we will get exactly what your site needs – all student-centered, arts-related events in the Events Calendar. Huzzah!

These two examples describe some common use cases that might be similar to yours. Beyond these examples making selections in any of the other fields will further narrow the results your widget displays.

The Excluded Content fields do exactly that – excludes specifc types of content from the selections you’ve made in the Content group. For instance, in our “more complex example” let’s say we want to make sure that events that may be indicated as a Fitness/Recreational Sport and a Meeting don’t appear. Within the Excluded Content group I would choose both of these in the Event Type field. Now, all student-centered, arts-related events that ARE NOT Fitness/Recreational Sport or Meeting types in the Events Calendar will display.

Customize display

The Display Options group of fields are directly related to the Template field at the very top of the widget builder page and provide some options for customizing the visual display of your results. f

Default template

If Default is selected in the Template field, a variety of options are available within the Display Options group.

  • Widget Type – List or Mini Calendar + List are the available options. List will simply display a list. Mini Calendar + List adds an interactive calendar above the list that can adjust the results display by month/date selected.
  • Style – These different options for the visual presentation of the results. Modern, Card, and Classic are all uniquely styled options, None includes no styling of the content.

The checkboxes below these two fields are self explanatory and offer a few additional options for controlling the information displayed.

Stanford templates

For all of the template options prefixed with Stanford, the only option available is a checkbox for Include Styles. If unchecked, you will get a completely un-styled display of your results. This may be useful if the markup structure works for your website but you’d prefer to style the content with your own stylesheet.

2. Preview & embed your widget

At the bottom of the form are Preview and Generate Embed Code buttons. Follow the steps to embed your widget on your website.

  1. Preview – Click this button to open a new browser tab that displays a preview of your widget. Using this you can double check that the correct events are displaying and the style of the content is what you’d like for your website. You can make changes to the fields above and re-click the button in order to update your preview.
    • Note: The preview will be full-width of the browser window, so things might appear larger than you’d like. Your website likely has code to constrain the width of the content display, though. Once your widget embed is set up on your site the widget content will display properly within the content width of your site’s pages.
  2. Generate Embed Code – Once you are certain that your selections on the form are what you want to display on your site, click this button to generate the code snippet that you will copy/paste to your website. After clicking the button a Widget Embed Code block will appear.
  3. Your website – Now, copy this text and paste it in to a field on your website’s page where you would like to display the widget.
    • Note: The field on your website must accept raw HTML and should not strip out markup when saved.