How to add Google Calendar to Squarespace

I often see two cases where people need to add Google Calendar to Squarespace.

Add it as a block
Add it as a lightbox (click a button >> show Google Calendar in a Lightbox/Popup)

Table of Contents

A. Add Google Calendar as a block

#1. First, you need to get Google Calendar Embed code. Something like this.

#2. Add a Code Block

#3. Paste Google Calendar embed code to Code Block

#4. Save and see the result. You will have something like this.

or a button with a lightbox when clicking it.

B. Add Google Calendar as a Lightbox/Popup

It means, that when the user clicks the Header button (or Button Block or any buttons) will open Google Calendar in a Popup/Lightbox. In this case, I will use the Header button.

#1. Add your Google Calendar Embed code to the Code Injection – Footer. Something like this

#2. Use this code to Custom CSS box

button.qxCTlb {
    position: fixed;
    opacity: 0;
    transform: translateX(-1000px);
}

#3. Use this code to Code Injection Footer, under the #1 code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).on('click', 'header#header a.btn', function(event) { 
    event.preventDefault(); 
    $('button.qxCTlb').click(); 
});
</script>

#4. Edit Header button > Make sure this option “Open link in New Tab” is disabled. With the URL, you can enter any URL.

#5. Result

When clicking the Header button > Google Calendar Popup will appear.