function weeklyPlanner(initialEvents = []) { const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']; let events = [...initialEvents]; let selectedEventIndex = null; let currentSearch = ""; let minuteInterval = 60; // Mutable // Create main container element. const container = html`

Time Interval: 1 hour

`; // Element references const statusLog = container.querySelector("#statusLog"); const calendarGrid = container.querySelector("#calendarGrid"); const addBtn = container.querySelector("#addEvent"); const editBtn = container.querySelector("#editEvent"); const deleteBtn = container.querySelector("#deleteEvent"); const searchInput = container.querySelector("#eventSearch"); const slider = container.querySelector("#intervalSlider"); const intervalLabel = container.querySelector("#intervalLabel"); const form = container.querySelector("#eventForm"); const eventInput = container.querySelector("#inputEvent"); const daySelect = container.querySelector("#selectDay"); const startSelect = container.querySelector("#selectStart"); const endSelect = container.querySelector("#selectEnd"); const saveBtn = container.querySelector("#saveEvent"); const cancelBtn = container.querySelector("#cancelEvent"); // Utility functions const formatIntervalLabel = mins => { if (mins % 60 === 0) return `${mins / 60} hour${mins / 60 > 1 ? 's' : ''}`; return `${mins} min`; }; const generateTimeSlots = step => { let slots = []; for (let t = 0; t < 24 * 60; t += step) { const hour = Math.floor(t / 60); const min = t % 60; slots.push(`${hour.toString().padStart(2, '0')}:${min.toString().padStart(2, '0')}`); } return slots; }; const timeStringToMins = timeStr => { const [h, m] = timeStr.split(":").map(Number); return h * 60 + m; }; let timeSlots = generateTimeSlots(minuteInterval); // Populate the options for starting time. const populateStartOptions = (defaultStart = null, defaultEnd = null) => { startSelect.innerHTML = ""; timeSlots.forEach(slot => { const option = document.createElement("option"); option.value = slot; option.textContent = slot; startSelect.appendChild(option); }); startSelect.value = defaultStart || timeSlots[0]; updateEndOptions(defaultEnd); }; const updateEndOptions = (defaultEnd = null) => { const startIndex = timeSlots.indexOf(startSelect.value); endSelect.innerHTML = ""; for (let i = startIndex + 1; i < timeSlots.length; i++) { const option = document.createElement("option"); option.value = timeSlots[i]; option.textContent = timeSlots[i]; endSelect.appendChild(option); } if (defaultEnd) endSelect.value = defaultEnd; }; startSelect.onchange = () => { updateEndOptions(); }; // Build the calendar grid with a header row and time slots. const buildCalendarGrid = () => { calendarGrid.innerHTML = ""; const timeHeader = html`

`; calendarGrid.appendChild(timeHeader); days.forEach(day => { const dayHeader = html`

${day}

`; calendarGrid.appendChild(dayHeader); }); for (const slot of timeSlots) { const timeCell = html`

${slot}

`; calendarGrid.appendChild(timeCell); for (let d = 0; d < 7; d++) { const cell = html`

`; cell.ondragover = e => e.preventDefault(); cell.ondrop = e => { const draggedIndex = Number(e.dataTransfer.getData("index")); if (!isNaN(draggedIndex)) { const draggedEvent = events[draggedIndex]; const dropStart = slot; const eventDuration = timeStringToMins(draggedEvent.hour.end) - timeStringToMins(draggedEvent.hour.start); const newStartMins = timeStringToMins(dropStart); const newEndMins = newStartMins + eventDuration; const newEnd = `${String(Math.floor(newEndMins / 60)).padStart(2, '0')}:${String(newEndMins % 60).padStart(2, '0')}`; events[draggedIndex].day = d; events[draggedIndex].hour = { start: dropStart, end: newEnd }; selectedEventIndex = null; updateCalendar(); emitChange(); } }; calendarGrid.appendChild(cell); } } }; // Render the events onto the grid. const updateCalendar = () => { calendarGrid.querySelectorAll(".event-card").forEach(card => card.remove()); const totalMinutes = 24 * 60; const cellHeight = 40; // Compute the width of each day column. const colWidth = (calendarGrid.clientWidth - 60 - 6) / 7; events.forEach((evt, index) => { const evtStart = timeStringToMins(evt.hour.start); const evtEnd = timeStringToMins(evt.hour.end); const duration = evtEnd - evtStart; const topOffset = (evtStart / totalMinutes) * timeSlots.length * cellHeight; const eventHeight = (duration / totalMinutes) * timeSlots.length * cellHeight; const leftPos = 60 + evt.day * (colWidth + 1); const topPos = topOffset + cellHeight; const matchesSearch = currentSearch && evt.event.toLowerCase().includes(currentSearch.toLowerCase()); const isSelected = selectedEventIndex === index; const cardColor = isSelected ? '#d32f2f' : (matchesSearch ? 'orange' : '#1976d2'); const card = html`

${evt.event}
${evt.hour.start} ~ ${evt.hour.end}

`; card.onclick = e => { e.stopPropagation(); selectedEventIndex = index; statusLog.textContent = `Selected: ${evt.event} on ${days[evt.day]} ${evt.hour.start} ~ ${evt.hour.end}`; updateCalendar(); }; card.ondragstart = e => { e.dataTransfer.setData("index", index); }; calendarGrid.appendChild(card); }); }; const emitChange = () => { container.value = [...events]; container.dispatchEvent(new CustomEvent("input")); }; // Event Listeners for the Buttons addBtn.onclick = () => { selectedEventIndex = null; form.style.display = "block"; eventInput.value = ""; daySelect.value = "0"; populateStartOptions(); }; editBtn.onclick = () => { if (selectedEventIndex === null || isNaN(selectedEventIndex)) { alert("Please select an event first."); return; } const evt = events[selectedEventIndex]; form.style.display = "block"; eventInput.value = evt.event; daySelect.value = evt.day; populateStartOptions(evt.hour.start, evt.hour.end); }; saveBtn.onclick = () => { const eventText = eventInput.value.trim(); const eventDay = Number(daySelect.value); const startTime = startSelect.value; const endTime = endSelect.value; if (!eventText || !startTime || !endTime || timeStringToMins(endTime) <= timeStringToMins(startTime)) { alert("Please enter a valid event and time range."); return; } if (selectedEventIndex === null) { events.push({ event: eventText, day: eventDay, hour: { start: startTime, end: endTime } }); } else { events[selectedEventIndex] = { event: eventText, day: eventDay, hour: { start: startTime, end: endTime } }; } form.style.display = "none"; selectedEventIndex = null; updateCalendar(); emitChange(); }; cancelBtn.onclick = () => { form.style.display = "none"; }; deleteBtn.onclick = () => { if (selectedEventIndex === null || isNaN(selectedEventIndex)) { alert("Please select an event first."); return; } events.splice(selectedEventIndex, 1); selectedEventIndex = null; updateCalendar(); emitChange(); }; searchInput.oninput = e => { currentSearch = e.target.value; updateCalendar(); }; slider.oninput = () => { minuteInterval = Number(slider.value); intervalLabel.textContent = formatIntervalLabel(minuteInterval); timeSlots = generateTimeSlots(minuteInterval); buildCalendarGrid(); populateStartOptions(); updateCalendar(); }; populateStartOptions(); buildCalendarGrid(); updateCalendar(); container.value = events; return container; }