How can we help you today?

Known Issue: Limiting the Number of Items in Events Element Is Not Working

This article is deprecated. The issue was fixed in the ShortPoint SPFx 6.9.30.6 release.

Issue

You would like to see the limited number of items in your Events element, but you no longer have an Items Limit option. Instead, you have the Days Limit option:



Reason

Starting from the release ShortPoint 6.5.10.21 we have added Days Limit option instead of Items Limit option. Therefore, if you still want to use the Items Limit, please check the solution below. This functionality will be improved in the future releases.


Solution

There is still a way to workaround and set a limit to the number of items. To do this, please follow the steps below.


Before we start:

  1. This article assumes you have correctly connected the Events element to your SharePoint Calendar. Please, check How to Connect Events to a SharePoint Calendar article if you have not connected it or connected incorrectly.
  2. Please, make sure you have set Days Limit back to 0. Otherwise, it will still affect your number of items being displayed in your Events element.



Step 1. Disable the Group by Day setting

Please click the Settings tab of your Events element and disable the Group by Day option:




Step 2. Copy and paste the CSS code

Now we are going to apply this CSS code to have the defined number of items to be displayed in Events element:


.sp-type-event:nth-child(n+9) {
display: none !important;
}



Click Custom CSS tab and paste the above code to the Custom CSS text box and click Update:



Note: You can apply the necessary items limit by changing the number in (n+9).  

Please, bear in mind that you always need to set +1 number higher than the number of items you want to be displayed. This number in our CSS code means that this numbered item and all the items following it will be hidden in your Events element. 

So if you would like to have a limit of 20 items your CSS code should look like this:


.sp-type-event:nth-child(n+21) {
display: none !important;
}




Result


After applying CSS code, our Events element shows the defined number of items exactly as we wanted!



Don't forget to save and publish your page or continue editing it and adding as many ShortPoint elements as you wish!




Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 53 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more