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

How to Hide Time on the Pop Up of an Event Calendar


Nondys

Question

Site URL: https://www.moffittsmermaids.com/packages

 

Hello! I was hoping someone would be able to help me disable the time on an event calendar on hover? I was able to hide the time on the calendar but when you hover over the date it still shows up.

I'm not sure how to find the right code when I inspect the page since when I hover over the event day the inspect tool doesn't really work... not on hover anyway.

Here is an image of my calendar now. 

How do I hide the time of ALL events on Hover?

 

You can view this page at moffittsmermaids.com/packages

 

Thank you so much!

Screen Shot 2021-07-23 at 10.25.15 PM.png

Link to comment

3 answers to this question

Recommended Posts

  • 0
1 hour ago, Nondys said:

I was hoping someone would be able to help me disable the time on an event calendar on hover?

Use this in Custom CSS:

.yui3-squarespacecalendar .flyoutitem .flyoutitem-datetime--12hr {
  display: none;
}

 

RdBb37NPyU.thumb.gif.54c5d4449c2e756b38098cc942906926.gif

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 0
Posted (edited)

@paul2009 It worked! I think I love you hahahahahaha.

Yeah that was tricky for me, I couldn't figure out how to locate the proper code if my mouse couldn't hover over the actual pop-up when I'm on the inspect tool.

Any suggestions on how I could find it the way you did? I'd love to know this trick haha

Edited by Nondys
Link to comment
  • 0
9 hours ago, Nondys said:

Any suggestions on how I could find it the way you did? I'd love to know this trick haha

Haha! 😊

No magic tricks required! 

As the calendar effect is triggered by a hover pseudostate (:hover) you simply need to toggle this using your favourite browser developer tool. For example, using Chrome:

  1. Right click the element to Inspect it. The element will be highlighted in the DOM Tree.
  2. You'll usually need to navigate up the DOM Tree a little at this point to identify the correct element that has the pseudostate.
  3. In the Styles tab, click :hov.
  4. Check the :hover checkbox. You'll see the event 'flyout' appear even though you re not hovering over the element.
  5. You can now find the elements that were previously hidden.

Here's a quick screencast:

invoke-hover-pseudostate-on-calendar.thumb.gif.ca9f3fc7118b99200287891c4348cdb8.gif

I hope this helps. If anyone reading this wants to learn more about the features in Chrome DevTools, Google has a great series of guides here: https://developer.chrome.com/docs/devtools/overview/.

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . Links in my posts may refer to SF Digital products or may be affiliate links.

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