Add functionality to automatically adjust end date for new calendar events to 1 hr after the start date

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>
 

calendar_events.php

@@ -160,4 +160,29 @@ while($row = mysqli_fetch_array($sql)){
       calendar.render();
     });
 
-  </script>
+  </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>