Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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).
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.