Colors

Thanks for your interest in the plugin! I’m looking at developing a “pro” version that includes some style and color options, but right now CSS is the only way to do it. I’ll follow up later today with some examples.

Here’s a pared down chunk of the plugin’s CSS for the elements in the month/week grid views with the appropriate element selectors and just the background and color properties. I added comments to help identify what each selector is.

Go to Appearance > Customize > Additional CSS and paste in this block, then change the colors as needed. There are a number of tools online to help you identify RGB or HEX color values you can use in CSS, and you can also use HTML color names. You can find more about that here: https://rgb.to/html-color-names/1

/* All cells in the calendar grid */
.ics-calendar-month-grid th, .ics-calendar-month-grid td {
	border: 1px solid rgb(187,187,187);
}

/* Day-of-week headers */
.ics-calendar-month-grid th {
	background: rgb(171,171,171);
}

/* Days outside the currently selected month */
.ics-calendar-month-grid .off {
	background: rgb(246,246,246);
	color: rgb(153,153,153) !important;
}

/* Individual day cells */
.ics-calendar-month-grid .day {
	background: rgb(226,226,226);
}

/* Day cells in the current month but in the past */
.ics-calendar-month-grid .past {
	background: rgb(250,250,250);
}

/* Today's day cell */
.ics-calendar-month-grid .today .day {
	background: rgb(102,102,102);
	color: rgb(255,255,255);
}

/* Divider between individual items on the same day */
.ics-calendar-month-grid ul.events li {
	border-bottom: 1px solid rgb(226,226,226);
}

/* Background for "all-day" events within a day cell */
.ics-calendar-month-grid ul.events li.all-day {
	background: rgb(245,245,245);
}

It is working perfectly.
Thank you very much.

Ahem … Is there a way to modify a specific event ? (based on its date and/or hour) and also modify the cell’s backgroud only for days off ? ;-)))

With the existing CSS classes there’s not really a way to be able to modify a specific event by date/hour… it would require a convoluted combination of CSS and JavaScript to do that.

For the cell’s background on days off, do you mean the .off class, that I described in the comment as “Days outside the currently selected month”?

If so, then what you’d want to do is change this line:

color: rgb(153,153,153) !important;

to this:

color: inherit !important;

No. Sorry.
I meant ??closed days?? like week-ends could be.
BTW my working week should start on tuesdays and end on saturdays but iCal don’t want me to set such a particular week :-((
I tried to set my week like that but it does not works.
This is why I would like to change the cell’s background for sundays and mondays.

Ah, I see.

This plugin uses the WordPress setting for the first day of the week. If you’d like to change that to have them start on Tuesday, that’s no problem… you can go in the WordPress admin to Settings > General and look for Week Starts On.

With what you’re describing — basically having all of the cells in a particular column have a unique background color — then that can be done with CSS. Assuming you make the change to start the week on Tuesday, putting Sunday and Monday at the right side of the grid (the 6th and 7th columns), then you could code it like this:

.ics-calendar-month-grid tr td:nth-of-type(6), .ics-calendar-month-grid tr td:nth-of-type(7) {
    background-color: YOUR_COLOR_HERE;
}

Thank you so much. It works well.

One last question :
Will your plugin overlap multiple calendars like iCal does ? Or maybe via CSS ?
That way I could have different colored events because that’s what I’m trying to do.

If not, doesn’t matter. This will give you an idea for the next release ! :-)))

Unfortunately the plugin does not currently support displaying multiple ICS feeds in a single calendar. While this would technically be possible, it would require a pretty significant reworking of how the plugin currently parses the calendar feeds.

Still… a good idea! I’ll look into it for a future update.

That said, you should be able to display multiple embedded calendars on a single page. Not exactly what you’re looking for, but it may help.

• This reply was modified 5 years, 8 months ago by room34.