Working with Events+ and WE LOVE IT! My question today, our

Working with Events+ and WE LOVE IT! My question today, our clients website will have the calender on the homepage and as I daily events the calendar gets "long" vertically [see screenshot] showing one event stacked under the next one. Is there a way to have these events "tuck" one event behind the next [think playing cards in your hands]?
Thank you in advance...

  • Patrick
    • Support Monkey

    Hi there @Mike

    I hope you're having a great day! And thanks for lovin' Events+ :slight_smile:

    Yes, you can stack them in the calendar cells with a bit of custom CSS trickery, like so:

    body a.wpmudevevents-calendar-event {display:inline-block;}
    td.eab-has_events a:nth-of-type(2), td.eab-has_events a:nth-of-type(3), td.eab-has_events a:nth-of-type(4) {margin-top:-1em;}

    The first line (display:inline-block) ensures we can fiddle with the positioning.

    The second line is where the magic happens. As each event in the table cell does not have a specific selector that we can target, we use the nth-of-type(n) pseudo-selector to target the ones we want.

    If you have more than 4 events on any given day, simply add a new pseudo-selector declaration on that line, like so:
    td.eab-has_events a:nth-of-type(5)

    I hope this helps! And thanks for being a member :slight_smile:

  • Mike
    • Flash Drive

    Patrick, You are THE MAN. It all worked perfectly! One more while you're on a roll. When I mouse over an event, it gives me only the time. Anyway to replace the time with a bit more info about said event?
    Again, thank you so much for your sage advice.

  • Mike
    • Flash Drive

    One more,
    How do we change that same popup text color? Right now I've got a dark grey background with black lettering [hard to read] The dark grey background is ok but a white font would more easier to read.
    Thanks.....

  • Sajid
    • DEV MAN’s Sidekick

    Hi @Mike!

    Hope you are doing good today :slight_smile:

    You can add more info in popup and featured image (if set) in calendar view using this shortcode.
    [eab_calendar with_thumbnail='true' show_excerpt='true']

    For more shortcode parameters and their usage, go to Events > Shortocdes.

    Try below code to make the color of popup text white.
    .wpmudevevents-calendar-event-info{ color: #fff; }

    Take care and have a nice day :slight_smile:

    Cheers, Sajid

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.