From 3e820750831d5a0be5c90c3cb2df9d80c6123de1 Mon Sep 17 00:00:00 2001
From: Marcus Hill <bcf8c9f2@opayq.com>
Date: Sat, 17 Dec 2022 22:20:23 +0000
Subject: [PATCH] Add functionality to automatically adjust end date for new
 calendar events to 1 hr after the start date

---
 calendar_event_add_modal.php |  5 ++---
 calendar_events.php          | 27 ++++++++++++++++++++++++++-
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/calendar_event_add_modal.php b/calendar_event_add_modal.php
index cccc1ce6..9e2550d7 100644
--- a/calendar_event_add_modal.php
+++ b/calendar_event_add_modal.php
@@ -69,11 +69,10 @@
               <label>Start / End <strong class="text-danger">*</strong></label>
               <div class="form-row">
                 <div class="col-md-6 mb-3">
-                  <input type="datetime-local" class="form-control form-control-sm" name="start" required>
+                  <input type="datetime-local" class="form-control form-control-sm" id="event_add_start" name="start" required onblur="updateIncrementEndTime()">
                 </div>
                 <div class="col-md-6 mb-3">
-                  <input type="datetime-local" class="form-control form-control-sm" name="end" 
- required>
+                  <input type="datetime-local" class="form-control form-control-sm" id="event_add_end" name="end" required>
                 </div>
               </div>
 
diff --git a/calendar_events.php b/calendar_events.php
index 17fb17a4..0db3baf1 100644
--- a/calendar_events.php
+++ b/calendar_events.php
@@ -160,4 +160,29 @@ while($row = mysqli_fetch_array($sql)){
       calendar.render();
     });
 
-  </script>
\ No newline at end of file
+  </script>
+
+<!-- Automatically set new event end date to 1 hr after start date -->
+<script>
+
+    // Function - called when user leaves field (onblur)
+    function updateIncrementEndTime() {
+
+        // Get the start date
+        let start = document.getElementById("event_add_start").value;
+
+        // Create a date object
+        let new_end = new Date(start);
+
+        // Set the end date to 1 hr in the future
+        new_end.setHours(new_end.getHours() + 1)
+
+        // Get the date back as a string, with the milliseconds trimmed off
+        new_end = new_end.toISOString().replace(/.\d+Z$/g, "");
+
+        // Update the end date field
+        document.getElementById("event_add_end").value = new_end;
+
+    }
+
+</script>
\ No newline at end of file