Jump to content

Remove time from Events?

Go to solution Solved by Mixtus Media,

Recommended Posts

Posted (edited)

How can I remove the time from individual events, such as with all-day events? I don't want all events to have times listed, but some should.

Nothing in the Event module settings, nothing in the event item or options, can't delete the times manually. Nothing via Answers or Google search.

Edited by SteveInReno
Posted (edited)

Hi Steve, I emailed support about the same issue, and the short answer is that it's not possible. I'll include the pertinent text below, in chronological order:

Me: Hi,

I'm working on xyz.com. I am listing theater productions, and multiple performances (at different times) need to go in the same event. Since there isn't a way to enter multiple times, is there a way for it not to show the times? (Or better yet, not even the dates)? I can't find a way to unselect the times.

Thanks for any help you can provide!


SS:Hi there,

Happy to help here! There is currently no default feature available to do this in the Squarespace 6 platform, however I will submit a feature request for you to our developers so we can explore possible solutions for this. I apologize for any inconveniences here.

In the meantime, you are able to select what information is visible within your events page here in your Style Editor:

http://screencast.com/t/isVRab33FkG

We have a great guide for making Style changes here:

http://help.squarespace.com/customer/portal/articles/438114

Does this help? Please let us know if you have any more questions. We are always happy to help!


ME:

Thanks for submitting to the developers. I know how to show certain aspects of the event in style editor, but if you look you'll see that doesn't address the question I asked.


SS: Hey,

I apologize if there was any confusion.

As Justin stated, we aren't really able to offer this as a feature right now. Another option you have is to use something like Google Calendar within your site. You can embed the code for this within a Code Block and it may help you achieve your goal depending on their features. You can take a look at their site here:

https://support.google.com/calendar/answer/41207?hl=en

We also have a guide for using our Code Block here:

http://help.squarespace.com/customer/portal/articles/437955

Let us know if you have any other questions -- thanks!


ME:Thanks for this google option! To clarify, I understood Justin's reply--that's why I thanked him for passing it along to the developers. :) I was just confused as to why he then offered the info below, when it was already apparent that what I needed wasn't an option.

Thanks again!

Edited by iamb
  • 2 weeks later...
Posted (edited)

Thanks for that info! I'll take a look at the linked info; maybe something in the template styles can be tweaked a bit to achieve what I'm looking for, or maybe removing the time entirely and just adding it to relevant posts.

Edited by SteveInReno
  • 5 months later...
Posted (edited)

Any update on this feature request? The ability to toggle an all day event would handle this as well. Not sure if there's a way to hide it using custom CSS.

Edited by mdmotiondesign
  • Solution
Posted (edited)

@EmailsSupportFrequently,

The first SS support response did in fact offer you a solution. He/she was directing you to the Custom CSS code option within the Style Editor.

What I did to remove the time from the Event list was to add the following code to the Events Settings > Advanced > Page Header Code Injection field. It hides the time element. I'm using the Five template. The class may be different for other themes. Just right click on the time in Chrome and choose "Inspect Element" to find the "class" code for the time text.


<style>
 .eventlist-meta-time {display: none !important;}
</style>

Edited by Mixtus Media
Posted (edited)

EDIT: This is a method to remove a single time from an events list without removing all times from the list. This is not how you would hide the time from all events.

I believe I have this solved (somewhat), however, it requires jQuery. It works by using a "unique" time to target and then add a custom class to it. Then, we hide that class and thus, hide the time. The custom time I've used is 1:23am -- so any event you want to hide the time on, you set the start time to that value. Unfortunately, if you have an event that starts at that exact time, this won't work.

This is for the FIVE template, I'm not positive if it works for other templates.

To install jQuery to your site, go to 'Manage Site' (gear icon) > 'Settings' > 'Code Injection' and paste this into the 'Header'


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Next, go to your Events page, and go to 'Events Settings' > 'Advanced' and paste this into the 'Page Header Code Injection'


<script>
$( document ).ready(function() {
 $('.eventlist-meta-time:contains("1:23am")').addClass('hideTime');
});
</script>

Lastly, go to your Custom CSS section, and paste this:


.hideTime { display: none !important; }

