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 comment
  • Answers 7
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

7 answers to this question

Recommended Posts

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

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)

 

Link to comment
  • 0
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.

Link to comment

Create an account or sign in to comment

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


×
×
  • Create New...