3.0 html support and styling

as far as I am concerened html support is working as expected.

What I mean by events grouped per day is this.

In the original grouped list, events were displayed like this

Wed 02 Dec
10.00am Advent Holy Communion and MU party
3.45pm Kids Alive 325

Thu 03 Dec
6.00pm Compline

Sat 05 Dec
8.30am Prayers for the Parish

i.e. for each day, the day and date are listed, followed by a list of events happening on that day.

See for example
https://www.standrewsoxshott.org.uk/worship-learning/services/

In V3 using the default list we get the same thing, BUT the date is a white on black block with a line. That is not what I want. I want it to look like it did in V2. So is there a way to remove that styling?

I tried the “compact list” but that doesn’t group the events by day. It just lists each event on a seperate line. I can either list them without dates, or list them ALL with dates, but I cannot get the grouped by date behaviour I am after.

Essentially, what I want is exactly what I had in V2. Is there any way of getting that?

Sorry this really ought to be a seperate thread from the html one, but I had both issues at the same time.

Incidentally, I am still having trouble with the cache not getting refreshed (sometimes it does, sometimes it doesn’t) in V2 and I’m hoping that V3 will fix this. So far it seems to be OK in V3, but I haven’t been running it long enough in my sandbox to be sure.

In V3 using the default list we get the same thing, BUT the date is a white on black block with a line. That is not what I want. I want it to look like it did in V2. So is there a way to remove that styling?

I tried the “compact list” but that doesn’t group the events by day. It just lists each event on a seperate line. I can either list them without dates, or list them ALL with dates, but I cannot get the grouped by date behaviour I am after.

Essentially, what I want is exactly what I had in V2. Is there any way of getting that?

You can try changing the styling to match more what you are looking for, otherwise there is not a place in the plugin to change that.

I found the default list view to have huge amounts of unnecessary space as well for my application. Here’s the CSS I added to my header to fix the issue:

.simcal-default-calendar-list dt.simcal-day-label { margin-top: 5px; }
.simcal-default-calendar-list { padding-top: 5px; }

Note though that I actually wanted a little bit of space between the events anyways so I left some. You can change those to 0px each and that should remove all of the spacing. You can see how this made mine turn out (bottom-left of the page) at https://windsor.k12.mo.us/.

The compact list as well wasn’t very compact with all of the unnecessary space too, so here’s my fix for that as well (still not space-less though):

.simcal-calendar-list-compact ul.simcal-events { margin: 0px; }
.simcal-calendar-list-compact ul.simcal-events li.simcal-event { margin-bottom: 0px; }

As for fixing the large, blocky date headers, you can make them slightly less blocky by adding (I’ve not tried this myself though):

.simcal-default-calendar-list dt.simcal-day-label { margin: 0px; }

But there’s no current way of removing the coloring or underline from the date. You could try setting the colors to the same as your background in your calendar setup though. That might make it look as you were wanting.

Hope that helps!

~Ari