Now, as I mentioned above, in order for this to work, the event start time must match the value in the 'contains(" ") -- this can be changed to whatever time you want, but make sure you set the times of the events to match.

Another thing to consider is that the time might show up in other places -- I have turned off the 'Event Date Label Time' in the 'Style Editor' (under 'Event Styles').

Another place where the time will show up is in the 'Calendar block' -- I decided to hide this for all events (aesthetically, I prefer them hidden) -- to do this, you would add this to your custom CSS:


.sqs-block.calendar-block .yui3-calendar-day .event-menu .event-time-group .event-time { display: none; }

This isn't a perfect solution, obviously, and I hope SQSP adds a 'hide time' and 'all day' event options -- as well as 'repeating events'.

Edited by kale
Clarified what this is for.
Posted

Not sure why I was down voted -- perhaps because I didn't specify that this was to remove a single time from the events lists without removing all times.

  • 3 months later...
Posted (edited)

What I did on mine was removed all the time using CSS, then manually added time to the ones I wanted.


<style>
.event-time-12hr {display: none !important}
</style>

Then, for the ones that you want time to be shown, put it in the title. Here’s an example:


Title Goes Here <br> 10:10AM

You can use HTML br tag in the event title

The HTML tag <br> is a break which puts the time on a line underneath the Title.

Edited by tazmeah
  • 3 months later...
  • 2 months later...
  • 6 months later...
Posted

To remove the time and date from one event item you can use this code in teh custom CSS editor:


.eventitem-meta-time,
.eventitem-meta-date { display: none !important; }

  • 11 months later...
  • 1 year later...
  • 4 months later...
Posted

This works great, but the time still appears in a summary display I have elsewhere on the site. I used your 1:23AM option, so it looks odd in this summary view that some events appear to begin at 1:23. Any way of making certain times invisible in the summary module?

  • 9 months later...
Posted

This is too sophisticated for me. I don't know what Custom CSS code means, or what the Five template is, or how to get to the place to do this. More details please?

  • 2 years later...
Posted

@Mixtus thank you. That removed the time from the event list but it still shows in the detail page when you click on the photo. Any suggestions to fix that?

Screen Shot 2021-09-11 at 3.31.19 PM.png

Screen Shot 2021-09-11 at 3.31.09 PM.png

  • 1 year later...
Posted

Are there any updates for this?
I have multiple events that are spanning multiple days and I just want to remove the time from all event posts. Right now I have sticky CSS applied to the sidebar section (shown below) and I am wondering if that is interfering with the code I am trying to apply. I'd also like to remove the "Back to All Events" link on all event pages. If none of this is possible can I change the layout of the event page instead? I'd rather it display as a grid than a list. Or maybe there is some kind of plugin. ANY HELP IS APPRECIATED. @tuanphan ?

CODE FOR STICKY SIDEBAR EVENT INFO: 

/*sticky sidebar event info*/
.eventitem-title {position:sticky!important; top: 20vh!important}

.eventitem-meta{position:sticky!important; top: 30vh!important}

.event-meta-addtocalendar-container.eventitem-meta{position: sticky!important; top: 38vh!important}

/*event calendar buttons*/
/*this code removes the divider line*/
.eventlist-meta-export-divider, .eventitem-meta-export-divider, 
 [data-content-field="categories"]{
 display:none
}
/*this code adds some space to the top*/ 
.eventlist-meta-export {margin-top:2rem!important}

/*this code is for the Google link*/
.eventlist-meta-export-google, .eventitem-meta-export-google{
 background:#D7D8DA; 
 padding: .35rem; 
 border-radius:.25rem 

 .eventlist-meta-export-google:hover, 
.eventitem-meta-export-google:hover{ 
 background:#efefef; 
}
/*this code is for the iCal link*/
.eventlist-meta-export-ical, .eventitem-meta-export-ical{
 background:#D7D8DA; 
 padding: .35rem; 
 border-radius:.25rem; 

 .eventlist-meta-export-ical:hover, 
.eventitem-meta-export-ical:hover{
 background:#efefef; 
}

THIS IS THE CODE I'VE USED TO REMOVE THE TIME DETAILS (not working): 

.eventlist-meta-time {display: none !important;}

image.png.eae4b793bfafe3f79615b5f924aa1ba6.png

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.