Hi,
I've been working with a app that pick up the events from a calendar and show them as a list in a modern page.
The code is working almost fine. Its show the comming events from the calendar but the problem is that in the calendar there is a lot of events, almost 40 events and the app is showing all the almost 40 events. As you can imaginate the list is very long.
I am trying to set a kind of counter so the app shows just 10 comming events but I can't find the way.
This is the render method that get the events from an array called ISPList[]:
private _renderList(items: ISPList[]): void {
let toDay = moment().format("L");
let html: string = '<div class="ms-Grid">';
items.forEach((item: ISPList) => {
let date: any = moment(item.EventDate).format("L");
if (toDay < date) { // check if it is a comming event
let description: any = item.Description;
let eventMonth: any = moment(date).format("MMMM");
let eventDay: any = moment(date).format("D");
let eventDate: any = moment(date).format("dddd, MMMM D YYYY");
let StrippedDescription: string = "";
if (description == null) {
StrippedDescription = 'Ingen beskrivning';
} else {
StrippedDescription = description.replace(/(<([^>]+)>)/ig, "");
StrippedDescription = StrippedDescription.substring(0, 100) + '...';
}
html += `
<a class="eventLinkBox" href="${this.context.pageContext.web.absoluteUrl}/_layouts/15/Event.aspx?ListGuid=${escape(this.properties.calendarID)}&ItemId=${item.Id}" target="_blank">
<div class="ms-Grid-row">
<div class="ms-Grid-col ms-sm6 ms-md4 ms-lg2 eventBoxSingleDay">
<span class="eventMonthName">${eventMonth.substring(0, 3)}</span><br />
<span class="eventDayName">${eventDay}</span>
</div>
<div class="ms-Grid-col ms-sm6 ms-md8 ms-lg10">
<h3 class="eventTitle" >${item.Title}</h3>
<p class="description">${StrippedDescription}</p>
<p class="ms-font-s">${eventDate}, ${item.Category}</p>
</div>
</div>
</a>
`;
}
});
html += '</div>';
const listContainer: Element = this.domElement.querySelector('#eventItems');
listContainer.innerHTML = html;
}My first idea was to set a $top=10 in the rest request but doing in that way the list shows the first 10 events from the first event in the calendar, which is in april and all other comming event get lost.
Then I tried to set a for-loop inside the if-sats but it just print x-times the same event.
How can I make it works as I want?
Best regards
Americo Perez
