2c:null 2d:["$","title",null,{"children":"Event Planner2 | Ryan's workspace | Observable"}] 32:T63e,## 📘 Event Planner – Reactive Weekly Event Scheduler ## What it does Event planning is an important thing in our life, so we need a light and powerful tool to plan our event. The weeklyPlanner is a custom reactive input widget that allows users to visually schedule, edit, delete, drag-and-drop, and search for events in a weekly calendar view. It also allows adjusting the time granularity (e.g., 15min, 30min, 1hr steps) for flexible planning and it is compatible with Observable's reactive programming model. ## Features - Weekly grid with adjustable time intervals (15min–120min) - Add/edit/delete events via input form - Live search and highlight matching events - Drag-and-drop events between time slots - Reactive .value output (usable with viewof) ## Import it on observable `import { weeklyPlanner } from "@ryan-zhao/event-planner"` Use it in your notebook: `viewof planner = weeklyPlanner()` To get the result (array of events): `planner` ## Options it accepts `weeklyPlanner(initialEvents = [])` initialEvents (array) – Optional list of events to pre-populate the planner. Each event should be an object like: `{ event: "Meeting with team", day: 2, // 0 = Mon, 6 = Sun hour:{ start: "13:00", end: "14:00" } }` Or, you can use the button and input bar to add, edit, delete and search the event. ## Examples of how it works // Basic usage `viewof planner = weeklyPlanner()` // With preloaded events `viewof planner = weeklyPlanner([ { event: "Design Review", day: 1, hour: { start: "09:00", end: "10:30" } } ])` 33:T3481,function weeklyPlanner(initialEvents = []) { const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']; const categories = ['Work', 'Personal', 'Study', 'Other']; let events = [...initialEvents]; let selectedEventIndex = null; let currentSearch = ""; let currentCategoryFilter = "All"; let minuteInterval = 60; const container = html`

Category: Time Interval: 1 hour

