Grouped – calendars, different styling for each calendar in the group

  • I have a website to update to Simple Calendar from GCE 2.4. I did the original 3.0 update and went right back to 2.3 as all my calendars, google api key etc went missing. So now I’m back looking at the way forward, but I have one issue that’s still causing me a problem.

    In GCE 2.4 I used to group two calendar feeds in the sidebar widget. Each of the feeds had a similar “event builder custom code” but the title had a different background colour depending on which calendar it came from. This meant the side bar could have one widget showing a number of events with colour coding to indicate what kind of event it was. in my case I used a light gray background for “external events” and an orange background for “club” events

    I am struggling to get this working in Simple Calendar 3.10 on a test site. Is it possible or something else that was lost along the way?

    https://www.ads-software.com/plugins/google-calendar-events/

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Contributor Nick Young

    (@nickyoung87)

    This is definitely possible.

    First you will want to check this out for any help involving creating a grouped calendar: https://docs.simplecalendar.io/grouped-calendar/

    Then the second step will just be adding a bit of CSS to your theme (which you probably did this for your previous setup as well). The class names have just changed a bit. For the new classes you can use this:

    .simcal-events-calendar-{calendar-id} .simcal-event-title { color: #f00; }

    You will of course need to replace {calendar-id} with the actual ID of the calendar you wish to change.

    Hope that helps!

    Thread Starter Brian Worley

    (@brian-worley)

    Thanks Nick, i’ll give it a go and see how I get on.

    Plugin Contributor Nick Young

    (@nickyoung87)

    Sounds good, let me know if you need further assistance with it.

    Dear Brian, Nick,
    Sorry to pollute the discussion.
    I wanted to do similar thing, but when I write :

    .simcal-events-calendar-{calendar-1818}.simcal-event-title { color: #f83a22; }

    on my css file, all the titles are in red. not only the single calendar id=1818.
    I tried with only the number 1818 not {calendar-1818}, but it is the same issue.
    What is the current syntax ?
    Rgds and thanks a lot in advance,
    Vincent

    Plugin Contributor Nick Young

    (@nickyoung87)

    Vincent do you have a link to your site so I can see?

    It should look like this for you:

    .simcal-events-calendar-1818 .simcal-event-title { color: #f83a22; }

    Notice the replacement of the {calendar-id} with just the id and also there was no space between the end of the ID part and the second .

    So that could have been changing it significantly since in CSS these mean two different things:

    .class .class2 and .class.class2

    Dear Nick,
    I had to cancel the brackets…
    But there is still something weird. In the grouped calendar all the items of the day take the same color. Which I think wasn’t expected.
    Please find here below the link :

    https://www.sjsc.fr/calendrier-paroissial/

    I was expecting “red” for the mess, blue for activities, etc..

    Kind regards
    Vincent

    Plugin Contributor Nick Young

    (@nickyoung87)

    You would have to add different CSS for the text that isn’t a title. The CSS example above is only for changing the title CSS.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Grouped – calendars, different styling for each calendar in the group’ is closed to new replies.