From 9e37980eea7d9459d7a84073824c149ee9149873 Mon Sep 17 00:00:00 2001
From: Dom Brassey <dombrassey@gmail.com>
Date: Sat, 6 Jul 2024 21:43:01 +0100
Subject: [PATCH] multiple calendars working

---
 index.html                 | 10 +++++++---
 script/scriptEventLists.js | 22 ++++++++++++++++++++++
 style/style.css            | 12 ++++++------
 3 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index 0ff728d..3b604af 100644
--- a/index.html
+++ b/index.html
@@ -96,18 +96,22 @@ <h3>SS</h3>
     <!-- Upcoming Events -->
     <a href='https://calendar.google.com/calendar/u/0/embed?src=ccpaedu.com_ftu0la54kio0crhh83m267lri8@group.calendar.google.com&ctz=America/Los_Angeles&mode=AGENDA' class="lowkey" target="_blank">
       <div class="py-2 d-flex flex-column flex-sm-row container-fluid" id="events">
-        <div class="flex-fill col-12 col-sm-4 pl-12 pt-2">
+        <div class="flex-fill col-12 col-sm-3 pl-sm-3 pt-2">
           <h2>Student Holidays:</h2>
           <ul id="events-student-holiday"></ul>
         </div>
-        <div class="flex-fill col-12 col-sm-4 pt-2">
+        <div class="flex-fill col-12 col-sm-3 pt-2">
           <h2>Student Activities:</h2>
           <ul id="events-student-activities"></ul>
         </div>
-        <div class="flex-fill col-12 col-sm-4 pt-2">
+        <div class="flex-fill col-12 col-sm-3 pt-2">
           <h2>Dates to Note:</h2>
           <ul id="events-student-non-holiday"></ul>
         </div>
+        <div class="flex-fill col-12 col-sm-3 pt-2">
+          <h2>Opportunities:</h2>
+          <ul id="events-student-opps"></ul>
+        </div>
       </div>
     </a>
 
diff --git a/script/scriptEventLists.js b/script/scriptEventLists.js
index f4eb528..533bd77 100644
--- a/script/scriptEventLists.js
+++ b/script/scriptEventLists.js
@@ -76,6 +76,8 @@ $(document).ready(function () {
           item.name.search("playoffs") != -1
         ) {
           item.eventType = "studentActivity";
+        } else if (item.name.search("\\(Free") != -1) {
+          item.eventType = "opportunity";
         } else {
           item.eventType = "event";
         }
@@ -129,6 +131,7 @@ function showEvents(eventsArray) {
   let eHoliday = [];
   let eStudAct = [];
   let eEvent = [];
+  let eOpps = [];
   for (i in eventsArray) {
     // Collect only future events
     if (eventsArray[i].beg > dateToday) {
@@ -138,6 +141,9 @@ function showEvents(eventsArray) {
       } else if (eventsArray[i].eventType == "event") {
         // Collect future non-holidays:
         eEvent.push(eventsArray[i]);
+      } else if (eventsArray[i].eventType == "opportunity") {
+        // Collect future opps:
+        eOpps.push(eventsArray[i]);
       } else {
         eStudAct.push(eventsArray[i]);
       }
@@ -147,6 +153,7 @@ function showEvents(eventsArray) {
   let textHolidays = "";
   let textEvents = "";
   let textStudActs = "";
+  let textOpps = "";
 
   for (x in eHoliday) {
     textHolidays +=
@@ -189,9 +196,24 @@ function showEvents(eventsArray) {
       eStudAct[z].description +
       "</p></li>";
   }
+  for (aa in eOpps) {
+    textOpps +=
+      "<li class='event-item'><strong>" + eOpps[aa].name + " </strong>";
+    textOpps +=
+      "<span class='event-date'>" +
+      eOpps[aa].beg.toLocaleString("en-US", {
+        weekday: "short",
+        month: "numeric",
+        day: "numeric",
+      }) +
+      "</span><br><p class='event-item-desc py-0'>" +
+      eOpps[aa].description +
+      "</p></li>";
+  }
   document.getElementById("events-student-holiday").innerHTML = textHolidays;
   document.getElementById("events-student-activities").innerHTML = textStudActs;
   document.getElementById("events-student-non-holiday").innerHTML = textEvents;
+  document.getElementById("events-student-opps").innerHTML = textOpps;
 }
 // Calendar show/hide onclick:
 let calendarIsVisible = null;
diff --git a/style/style.css b/style/style.css
index b77196a..74c5163 100644
--- a/style/style.css
+++ b/style/style.css
@@ -138,16 +138,16 @@ iframe {
   background-position: left 0.25em;
   background-size: 0.9em;
 }
-/* #events-student-holiday .event-item:nth-child(-n + 4) { */
-#events-student-holiday .event-item:nth-child(-n + 24) {
+#events-student-holiday .event-item:nth-child(-n + 4) {
   display: list-item;
 }
-/* #events-student-activities .event-item:nth-child(-n + 5) { */
-#events-student-activities .event-item:nth-child(-n + 25) {
+#events-student-activities .event-item:nth-child(-n + 5) {
   display: list-item;
 }
-/* #events-student-non-holiday .event-item:nth-child(-n + 5) { */
-#events-student-non-holiday .event-item:nth-child(-n + 25) {
+#events-student-non-holiday .event-item:nth-child(-n + 5) {
+  display: list-item;
+}
+#events-student-opps .event-item:nth-child(-n + 3) {
   display: list-item;
 }
 .event-item-desc {