How can I change the calendar color?

I've seen a handful of answers on this question. Here are two:

.eventcal .eventcal-content-wrapper { background: #000000; }

.eventcal .eventcal-daynumber { color: #e7d073; }

.eventcal .eventcal-today { background: red; color: black !important }

My problem: Those don’t work with me. I don’t know what I’m doing wrong.

I added these to the Custom CSS, but it doesn’t work. I tried different colors, but nothing works. The calendars colors stay the same as the original. What am I missing? I’m not in developer mode, can this be it?

Anyone? Any ideas?

Alright, so, no solutions here! Perfect. lol

Chances are those are not the right selectors for the calendar on your specific template, as they can be different depending on what template you're using. What's the url of your website?

Nothing to do with developer mode, can you link your site so I can try to help

Oh, the selectors not being the correct ones. Didn't think of that. The template I'm using is Bedford.

www.p2sk.ca is the site.

Thanks for the reply!

Any answers? If I'm not using the correct selectors, where could I find that information for the template I'm using (Bradford)?

Bumping this, because really, I can't be the only one wondering how to do this

Thank you so much sssuperguy, really helpful!

This was so helpful!!! But what about how to change the color of the event title or description on hover?

I have a question about this code. So after breaking it down I came up with this code below, but I want to change the color of the background and text of the calendar ON HOVER. As you can see in my photo below, when my mouse is on hover the background is grey and the text is white. It's really hard to see. What code can I add to target those two areas.

CODE I USED FOR THIS IMAGE:

//background color//
.yui3-squarespacecalendar .yui3-calendar-pane { padding-top: 10px;  padding-bottom: 10px; background: white !important;
  filter: opacity(80%);
  border: 0px solid #ffffff;
}

//today calendar color//
.yui3-squarespacecalendar .today{ color: #ff3333 !important; }

//event date colors//
.yui3-squarespacecalendar .compact-layout .yui3-calendar-day.has-event{ background: #171828 !important; 
}

///change all date text color//
td.has-event * {
    color: white !important;
}

//calendar dates and border square//
.yui3-squarespacecalendar .compact-layout .yui3-calendar-day.has-event, .yui3-squarespacecalendar  { color: #000000 !important; }     

// Calendar Month Year Styling //
.yui3-calendar-header-label {
  font-size:16px;
  color:#E2AC3F;
  letter-spacing:0.2em;
  }

On 6/18/2020 at 11:22 PM, Nondys said:

 

I have a question about this code. So after breaking it down I came up with this code below, but I want to change the color of the background and text of the calendar ON HOVER. As you can see in my photo below, when my mouse is on hover the background is grey and the text is white. It's really hard to see. What code can I add to target those two areas.

 

CODE I USED FOR THIS IMAGE:

//background color//
.yui3-squarespacecalendar .yui3-calendar-pane { padding-top: 10px;  padding-bottom: 10px; background: white !important;
  filter: opacity(80%);
  border: 0px solid #ffffff;
}

//today calendar color//
.yui3-squarespacecalendar .today{ color: #ff3333 !important; }

//event date colors//
.yui3-squarespacecalendar .compact-layout .yui3-calendar-day.has-event{ background: #171828 !important; 
}

///change all date text color//
td.has-event * {
    color: white !important;
}

//calendar dates and border square//
.yui3-squarespacecalendar .compact-layout .yui3-calendar-day.has-event, .yui3-squarespacecalendar  { color: #000000 !important; }     

// Calendar Month Year Styling //
.yui3-calendar-header-label {
  font-size:16px;
  color:#E2AC3F;
  letter-spacing:0.2em;
  }

were you able to find out how to change the colors? i also would like to change it

On 12/2/2021 at 5:41 AM, MGN said:

were you able to find out how to change the colors? i also would like to change it

If you share link to page where you added calendar, we can take a look

Can you change the standard display colour of the calendar days for both computer and phone displays? 

Currently, it shows on the computer view as a shade variation of the background colour, and on the phone, it doesn't show a colour at all. 

I would like the calendar 'blank' days to be white on both views. 

Second to this, I the image that I have uploaded on the event days, does not show on the calendar view on the phone display. I would like this to show as it acts as a quick view between our partially and fully booked days.  on mobile you have to physically click the event day and read the title to know what type of event it is, which is added work for viewer. 

I have attached some images for reference and the site URL is: https://www.lapiccolapizzeria.au/availability
P/word: eat123