Jump to content

Events Calendar in Phone View

Recommended Posts

I have an events page with a standard Squarespace calendar on it. When viewed on a desktop the tiles display the images that I have chosen, however, when viewed on a tablet or a phone the tiles just show a darker shade of grey. Is there a way that I can colour code the events (by category if possible) so that even if the image doesn't show the category of the event will be apparent. 

Thank you in advance for any helpful advice.   

Squarespace events in desktop view.JPG

Squarespace events in phone view.JPG

Link to comment
  • Replies 14
  • Views 1.7k
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 years later...
On 4/19/2022 at 12:41 AM, CFlo said:

Wondering if anyone has a solution to this? 

I'm experiencing the same issue

 

littlebitofeverythingdiystudio.com

 

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
.yui3-squarespacecalendar .compact-layout .background {
    display: flex !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...

hey @tuanphan thanks for the code! it didnt seem to work but i adjusted it to:

 

@media screen and (max-width:767px) {
.yui3-squarespacecalendar .compact-layout .background {
    display: block !important;
}
}

and it seems to start doing something! Although the day markers are now showing off-aligned. 

Do you know what i can do to bring them back up to centre of the background image?

 

Website: https://www.supervision4therapists.com/schedule 

Password: test

 

Thank you!

Screenshot 2022-07-12 at 13.05.28.png

Link to comment
On 7/12/2022 at 7:06 PM, hannah.dossary said:

hey @tuanphan thanks for the code! it didnt seem to work but i adjusted it to:

 

@media screen and (max-width:767px) {
.yui3-squarespacecalendar .compact-layout .background {
    display: block !important;
}
}

and it seems to start doing something! Although the day markers are now showing off-aligned. 

Do you know what i can do to bring them back up to centre of the background image?

 

Website: https://www.supervision4therapists.com/schedule 

Password: test

 

Thank you!

Screenshot 2022-07-12 at 13.05.28.png

Use this code

@media screen and (max-width:767px) {
.yui3-squarespacecalendar .compact-layout .background {
    display: block !important;
}
.yui3-squarespacecalendar .compact-layout .marker {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 6 months later...
On 7/13/2022 at 9:07 AM, tuanphan said:

Use this code

@media screen and (max-width:767px) {
.yui3-squarespacecalendar .compact-layout .background {
    display: block !important;
}
.yui3-squarespacecalendar .compact-layout .marker {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
}

 

Hi @tuanphan Thanks as always for your guidance. I tried the above code and while it works on the 'mobile view' inside Squarespace, on iphone in normal vertical view the event date squares are still showing up as light grey.  When I turn the phone sideways the colored dates appear the way I'd like them. Is there a fix for lower width px display? Is it a breakpoint issue? Here's the website: https://maroon-goby-bew9.squarespace.com/calendar password is: 252525

Link to comment
  • 2 months later...
On 1/26/2023 at 3:32 AM, mjai said:

Hi @tuanphan Thanks as always for your guidance. I tried the above code and while it works on the 'mobile view' inside Squarespace, on iphone in normal vertical view the event date squares are still showing up as light grey.  When I turn the phone sideways the colored dates appear the way I'd like them. Is there a fix for lower width px display? Is it a breakpoint issue? Here's the website: https://maroon-goby-bew9.squarespace.com/calendar password is: 252525

Hi,

SS hide images on mobile so no way to show image on mobile view.

However you can consider using this approach

image.thumb.png.3620b6539ec8c5ea74ac7805ec8a9b7d.png

First, to show Yellow Color (7 in screenshot) add this to Design > Custom CSS

/* Mobile Calendar */
@media screen and (max-width:767px) {
.has-event {
    background-color: #f2b705 !important;
}
}

image.png.9c243a064dc95c36ffed797706ecffdf.png

Next, with Pink event, add pink at the end of Event URL, for example event 11 has url: 

/events/mutual-mondays-4sf9a

change it to

/events/mutual-mondays-4sf9a-pink

then add this code to Design > Custom CSS

@media screen and (max-width:767px) {
a.background-image-link[href*="pink"] {
    background-color: #f26bdc !important;
}
.has-event * {
    color: white !important;
}
}

image.png.783d267200beb0d3e9f3fe5276911044.png

image.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
6 hours ago, Lorvette said:

Hi @tuanphan. Thanks for the above code but we copy/pasted and are trying it as-is and it is not recognizing the link through the href to my event. All my events dates are still coloured orange, nothing pink even though the URL was updated to end in "-pink". Any suggestions?

 

What is your site url?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Thanks @tuanphan my site is h2hcottageco.com. But, here is the URL to the calendar page. I have not yet linked it to my main navigation yet until it is working.

https://h2hcottageco.com/kennisis-lake-availability-calendar

i only see only the originally orange (but now i changed them to green...) squares on mobile phone for all the events. I'm not seeing the pink squares for the event with "pink" added to the event  name which is: /kennisis-lake-availability-events/event-two-nme24-pink

 

and here is the CSS code I am using:

 

/* Mobile Calendar */ 

@media screen and (max-width:767px) { 

.has-event { 

    background-color: #f2b705 !important; 

} 

} 

 

@media screen and (max-width:767px) { 

a.background-image-link [href*="pink"] { 

    background-color: #f26bdc !important; 

} 

.has-event * { 

    color: white !important; 

} 

} 

Edited by Lorvette
Link to comment

thanks so much for looking at this @tuanphan. Any luck yet? Essentially I want to be able to have potential cottage rental guests be able to see my availability dates on my calendar. At a bare minimum this is what I need. I'm open to any other suggestions you may have if this code cannot work?

 

Thanks

Laura

 

Link to comment
On 5/28/2023 at 9:49 PM, Lorvette said:

Thanks @tuanphan my site is h2hcottageco.com. But, here is the URL to the calendar page. I have not yet linked it to my main navigation yet until it is working.

https://h2hcottageco.com/kennisis-lake-availability-calendar

i only see only the originally orange (but now i changed them to green...) squares on mobile phone for all the events. I'm not seeing the pink squares for the event with "pink" added to the event  name which is: /kennisis-lake-availability-events/event-two-nme24-pink

 

and here is the CSS code I am using:

 

/* Mobile Calendar */ 

@media screen and (max-width:767px) { 

.has-event { 

    background-color: #f2b705 !important; 

} 

} 

 

@media screen and (max-width:767px) { 

a.background-image-link [href*="pink"] { 

    background-color: #f26bdc !important; 

} 

.has-event * { 

    color: white !important; 

} 

} 

Try this new code

/* Mobile Calendar */ 
@media screen and (max-width:767px) { 
a.background-image-link[href*="pink"] { 
    background-color: #f26bdc !important; 
} 
a.background-image-link[href*="pink"] img {
    opacity: 0 !important;
}
.has-event * { 
    color: white !important; 

} 
    .yui3-squarespacecalendar .compact-layout .background {
    display: block !important;
}
} 

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 11 months later...

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.