Calendar Customization (7.1)

Site URL: https://goby-icosahedron-jc2m.squarespace.com/events

Hi Folks,

I have a few questions about the calendar customization in 7.1.

Here is the page I'd like to display my calendar:
https://goby-icosahedron-jc2m.squarespace.com/events
(password: circle)

I'd like to be able to:

• Change the background color of the boxes (days). Now, it's too subtle that on some screens it's almost impossible to understand the tone difference.
   
• Change the event date tag color (now white)
   
• Make the font size of the days larger
   
• And (probably the most difficult one) put a standard to the hover windows. Now, one event opens an overlay that fills two boxes, while the other one fills four. Looks completely random and doesn't make any sense to me. (Please see the images attached)

Thank you so much in advance for your help.

Best,
Ozan

I don't see Calendar in above link. Can you share link to exact page?

1 hour ago, tuanphan said:

I don't see Calendar in above link. Can you share link to exact page?

It's there actually, if you scroll down a bit.

• Change the background color of the boxes (days). Now, it's too subtle that on some screens it's almost impossible to understand the tone difference.
   
• Change the event date tag color (now white)
   
• Make the font size of the days larger
   
• And (probably the most difficult one) put a standard to the hover windows. Now, one event opens an overlay that fills two boxes, while the other one fills four. Looks completely random and doesn't make any sense to me. (Please see the images attached)

Add to Home > Design > Custom CSS

/* day color background */
.yui3-squarespacecalendar .background+.marker {
    background: green !important;
}
.yui3-squarespacecalendar .background+.marker * {
    color: white !important;
	font-size: 30px !important;
}

9 hours ago, tuanphan said:

• Change the background color of the boxes (days). Now, it's too subtle that on some screens it's almost impossible to understand the tone difference.
   
• Change the event date tag color (now white)
   
• Make the font size of the days larger
   
• And (probably the most difficult one) put a standard to the hover windows. Now, one event opens an overlay that fills two boxes, while the other one fills four. Looks completely random and doesn't make any sense to me. (Please see the images attached)

Add to Home > Design > Custom CSS

/* day color background */
.yui3-squarespacecalendar .background+.marker {
    background: green !important;
}
.yui3-squarespacecalendar .background+.marker * {
    color: white !important;
	font-size: 30px !important;
}

 

Thank you so much dear tuanphan.

Should I assume that it's not technically possible to change the font size for all of the days (even the ones without events) in the calendar, the color of the boxes of all days, and standardize the size and position of the overlays?

Hi, I tried this too with my calendar, but the CSS didn't work. I'm having 3 issues:

1) I want to change the background colour, so that the days that are available are pale grey, while the days which are unavailable are dark grey / black. 

This is it now:

I'd like it to look more like this :

2) I also don't want there to be a pop out when I hover over the day. For some reason, it's a weird rectangular shape that covers two days:

if it could be a square, then fine, otherwise I'd rather it just didn't pop up at all.

3) I'd LOVE to make it so that instead of saying unavailable, the day had a line through - something like this:

might be too much to hope for.

Either way would be SUPER grateful for any help! I've seen quite a few people asking for this kind of stuff, but so far, no one seems to have cracked it (or at least not with code that works for my site - version 7.1) 

Thanks so much in advance -

my site is https://bamboo-lime-face.squarespace.com

anyone able to help? Would be much appreciated! 

@ItsOK did you find an answer to your 4th problem?

• And (probably the most difficult one) put a standard to the hover windows. Now, one event opens an overlay that fills two boxes, while the other one fills four. Looks completely random and doesn't make any sense to me. (Please see the images attached)

23 hours ago, hlzcp said:

anyone able to help? Would be much appreciated! 

 

@ItsOK did you find an answer to your 4th problem?

• And (probably the most difficult one) put a standard to the hover windows. Now, one event opens an overlay that fills two boxes, while the other one fills four. Looks completely random and doesn't make any sense to me. (Please see the images attached)

 

Unfortunately, I couldn't.

Hey @hlzcp it looks like you figured out a nice design for your calendar where the titles and excerpts are hidden, and a solid color is applied for unavailable dates.

Could you please share how you did this? Thanks so much!

On 1/28/2022 at 4:47 AM, BeaRue said:

Hey @hlzcp it looks like you figured out a nice design for your calendar where the titles and excerpts are hidden, and a solid color is applied for unavailable dates.

Could you please share how you did this? Thanks so much!

With solid color, I checked & see this code

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

With title/excerpt/date, maybe this code

.item-time,.flyoutitem-datetime {
    display: none !important
}
.flyoutitem a .flyoutitem-link-arrow {
    display: none
}
.yui3-calendar-grid {
    pointer-events: none
}