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