Missouri State University Pattern Library

Calendar feed: Expanded date, description

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">
        <ul>
            <li>
                <a href="#">Lorem ipsum dolor sit amet consectetur</a>
                <div class="summary">
                    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.
                </div>
                <div class="meta">
                    <p class="date">
                        <span class="content_icon_sprites calendar_icon "></span>
                        <span>April 23, 2018</span>
                    </p>
                    <p class="time">
                        <span class="content_icon_sprites time_icon "></span>
                        <span>8:00 a.m.</span>
                    </p>
                </div>
            </li>
            <li>
                <a href="#">Lorem ipsum dolor sit amet consectetur</a>
                <div class="summary">
                    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.
                </div>
                <div class="meta">
                    <p class="date">
                        <span class="content_icon_sprites calendar_icon "></span>
                        <span>April 23, 2018</span>
                    </p>
                    <p class="time">
                        <span class="content_icon_sprites time_icon "></span>
                        <span>8:00 a.m.</span>
                    </p>
                </div>
            </li>
            <li>
                <a href="#">Lorem ipsum dolor sit amet consectetur</a>
                <div class="summary">
                    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.
                </div>
                <div class="meta">
                    <p class="date">
                        <span class="content_icon_sprites calendar_icon "></span>
                        <span>April 23, 2018</span>
                    </p>
                    <p class="time">
                        <span class="content_icon_sprites time_icon "></span>
                        <span>8:00 a.m.</span>
                    </p>
                </div>
            </li>
            <li>
                <a href="#">Lorem ipsum dolor sit amet consectetur</a>
                <div class="summary">
                    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.
                </div>
                <div class="meta">
                    <p class="date">
                        <span class="content_icon_sprites calendar_icon "></span>
                        <span>April 23, 2018</span>
                    </p>
                    <p class="time">
                        <span class="content_icon_sprites time_icon "></span>
                        <span>8:00 a.m.</span>
                    </p>
                </div>
            </li>
            <li>
                <a href="#">Lorem ipsum dolor sit amet consectetur</a>
                <div class="summary">
                    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.
                </div>
                <div class="meta">
                    <p class="date">
                        <span class="content_icon_sprites calendar_icon "></span>
                        <span>April 23, 2018</span>
                    </p>
                    <p class="time">
                        <span class="content_icon_sprites time_icon "></span>
                        <span>8:00 a.m.</span>
                    </p>
                </div>
            </li>
        </ul>
        <a href="https://calendar.missouristate.edu/feed/?audience=visitors&campus=s&recurrences=none&count=5" class="FullLink">More events</a>
    </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}}>
        <ul>
            {{#each items}}
                <li>
                    <a href="{{{url}}}">{{title}}</a>
                    {{#if ../showDescription}}
                        <div class="summary">
                            {{description}}
                        </div>
                    {{/if}}
                    {{#if ../collapseDate}}
                        <p class="dateTime">{{date}}&nbsp;•&nbsp;{{time}}</p>
                    {{else}}
                        <div class="meta">
                            <p class="date">
                                <span class="content_icon_sprites calendar_icon "></span>
                                <span>{{date}}</span>
                            </p>
                            <p class="time">
                                <span class="content_icon_sprites time_icon "></span>
                                <span>{{time}}</span>
                            </p>
                        </div>
                    {{/if}}
                </li>
            {{/each}}
        </ul>
        {{#if moreEventsLabel}}
            <a href="{{{url}}}" class="FullLink">{{moreEventsLabel}}</a>
        {{/if}}
    </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."
    }
  ]
}