Dynamic Calendar Items

Ask the Community Customization
1

Hey Elfsight,

I had a question regarding the number of calendar cards displayed. Is there a way to have the number of events displayed dependent on how wide a div is - sort of like the RSS feed. Setting a specific number either leaves a blank spot OR pushes a single event to the next line. There isn’t really a way to alter this if you want to use the cards and only have 1 row depending on the resolution/size folks are operating at. It’d be nice to be able to create a dynamic value based on scale of the screen. Is this possible?

www.maine.gov/doe/xyz

1 Like
3

Hi @Matthew7!

Let me consult with our dev team to see if there is any solution for your case.

Please do not worry, we’ll keep you updated :slightly_smiling_face:

5

Hi @Matthew7,

You can try this code to fit cards into one row.

@media(max-width: 1220px) {
  .eapp-events-calendar-grid-item:last-child {
    display: none;
  }
}
@media(max-width: 940px) {
  .eapp-events-calendar-grid-item:nth-child(3) {
    display: none;
  }
}

Would you also like to have one row (i.e. just one card) on mobile, or does the way it looks now work for you?

6

I think having one row on mobile makes sense , so there isn’t a long scroll through events - Although when on a tablet, which setting would it default to?

7

Actually, now that I am looking at it with the code - is it possible to have it set up like our RSS FEED on a carousel for X number of events - that way it reformats, but people can look beyond that set number?

8

Hi @Matthew7 :wave:

Please let me step in for Masha.

You can try using Slider layout. However, only 1 event will be displayed and to see another events, you should slide them.

Please check it and let me know if this workaround fits your needs.

If it’s not what you’d like to achieve, please let me know and I’ll be happy to discuss it with our devs :slightly_smiling_face: