Skip to main content
Design System 2
University Relations
Contribute

Add a Calendar Feed to a Page

Create Your Calendar Feed

  1. Follow the guidelines for creating a calendar widget using Localist.
  2. When you create your widget, select either the WVU Design System - 3 Across or the WVU Design System - Horiztonal options for your template.
  3. Copy the embed code.

Use Your Calendar Feed to Populate Events in a Calendar Events Component

  1. Add a Calendar Events component to a page (if you don’t know how to do this, see the how-to guide for adding shared partials to a template.
  2. Open the page where you want to insert the feed in Edit Mode.
  3. The Calendar Events component has an editable region where you will insert the feed. Click in the region.Screenshot of calendar feed editable region
  4. In your editor bar, click the Snippets button.Screenshot of snippet button
  5. Find the HTML snippet. Drag and drop the snippet into your editable region.
  6. In the Content box, paste the calendar embed code. It will look like this: 
    <div id="localist-widget-10031626" class="localist-widget"></div><script defer type="text/javascript"
src="https://cal.wvu.edu/widget/view?schools=wvu&departments=adventure_wv&days=90&num=3&container=localist-widget-10031626&template=wvu-design-system-3-across"></script><div id="lclst_widget_footer"><a style="margin-left:auto;margin-right:auto;display:block;width:81px;margin-top:10px;" title="Widget powered by Localist Event Calendar Software" href="https://www.localist.com?utm_source=widget&utm_campaign=widget_footer&utm_medium=branded%20link"><img src="//d3e1o4bcbhmj8g.cloudfront.net/assets/platforms/default/about/widget_footer.png" alt="Localist Online Calendar Software" style="vertical-align: middle;" width="81" height="23"></a></div>
  7. Delete the footer portion of the code that starts with <div="lclst_widget_footer"> and includes everthing that comes after. Your code should then look like this: 
    <div id="localist-widget-10031626" class="localist-widget"></div><script defer type="text/javascript"
src="https://cal.wvu.edu/widget/view?schools=wvu&departments=adventure_wv&days=90&num=3&container=localist-widget-10031626&template=wvu-design-system-3-across"></script>
  8. Click the Insert Snippet button in the modal window. Your snippet will now appear in the editable region.
  9. Save or Publish your page and hit your browser’s Refresh button.