Styling ICal List

  • First of all thanks for this great Plugin!

    I am displaying a ICAL-File with

    [iCal https://cloud.chole.ch//GigsCAL/Gigs.ics listtype=15 sort_later_events_first=1 start=19900101 days=100000 events=100000 calendar_properties=0]

    The List contains Columns Date, Description, Location, Category, Google-Maps Icon.

    How can the width of the single columns be defined?

    Also i would like to split the Date to two lines such as
    Mo, 1.
    January 2017

    I know where the customlist.css lies but not sure if classes should be used and how to find which classes exist.

    Any help appreciated.
    Thank you
    Daniel

    • This topic was modified 7 years, 10 months ago by danielkohler.
    • This topic was modified 7 years, 10 months ago by danielkohler.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter danielkohler

    (@danielkohler)

    found out about the column widths but still searching for date-splitter solution. tried do do a span around the month and year to be able to treat it:

    D, j.\&\n\b\s\p;\<\s\p\a\n\>M\&\n\b\s\p\;y\<\s\p\a\n\>

    span

    Dont know how to proceed now. html together with the sortcode?

    Thread Starter danielkohler

    (@danielkohler)

    found some inspiration on https://cssdeck.com/labs/css3-calendar-icon-2
    but where to put the html-code?

    Plugin Author anmari

    (@anmari)

    Hi,

    Use custom css to control column widths (please bear mobile devices in mind too)

    https://icalevents.com/2382-styling-of-ical-events/

    To find the classes that exist for the various fields, use your browsers ‘inspect element’ – see screenshot in above link

    If you have already found a way to isolate part of the date with the ‘span’, then all you need is probably some css to say force the span part to be full width so that it will wrap to new line.
    I haven’t tested this but you could try using a break ‘<br/>’ instead of the span, which will force a line break. something like “D,j \<\b\r\/\> F, Y”
    https://icalevents.com/4386-dates-times-formatting/

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Styling ICal List’ is closed to new replies.