Add a Google Meet join button on calendar events with one

Author: AaronC81

static/calendar.css

@@ -14,6 +14,7 @@
     --cal-cell-today-disabled: #b0a8b9;
     --cal-primary: #443752;
     --cal-cover: #000000ad;
+    --cal-info-padding: 10px;
 
     font-size: 14px;
 }
@@ -122,7 +123,7 @@
     width: 300px;
     background-color: white;
     border: 1px solid black;
-    padding: 10px;
+    padding: var(--cal-info-padding);
     z-index: 999;
     word-wrap: break-word;
     white-space: normal;
@@ -140,6 +141,23 @@
     text-align: unset;
 }
 
+#calendar #calendar-info #calendar-join-button {
+    display: block;
+    margin-top: 10px;
+    padding: 5px;
+    text-align: center;
+
+    /* width: 100% will spill over the right padding, so use ✨calc magic✨ */
+    width: calc(100% - var(--cal-info-padding));
+
+    background-color: var(--cal-primary);
+    color: white;
+}
+
+#calendar #calendar-info #calendar-join-button.hidden {
+    display: none;
+}
+
 #calendar #calendar-info #calendar-info-where, #calendar #calendar-info #calendar-info-when {
     display: inline-block;
     margin-top: 5px;

static/js/calendar.js

@@ -249,6 +249,16 @@ function displayInfoPanel(target, event) {
     while (desc.firstChild.nodeName.toLowerCase() == "br") {
         desc.removeChild(desc.firstChild);
     }
+
+    // Only show the "Join Meeting" box if there's a meeting to join, and set
+    // the correct href
+    const meetingButton = document.getElementById('calendar-join-button');
+    if (event.meeting_link) {
+        meetingButton.href = event.meeting_link;
+        meetingButton.classList.remove("hidden");
+    } else {
+        meetingButton.classList.add("hidden");
+    }
 }
 
 /**

templates/calendar.handlebars

@@ -50,6 +50,7 @@
       <b id="calendar-info-when"></b>
       <br>
       <b id="calendar-info-where"></b>
+      <a href="#" id="calendar-join-button" class="hidden">Join Google Meet</a>
       <div id="calendar-info-description"></div>
     </div>
   </div>