How to turn Event Calendar Links into Buttons

Apr 4

This tutorial was recorded in Squarespace 7.1 and will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes

If you’re a Squarespacer who wants to make your website events look just as flashy and modern as those of the savviest web developers, then I’ve got some exciting news for you! With just a few lines of code and a bit of legwork, it's possible to add “additional flare" to your Google and iCal event links on Squarespace.

Turn those simple text links into shiny call-to-action buttons with an extra pop that draw visitors in so they’ll remember to add the event to their calendar!

In this tutorial, you’ll learn how to customize the Google and iCal event links in Squarespace into buttons using CSS.

The codes from this tutorial are below, but be sure to watch the video first so you’ll understand how to use them!

Here are the codes we used in the video:

Be sure to change the example text to your own, updating the color codes so it matches the rest of your site.

Remember, this changes the link on both the list AND the individual event page! 😉

/*This code removes the divider line */

.eventlist-meta-export-divider, .eventitem-meta-export-divider,
[data-content-field="categories"]{
display:none
}

/* This code add some space to the top /

.eventlist-meta-export {margin-top:1rem!important}

/* This code is for the iCal link */

.eventlist-meta-export-ical, .eventitem-meta-export-ical{
background:#e5f5f6;
padding: .5rem;
border-radius:1rem;
}
.eventlist-meta-export-ical:hover,
.eventitem-meta-export-ical:hovere{
background:#efefef;
}

/* This code is for the Google link */

.eventlist-meta-export-google, .eventitem-meta-export-google{
background:#F6EDCE;
padding: .5rem;
border-radius:1rem
}
.eventlist-meta-export-google:hover,
.eventitem-meta-export-google:hover{
background:#efefef;
}

How to install this code:

If you want this to happen on every event on your website, paste your code in your main file.

Navigate to Design and then select Custom CSS here.

If you already have code there, that’s okay; Just add this to a new line under your existing code!

If you want to add it to all of the events in a specific list, click on the gear next to the event list, and select the Advanced menu option.

Here you can paste the code under the Page Header Code Injection by placing it between two style brackets, like this:

<style>
/*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:1rem!important}

/* This code is for the iCal link */
.eventlist-meta-export-ical, .eventitem-meta-export-ical{
background:#e5f5f6;
padding: .5rem;
border-radius:1rem;
}
.eventlist-meta-export-ical:hover,
.eventitem-meta-export-ical:hovere{
background:#efefef;
}

/* This code is for the Google link */
.eventlist-meta-export-google, .eventitem-meta-export-google{
background:#F6EDCE;
padding: .5rem;
border-radius:1rem
}
.eventlist-meta-export-google:hover,
.eventitem-meta-export-google:hover{
background:#efefef;
}
</style>

You can add this code to an individual event by using a code block.

While in edit mode on that event, add a code block to the bottom of the post and paste your code there, using style brackets, like this:

<style>
/*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:1rem!important}
/* This code is for the iCal link */
.eventlist-meta-export-ical, .eventitem-meta-export-ical{
background:#e5f5f6;
padding: .5rem;
border-radius:1rem;
}
.eventlist-meta-export-ical:hover,
.eventitem-meta-export-ical:hovere{
background:#efefef;
}
/* This code is for the Google link */
.eventlist-meta-export-google, .eventitem-meta-export-google{
background:#F6EDCE;
padding: .5rem;
border-radius:1rem
}
.eventlist-meta-export-google:hover,
.eventitem-meta-export-google:hover{
background:#efefef;
}
</style>

Congratulations - you’ve turned those Google and iCal links into a great looking button!

All in all, making Google and iCal event links into buttons on Squarespace is a great way to make your site look less cluttered and more professional.

Plus, you can take advantage of the incredible benefits of using a calendar link with your website.

Not only do they make it easier to keep track of events and appointments, but they also provide users with quick access to the information they need.

I have a few other tutorials on how to customize your events available on my website; Here are links to some related tutorial videos you can try:

The Easy Way To Add a Time Zone To Events in Squarespace

https://insidethesquare.co/squarespace-tutorials/event-time-zone

How to keep event info visible on a scroll in Squarespace

https://insidethesquare.co/squarespace-tutorials/sticky-event-info