Merge pull request #104 from UTDNebula/calendar-for-apple-outlook

Instructions to subscribe for Apple/Outlook

Author: nl32

src/app/resources/calendar/CopyInput.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import React from 'react';
+
+interface Props {
+  href: string;
+}
+
+export default function CopyInput(props: Props) {
+  return (
+    <input
+      type="text"
+      className="w-full bg-cornflower-50 border-2 border-royal px-2 py-1 rounded"
+      value={props.href}
+      readOnly
+      onFocus={(e) => {
+        e.target.select();
+      }}
+    />
+  );
+}

src/app/resources/calendar/error.tsx

@@ -2,16 +2,21 @@
 
 import React from 'react';
 
+import Header from '@/components/Header';
+
 export default function Error() {
   const buttonLinkClasses =
     'hover:scale-105 active:scale-95 transition duration-300 ease-in-out px-4 py-2 rounded-lg cursor-pointer hover:bg-royal hover:text-white border-royal border-2';
 
   return (
-    <div className="px-8 lg:px-16 xl:px-32 flex flex-col items-center gap-4">
-      <h2 className="text-5xl font-bold text-center">Error loading calendar</h2>
-      <button className={buttonLinkClasses} onClick={() => location.reload()}>
-        Reload
-      </button>
-    </div>
+    <>
+      <Header text="Calendar" />
+      <h2 className="px-8 lg:px-16 xl:px-32 text-2xl text-center mb-12">Error loading calendar</h2>
+      <div className="px-8 lg:px-16 xl:px-32 mb-12 flex justify-center gap-2 flex-wrap">
+        <button className={buttonLinkClasses} onClick={() => location.reload()}>
+          Reload
+        </button>
+      </div>
+    </>
   );
 }

src/app/resources/calendar/loading.tsx

@@ -39,9 +39,10 @@ export default function Loading() {
   return (
     <>
       <Header text="Calendar" />
-      <h2 className="px-8 lg:px-16 xl:px-32 text-2xl text-center mb-12">
+      <h2 className="px-8 lg:px-16 xl:px-32 text-2xl text-center mb-2">
         Stop by any of our events to learn more about becoming a new member!
       </h2>
+      <p className="px-8 lg:px-16 xl:px-32 text-center mb-8">Times in CT.</p>
       <div className="px-8 lg:px-16 xl:px-32 mb-12 flex justify-center gap-2 flex-wrap">
         <a
           className={buttonLinkClasses}
@@ -51,12 +52,7 @@ export default function Loading() {
         >
           Subscribe in Google Calendar
         </a>
-        <a
-          className={buttonLinkClasses}
-          href="https://calendar.google.com/calendar/ical/c_81b7102868d4acac8b7db3a18de6440d45740e4754be4f8a28a5c3915b0d1e71%40group.calendar.google.com/public/basic.ics"
-        >
-          Subscribe with iCal
-        </a>
+        <button className={buttonLinkClasses}>Subscribe in Apple/Outlook</button>
         <a
           className={buttonLinkClasses}
           target="_blank"

src/app/resources/calendar/page.tsx

@@ -9,6 +9,7 @@ import Footer from '@/components/Footer';
 import Header from '@/components/Header';
 import fetchCalendar from '@/lib/fetchCalendar';
 
+import CopyInput from './CopyInput';
 import Error from './error';
 
 // Do not cache
@@ -233,12 +234,9 @@ export default async function Calendar() {
         >
           Subscribe in Google Calendar
         </a>
-        <a
-          className={buttonLinkClasses}
-          href="https://calendar.google.com/calendar/ical/c_81b7102868d4acac8b7db3a18de6440d45740e4754be4f8a28a5c3915b0d1e71%40group.calendar.google.com/public/basic.ics"
-        >
-          Subscribe with iCal
-        </a>
+        <button className={buttonLinkClasses} popoverTarget="ics-cal-popover">
+          Subscribe in Apple/Outlook
+        </button>
         <a
           className={buttonLinkClasses}
           target="_blank"
@@ -250,6 +248,26 @@ export default async function Calendar() {
       </div>
       <div className="px-8 lg:px-16 xl:px-32 flex flex-col items-center">{result}</div>
       <Footer />
+      <div
+        popover="auto"
+        id="ics-cal-popover"
+        className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white rounded-xl p-4 w-[80vw] max-w-[90vw]"
+      >
+        <h3 className="text-xl font-bold mb-2 text-center">Instructions</h3>
+        <p className="mb-1">
+          <b>Apple Calendar on Mac</b>: File &gt; New Calendar Subscription... &gt; Paste in the
+          URL.
+        </p>
+        <p className="mb-1">
+          <b>Apple Calendar on iOS</b>: Calendars &gt; Add Calendar &gt; Add Subscription Calendar
+          &gt; Paste in the URL.
+        </p>
+        <p className="mb-4">
+          <b>Outlook Calendar on Desktop</b>: Add calendar &gt; Subscribe from web &gt; Paste in the
+          URL.
+        </p>
+        <CopyInput href="webcal://calendar.google.com/calendar/ical/c_81b7102868d4acac8b7db3a18de6440d45740e4754be4f8a28a5c3915b0d1e71%40group.calendar.google.com/public/basic.ics" />
+      </div>
     </>
   );
 }

src/styles/globals.css

@@ -83,4 +83,9 @@
   .text-shadow {
     text-shadow: 0 0 4px rgb(0 0 0 / 0.4);
   }
+
+  :popover-open::backdrop {
+    background-color: rgba(0, 0, 0, 0.2);
+    backdrop-filter: blur(5px);
+  }
 }