CSS Tags on Date Holder

  • Resolved danbroome1

    (@danbroome1)


    4 years, 1 month ago

    Hi,

    I have been using ICS calendar on our website for the last six months and have been very impressed with it. I have heavily styled the widget on my website using CSS to fit with the theme of the website however the recent update appears to have changed the layout and way some of the heading/dates are tagged in CSS.

    I was wondering if there is any way to target a date heading now using CSS? Currently the date headings are just showing as

    <h4>Thursday 14th February</h4>

    meaning there is no way to CSS style them whereas previously they were children of an .allday event that could be hidden as required. I had been using the CSS tag to hide a repeat date heading on days which have multiple events and CSS style the headings independently of the h4 tag.

    Is there any workaround for this?

    Kind Regards,
    Daniel

    • This topic was modified 4 years, 1 month ago by danbroome1. Reason: ##I've managed to use nth-of-type selectors to do what I need to do so it's all sorted now :) ##
Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author room34

    (@room34)

    I can probably figure out a crafty CSS selector that will get you what you need. Would it be possible to get the link for your calendar page so I can see all of this in context? You can email the link to the address on the plugin’s admin page if you don’t want to post it here. Thanks!

    Thread Starter danbroome1

    (@danbroome1)

    Hi,

    Thanks for getting back to me.

    The website is: https://www.thehalvechapel.org.uk/

    The ICS Calendar widget is used to created the ‘Upcoming Services’ view on the homepage.

    I’ve managed to temporarily work around the issue using an alternating nth child selector on the h4 tag however this is obviously less than ideal for a number of reasons.

    There are all-day events in the calendar for every day there is an event to allow a clearer view of the details in Google Calendar on mobile, however this obviously means the events filter through to the ICS widget. Ideally I need to hide these.

    The ideal would be a CSS selector that allows me to target the date label (e.g. Thursday 11th Feb) for all-day events, and if possible the same for when there are multiple events on the same day. That way I can hide them so only one date label appears for each day there is an event.

    Hopefully that makes sense!

    Kind Regards,
    Daniel

    Plugin Author room34

    (@room34)

    Something definitely isn’t right here because the plugin should not be duplicating the <h4> headers just because they’re all-day events. It should only be producing extra <h4> headers on multi-day events, because their headers are actually different from the day headers that go with them. Would it be possible to get the URL of your ICS feed itself, so I can test my code changes against it on my development server? Thanks!

    Thread Starter danbroome1

    (@danbroome1)

    The URL is:
    https://calendar.google.com/calendar/ical/thehalvesbchapel%40gmail.com/public/basic.ics

    Plugin Author room34

    (@room34)

    Thanks. I’ll investigate and let you know what I find.

    Thread Starter danbroome1

    (@danbroome1)

    Great. Thanks

    Plugin Author room34

    (@room34)

    Simple fix… I had a couple of lines of code inside a loop that should have been outside the loop. This is fixed in version 6.5.1, which should be available momentarily.

    Thread Starter danbroome1

    (@danbroome1)

    Perfect – that’s now working exactly as it should.

    Thanks for resolving this so quickly.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘CSS Tags on Date Holder’ is closed to new replies.