From 431da202034f7f6b73a9ab1a999820a53d86858c Mon Sep 17 00:00:00 2001
From: bledsoef <bledsoef@berea.edu>
Date: Thu, 14 Nov 2024 16:41:38 -0500
Subject: [PATCH 01/10] updating non chrome datepicker to use flatpickr

---
 app/static/js/createEvents.js         | 15 ++++++++-------
 app/templates/events/createEvent.html |  4 +++-
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/app/static/js/createEvents.js b/app/static/js/createEvents.js
index 615dc3841..7958c6aa2 100644
--- a/app/static/js/createEvents.js
+++ b/app/static/js/createEvents.js
@@ -415,13 +415,14 @@ $(".startDatePicker, .endDatePicker").change(function () {
 
   // everything except Chrome
   if (navigator.userAgent.indexOf("Chrome") == -1) {
-    $('input.timepicker').timepicker({
-      timeFormat: 'hh:mm p',
-      scrollbar: true,
-      dropdown: true,
-      dynamic: true,
-      minTime: "08:00am",
-      maxTime: "10:00pm"
+    flatpickr("input.timepicker", {
+      enableTime: true,
+      noCalendar: true,
+      dateFormat: "H:i",
+      time_24hr: false,
+      minTime: "08:00",
+      maxTime: "18:00",
+      minuteIncrement: 15
     });
     $(".timepicker").prop("type", "text");
     $(".timeIcons").prop("hidden", false);
diff --git a/app/templates/events/createEvent.html b/app/templates/events/createEvent.html
index 1acb1be90..d7deb4ff3 100644
--- a/app/templates/events/createEvent.html
+++ b/app/templates/events/createEvent.html
@@ -31,13 +31,15 @@
   {{super()}}
 <script type="module" src="/static/js/createEvents.js"></script>
 <script type="module" src="/static/js/displayFilesMacro.js"></script>
-<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
 {% endblock %}
 
 {% block styles %}
   {{super()}}
 <link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.0/css/fileinput.min.css" media="all"
   rel="stylesheet" type="text/css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
+
 <link rel="stylesheet" href="/static/css/createEvent.css">
 {% endblock %}
 

From d8d0da5a4bd0523069d56348bfb8dbb28c6039fa Mon Sep 17 00:00:00 2001
From: bledsoef <bledsoef@berea.edu>
Date: Fri, 15 Nov 2024 15:07:20 -0500
Subject: [PATCH 02/10] finalized flatpickr setup and made it dynamic so it
 gets added on each new multiple offering row

---
 app/static/js/createEvents.js         | 31 +++++++++++++++++----------
 app/templates/events/createEvent.html | 11 +++++-----
 2 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/app/static/js/createEvents.js b/app/static/js/createEvents.js
index 7958c6aa2..3a4b4e3ad 100644
--- a/app/static/js/createEvents.js
+++ b/app/static/js/createEvents.js
@@ -24,6 +24,7 @@ function updateDate(obj) {
 // turns a string with a time with HH:mm format to %I:%M %p format
 // used to display 12 hour format but still use 24 hour format in the backend
 function format24to12HourTime(timeStr) {
+  console.log("hi")
   var formattedTime;
   if (parseInt(timeStr.slice(0, 2)) > 12) {
     formattedTime = "0" + String(parseInt(timeStr.slice(0, 2)) - 12) + timeStr.slice(2) + " PM";
@@ -91,8 +92,20 @@ function isDateInPast(dateString) {
   return date < today;
 }
 
-function createOfferingModalRow({eventName=null, eventDate=null, startTime=null, endTime=null, isDuplicate=false}={}){
+function initializeFlatpickr(obj) {
+  flatpickr(obj, {
+    enableTime: true,
+    noCalendar: true,
+    dateFormat: "h:i K",
+    time_24hr: false,
+    minTime: "08:00",
+    maxTime: "22:00",
+    minuteIncrement: 15,
+    allowInput: true 
+  });
+}
 
+function createOfferingModalRow({eventName=null, eventDate=null, startTime=null, endTime=null, isDuplicate=false}={}){
   let clonedMultipleOffering = $("#multipleOfferingEvent").clone().removeClass('d-none').removeAttr("id");
   // insert values for the newly created row
   if (eventName) {clonedMultipleOffering.find('.multipleOfferingNameField').val(eventName)}
@@ -103,7 +116,10 @@ function createOfferingModalRow({eventName=null, eventDate=null, startTime=null,
 
   $("#multipleOfferingSlots").append(clonedMultipleOffering);
   pendingmultipleEvents.push(clonedMultipleOffering);
-
+  if (navigator.userAgent.indexOf("Chrome") == -1) {
+    initializeFlatpickr(clonedMultipleOffering.find('.multipleOfferingEndTime'))
+    initializeFlatpickr(clonedMultipleOffering.find('.multipleOfferingEndTime'))
+  }
   //this is so that the trash icon can be used to delete the event
   clonedMultipleOffering.find(".deleteMultipleOffering").on("click", function() {
     let attachedRow = $(this).closest(".eventOffering")
@@ -415,15 +431,8 @@ $(".startDatePicker, .endDatePicker").change(function () {
 
   // everything except Chrome
   if (navigator.userAgent.indexOf("Chrome") == -1) {
-    flatpickr("input.timepicker", {
-      enableTime: true,
-      noCalendar: true,
-      dateFormat: "H:i",
-      time_24hr: false,
-      minTime: "08:00",
-      maxTime: "18:00",
-      minuteIncrement: 15
-    });
+    initializeFlatpickr(".timepicker")
+    
     $(".timepicker").prop("type", "text");
     $(".timeIcons").prop("hidden", false);
 
diff --git a/app/templates/events/createEvent.html b/app/templates/events/createEvent.html
index d7deb4ff3..a01aebd40 100644
--- a/app/templates/events/createEvent.html
+++ b/app/templates/events/createEvent.html
@@ -35,12 +35,10 @@
 {% endblock %}
 
 {% block styles %}
-  {{super()}}
-<link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.0/css/fileinput.min.css" media="all"
+  {{super()}} <link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-fileinput@5.5.0/css/fileinput.min.css" media="all"
   rel="stylesheet" type="text/css" />
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
-
-<link rel="stylesheet" href="/static/css/createEvent.css">
+  <link rel="stylesheet" href="/static/css/createEvent.css">
 {% endblock %}
 
 {% block app_content %}
@@ -110,7 +108,7 @@ <h1 id="pageTitle">{{page_title}}</h1>
         <input autocomplete="off" type="time" class="form-control timepicker startTime" value="{{startTime}}"
           name="timeStart" aria-describedby="timeIcon1" placeholder="Pick a start time" id="startTime-{{pageLocation}}"
           data-page-location="{{pageLocation}}" required />
-        <span class="input-group-text timeIcons" id="timeIcon1-{{pageLocation}}" hidden><i
+        <span class="input-group-text timeIcons" id="timeIcon1-{{pageLocation}}" data-td-target="#startTime-{{pageLocation}}" hidden><i
             class="bi bi-clock"></i></span>
       </div>
     </div>
@@ -500,7 +498,8 @@ <h5 class="modal-title">This is an event with multiple time offerings.</h5>
               <input autocomplete="off" type="time" class="form-control timepicker multipleOfferingStartTime"
                 value="{{startTime}}" name="timeStart" aria-describedby="timeIcon1" placeholder="Pick a start time"
                 id="multipleOfferingStartTime-{{pageLocation}}" data-page-location="{{pageLocation}}" required />
-              <span class="input-group-text timeIcons" id="timeIcon1-{{pageLocation}}" hidden><i
+              <span class="input-group-text timeIcons" id="timeIcon1-{{pageLocation}}"
+              hidden><i
                   class="bi bi-clock"></i></span>
             </div>
           </div>

From 7b1cc84ce27fba433d7991993a147b1dfa24c78c Mon Sep 17 00:00:00 2001
From: bledsoef <bledsoef@berea.edu>
Date: Tue, 19 Nov 2024 14:52:25 -0500
Subject: [PATCH 03/10] fixed datepickr

---
 app/static/js/createEvents.js         |  6 ++----
 app/templates/events/createEvent.html | 20 ++++++++++----------
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/app/static/js/createEvents.js b/app/static/js/createEvents.js
index 3a4b4e3ad..237d0e625 100644
--- a/app/static/js/createEvents.js
+++ b/app/static/js/createEvents.js
@@ -24,7 +24,6 @@ function updateDate(obj) {
 // turns a string with a time with HH:mm format to %I:%M %p format
 // used to display 12 hour format but still use 24 hour format in the backend
 function format24to12HourTime(timeStr) {
-  console.log("hi")
   var formattedTime;
   if (parseInt(timeStr.slice(0, 2)) > 12) {
     formattedTime = "0" + String(parseInt(timeStr.slice(0, 2)) - 12) + timeStr.slice(2) + " PM";
@@ -117,8 +116,7 @@ function createOfferingModalRow({eventName=null, eventDate=null, startTime=null,
   $("#multipleOfferingSlots").append(clonedMultipleOffering);
   pendingmultipleEvents.push(clonedMultipleOffering);
   if (navigator.userAgent.indexOf("Chrome") == -1) {
-    initializeFlatpickr(clonedMultipleOffering.find('.multipleOfferingEndTime'))
-    initializeFlatpickr(clonedMultipleOffering.find('.multipleOfferingEndTime'))
+    initializeFlatpickr(clonedMultipleOffering.find('.flatpickr'))
   }
   //this is so that the trash icon can be used to delete the event
   clonedMultipleOffering.find(".deleteMultipleOffering").on("click", function() {
@@ -431,7 +429,7 @@ $(".startDatePicker, .endDatePicker").change(function () {
 
   // everything except Chrome
   if (navigator.userAgent.indexOf("Chrome") == -1) {
-    initializeFlatpickr(".timepicker")
+    initializeFlatpickr(".flatpickr")
     
     $(".timepicker").prop("type", "text");
     $(".timeIcons").prop("hidden", false);
diff --git a/app/templates/events/createEvent.html b/app/templates/events/createEvent.html
index a01aebd40..a193f6573 100644
--- a/app/templates/events/createEvent.html
+++ b/app/templates/events/createEvent.html
@@ -99,32 +99,32 @@ <h1 id="pageTitle">{{page_title}}</h1>
   <div class="row col-md-12">
     <div class="form-group col-md-6">
       <label class="form-label me-2" for="startTime-{{pageLocation}}"><strong>Start Time</strong></label>
-      <div class="input-group">
+      <div class="input-group flatpickr">
         {% if eventData.timeStart %}
           {% set startTime = eventData.timeStart %}
         {% else %}
           {% set startTime = "12:00" %}
         {% endif %}
         <input autocomplete="off" type="time" class="form-control timepicker startTime" value="{{startTime}}"
-          name="timeStart" aria-describedby="timeIcon1" placeholder="Pick a start time" id="startTime-{{pageLocation}}"
+          name="timeStart" aria-describedby="timeIcon1" placeholder="Pick a start time" data-input id="startTime-{{pageLocation}}"
           data-page-location="{{pageLocation}}" required />
-        <span class="input-group-text timeIcons" id="timeIcon1-{{pageLocation}}" data-td-target="#startTime-{{pageLocation}}" hidden><i
-            class="bi bi-clock"></i></span>
+        <a class="input-group-text timeIcons" id="timeIcon1-{{pageLocation}}" date-toggle data-td-target="#startTime-{{pageLocation}}" hidden><i
+            class="bi bi-clock"></i></a>
       </div>
     </div>
     <div class='form-group col-md-6'>
       <label class="form-label me-2" for="endTime-{{pageLocation}}"><strong>End Time</strong></label>
-      <div class="input-group">
+      <div class="input-group flatpickr">
         {% if eventData.timeEnd %}
           {% set endTime = eventData.timeEnd %}
         {%else%}
           {% set endTime = "13:00" %}
         {% endif %}
-        <input autocomplete="off" type="time" class="form-control timepicker endTime" value="{{endTime}}" name="timeEnd"
+        <input autocomplete="off" type="time" class="form-control timepicker endTime" date-input value="{{endTime}}" name="timeEnd"
           aria-describedby="timeIcon2" placeholder="Pick an end time" class="startTime" id="endTime-{{pageLocation}}"
           data-page-location="{{pageLocation}}" required />
-        <span class="input-group-text timeIcons" id="timeIcon2-{{pageLocation}}" hidden><i
-            class="bi bi-clock"></i></span>
+        <a class="input-group-text timeIcons" id="timeIcon2-{{pageLocation}}" data-toggle hidden><i
+            class="bi bi-clock"></i></a>
       </div>
     </div>
   </div>
@@ -489,7 +489,7 @@ <h5 class="modal-title">This is an event with multiple time offerings.</h5>
           <div class="form-group col-md-3">
             <label class="form-label me-2" for="multipleOfferingStartTime-{{pageLocation}}"><strong>Start
                 Time</strong></label>
-            <div class="input-group">
+            <div class="input-group flatpickr">
               {% if eventData.timeStart %}
                 {% set startTime = eventData.timeStart %}
               {% else %}
@@ -505,7 +505,7 @@ <h5 class="modal-title">This is an event with multiple time offerings.</h5>
           </div>
           <div class='form-group col-md-3'>
             <label class="form-label me-2" for="endTime-{{pageLocation}}"><strong>End Time</strong></label>
-            <div class="input-group pb-5">
+            <div class="input-group flatpickr pb-5">
               {% if eventData.timeEnd %}
                 {% set endTime = eventData.timeEnd %}
               {%else%}

From 1dee3c7224c23a16ec052e4a12304a952bbb437c Mon Sep 17 00:00:00 2001
From: bledsoef <bledsoef@berea.edu>
Date: Wed, 20 Nov 2024 15:06:56 -0500
Subject: [PATCH 04/10] fixed time picker, sad :( it was just a typo

---
 app/static/js/createEvents.js         | 11 +++++++++--
 app/templates/events/createEvent.html | 20 ++++++++++----------
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/app/static/js/createEvents.js b/app/static/js/createEvents.js
index 237d0e625..87699fce7 100644
--- a/app/static/js/createEvents.js
+++ b/app/static/js/createEvents.js
@@ -1,6 +1,5 @@
 import searchUser from './searchUser.js'
 let pendingmultipleEvents = []
-
 // updates max and min dates of the datepickers as the other datepicker changes
 // No need for / for Firefox compatiblity 
 function updateDate(obj) {
@@ -94,6 +93,7 @@ function isDateInPast(dateString) {
 function initializeFlatpickr(obj) {
   flatpickr(obj, {
     enableTime: true,
+    wrap: true,
     noCalendar: true,
     dateFormat: "h:i K",
     time_24hr: false,
@@ -116,7 +116,14 @@ function createOfferingModalRow({eventName=null, eventDate=null, startTime=null,
   $("#multipleOfferingSlots").append(clonedMultipleOffering);
   pendingmultipleEvents.push(clonedMultipleOffering);
   if (navigator.userAgent.indexOf("Chrome") == -1) {
-    initializeFlatpickr(clonedMultipleOffering.find('.flatpickr'))
+    initializeFlatpickr('#flatpickr')
+    $(".timepicker").prop("type", "text");
+    $(".timeIcons").prop("hidden", false);
+
+    var formattedStartTime = format24to12HourTime($(".multipleOfferingStartTime").prop("defaultValue"));
+    var formattedEndTime = format24to12HourTime($(".multipleOfferingEndTime").prop("defaultValue"));
+    $(".multipleOfferingStartTime").val(formattedStartTime);
+    $(".multipleOfferingEndTime").val(formattedEndTime);
   }
   //this is so that the trash icon can be used to delete the event
   clonedMultipleOffering.find(".deleteMultipleOffering").on("click", function() {
diff --git a/app/templates/events/createEvent.html b/app/templates/events/createEvent.html
index a193f6573..0ff4b19e4 100644
--- a/app/templates/events/createEvent.html
+++ b/app/templates/events/createEvent.html
@@ -108,7 +108,7 @@ <h1 id="pageTitle">{{page_title}}</h1>
         <input autocomplete="off" type="time" class="form-control timepicker startTime" value="{{startTime}}"
           name="timeStart" aria-describedby="timeIcon1" placeholder="Pick a start time" data-input id="startTime-{{pageLocation}}"
           data-page-location="{{pageLocation}}" required />
-        <a class="input-group-text timeIcons" id="timeIcon1-{{pageLocation}}" date-toggle data-td-target="#startTime-{{pageLocation}}" hidden><i
+        <a class="input-group-text timeIcons" id="timeIcon1-{{pageLocation}}" title="toggle" data-toggle data-td-target="#startTime-{{pageLocation}}" hidden><i
             class="bi bi-clock"></i></a>
       </div>
     </div>
@@ -120,10 +120,10 @@ <h1 id="pageTitle">{{page_title}}</h1>
         {%else%}
           {% set endTime = "13:00" %}
         {% endif %}
-        <input autocomplete="off" type="time" class="form-control timepicker endTime" date-input value="{{endTime}}" name="timeEnd"
+        <input autocomplete="off" type="time" class="form-control timepicker endTime" data-input value="{{endTime}}" name="timeEnd"
           aria-describedby="timeIcon2" placeholder="Pick an end time" class="startTime" id="endTime-{{pageLocation}}"
           data-page-location="{{pageLocation}}" required />
-        <a class="input-group-text timeIcons" id="timeIcon2-{{pageLocation}}" data-toggle hidden><i
+        <a class="input-group-text timeIcons" id="timeIcon2-{{pageLocation}}" title="toggle" data-toggle hidden><i
             class="bi bi-clock"></i></a>
       </div>
     </div>
@@ -496,26 +496,26 @@ <h5 class="modal-title">This is an event with multiple time offerings.</h5>
                 {% set startTime = "12:00" %}
               {% endif %}
               <input autocomplete="off" type="time" class="form-control timepicker multipleOfferingStartTime"
-                value="{{startTime}}" name="timeStart" aria-describedby="timeIcon1" placeholder="Pick a start time"
+                value="{{startTime}}" name="timeStart" aria-describedby="timeIcon1" data-input placeholder="Pick a start time"
                 id="multipleOfferingStartTime-{{pageLocation}}" data-page-location="{{pageLocation}}" required />
-              <span class="input-group-text timeIcons" id="timeIcon1-{{pageLocation}}"
+              <a class="input-group-text timeIcons" data-toggle id="timeIcon1-{{pageLocation}}"
               hidden><i
-                  class="bi bi-clock"></i></span>
+                  class="bi bi-clock"></i></a>
             </div>
           </div>
           <div class='form-group col-md-3'>
             <label class="form-label me-2" for="endTime-{{pageLocation}}"><strong>End Time</strong></label>
-            <div class="input-group flatpickr pb-5">
+            <div class="input-group flatpickr">
               {% if eventData.timeEnd %}
                 {% set endTime = eventData.timeEnd %}
               {%else%}
                 {% set endTime = "13:00" %}
               {% endif %}
               <input autocomplete="off" type="time" class="form-control timepicker multipleOfferingEndTime"
-                value="{{endTime}}" name="timeEnd" aria-describedby="timeIcon2" placeholder="Pick an end time"
+                value="{{endTime}}" name="timeEnd" aria-describedby="timeIcon2" data-input placeholder="Pick an end time"
                 id="multipleOfferingEndTime-{{pageLocation}}" data-page-location="{{pageLocation}}" required />
-              <span class="input-group-text timeIcons" id="timeIcon2-{{pageLocation}}" hidden><i
-                  class="bi bi-clock"></i></span>
+              <a class="input-group-text timeIcons" id="timeIcon2-{{pageLocation}}" title="toggle" data-toggle hidden><i
+                  class="bi bi-clock"></i></a>
             </div>
           </div>
           <div class="col-md-1 deleteMultipleOfferingWrapper">

From cced728af31041296a654eded73597d950d168db Mon Sep 17 00:00:00 2001
From: bledsoef <bledsoef@berea.edu>
Date: Wed, 20 Nov 2024 15:15:46 -0500
Subject: [PATCH 05/10] fixed multiple offering time pickers

---
 app/static/js/createEvents.js         | 2 +-
 app/templates/events/createEvent.html | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/static/js/createEvents.js b/app/static/js/createEvents.js
index 87699fce7..e2ad24f02 100644
--- a/app/static/js/createEvents.js
+++ b/app/static/js/createEvents.js
@@ -116,7 +116,7 @@ function createOfferingModalRow({eventName=null, eventDate=null, startTime=null,
   $("#multipleOfferingSlots").append(clonedMultipleOffering);
   pendingmultipleEvents.push(clonedMultipleOffering);
   if (navigator.userAgent.indexOf("Chrome") == -1) {
-    initializeFlatpickr('#flatpickr')
+    initializeFlatpickr('.flatpickr')
     $(".timepicker").prop("type", "text");
     $(".timeIcons").prop("hidden", false);
 
diff --git a/app/templates/events/createEvent.html b/app/templates/events/createEvent.html
index 0ff4b19e4..d21c6111b 100644
--- a/app/templates/events/createEvent.html
+++ b/app/templates/events/createEvent.html
@@ -498,7 +498,7 @@ <h5 class="modal-title">This is an event with multiple time offerings.</h5>
               <input autocomplete="off" type="time" class="form-control timepicker multipleOfferingStartTime"
                 value="{{startTime}}" name="timeStart" aria-describedby="timeIcon1" data-input placeholder="Pick a start time"
                 id="multipleOfferingStartTime-{{pageLocation}}" data-page-location="{{pageLocation}}" required />
-              <a class="input-group-text timeIcons" data-toggle id="timeIcon1-{{pageLocation}}"
+              <a class="input-group-text timeIcons" data-toggle title="toggle" id="timeIcon1-{{pageLocation}}"
               hidden><i
                   class="bi bi-clock"></i></a>
             </div>

From e67dce0beb62718971f9ed28234ae99ea4febc9f Mon Sep 17 00:00:00 2001
From: bledsoef <bledsoef@berea.edu>
Date: Wed, 20 Nov 2024 15:34:45 -0500
Subject: [PATCH 06/10] fixed multiple offering time pickers once more

---
 app/static/js/createEvents.js         | 10 +++++-----
 app/templates/events/createEvent.html |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/static/js/createEvents.js b/app/static/js/createEvents.js
index e2ad24f02..8fa054bbe 100644
--- a/app/static/js/createEvents.js
+++ b/app/static/js/createEvents.js
@@ -116,14 +116,14 @@ function createOfferingModalRow({eventName=null, eventDate=null, startTime=null,
   $("#multipleOfferingSlots").append(clonedMultipleOffering);
   pendingmultipleEvents.push(clonedMultipleOffering);
   if (navigator.userAgent.indexOf("Chrome") == -1) {
-    initializeFlatpickr('.flatpickr')
+    initializeFlatpickr(clonedMultipleOffering.find('#flatpickr'))
     $(".timepicker").prop("type", "text");
     $(".timeIcons").prop("hidden", false);
 
-    var formattedStartTime = format24to12HourTime($(".multipleOfferingStartTime").prop("defaultValue"));
-    var formattedEndTime = format24to12HourTime($(".multipleOfferingEndTime").prop("defaultValue"));
-    $(".multipleOfferingStartTime").val(formattedStartTime);
-    $(".multipleOfferingEndTime").val(formattedEndTime);
+    var formattedStartTime = format24to12HourTime(clonedMultipleOffering.find(".multipleOfferingStartTime").prop("defaultValue"));
+    var formattedEndTime = format24to12HourTime(clonedMultipleOffering.find(".multipleOfferingEndTime").prop("defaultValue"));
+    clonedMultipleOffering.find(".multipleOfferingStartTime").val(formattedStartTime);
+    clonedMultipleOffering.find(".multipleOfferingEndTime").val(formattedEndTime);
   }
   //this is so that the trash icon can be used to delete the event
   clonedMultipleOffering.find(".deleteMultipleOffering").on("click", function() {
diff --git a/app/templates/events/createEvent.html b/app/templates/events/createEvent.html
index d21c6111b..04bf37454 100644
--- a/app/templates/events/createEvent.html
+++ b/app/templates/events/createEvent.html
@@ -489,7 +489,7 @@ <h5 class="modal-title">This is an event with multiple time offerings.</h5>
           <div class="form-group col-md-3">
             <label class="form-label me-2" for="multipleOfferingStartTime-{{pageLocation}}"><strong>Start
                 Time</strong></label>
-            <div class="input-group flatpickr">
+            <div class="input-group flatpickr" id="flatpickr">
               {% if eventData.timeStart %}
                 {% set startTime = eventData.timeStart %}
               {% else %}

From 0c306065fc31338e66de7df7b4cc626d2c9d76da Mon Sep 17 00:00:00 2001
From: bledsoef <bledsoef@berea.edu>
Date: Wed, 20 Nov 2024 15:40:22 -0500
Subject: [PATCH 07/10] removed unneeded title tags

---
 app/templates/events/createEvent.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/templates/events/createEvent.html b/app/templates/events/createEvent.html
index 04bf37454..be4df6cfb 100644
--- a/app/templates/events/createEvent.html
+++ b/app/templates/events/createEvent.html
@@ -108,7 +108,7 @@ <h1 id="pageTitle">{{page_title}}</h1>
         <input autocomplete="off" type="time" class="form-control timepicker startTime" value="{{startTime}}"
           name="timeStart" aria-describedby="timeIcon1" placeholder="Pick a start time" data-input id="startTime-{{pageLocation}}"
           data-page-location="{{pageLocation}}" required />
-        <a class="input-group-text timeIcons" id="timeIcon1-{{pageLocation}}" title="toggle" data-toggle data-td-target="#startTime-{{pageLocation}}" hidden><i
+        <a class="input-group-text timeIcons" id="timeIcon1-{{pageLocation}}" data-toggle data-td-target="#startTime-{{pageLocation}}" hidden><i
             class="bi bi-clock"></i></a>
       </div>
     </div>
@@ -123,7 +123,7 @@ <h1 id="pageTitle">{{page_title}}</h1>
         <input autocomplete="off" type="time" class="form-control timepicker endTime" data-input value="{{endTime}}" name="timeEnd"
           aria-describedby="timeIcon2" placeholder="Pick an end time" class="startTime" id="endTime-{{pageLocation}}"
           data-page-location="{{pageLocation}}" required />
-        <a class="input-group-text timeIcons" id="timeIcon2-{{pageLocation}}" title="toggle" data-toggle hidden><i
+        <a class="input-group-text timeIcons" id="timeIcon2-{{pageLocation}}" data-toggle hidden><i
             class="bi bi-clock"></i></a>
       </div>
     </div>
@@ -498,7 +498,7 @@ <h5 class="modal-title">This is an event with multiple time offerings.</h5>
               <input autocomplete="off" type="time" class="form-control timepicker multipleOfferingStartTime"
                 value="{{startTime}}" name="timeStart" aria-describedby="timeIcon1" data-input placeholder="Pick a start time"
                 id="multipleOfferingStartTime-{{pageLocation}}" data-page-location="{{pageLocation}}" required />
-              <a class="input-group-text timeIcons" data-toggle title="toggle" id="timeIcon1-{{pageLocation}}"
+              <a class="input-group-text timeIcons" data-toggle id="timeIcon1-{{pageLocation}}"
               hidden><i
                   class="bi bi-clock"></i></a>
             </div>
@@ -514,7 +514,7 @@ <h5 class="modal-title">This is an event with multiple time offerings.</h5>
               <input autocomplete="off" type="time" class="form-control timepicker multipleOfferingEndTime"
                 value="{{endTime}}" name="timeEnd" aria-describedby="timeIcon2" data-input placeholder="Pick an end time"
                 id="multipleOfferingEndTime-{{pageLocation}}" data-page-location="{{pageLocation}}" required />
-              <a class="input-group-text timeIcons" id="timeIcon2-{{pageLocation}}" title="toggle" data-toggle hidden><i
+              <a class="input-group-text timeIcons" id="timeIcon2-{{pageLocation}}" data-toggle hidden><i
                   class="bi bi-clock"></i></a>
             </div>
           </div>

From cc1beab233143fed065182a63953eb98cd0d9c8f Mon Sep 17 00:00:00 2001
From: bledsoef <bledsoef@berea.edu>
Date: Wed, 20 Nov 2024 15:42:59 -0500
Subject: [PATCH 08/10] fixed multiple offering time pickers once more

---
 app/static/js/createEvents.js         | 3 ++-
 app/templates/events/createEvent.html | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/static/js/createEvents.js b/app/static/js/createEvents.js
index 8fa054bbe..9808ac873 100644
--- a/app/static/js/createEvents.js
+++ b/app/static/js/createEvents.js
@@ -116,7 +116,8 @@ function createOfferingModalRow({eventName=null, eventDate=null, startTime=null,
   $("#multipleOfferingSlots").append(clonedMultipleOffering);
   pendingmultipleEvents.push(clonedMultipleOffering);
   if (navigator.userAgent.indexOf("Chrome") == -1) {
-    initializeFlatpickr(clonedMultipleOffering.find('#flatpickr'))
+    initializeFlatpickr(clonedMultipleOffering.find('#flatpickr1'))
+    initializeFlatpickr(clonedMultipleOffering.find('#flatpickr2'))
     $(".timepicker").prop("type", "text");
     $(".timeIcons").prop("hidden", false);
 
diff --git a/app/templates/events/createEvent.html b/app/templates/events/createEvent.html
index be4df6cfb..9bd3a2d0d 100644
--- a/app/templates/events/createEvent.html
+++ b/app/templates/events/createEvent.html
@@ -489,7 +489,7 @@ <h5 class="modal-title">This is an event with multiple time offerings.</h5>
           <div class="form-group col-md-3">
             <label class="form-label me-2" for="multipleOfferingStartTime-{{pageLocation}}"><strong>Start
                 Time</strong></label>
-            <div class="input-group flatpickr" id="flatpickr">
+            <div class="input-group flatpickr" id="flatpickr1">
               {% if eventData.timeStart %}
                 {% set startTime = eventData.timeStart %}
               {% else %}
@@ -505,7 +505,7 @@ <h5 class="modal-title">This is an event with multiple time offerings.</h5>
           </div>
           <div class='form-group col-md-3'>
             <label class="form-label me-2" for="endTime-{{pageLocation}}"><strong>End Time</strong></label>
-            <div class="input-group flatpickr">
+            <div class="input-group flatpickr" id="flatpickr2">
               {% if eventData.timeEnd %}
                 {% set endTime = eventData.timeEnd %}
               {%else%}

From ffea1a4de2d076e9804a061cb6b7bfd3a9b5e983 Mon Sep 17 00:00:00 2001
From: bledsoef <bledsoef@berea.edu>
Date: Thu, 21 Nov 2024 14:07:07 -0500
Subject: [PATCH 09/10] created a formatting function from 12 hour to 24 hour
 time

---
 app/static/js/createEvents.js | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/app/static/js/createEvents.js b/app/static/js/createEvents.js
index 9808ac873..174e5bb37 100644
--- a/app/static/js/createEvents.js
+++ b/app/static/js/createEvents.js
@@ -34,6 +34,24 @@ function format24to12HourTime(timeStr) {
   return formattedTime;
 }
 
+function format24to12HourTime(timeStr) {
+  // break the time into hours, minutes, and meridian (AM, PM)
+  const [timePart, meridian] = time.split(" ");
+  let [hours, minutes] = timePart.split(":").map(Number);
+
+  if (meridian === "PM" && hours !== 12) {
+      hours += 12;
+  } else if (meridian === "AM" && hours === 12) {
+      hours = 0; // midnight
+  }
+
+  // format hours and minutes to always be 2 digits
+  const formattedHours = hours.toString().padStart(2, "0");
+  const formattedMinutes = minutes.toString().padStart(2, "0");
+
+  return `${formattedHours}:${formattedMinutes}`;
+}
+
 function calculateRecurringEventFrequency(){
   var eventDatesAndName = {name:$("#inputEventName").val(),
                             isRecurring: true,

From 3fde76fada9e47ae1aba85859a1790a131cd7d93 Mon Sep 17 00:00:00 2001
From: bledsoef <bledsoef@berea.edu>
Date: Thu, 21 Nov 2024 14:42:05 -0500
Subject: [PATCH 10/10] resolved PR comments

---
 app/static/js/createEvents.js | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/app/static/js/createEvents.js b/app/static/js/createEvents.js
index 174e5bb37..3598d81a5 100644
--- a/app/static/js/createEvents.js
+++ b/app/static/js/createEvents.js
@@ -34,9 +34,9 @@ function format24to12HourTime(timeStr) {
   return formattedTime;
 }
 
-function format24to12HourTime(timeStr) {
+function format12to24HourTime(timeStr) {
   // break the time into hours, minutes, and meridian (AM, PM)
-  const [timePart, meridian] = time.split(" ");
+  const [timePart, meridian] = timeStr.split(" ");
   let [hours, minutes] = timePart.split(":").map(Number);
 
   if (meridian === "PM" && hours !== 12) {
@@ -195,7 +195,15 @@ $('#multipleOfferingSave').on('click', function() {
 
   // Check if the start time is after the end time
   for(let i = 0; i < startTimeInputs.length; i++){
-    if(startTimeInputs[i].value < endTimeInputs[i].value){
+    let startTime = startTimeInputs[i].value
+    let endTime = endTimeInputs[i].value
+    
+    if (navigator.userAgent.indexOf("Chrome") == -1) {
+      startTime = format12to24HourTime(startTime)
+      endTime = format12to24HourTime(endTime)
+    }
+
+    if(startTime < endTime){
       $(startTimeInputs[i]).removeClass('border-red');
       $(endTimeInputs[i]).removeClass('border-red');
     } else {
@@ -251,11 +259,17 @@ $('#multipleOfferingSave').on('click', function() {
   else {
     let offerings = [];
     eventOfferings.each(function(index, element) {
+      let startTime = $(element).find('.multipleOfferingStartTime').val() 
+      let endTime = $(element).find('.multipleOfferingEndTime').val()
+      if (navigator.userAgent.indexOf("Chrome") == -1) {
+        startTime = format12to24HourTime(startTime)
+        endTime = format12to24HourTime(endTime)
+      }
       offerings.push({
         eventName: $(element).find('.multipleOfferingNameField').val(),
         eventDate: $(element).find('.multipleOfferingDatePicker').val(),
-        startTime: $(element).find('.multipleOfferingStartTime').val(),
-        endTime: $(element).find('.multipleOfferingEndTime').val()
+        startTime: startTime,
+        endTime: endTime
       });
     });