如何通过表单字段向events对象数组添加新的日历事件项

1. 编写对应HTML表单结构 #

先在页面中添加包含三个对应字段的表单，示例代码如下：

<form id="eventForm">
  <div>
    <label>事件ID/名称：</label>
    <input type="text" name="eventId" required>
  </div>
  <div>
    <label>事件日期：</label>
    <input type="date" name="eventDate" required>
  </div>
  <div>
    <label>事件描述：</label>
    <textarea name="eventContent" required></textarea>
  </div>
  <button type="submit">新增事件</button>
</form>

原生date类型输入框返回的格式默认是YYYY-MM-DD，如果需要和你现有数组里的YYYY/MM/DD格式对齐，后续需要做格式转换。

2. 编写JS逻辑实现新增 #

完整实现代码 #

// 你的原有初始化数组
let eventsArray = [
  {
    id: 'my event name',
    date: '2021/08/23',
    content: 'my events description',
  },
];

// 获取表单DOM节点
const eventForm = document.getElementById('eventForm');

// 监听表单提交事件
eventForm.addEventListener('submit', function(e) {
  // 阻止表单默认跳转刷新行为，避免数组数据丢失
  e.preventDefault();
  
  // 获取三个字段的输入值并做基础处理
  const eventId = this.eventId.value.trim();
  const rawDate = this.eventDate.value;
  const eventContent = this.eventContent.value.trim();
  
  // 把默认的YYYY-MM-DD日期格式转成你需要的YYYY/MM/DD格式
  const eventDate = rawDate.replace(/-/g, '/');
  
  // 可选：做ID重复校验，避免后续按ID查询、修改事件时出现冲突
  const isIdExist = eventsArray.some(item => item.id === eventId);
  if (isIdExist) {
    alert('该事件ID已存在，请更换后重试');
    return;
  }
  
  // 构造新的事件对象，追加到数组末尾
  const newEvent = {
    id: eventId,
    date: eventDate,
    content: eventContent
  };
  eventsArray.push(newEvent);
  
  // 可选：提交后清空表单
  this.reset();
  
  // 此处补充你自己的日历重新渲染逻辑，把新增的事件渲染到日历视图上即可
  console.log('新增后的事件数组：', eventsArray);
});

如果你使用Vue、React等前端框架开发，逻辑完全一致，只需要把原生表单取值的部分换成框架对应的表单数据获取方式即可。

内容的提问来源于stack exchange，提问作者MarkWriteCodes