Add to Calendar Button

Add an "Add to Calendar" button on your page

HTML/Javascript

<!-- AllThingsGHL - Add to Calendar Embed -->
<div id="addToCalendarButton" style="position: relative; text-align: center;">
    <button onclick="toggleDropdown(event)" class="calendar-btn">Add to Calendar</button>
    <div id="calendarDropdownContent" class="dropdown">
        <a href="#" onclick="addToCalendar('google')" class="calendar-link">Google Calendar</a>
        <a href="#" onclick="addToCalendar('apple')" class="calendar-link">Apple Calendar</a>
        <a href="#" onclick="addToCalendar('outlook')" class="calendar-link">Outlook Calendar</a>
        <a href="#" onclick="addToCalendar('office365')" class="calendar-link">Office 365 Calendar</a>
        <a href="#" onclick="addToCalendar('yahoo')" class="calendar-link">Yahoo Calendar</a>
    </div>
</div>
<style>
  .calendar-btn{
  background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    border: none;
    font-size: 18px;
    font-family: Lato, Helvetica, sans-serif;
  }
  .dropdown{
  display: none; 
   position: absolute; 
   top: calc(100% + 5px); 
   left: 30%; 
   background-color: #f9f9f9; 
   border-radius: 5px; 
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 
   z-index: 1;
   font-size: 18px;
   font-family: Lato, Helvetica, sans-serif;
  }
  .calendar-link{
  text-decoration: none; 
  color: #333; 
  padding: 5px 10px; 
  display: block;
  text-align:left;
  }
  .calendar-link:hover{
  background-color:#ecf5fd;
  color:#1c75cf;
  }
</style>
<script>
    var eventDetails = {
        startDate: "2024-12-23T10:00:00", //YY-MM-DD 24-hour time notation
        endDate: "2024-12-23T17:00:00", //YY-MM-DD 24-hour time notation
        timeZone: "America/New_York", // Example: "America/New_York"
        location: "https://zoom.com",
        title: "My Awesome Event Title",
        description: "This is the description for my awesome event"
    };

    function toggleDropdown(event) {
        var dropdownContent = document.getElementById("calendarDropdownContent");
        if (dropdownContent.style.display === "block") {
            dropdownContent.style.display = "none";
        } else {
            dropdownContent.style.display = "block";
        }
        event.stopPropagation(); // Prevents the click event from bubbling up to the body
    }

    // Hide dropdown when clicking outside of it
    document.body.addEventListener('click', function() {
        var dropdownContent = document.getElementById("calendarDropdownContent");
        dropdownContent.style.display = 'none';
    });

    function formatDate(date) {
        return date.replace(/[-:]/g, '');
    }

    function addToCalendar(calendarType) {
        var url;
        var formattedStartDate = formatDate(eventDetails.startDate);
        var formattedEndDate = formatDate(eventDetails.endDate);

        switch (calendarType) {
            case 'google':
                url = "https://calendar.google.com/calendar/render?action=TEMPLATE&dates=" + encodeURIComponent(formattedStartDate + "/" + formattedEndDate) + "&location=" + encodeURIComponent(eventDetails.location) + "&text=" + encodeURIComponent(eventDetails.title) + "&details=" + encodeURIComponent(eventDetails.description) + "&ctz=" + encodeURIComponent(eventDetails.timeZone);
                break;
            case 'apple':
                url = "data:text/calendar;charset=utf8,BEGIN:VCALENDAR%0D%0AVERSION:2.0%0D%0ABEGIN:VEVENT%0D%0ADTSTART:" + encodeURIComponent(formattedStartDate) + "%0D%0ADTEND:" + encodeURIComponent(formattedEndDate) + "%0D%0ASUMMARY:" + encodeURIComponent(eventDetails.title) + "%0D%0ADESCRIPTION:" + encodeURIComponent(eventDetails.description) + "%0D%0ALOCATION:" + encodeURIComponent(eventDetails.location) + "%0D%0AEND:VEVENT%0D%0AEND:VCALENDAR";
                break;
            case 'outlook':
                url = "https://outlook.live.com/owa/?path=/calendar/action/compose&rru=addevent&startdt=" + encodeURIComponent(formattedStartDate) + "&enddt=" + encodeURIComponent(formattedEndDate) + "&subject=" + encodeURIComponent(eventDetails.title) + "&location=" + encodeURIComponent(eventDetails.location) + "&body=" + encodeURIComponent(eventDetails.description);
                break;
            case 'office365':
                url = "https://outlook.office.com/calendar/0/deeplink/compose?startdt=" + encodeURIComponent(formattedStartDate) + "&enddt=" + encodeURIComponent(formattedEndDate) + "&subject=" + encodeURIComponent(eventDetails.title) + "&location=" + encodeURIComponent(eventDetails.location) + "&body=" + encodeURIComponent(eventDetails.description);
                break;
            case 'yahoo':
                url = "https://calendar.yahoo.com/?v=60&view=d&type=20&title=" + encodeURIComponent(eventDetails.title) + "&st=" + encodeURIComponent(formattedStartDate) + "&et=" + encodeURIComponent(formattedEndDate) + "&desc=" + encodeURIComponent(eventDetails.description) + "&in_loc=" + encodeURIComponent(eventDetails.location);
                break;
            default:
                console.error("Invalid calendar type.");
                return;
        }
        window.open(url, "_blank");
    }
</script>

Instructions

1. Create a Custom HTML/Javascript element on a 3 column row (centered)

2. Paste above HTML/Javascript code into element.

3. Edit Event date details in code snippet

4. Save