如何提取fullcalendar.io的事件字段并渲染为HTML列表

实现方案 #

1. 原生JavaScript渲染

首先在页面中先准备列表容器：

<ul id="eventList"></ul>

调整你的请求代码如下，直接遍历返回的事件数组生成列表：

const eventListContainer = document.getElementById('eventList')

app.store.find('events', {
  allDay: true,
  sort: 'event_start'
}).then(results => {
  this.events = results
  // 清空容器原有内容
  eventListContainer.innerHTML = ''
  // 遍历事件生成列表项
  results.forEach(event => {
    // 格式化日期，可根据需要调整格式参数
    const eventDate = new Date(event.start).toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit'
    })
    const liItem = document.createElement('li')
    // 若有XSS防护需求，可拆分用textContent赋值
    liItem.innerHTML = `
      <strong>事件名称：${event.title}</strong>
      <p>日期：${eventDate}</p>
      <p>描述：${event.description || '暂无描述'}</p>
    `
    eventListContainer.appendChild(liItem)
  })
})

2. 前端框架（Vue/React等）渲染

你已经把事件数组存在了this.events中，直接在框架模板里循环渲染即可，以Vue为例：

<template>
  <!-- 事件列表 -->
  <ul class="event-list">
    <li v-for="event in events" :key="event.id">
      <h4>{{ event.title }}</h4>
      <p>日期：{{ new Date(event.start).toLocaleDateString('zh-CN') }}</p>
      <p>描述：{{ event.description || '暂无描述' }}</p>
    </li>
  </ul>
</template>

注意事项 #

• 上述代码用的是fullcalendar默认的字段名：title对应事件名称、start对应事件日期、description对应事件描述，如果你实际存储的字段名不同，直接替换成你自己的字段即可。
• 日期格式可自行调整，如需显示时间可在toLocaleDateString的配置项中增加hour: '2-digit', minute: '2-digit'参数。

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