Plugin Author
anmari
(@anmari)
Rather use css to add styling. EG you could do a top and bottom border on the <tr>. See also the css selectors too to highlight certain events.
The plugin provides lots of css selectors are various levels so you should be able to achieve almost any style you wish. You’ll see the start date (eventdate) and enddate have suitable classes
Use a browser’s ‘inspect element’ feature to experiment with css.
http://icalevents.com/2382-styling-of-ical-events/
http://icalevents.com/3591-custom-css-for-event-lists/
-
This reply was modified 7 years, 5 months ago by
anmari.
Thread Starter
JoJota
(@jojota)
Thanks for your reply. I already tried styling with css, but it looks like that the dates don’t have single classes. I am using the weekcalendar [weekscalendar weeks=1 ics=xxx] and the html output for the first day looks like this:
<tr class="week week1">
<td class="day1 hasevents ">
<div class="event history inprogress confirmed calics vevent">
<div class="details1">08:00 - 11:00 Important meeting</div>
<div class="details2">my location, duration: 3 hours</div>
</div>
</td>
Adding .eventdate to my style.css didn’t change anything.
.eventdate {
font-weight: bold !important;
}
Is there only one class for the event date and the event title? Or am I missing something?
Plugin Author
anmari
(@anmari)
hi,
Each shortcode/listtype has it’s own special characteristics aimed at how it is expected to be used. The main list types have very detailed css selectors as described above.
weekscalendar differs in that the html groups fields into details1 and details2 (with css) so that anything in details 2 appear in ‘hover’. It expects less data/fields and so currently no css selectors at detailed field level inside the ‘details’. In weekscalendar The event date itself is in the table header, so does not need to appear inside the “details 1 or 2”.
Since the eventdate is in the table header in the weekscalendar, something like
.weekscalendar tr.dayheader th is what you can use with weekscalendar listtype.
Plugin tries not to ‘overstyle’ but is designed to pickup styling if possible from your theme, to make the output feel like it fits in the site. EG: in theme twenty-seventeen, the table headers (ie the event dates) are already darker. But perhaps your theme does not provide table styling.
if you want more data to show, You may find that the weekly vertical listtype suits you better – it would work better on smaller devices and it has the css selectors at the lower levels. Note the eventdate css selectors are then tr.day th.day the events are again grouped by day.
the .eventdate class is available in the list /agenda listtypes
Use the browser’s ‘inspect element’ to see what html and css is generated for each shortcode / listtype /fields combination.
