Missouri State University Pattern Library

Calendar feed: Dynamic

There are no notes for this item.

<article class="ContentBlock CalendarFeed Page10">
    <h2 class="Header">
        Lorem ipsum dolor
    </h2>
    <div class="CalendarFeedData" data-eventcount="5" data-show-description="true" data-feedurl="https://calendar.missouristate.edu/feed/?audience=visitors&campus=s&recurrences=none&count=5" data-moreeventslabel="More events">
        <div class="loader">
            <img class="image" src="../../images/loader.gif" alt="">
            <p class="title">Loading</p>
        </div>
    </div>
    <script>
        missouristate.requireScript("../../scripts/components/calendar.min.js", false);
    </script>
</article>
 
<article class="ContentBlock CalendarFeed Page{{pageId}}">
  {{#if heading}}
    <h2 class="Header">
      {{heading}}
    </h2>
  {{/if}}
  <div class="CalendarFeedData" {{#if eventCount}} data-eventcount="{{eventCount}}" {{/if}} {{#if collapseDate}} data-collapsed="{{collapseDate}}" {{/if}} {{#if showDescription}} data-show-description="{{showDescription}}" {{/if}} data-feedurl="{{{url}}}" {{#if moreEventsLabel}} data-moreeventslabel="{{moreEventsLabel}}" {{/if}}>
    {{> @loader}}
  </div>
  <script>
    missouristate.requireScript("{{path '/scripts/components/calendar.min.js'}}", false);

  </script>
</article>
 
{
  "pageId": 10,
  "heading": "Lorem ipsum dolor",
  "url": "https://calendar.missouristate.edu/feed/?audience=visitors&campus=s&recurrences=none&count=5",
  "eventCount": 5,
  "showDescription": true,
  "collapseDate": false,
  "moreEventsLabel": "More events",
  "items": [
    {
      "url": "#",
      "title": "Lorem ipsum dolor sit amet consectetur",
      "date": "April 23, 2018",
      "time": "8:00 a.m.",
      "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit voluptate nulla repudiandae suscipit, labore vitae fugiat reprehenderit molestiae, consequatur aut sequi rerum esse tempora id sed quis eos eius ad."
    },
    {
      "url": "#",
      "title": "Lorem ipsum dolor sit amet consectetur",
      "date": "April 23, 2018",
      "time": "8:00 a.m.",
      "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit voluptate nulla repudiandae suscipit, labore vitae fugiat reprehenderit molestiae, consequatur aut sequi rerum esse tempora id sed quis eos eius ad."
    },
    {
      "url": "#",
      "title": "Lorem ipsum dolor sit amet consectetur",
      "date": "April 23, 2018",
      "time": "8:00 a.m.",
      "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit voluptate nulla repudiandae suscipit, labore vitae fugiat reprehenderit molestiae, consequatur aut sequi rerum esse tempora id sed quis eos eius ad."
    },
    {
      "url": "#",
      "title": "Lorem ipsum dolor sit amet consectetur",
      "date": "April 23, 2018",
      "time": "8:00 a.m.",
      "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit voluptate nulla repudiandae suscipit, labore vitae fugiat reprehenderit molestiae, consequatur aut sequi rerum esse tempora id sed quis eos eius ad."
    },
    {
      "url": "#",
      "title": "Lorem ipsum dolor sit amet consectetur",
      "date": "April 23, 2018",
      "time": "8:00 a.m.",
      "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit voluptate nulla repudiandae suscipit, labore vitae fugiat reprehenderit molestiae, consequatur aut sequi rerum esse tempora id sed quis eos eius ad."
    }
  ]
}