`; 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 categoryFilter = container.querySelector("#categoryFilter"); 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 descInput = container.querySelector("#inputDesc"); const imageInput = container.querySelector("#inputImage"); const inputCategory = container.querySelector("#inputCategory"); const saveBtn = container.querySelector("#saveEvent"); const cancelBtn = container.querySelector("#cancelEvent"); const formatIntervalLabel = mins => mins % 60 === 0 ? `${mins / 60} hour${mins / 60 > 1 ? 's' : ''}` : `${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); 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(); categoryFilter.onchange = () => { currentCategoryFilter = categoryFilter.value; updateCalendar(); }; const buildCalendarGrid = () => { calendarGrid.innerHTML = ""; calendarGrid.appendChild(html`

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

${day}

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

${slot}

`); 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); } } }; const updateCalendar = () => { calendarGrid.querySelectorAll(".event-card").forEach(card => card.remove()); const cellHeight = 40; const colWidth = (calendarGrid.clientWidth - 60 - 6) / 7; const totalMinutes = 24 * 60; const pixelsPerMinute = (timeSlots.length * cellHeight) / totalMinutes; events.forEach((evt, index) => { if (currentCategoryFilter !== "All" && evt.category !== currentCategoryFilter) return; if (currentSearch && !evt.event.toLowerCase().includes(currentSearch.toLowerCase())) return; const startMins = timeStringToMins(evt.hour.start); const endMins = timeStringToMins(evt.hour.end); const duration = endMins - startMins; if (duration <= 0) return; const topPos = startMins * pixelsPerMinute + cellHeight; const eventHeight = duration * pixelsPerMinute; const leftPos = 60 + evt.day * (colWidth + 1); const cardColor = selectedEventIndex === index ? '#d32f2f' : '#1976d2'; const card = html`

${evt.event}

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

`; card.onclick = e => { e.stopPropagation(); if (selectedEventIndex === index) { selectedEventIndex = null; form.style.display = "none"; container.querySelector("#eventDetails").style.display = "none"; statusLog.textContent = ""; updateCalendar(); return; } selectedEventIndex = index; eventInput.value = evt.event; daySelect.value = evt.day; descInput.value = evt.description || ""; inputCategory.value = evt.category || "Other"; populateStartOptions(evt.hour.start, evt.hour.end); const detailBox = container.querySelector("#eventDetails"); const contentBox = container.querySelector("#eventDetailsContent"); contentBox.innerHTML = ` 📌 ${evt.event}
🗓️ Day: ${days[evt.day]}
🕒 Time: ${evt.hour.start} ~ ${evt.hour.end}
🏷️ Category: ${evt.category || "Other"}
${evt.description ? `📝 Description:
${evt.description}
` : ""} ${evt.image ? `🖼️ Image:

` : ""} `; detailBox.style.display = "block"; form.style.display = "block"; updateCalendar(); }; card.ondragstart = e => { e.dataTransfer.setData("index", index); }; calendarGrid.appendChild(card); }); }; const emitChange = () => { container.value = [...events]; container.dispatchEvent(new CustomEvent("input")); }; addBtn.onclick = () => { selectedEventIndex = null; form.style.display = "block"; eventInput.value = ""; descInput.value = ""; imageInput.value = ""; inputCategory.value = "Work"; daySelect.value = "0"; populateStartOptions(); }; editBtn.onclick = () => { if (selectedEventIndex === null) { alert("Please select an event first."); return; } const evt = events[selectedEventIndex]; form.style.display = "block"; eventInput.value = evt.event; daySelect.value = evt.day; descInput.value = evt.description || ""; inputCategory.value = evt.category || "Other"; populateStartOptions(evt.hour.start, evt.hour.end); }; saveBtn.onclick = async () => { const eventText = eventInput.value.trim(); const eventDay = Number(daySelect.value); const startTime = startSelect.value; const endTime = endSelect.value; const description = descInput.value.trim(); const category = inputCategory.value; const file = imageInput.files[0]; let imageUrl = null; if (!eventText || !startTime || !endTime || timeStringToMins(endTime) <= timeStringToMins(startTime)) { alert("Please enter a valid event and time range."); return; } if (file) { imageUrl = await new Promise(resolve => { const reader = new FileReader(); reader.onload = () => resolve(reader.result); reader.readAsDataURL(file); }); } const newEvent = { event: eventText, day: eventDay, hour: { start: startTime, end: endTime }, description, image: imageUrl, category }; if (selectedEventIndex === null) { events.push(newEvent); } else { events[selectedEventIndex] = newEvent; } form.style.display = "none"; selectedEventIndex = null; updateCalendar(); emitChange(); }; cancelBtn.onclick = () => { form.style.display = "none"; }; deleteBtn.onclick = () => { if (selectedEventIndex === null) { alert("Please select an event first."); return; } events.splice(selectedEventIndex, 1); selectedEventIndex = null; form.style.display = "none"; const detailBox = container.querySelector("#eventDetails"); detailBox.style.display = "none"; 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; }34:[] 30:{"id":"4cf7676c366ab243","slug":"event-planner2","title":"Event Planner2","thumbnail":"458668bb44af1833894642b3eefdfc84792f995207c281817d5124e16598ef22","access_level":"public","create_time":"$D2025-04-18T00:08:51.162Z","update_time":"$D2025-04-18T02:13:09.917Z","view_time":null,"first_public_time":"$D2025-04-18T00:08:51.162Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"0ae217fea56f0aac","login":"ryans-workspace3","name":"Ryan's workspace","avatar_url":"https://avatars-next.observableusercontent.com/ba31e7a60f465313643151772e50a8bae922f7177c39c36d4fd3cddd4f73c202","tier":"starter_2024","bio":""},"version":37,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"768c67cf93ee2edb","login":"ryan-zhao","name":"Ryan Zhao","avatar_url":"https://avatars-next.observableusercontent.com/c165d0ac22ee16443b6a3004d2f041f0771065b5e81da680579a01b78ac821c1","tier":null,"bio":""}],"members":[{"type":"team","id":"0ae217fea56f0aac","login":"ryans-workspace3","name":"Ryan's workspace","avatar_url":"https://avatars-next.observableusercontent.com/ba31e7a60f465313643151772e50a8bae922f7177c39c36d4fd3cddd4f73c202","tier":"starter_2024","role":"editor"},{"type":"individual","id":"768c67cf93ee2edb","login":"ryan-zhao","name":"Ryan Zhao","avatar_url":"https://avatars-next.observableusercontent.com/c165d0ac22ee16443b6a3004d2f041f0771065b5e81da680579a01b78ac821c1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Event Planner2","cells":[{"id":0,"value":"# Event Planner2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"## Widget","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"viewof planner = weeklyPlanner()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"planner","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"## Code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"import {html} from \"@observablehq/htl\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"

📌 Event Details