如何使用 Reactjs 在全日历中显示多个事件答案

【问题标题】：How to display multiple event in fullcalendar using Reactjs如何使用 Reactjs 在全日历中显示多个事件
【发布时间】：2021-01-18 10:16:27
【问题描述】：

我正在尝试将来自少数对象的多个事件显示到完整日历中。

这是我的事件来源

this.state = { 
 calendarEvents2: {

      "events": [{
          "id": 10,
          "subtasks": [{
            "id": 29,
            "days": 1,
            "start": "2021-01-12T00:00:00+00:00",
            "end": "2021-01-12T00:00:00+00:00",
          }],
        },
        {
          "id": 20,
          "subtasks": [],
        },
        {
          "id": 6,
          "subtasks": [{
            "id": 21,
            "days": 2,
            "start": "2021-01-04T00:00:00+00:00",
            "end": "2021-01-05T00:00:00+00:00",
          },
          {
            "id": 23,
            "days": 3,
            "start": "2021-01-04T00:00:00+00:00",
            "end": "2021-01-06T00:00:00+00:00",
          }]
    
        }
    
      }
}

我需要将所有子任务显示到日历中。

 <FullCalendar
    defaultView="dayGridMonth"
    header={{
       left: "prev,next today",
       center: "title",
       right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek"
    }}
    editable={true}
    droppable={true}
    plugins={[dayGridPlugin, interactionPlugin]}
    events={this.state.calendarEvents2}


    />

我不知道如何格式化 calendarEvents2 数据以适应 FullCalendar 数据配置。我已尝试阅读有关 eventDataSources、eventSources 的文档，但内容非常模糊。非常感谢您的帮助。谢谢

【问题讨论】：

标签： reactjs fullcalendar fullcalendar-5

【解决方案1】：

如果我理解正确.. 你想显示所有子任务对吗？在事件处，放置你的子任务数据

        calendarEvents2: [
            {
                events: [
                    {
                        title: 'Event 1',
                        start: '2021-01-04'
                    },
                    {
                        title: 'Event 2',
                        start: '2021-01-25'
                    }
                ],
                color: 'yellow', //OPTIONAL IF YOU WANT TO PUT DIFFERENT COLOR
                textColor: 'black'
            },
            {
                events: [
                    {
                        title: 'Event 3',
                        start: '2021-01-11'
                    },
                    {
                        title: 'Event 4',
                        start: '2021-01-20'
                    }
                ],
                color: 'black',
                textColor: 'white'
            }
        ]

【讨论】：

【解决方案2】：

格式只是一个平面数组。示例在https://fullcalendar.io/docs/events-array

例如

[
{
  title  : 'event1',
  start  : '2010-01-01'
},
{
  title  : 'event2',
  start  : '2010-01-05',
  end    : '2010-01-07'
},
{
  title  : 'event3',
  start  : '2010-01-09T12:30:00',
  allDay : false // will make the time show
}
]

在您的情况下，由于您将 this.state.calendarEvents2 分配为事件数组，因此它将是：

this.state = { 
  calendarEvents2: 
  [
    {
      "id": 29,
      "title": "event 29",
      "days": 1,
      "start": "2021-01-12T00:00:00+00:00",
      "end": "2021-01-12T00:00:00+00:00",
    },
    {
      "id": 21,
      "title": "event 21",
      "days": 2,
      "start": "2021-01-04T00:00:00+00:00",
      "end": "2021-01-05T00:00:00+00:00",
    },
    {
     "id": 23,
      "title": "event 23",
      "days": 3,
      "start": "2021-01-04T00:00:00+00:00",
      "end": "2021-01-06T00:00:00+00:00",
    }
  ]
}

请注意，“标题”是一个有用的字段，因为它会在您的活动显示时提供一些文本。我将此添加到您的示例中。有关 fullCalendar 识别的字段的更多信息，请参阅https://fullcalendar.io/docs/event-parsing。

【讨论】：