Adjust calendar block color?

Hello, 

I am helping an arts nonprofit org with their website. Their main audiences are Deaf, DeafBlind and Hard of Hearing community. The calendar is not deafblind-friendly right now. Is there a way for us to adjust the calendar to be more contrasted? 

Right now, it is white background with subtle gray squares.  That is not helpful. 

Is there a html code for calendar for us to adjust square colors to more darker? 

Can you share link to page where you use calendar block? We can help easier

I'm also interested in this topic. Client's site right now has the calendar block over a dark background image. The desktop version looks fine because of the larger resolution and the full bleed EVENT THUMBNAIL images that fill in the dates where events exist. 

But it's difficult to read and identify on mobile. Hopefully SquareSpace adds functionality to adjust opacity on the calendar for 7.1 soon. 

Ryan

Place in Custom css the colors can be changed using hex codes which are found here:
https://www.color-hex.com/


yui3-squarespacecalendar .yui3-calendar-pane {
 padding: 12px; background: #f5f5f5 !important; }

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

.yui3-squarespacecalendar .compact-layout 
.yui3-calendar-day.has-event{ background: #e7d073 !important; }

.yui3-squarespacecalendar 
.compact-layout .yui3-calendar-day.has-event, 
.yui3-squarespacecalendar  { color: #222 !important; }     

This code has worked also, depending on the template:

/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;
}

Do we know if there is a way to force the Thumbnail image to display on Mobile or sub 600px calendars? I use a Green, Red or Yellow thumbnail to distinguish my events but these only hsow when the cal is over 600px in size.

website: crewehc.co.uk the calendar is at the bottom of the home page. 

On 12/19/2020 at 12:30 PM, derricksrandomviews said:This code has worked also, depending on the template:

/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;
}

This did it! Thanks a billion 🙂

Dan, I looked at your website crewehc.co.uk, and see you resolved this when viewing on mobile.

I am having the exact same problem, can you tell me how you did it?

Ie  forcing the Thumbnail image to display on Mobile or sub 600px calendars?

Thanks

Ben

On 8/27/2021 at 7:35 PM, nabwilson said:

Dan, I looked at your website crewehc.co.uk, and see you resolved this when viewing on mobile.

I am having the exact same problem, can you tell me how you did it?

Ie  forcing the Thumbnail image to display on Mobile or sub 600px calendars?

Thanks

Ben

Can you share link to event on your site? We can take a look

On 8/27/2021 at 1:35 PM, nabwilson said:

Dan, I looked at your website crewehc.co.uk, and see you resolved this when viewing on mobile.

I am having the exact same problem, can you tell me how you did it?

Ie  forcing the Thumbnail image to display on Mobile or sub 600px calendars?

Thanks

Ben

Sure thing, I cheated a bit in the end as I was only looking for a solid colour fill rather than an actual image. I used the below CSS.

When there is an event scheduled on the linked calendar the box will show as green, and when there is no event scheduled it will show as red (But obviously you can change the hex code to suit). 

Just add it to Design> Custom CSS

__

//Cal Block Museum Open Green//
.yui3-squarespacecalendar .compact-layout .yui3-calendar-day.has-event{ background: #06c258 !important; 
}

// Cal Block Museum Closed Red //
.yui3-squarespacecalendar .compact-layout .yui3-calendar-day{ background: #CD001A !important; 
}

__