如何使用 JavaScript 将事件添加到日历

Question

我正在用香草 JavaScript 制作日历。我希望能够将事件输入特定的一天，并能够在我单击当天时看到当天的事件。 我试图在创建日历日的 for 循环中执行此操作，但我觉得我还没有想出更好的方法。 现在我可以输入事件，但它们不会只在指定的日期出现。 任何帮助将不胜感激。 基本上我要问的是如何为每个日历日创建一个单独的列表容器，当我在输入事件后单击它时将显示事件。

for (i = 1; i <= days; i++) {
    let calendarDay = document.createElement('div')
    calendarDay.id = Math.random(1, 1000);
    calendarDay.className = 'calendar-day';
    calendarDay.innerHTML = i;
    dateContainer.appendChild(calendarDay);

    
    calendarDay.addEventListener('click', () => {
        
    newEvent.style.display = 'block';
    eventList.addEventListener('submit', (e) =>{
        e.preventDefault();
        let li = document.createElement('li');
        li.className = 'task-list';
        li.innerHTML = task.value;
        // calArray.push(task.value)
        // li.innerHTML = calArray;
        newEvent.appendChild(li);
        task.value = '';
  
    });
    });


}

Answer 1

您需要在整个日历上放置一个点击事件，而不是每天。 此外，当您创建项目天数时，您需要为每个天数赋予一个唯一标识符。 当您点击日历时，处理特定日期的点击。 在处理程序中，您为与所选日期相关的 output 事件创建一个块元素。 您通过其唯一标识符从存储库中获取数据并呈现它。

例如像这样：

calendar.addEventListener("click", event => {
    if (event.target.className == "calendarday") {
        let data = eventsStore.getData(event.target.id); // events data
        // create elements and data render
    }
});