Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Calendar Customization (7.1)


ItsOK

Question

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

Screen Shot 2020-07-14 at 6.50.42 PM.jpg

Screen Shot 2020-07-14 at 6.54.24 PM.jpg

Screen Shot 2020-07-14 at 6.54.16 PM.jpg

Link to post
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

5 answers to this question

Recommended Posts

  • 0
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.

Link to post
  • 0
  • 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;
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0
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?

Link to post
  • 0

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:

image.png.9ea1c00728e364e300b4318ed3611eb7.png

 

I'd like it to look more like this :

image.png.b435bc5db3498f9da409e63b917856df.png

 

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:

image.png.464776cdda0a5f6866cc602f114ed969.png

 

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:

image.png.018448e3a35d4aa8eea27d90098e9ce1.png

 

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

 

image.png

image.png

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...