how to get rid of space below and above list event

Hi what do you have in your event builder section on the calendar settings?

this isn’t unique to that calendar- all my calendars have this issue.

That particular one is:

[if-not-all-day]
[link newwindow=”true”][start-date][/link]
[start-time] –?[end-time]
Please click the above course date for more details.[/if-not-all-day]
[if-all-day]
[link newwindow=”true”][start-date][/link]
Please click the above course date for more details.[/if-all-day]

I’ve tried making it more basic and it didn’t help. Another calendar with same issue:

[link newwindow=”yes”][title][/link]
[start-date] – [end-date offset=”-60″]
[if-start-location][start-location-link newwindow=”yes”][start-location][/start-location-link][/if-start-location]

Any problems with my code?

Nope looks like it should be ok. On your calendar page I see a list and a grid view it looks like. I am assuming your talking about the list view here?

Not sure if this will do the trick but you can try adding this to your theme stylesheet:

.simcal-default-calendar-list .simcal-event-details {
    overflow: visible;
}

Yes, I am talking about the list view one.

Unfortunately that didn’t change anything for me :(. It feels like you’ve changed the container for each event to be static, whereas before it would adjust depending on how much stuff was inside each event – are you able to change it to before?

A lot of the new CSS that shows up on the calendars is picked up from your theme also. This might be a case where something in your theme CSS is affecting the way the spacing looks here. I would recommend just inspecting elements in the browser until you find the element and style that is causing the spacing. Then you can override that style in your theme CSS.

hmmm, I’ve played around a bit and it seems to change when I modify the calendar css elements (e.g .simcal-default-calendar-list .simcal-event-details lineheight), but I can’t get the container size to change. Do you know what css element you used to specify the container size for each list event?

Thanks!

adding !important to your code suggested above helped, but still some margins left before the event start!

I think I’ve figured out the issue – your calendar inserts a <br> before and after each event – can you make it stop doing that? it is making a large gap at the start of my list and end of my list

Try this to hide <br>:
.simcal-default-calendar-list .simcal-event-details br{ display:none!important; }

@nimadude,

Interesting. Thanks for the feedback I will look into that.

@sfldoc,

Thanks for helping out ??

thanks for the help sfldoc – that worked in removing the br tags, but created another problem – the dates were now stuck on same line as the title. I tried adding br tags in the calendar itself but those get removed by the editor – is this something your plugin is doing or related to wordpress itself?

Also, though it removed the br tags, the gap at the very beginning of the list still remained – which leads me to now believe it is related to padding/margins?

thanks for your help!

We use a very compact design to show many upcommnig events, soccer matches and the results. Here is our homepage with google calendar events 2.x. Our test homepage runs with simple calendar 3.x and I adapt it nearly as before as you will see here (except problems: limit the number of events and refesh interval to “0”). I use this CSS code for the .entry-content, may this will help again:

.simcal-default-calendar-list { padding: 0px; }
.simcal-default-calendar-list .simcal-day-label{ font-size: 1.0em! important; }
.simcal-default-calendar-list dt.simcal-day-label { margin: 14px 0px 0px 0px; }
.simcal-default-calendar-list .simcal-event-details br{ display:none!important; }
.simcal-default-calendar-list .simcal-event-details p { margin: 0px !important; }
.simcal-default-calendar-list .simcal-event-details p span{ font-size: 1.0em! important; }
.simcal-default-calendar-list ul.simcal-events li.simcal-event { margin-bottom: 0px; }
.simcal-default-calendar-list ul.simcal-events { margin: 0px 4px 6px! important; }
.simcal-default-calendar-list .simcal-event-details { line-height: 1.2;}
.simcal-default-calendar-list dt.simcal-day-label > span {
	padding: 1px ! important;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

I finally figured out the issue. My theme stylesheet was inserting line breaks for every p. I guess your calendar code inserts the calendar in a p? Had to turn off line breaks for p, which meant I had to manually enter line breaks for the entire website but hopefully this will be the last time I’ll need to worry about that!

I also used the following code to remove some of the extra spacing:

.simcal-default-calendar-list .simcal-event-details {
overflow: visible!important;
}
.simcal-default-calendar-list .simcal-event-details .simcal-event-description, .simcal-default-calendar-list .simcal-event-details p {
    margin: 0 0 0em!important;
}
.simcal-default-calendar-list .simcal-event-details br{ display:none!important; }

Courtesy of sfldoc and Nick Young. Thanks to both of you for your help.

I’m having the same problem with too much vertical blank space above and below a Simple Calendar list embedded in a post. When I look at the page source generated, it looks like Simple Calendar is embedding “<p></p>” before and after its calendar list. In my Edit Calendar text, I have just:

[link][event-title][/link] [if-not-all-day] — [start-time][/if-not-all-day]

and in the post in which the Simple Calendar is embedded, I have just

[calendar id=”2917″]
Click on any event for more information

How can I suppress the <p></p> ?

The page source looks like this:

<div class=”entry-content”>
<p></p>
<div class=”simcal-calendar simcal-default-calendar …