CSS fo selector and other

Hi, sorry your previous post was closed. Yes, the admins are sticklers about supporting free plugins only here. (To that end… the contact options on https://icscalendar.com are a bit confusing; I’ll work on improving that.)

However, as it happens your questions here are all pertinent to the free version. The styling you want to do would most likely need to be done with CSS in either version, and you can display a single week with the free version as well.

I typically like to provide exact CSS help for people (as most of the issues are very specific to an individual site’s theme), but I do need to be able to load the page directly in my browser in order to do that. A screenshot is not adequate. If you could set me up with a “contributor” level login so I could see the page, that would be sufficient. You can email the support address shown on the ICS Calendar admin page.

Regarding the week display, you’ll want to use week view by adding view="week" to your shortcode. By default, week view includes a dropdown for the user to select the previous week, current week, or next week. But you can remove that by also setting limitdays="7" in your shortcode.

@room34

Really thanks to you for your kind answer!

I’ll set for you a editor user… can you give me email pls?

The email address is on the ICS Calendar page in your site admin.

user added ??

Thanks… I think something may not be configured quite right with the user account though; it’s saying “Error:?There is no account with that username or email address.” I think it’s possible the account’s role is not set correctly.

mmmhh… I think this is because I’m on staging mode… I’ll check for the settings of my ISP

Thank for your patience

• This reply was modified 1 year, 11 months ago by albertok.

Try pls this link

https://parrocchiasangiuseppeoperaio.eu/livestaging/ERGe08499b3a7cb055a622fcdd8c0b773fa41d83f3925a8b3d6922011ebaa43156dT

Thanks, now I am able to see it.

It looks like you’ve started modifying the dropdown month selector. I should note that CSS styling on <select> tags can be a bit tricky, as they render differently in different browsers. This is pretty much a standard CSS question so I would suggest checking out a tutorial such as this for some of the techniques:

https://moderncss.dev/custom-select-styles-with-pure-css/

Regarding different styling for Saturday and Sunday, I have a CSS example for hiding those days, but you can use those same selectors to apply whatever styling you want. Here’s the example in my docs:

https://icscalendar.com/css-guide/#display-weekdays-monday-friday-only

The CSS selector you want to use is:

.ics-calendar-month-grid *[data-dow='0'], .ics-calendar-month-grid *[data-dow='6']

(I know it may be a bit counterintuitive that the selector has “month” in it when you’re using week view, but week view uses a lot of the same CSS as month view.)

Thank so much: @room34

I tried it… but it doesnt work properly…

.ics-calendar-month-grid *[data-dow=’0′] {
background-color: red; }

this change all background not only the cell with sunday

as you see here: https://imgbox.com/a5GDw4GN

I ask if is possible 2 separate background colors for th saturday and sunday and 2 separate background colors fort td saturday and sunday

I FOUND… i used:

.ics-calendar-month-grid th[data-dow=’0′] {
background-color: red; }

• This reply was modified 1 year, 11 months ago by albertok.
• This reply was modified 1 year, 11 months ago by albertok.
• This reply was modified 1 year, 11 months ago by albertok.
• This reply was modified 1 year, 11 months ago by albertok.
• This reply was modified 1 year, 11 months ago by albertok.
• This reply was modified 1 year, 11 months ago by albertok.
• This reply was modified 1 year, 11 months ago by albertok.
• This reply was modified 1 year, 11 months ago by albertok.

Good catch… yes, the problem was the wildcard selector * was not specific enough given the CSS in your theme. I’m glad you were able to sort it out.

As for having different colors for Saturday and Sunday, that’s where the numbers come in. 0 is for Sunday. 6 is for Saturday. So if you repeat this code but use 6 instead of 0, the styles will apply to Saturday.