Merge pull request #253 from ucsdds3/215-create-way-for-users-to-sync…

…-to-local-calendar

Added button which allows the creation of an event in the user's calendar

src/lib/calendarInterfaces.ts

@@ -41,6 +41,7 @@ interface CleanEvent {
     title: string,
     date: string,
     time: string,
+    dateTime: string,
     image?: string,
     location: {
         mapsLocation?: string,

src/routes/events/+page.server.ts

@@ -48,6 +48,7 @@ function handleGoogleCalendarResponse(raw: GoogleCalendarResponse): CleanEvent[]
             title: event['summary'].replaceAll("[autogen]", ""),
             date: dtString[0],
             time: dtString[1],
+            datetime: dateToRFC5545(event["start"]["dateTime"],event["end"]["dateTime"]),
             location: {
                 mapsLocation: (event["location"]) ? event["location"].trim() : undefined,
                 roomLocation: (parsed) ? parsed["roomLocation"] : undefined
@@ -63,6 +64,13 @@ function handleGoogleCalendarResponse(raw: GoogleCalendarResponse): CleanEvent[]
     return cleanedEvents
 }
 
+function dateToRFC5545(start: string, end: string): string {
+    start = new Date(start).toISOString().replace(/-|:/g, "")
+    end = new Date(end).toISOString().replace(/-|:/g, "")
+
+    return start + "/" + end
+}
+
 
 export async function load()  {
 

src/routes/events/eventCard.svelte

@@ -76,6 +76,20 @@
                             <button class="reg disabled" disabled>Register</button>
                         </div>
                     {/if}
+                    {#if event.location.roomLocation != undefined}
+                    <span>
+                        <div id="button-wrapper">
+                            <a href="https://calendar.google.com/calendar/u/0/r/eventedit?text={event.title}&dates={event.dateTime}&details={eventDescription}&location={event.location.roomLocation}" rel="external noreferrer" target="_blank" style="text-decoration:none">Add to Calendar</a>
+                        </div>
+                    </span>
+                    {:else}
+                    <span>
+                        <div id="button-wrapper">
+                            <a href="https://calendar.google.com/calendar/u/0/r/eventedit?text={event.title}&dates={event.dateTime}&details={eventDescription}" rel="external noreferrer" target="_blank" style="text-decoration:none">Add to Calendar</a>
+                        </div>
+                    </span>
+                    {/if}
+
                     <div id="modal-spacer">.</div>
                 </div>
             </div>
@@ -228,6 +242,25 @@
         width: 100%;
         display: inline-block;
     }
+    #button-wrapper a {
+        background-color: var(--ds3-orange);
+        display: inline-block;
+        border: none;
+        font-size: 1.5vh;
+        font-weight: bold;
+        padding: 1.5% 4%;
+        color: white;
+        border-radius: 5px;
+        text-align: center; 
+        display: inline-block;
+        align-items: center;
+        width: auto;
+        margin-top: 1.5vh;
+    }
+    #button-wrapper a:hover {
+        cursor: pointer;
+        background-color: var(--ds3-orange-lighten);
+    }
     #button-wrapper button {
         background-color: var(--ds3-orange);
         display: inline-block;