2c:null 2d:["$","title",null,{"children":"Event Planner | 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:T2977,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; }34:[] 30:{"id":"7488c60b35488f15","slug":"event-planner","title":"Event Planner","thumbnail":"458668bb44af1833894642b3eefdfc84792f995207c281817d5124e16598ef22","access_level":"public","create_time":"$D2025-04-11T01:48:29.867Z","update_time":"$D2025-04-15T22:19:31.398Z","view_time":null,"first_public_time":"$D2025-04-15T06:31:40.107Z","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":194,"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":"individual","id":"768c67cf93ee2edb","login":"ryan-zhao","name":"Ryan Zhao","avatar_url":"https://avatars-next.observableusercontent.com/c165d0ac22ee16443b6a3004d2f041f0771065b5e81da680579a01b78ac821c1","tier":null,"role":"editor"},{"type":"team","id":"0ae217fea56f0aac","login":"ryans-workspace3","name":"Ryan's workspace","avatar_url":"https://avatars-next.observableusercontent.com/ba31e7a60f465313643151772e50a8bae922f7177c39c36d4fd3cddd4f73c202","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Event Planner","cells":[{"id":71,"value":"# Event Planner","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":142,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":168,"value":"## Widget","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":94,"value":"viewof planner = weeklyPlanner()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"planner","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"## Code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":0,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"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"