Display only first 5 events

It depends somewhat on the view you’re using. In list view, the number of events is set with the count parameter:

https://icscalendar.com/icsdocs/#count

For month view, you set a number of days using the limitdays parameter:

https://icscalendar.com/icsdocs/#limitdays

But note that month view automatically adjusts plus-or-minus to show all of the events in the months that are included, so if you set limitdays="45" you might see 2 months or 3, depending on how late in the current month it is, plus you’d always see all of the earlier events in the current month.

Thanks!
I’m using count now in list view. But is it also possible to show 5 days where there can be more than 1 event a day? Like:

14 december (day 1)
– event 1

15 december (day 2)
– event 2
– event 3

16 december (day 3)
– event 4

17 december (day 4)
– event 5

18 december (day 5)
– event 6

Is it also possible to add in list view a class where you define if the event is today like you do in month view.

• This reply was modified 2 years, 2 months ago by De Werkkamer.

Ah, I see… yes I think if you were to use limitdays="5" it should work.

You’d need to remove the count parameter altogether then, or else set it to some arbitrary large value if you did still want to have some upper limit, e.g. count="20".

It works! Thanks a lot!

Hello, the limit days feature only works in consecutive days in De’s example, but is there a way to show 5 days worth of events that aren’t consecutive? i.e instead of Dec 18th, its Dec 23rd… is there a way to do that?

OR is there a way to break out the grouping of events so that each has the date ( in this manner ):
Dec 14
– 1 event
Dec 14
– 1 event
Dec 15
– 1 event
Dec 16
-1 event

Thanks

The limitdays setting is based on calendar days, not a count of days that contain events. So there’s not a way to force it to always show 5 days regardless of how far apart the days are, which I think is what you’re asking, correct?

@room34 that is what I’m asking, thanks. so theres no way to handle that with another option?
If not, is there a way to have each event to have its own date in list view?

I’m looking for a way to show 4 events in 4 separate wrappers, but if one of the days has 2 events I’m only getting 3 date wrappers “ics-calendar-date-wrapper”

Thanks

Each date has a wrapper. That has proven to be the most effective way to handle the list for most users.

It sounds like you’d be better off using the count parameter than the limitdays parameter. That way you can set the number of events you want to display.

What sorts of changes are you trying to make to the layout where the date wrapper is causing an issue?

@room34 I’m trying to have a situation where the count we add to the shortcode reflects the number of wrappers so that we can custom style the results in a grid or flex column structure
[date/event(s)] [date/event(s)] [date/event(s)] [date/event(s)]

but currently one of the dates has 2 events, so when i set the count to 4, only 3 wrappers show… this would be ideal, however for another possible workaround.. is there a way to add an attribute/class to the wrapper for dates with multiple events. i.e data-events=”count-2″ ? this way I could address these types by spanning the widths, etc

thanks for your time

That makes sense. The other views already do have a data-events-count attribute on the date container, so I could replicate that same functionality in list view. There’s also a data-feed-keys attribute, which contains a pipe-delimited list of the feed keys of the events on that date. (This allows for things like custom color-coding of the entire date wrapper depending on which feeds its events are from.)

I’ll work on adding these attributes to list view in the next update. They’ll be on the <div class="ics-calendar-date-wrapper"> tag.

• This reply was modified 2 years ago by room34.

Sounds good. Awesome plugin and great support. Thanks

Hi @room34 is there a way to not render the Month ( class=”ics-calendar-label” ) in list view? my structure is in columns (with your help of adding data-events-count). I have the Month label hidden with css, but there are situations where i depend on nth-child selectors and the hidden month is throwing that off.
fyi my structure:
[date/event(s)] [date/event(s) data-events-count=”2″] [date/event(s)]

Thanks for your time

@mattf100 Would it be possible to get the URL of the page your calendar is on? I’d like to have a look and see if I can suggest some possibilities. The :nth-child selectors are certainly going to be an issue with those month headers. There is not a way to not render them, as the plugin is currently configured. A couple of suggestions:

1. You might want to try using div:nth-of-type instead of :nth-child as that will allow you to just focus on the div children of the container element and not the h3 tags that are the month headers. (Remember that these :nth selectors only look at the HTML tags, not CSS classes.)
2. You might be able to use some jQuery to remove these h3.ics-calendar-label elements from the DOM after the calendar is loaded. Timing on that could be tricky though, especially since there’s not currently any specific JavaScript event you could bind to after the calendar loads. (I’m considering adding one, but I’m kind of pushing at the limits of my JavaScript knowledge with that.)