Thanks to Ted and this post (read that post first as this is just an add on)
This is a slight update in that I used only ONE Text formula field as I used regexReplace to format the dates (replaced spaces with +). Also using a css button.
Created a text formula field and this is my formula
<a href="https://calendar.google.com/calendar/r/eventedit?text=regexReplace({Opportunity.Long Opp Name},\s,+)&dates=formatDate({Due Date}, YYYYMMDDTHHmmss)Z/formatDate({Due Date},YYYYMMDDTHHmmss)Z&details=regexReplace( {Note},\s,+)&location=home" target="_blank" class="calButton">Add to My <br />Google Calendar</a>
Notes
When a user clicks the link it opens the “add an event page” on your google calendar and (in this case) uses The opp name field as calendar event title and sets the calendar event date to the record due date field and copies the Note contents field to the body of the calendar invite.
I'm not concerned with start and finished dates so I just duplicated date
This class added to css to give a button
.calButton {
box-shadow:inset 0px 1px 0px 0px #d9fbbe;
background: rgb(127,147,68);
background: linear-gradient(171deg, rgba(127,147,68,1) 0%, rgba(159,179,102,1) 0%, rgba(203,218,156,1) 100%);
border-radius:24px;
border:1px solid rgb(127,147,68);
display:inline-block;
cursor:pointer;
color: white !important;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #86ae47;
}
