Add Recurring Events Support

app.js

@@ -38,6 +38,7 @@
         descInput: $("descInput"),
         remindInput: $("remindInput"),
         colorInput: $("colorInput"),
+        recurrenceInput: $("recurrenceInput"),   
 
         conflictBox: $("conflictBox"),
     };
@@ -414,7 +415,7 @@
         els.descInput.value = "";
         els.remindInput.value = "off";
         els.colorInput.value = "default";
-
+        els.recurrenceInput.value = "none";   
         els.conflictBox.hidden = true;
         showModal();
     }
@@ -440,24 +441,25 @@
         els.descInput.value = ev.description || "";
         els.remindInput.value = ev.remindMode || "off";
         els.colorInput.value = ev.color || "default";
-
+        els.recurrenceInput.value = ev.recurrence || "none";   
         updateConflictWarning(editingId);
         showModal();
     }
 
     function draftFromForm() {
         const id = els.idInput.value || editingId || safeUUID();
         return {
-            id,
-            title: els.titleInput.value.trim(),
-            date: els.dateInput.value,
-            endDate: els.endDateInput.value,
-            start: els.startInput.value || null,
-            end: els.endInput.value || null,
-            description: els.descInput.value.trim(),
-            remindMode: els.remindInput.value,
-            color: els.colorInput.value
-        };
+    id,
+    title: els.titleInput.value.trim(),
+    date: els.dateInput.value,
+    endDate: els.endDateInput.value,
+    start: els.startInput.value || null,
+    end: els.endInput.value || null,
+    description: els.descInput.value.trim(),
+    remindMode: els.remindInput.value,
+    color: els.colorInput.value,
+    recurrence: els.recurrenceInput.value || "none"   
+};
     }
 
     function onSave() {
@@ -574,13 +576,46 @@
     }
 
     function getEventsOnDate(dateKey) {
-        const d = new Date(dateKey + "T00:00:00");
-        return events.filter(ev => {
-            const eventStart = new Date(ev.date + "T00:00:00");
-            const eventEnd = ev.endDate ? new Date(ev.endDate + "T00:00:00") : eventStart;
-            return d >= eventStart && d <= eventEnd;
-        });
-    }
+    const d = new Date(dateKey + "T00:00:00");
+
+    return events.filter(ev => {
+        const start = new Date(ev.date + "T00:00:00");
+
+        // Non-recurring event
+        if (!ev.recurrence || ev.recurrence === "none") {
+            const end = ev.endDate
+                ? new Date(ev.endDate + "T00:00:00")
+                : start;
+
+            return d >= start && d <= end;
+        }
+
+        // Recurring events
+        if (d < start) return false;
+
+        const diffDays = Math.floor((d - start) / (1000 * 60 * 60 * 24));
+
+        switch (ev.recurrence) {
+            case "daily":
+                return true;
+
+            case "weekly":
+                return diffDays % 7 === 0;
+
+            case "monthly":
+                return d.getDate() === start.getDate();
+
+            case "yearly":
+                return (
+                    d.getDate() === start.getDate() &&
+                    d.getMonth() === start.getMonth()
+                );
+
+            default:
+                return false;
+        }
+    });
+}
 
     function detectConflicts(candidate, excludeId = null) {
         if (!candidate.start || !candidate.end) return [];

index.html

@@ -129,6 +129,17 @@ <h2>Selected Day</h2>
           <span>Description</span>
           <textarea id="descInput" rows="3" maxlength="500" placeholder="Optional notes"></textarea>
         </label>
+                  <label class="field">
+  <span>Repeat</span>
+  <select id="recurrenceInput">
+    <option value="none">Does not repeat</option>
+    <option value="daily">Daily</option>
+    <option value="weekly">Weekly</option>
+    <option value="monthly">Monthly</option>
+    <option value="yearly">Yearly</option>
+  </select>
+</label>
+
 
         <div class="row">
           <label class="field">