13 Sep 2023 Calendar

Click on day number to add event.

Author: code-boxx

calendar/assets/PAGE-calendar.css

@@ -57,6 +57,10 @@
   color: #b5b5b5;
   padding: 5px;
 }
+.calRowHead .calCellDay:hover {
+  color: #ff5b5b;
+  cursor: pointer;
+}
 .calRowBack .calCell { border: 1px solid #eee; }
 .calBlank { background: #f5f5f5; }
 .calToday { background: #feffd3; }

calendar/assets/PAGE-calendar.js

@@ -112,7 +112,17 @@ var cal = {
     celler = day => {
       cell = document.createElement("div");
       cell.className = "calCell";
-      if (day) { cell.innerHTML = day; }
+      if (day) {
+        cell.innerHTML = day;
+        cell.classList.add("calCellDay");
+        cell.onclick = () => {
+          cal.show();
+          let d = +day, m = +cal.hMth.value,
+              s = `${cal.hYear.value}-${String(m<10 ? "0"+m : m)}-${String(d<10 ? "0"+d : d)}T00:00:00`;
+          cal.hfStart.value = s;
+          cal.hfEnd.value = s;
+        };
+      }
       rowB.appendChild(cell);
       cell = document.createElement("div");
       cell.className = "calCell";

calendar/pages/PAGE-calendar.php

@@ -65,7 +65,7 @@
   </div>
 
   <div class="w-100 p-1 form-floating">
-    <input id="evtTxt" class="form-control" type="text" required>
+    <input id="evtTxt" class="form-control" type="text" autocomplete="off" required>
     <label>Event</label>
   </div>