Example of a Handlebars template that can be used (and customized) when surfacing calendar events as tabular data from a Microsoft SharePoint Online search query result in WordPress using the WPO365 (WordPress + Office 365) plugin (see https://www.wpo365.com/ for details).

cbs.intranet.events.template.html

<content>
  <script id="jshelpers">
    if (!!window.wpo365
      && 'registerHandlebarsHelper' in window.wpo365
      && 'handlebarsSafeString' in window.wpo365
      && 'moment' in window.wpo365) {
      window.wpo365.registerHandlebarsHelper('formatSummary',
        function (summary) {
          return window.wpo365.handlebarsSafeString(
            summary
              .replace(/<c0\>/g, '<strong>')
              .replace(/<\/c0\>/g, '</strong>')
              .replace(/<ddd\/>/g, '&#8230'));
        });
      window.wpo365.registerHandlebarsHelper('formatDateTime', function (dateString, formatString) {
        if (!!dateString && !!formatString) {
          window.wpo365.moment.locale(window.navigator.userLanguage || window.navigator.language);
          return window.wpo365.moment(dateString).format(formatString);
        }
        return dateString;
      });
    }
  </script>
  <header id="header" type="x-handlebars-template">
    <style>
      .pintraCbsList {
        font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
        -webkit-box-direction: normal;
        -webkit-box-orient: vertical;
        -moz-box-direction: normal;
        -moz-box-orient: vertical;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
      }

      .pintraTr {
        position: relative;
        outline: transparent;
        height: 30px;
        line-height: 30px;
        box-sizing: border-box;
        display: flex;
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: none;
        flex-wrap: nowrap;
      }

      .pintraTr:hover {
        background: #eee;
      }

      .pintraTr::selection {
        background-color: #bfdcea;
      }

      .pintraTdIcon {
        width: 24px;
        height: 24px;
        padding: 3px;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
      }

      .pintraIcon {
        display: block;
        width: inherit;
        height: inherit;
        text-align: center;
      }

      .pintraIcon>img {
        display: inline-block;
        width: inherit;
        height: auto;
        border-radius: 50%;
      }

      .pintraTh,
      .pintraTd {
        height: 30px;
        line-height: 30px;
        font-size: 13px;
        font-weight: 200;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .pintraTh {
        font-weight: 600;
      }

      .pintraTh.eventType,
      .pintraTd.eventType {
        width: 50px;
      }

      .pintraTh.eventTitle,
      .pintraTd.eventTitle {
        width: 200px;
      }

      .pintraTh.eventLocation,
      .pintraTd.eventLocation {
        width: 200px;
      }

      .pintraTh.eventDate,
      .pintraTd.eventDate {
        width: 100px;
      }

      .pintraItemLink,
      .pintraItemLink:hover,
      .pintraItemLink:visited {
        font-size: inherit;
        color: inherit;
        text-decoration: underline;
      }
    </style>
  </header>
  <main id="item" type="x-handlebars-template">
    {{#ifCond count '==' 0}}
    <div class="pintraTr">
      <div class="pintraTh eventType">Type</div>
      <div class="pintraTh eventTitle">Event</div>
      <div class="pintraTh eventLocation">Location</div>
      <div class="pintraTh eventDate">Date</div>
    </div>
    {{/ifCond}}
    <div class="pintraTr">
      <div class="pintraTdIcon pintraTd eventType">
        <div class="pintraItemIcon">
          {{fabricIcon 'Event'}}
        </div>
      </div>
      <div class="pintraTd eventTitle">
        <a class="pintraItemLink" target="{'_blank'}" href="{{Path}}" target="_blank">{{Title}}</a>
      </div>
      <div class="pintraTd eventLocation">{{Location}}</div>
      <div class="pintraTd eventDate">{{formatDateTime EventDateOWSDATE 'l LT'}}</div>
    </div>
  </main>
  <footer id="footer" type="x-handlebars-template">
    <div></div>
  </footer>
</content>