Can somebody help me with this app? - Show calendar event as a list

%3CLINGO-SUB%20id%3D%22lingo-sub-251928%22%20slang%3D%22en-US%22%3ECan%20somebody%20help%20me%20with%20this%20app%3F%20-%20Show%20calendar%20event%20as%20a%20list%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-251928%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI've%20been%20working%20with%20a%20app%20that%20pick%20up%20the%20events%20from%20a%20calendar%20and%20show%20them%20as%20a%20list%20in%20a%20modern%20page.%26nbsp%3B%3C%2FP%3E%3CP%3EThe%20code%20is%20working%20almost%20fine.%20Its%20show%20the%20comming%20events%20from%20the%20calendar%20but%20the%20problem%20is%20that%20in%20the%20calendar%20there%20is%20a%20lot%20of%20events%2C%20almost%2040%20events%20and%20the%20app%20is%20showing%20all%20the%20almost%2040%20events.%20As%20you%20can%20imaginate%20the%20list%20is%20very%20long.%26nbsp%3B%3C%2FP%3E%3CP%3EI%20am%20trying%20to%20set%20a%20kind%20of%20counter%20so%20the%20app%20shows%20just%2010%20comming%20events%20but%20I%20can't%20find%20the%20way.%3C%2FP%3E%3CP%3EThis%20is%20the%20render%20method%20that%20get%20the%20events%20from%20an%20array%20called%20ISPList%5B%5D%3A%26nbsp%3B%3C%2FP%3E%3CDIV%3E%3CPRE%3E%3CSPAN%3Eprivate%3C%2FSPAN%3E%20%3CSPAN%3E_renderList%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3Eitems%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3EISPList%3C%2FSPAN%3E%3CSPAN%3E%5B%5D)%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3Evoid%3C%2FSPAN%3E%3CSPAN%3E%20%7B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3Elet%3C%2FSPAN%3E%20%3CSPAN%3EtoDay%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%20%3CSPAN%3Emoment%3C%2FSPAN%3E%3CSPAN%3E().%3C%2FSPAN%3E%3CSPAN%3Eformat%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E%22L%22%3C%2FSPAN%3E%3CSPAN%3E)%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3Elet%3C%2FSPAN%3E%20%3CSPAN%3Ehtml%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3Estring%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%20%3CSPAN%3E'%3CDIV%20class%3D%22ms-Grid%22%3E'%3C%2FDIV%3E%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3Eitems%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EforEach%3C%2FSPAN%3E%3CSPAN%3E((%3C%2FSPAN%3E%3CSPAN%3Eitem%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3EISPList%3C%2FSPAN%3E%3CSPAN%3E)%20%3C%2FSPAN%3E%3CSPAN%3E%3D%26gt%3B%3C%2FSPAN%3E%3CSPAN%3E%20%7B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3Elet%3C%2FSPAN%3E%20%3CSPAN%3Edate%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3Eany%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%20%3CSPAN%3Emoment%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3Eitem%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EEventDate%3C%2FSPAN%3E%3CSPAN%3E).%3C%2FSPAN%3E%3CSPAN%3Eformat%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E%22L%22%3C%2FSPAN%3E%3CSPAN%3E)%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3Eif%3C%2FSPAN%3E%3CSPAN%3E%20(%3C%2FSPAN%3E%3CSPAN%3EtoDay%3C%2FSPAN%3E%20%3CSPAN%3E%26lt%3B%3C%2FSPAN%3E%20%3CSPAN%3Edate%3C%2FSPAN%3E%3CSPAN%3E)%20%7B%20%2F%2F%20check%20if%20it%20is%20a%20comming%20event%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3Elet%3C%2FSPAN%3E%20%3CSPAN%3Edescription%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3Eany%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%20%3CSPAN%3Eitem%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EDescription%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3Elet%3C%2FSPAN%3E%20%3CSPAN%3EeventMonth%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3Eany%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%20%3CSPAN%3Emoment%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3Edate%3C%2FSPAN%3E%3CSPAN%3E).%3C%2FSPAN%3E%3CSPAN%3Eformat%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E%22MMMM%22%3C%2FSPAN%3E%3CSPAN%3E)%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3Elet%3C%2FSPAN%3E%20%3CSPAN%3EeventDay%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3Eany%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%20%3CSPAN%3Emoment%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3Edate%3C%2FSPAN%3E%3CSPAN%3E).%3C%2FSPAN%3E%3CSPAN%3Eformat%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E%22D%22%3C%2FSPAN%3E%3CSPAN%3E)%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3Elet%3C%2FSPAN%3E%20%3CSPAN%3EeventDate%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3Eany%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%20%3CSPAN%3Emoment%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3Edate%3C%2FSPAN%3E%3CSPAN%3E).%3C%2FSPAN%3E%3CSPAN%3Eformat%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E%22dddd%2C%20MMMM%20D%20YYYY%22%3C%2FSPAN%3E%3CSPAN%3E)%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3Elet%3C%2FSPAN%3E%20%3CSPAN%3EStrippedDescription%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3Estring%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%20%3CSPAN%3E%22%22%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3Eif%3C%2FSPAN%3E%3CSPAN%3E%20(%3C%2FSPAN%3E%3CSPAN%3Edescription%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3D%3C%2FSPAN%3E%20%3CSPAN%3Enull%3C%2FSPAN%3E%3CSPAN%3E)%20%7B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3EStrippedDescription%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%20%3CSPAN%3E'Ingen%20beskrivning'%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%7D%20%3C%2FSPAN%3E%3CSPAN%3Eelse%3C%2FSPAN%3E%3CSPAN%3E%20%7B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3EStrippedDescription%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%20%3CSPAN%3Edescription%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Ereplace%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E%2F%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E%26lt%3B%3C%2FSPAN%3E%3CSPAN%3E(%5B%5E%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CSPAN%3E%5D%3C%2FSPAN%3E%3CSPAN%3E%2B%3C%2FSPAN%3E%3CSPAN%3E)%3C%2FSPAN%3E%3CSPAN%3E%26gt%3B%3C%2FSPAN%3E%3CSPAN%3E)%3C%2FSPAN%3E%3CSPAN%3E%2F%3C%2FSPAN%3E%3CSPAN%3Eig%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3E%22%22%3C%2FSPAN%3E%3CSPAN%3E)%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3EStrippedDescription%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%20%3CSPAN%3EStrippedDescription%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Esubstring%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E0%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3E100%3C%2FSPAN%3E%3CSPAN%3E)%20%3C%2FSPAN%3E%3CSPAN%3E%2B%3C%2FSPAN%3E%20%3CSPAN%3E'...'%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3Ehtml%3C%2FSPAN%3E%20%3CSPAN%3E%2B%3D%3C%2FSPAN%3E%20%3CSPAN%3E%60%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%3CA%20class%3D%22eventLinkBox%22%20href%3D%22%26lt%3B%2FSPAN%26gt%3B%26lt%3BSPAN%26gt%3B%24%7B%26lt%3B%2FSPAN%26gt%3B%26lt%3BSPAN%26gt%3Bthis%26lt%3B%2FSPAN%26gt%3B%26lt%3BSPAN%26gt%3B.%26lt%3B%2FSPAN%26gt%3B%26lt%3BSPAN%26gt%3Bcontext%26lt%3B%2FSPAN%26gt%3B%26lt%3BSPAN%26gt%3B.%26lt%3B%2FSPAN%26gt%3B%26lt%3BSPAN%26gt%3BpageContext%26lt%3B%2FSPAN%26gt%3B%26lt%3BSPAN%26gt%3B.%26lt%3B%2FSPAN%26gt%3B%26lt%3BSPAN%26gt%3Bweb%26lt%3B%2FSPAN%26gt%3B%26lt%3BSPAN%26gt%3B.%26lt%3B%2FSPAN%26gt%3B%26lt%3BSPAN%26gt%3BabsoluteUrl%26lt%3B%2FSPAN%26gt%3B%26lt%3BSPAN%26gt%3B%7D%26lt%3B%2FSPAN%26gt%3B%26lt%3BSPAN%26gt%3B%2F_layouts%2F15%2FEvent.aspx%3FListGuid%3D%26lt%3B%2FSPAN%26gt%3B%26lt%3BSPAN%26gt%3B%24%7B%26lt%3B%2FSPAN%26gt%3B%26lt%3BSPAN%26gt%3Bescape%26lt%3B%2FSPAN%26gt%3B%26lt%3BSPAN%26gt%3B(%26lt%3B%2FSPAN%26gt%3B%26lt%3BSPAN%26gt%3Bthis%26lt%3B%2FSPAN%26gt%3B%26lt%3BSPAN%26gt%3B.%26lt%3B%2FSPAN%26gt%3B%26lt%3BSPAN%26gt%3Bproperties%26lt%3B%2FSPAN%26gt%3B%26lt%3BSPAN%26gt%3B.%26lt%3B%2FSPAN%26gt%3B%26lt%3BSPAN%26gt%3BcalendarID%26lt%3B%2FSPAN%26gt%3B%26lt%3BSPAN%26gt%3B)%26lt%3B%2FSPAN%26gt%3B%26lt%3BSPAN%26gt%3B%7D%26lt%3B%2FSPAN%26gt%3B%26lt%3BSPAN%26gt%3B%26amp%3BItemId%3D%26lt%3B%2FSPAN%26gt%3B%26lt%3BSPAN%26gt%3B%24%7B%26lt%3B%2FSPAN%26gt%3B%26lt%3BSPAN%26gt%3Bitem%26lt%3B%2FSPAN%26gt%3B%26lt%3BSPAN%26gt%3B.%26lt%3B%2FSPAN%26gt%3B%26lt%3BSPAN%26gt%3BId%26lt%3B%2FSPAN%26gt%3B%26lt%3BSPAN%26gt%3B%7D%26lt%3B%2FSPAN%26gt%3B%26lt%3BSPAN%26gt%3B%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3E%3C%2FA%3E%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%3CDIV%20class%3D%22ms-Grid-row%22%3E%3C%2FDIV%3E%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%3CDIV%20class%3D%22ms-Grid-col%20ms-sm6%20ms-md4%20ms-lg2%20eventBoxSingleDay%22%3E%3C%2FDIV%3E%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%3CSPAN%20class%3D%22eventMonthName%22%3E%3C%2FSPAN%3E%3CSPAN%3E%24%7B%3C%2FSPAN%3E%3CSPAN%3EeventMonth%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Esubstring%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E0%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3E3%3C%2FSPAN%3E%3CSPAN%3E)%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3CSPAN%3E%3C%2FSPAN%3E%3CBR%20%2F%3E%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%3CSPAN%20class%3D%22eventDayName%22%3E%3C%2FSPAN%3E%3CSPAN%3E%24%7B%3C%2FSPAN%3E%3CSPAN%3EeventDay%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3CSPAN%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%3C%2FSPAN%3E%3C%2FPRE%3E%3C%2FDIV%3E%3CBR%20%2F%3E%3CSPAN%3E%20%3CDIV%20class%3D%22ms-Grid-col%20ms-sm6%20ms-md8%20ms-lg10%22%3E%3C%2FDIV%3E%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%3CH3%20class%3D%22eventTitle%22%20id%3D%22toc-hId-1620891285%22%3E%3C%2FH3%3E%3C%2FSPAN%3E%3CSPAN%3E%24%7B%3C%2FSPAN%3E%3CSPAN%3Eitem%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3ETitle%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3CSPAN%3E%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%3CP%20class%3D%22description%22%3E%3C%2FP%3E%3C%2FSPAN%3E%3CSPAN%3E%24%7B%3C%2FSPAN%3E%3CSPAN%3EStrippedDescription%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3CSPAN%3E%3CP%3E%3C%2FP%3E%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%3CP%20class%3D%22ms-font-s%22%3E%3C%2FP%3E%3C%2FSPAN%3E%3CSPAN%3E%24%7B%3C%2FSPAN%3E%3CSPAN%3EeventDate%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3E%24%7B%3C%2FSPAN%3E%3CSPAN%3Eitem%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3ECategory%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3CSPAN%3E%3CP%3E%3C%2FP%3E%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%20%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%60%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%7D%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%7D)%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3Ehtml%3C%2FSPAN%3E%20%3CSPAN%3E%2B%3D%3C%2FSPAN%3E%20%3CSPAN%3E''%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3Econst%3C%2FSPAN%3E%20%3CSPAN%3ElistContainer%3C%2FSPAN%3E%3CSPAN%3E%3A%3C%2FSPAN%3E%20%3CSPAN%3EElement%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%20%3CSPAN%3Ethis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EdomElement%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EquerySelector%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3E'%23eventItems'%3C%2FSPAN%3E%3CSPAN%3E)%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3ElistContainer%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EinnerHTML%3C%2FSPAN%3E%20%3CSPAN%3E%3D%3C%2FSPAN%3E%20%3CSPAN%3Ehtml%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3CBR%20%2F%3E%3CSPAN%3E%20%7D%3C%2FSPAN%3E%3CP%3EMy%20first%20idea%20was%20to%20set%20a%20%24top%3D10%20in%20the%20rest%20request%20but%20doing%20in%20that%20way%20the%20list%20shows%20the%20first%2010%20events%20from%20the%20first%20event%20in%20the%20calendar%2C%20which%20is%20in%20april%20and%20all%20other%20comming%20event%20get%20lost.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThen%20I%20tried%20to%20set%20a%20for-loop%20inside%20the%20if-sats%20but%20it%20just%20print%20x-times%20the%20same%20event.%26nbsp%3B%3C%2FP%3E%3CP%3EHow%20can%20I%20make%20it%20works%20as%20I%20want%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EBest%20regards%3C%2FP%3E%3CP%3EAmerico%20Perez%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-251928%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Highlighted
Regular Contributor

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

0 Replies