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

Question

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

这是我的事件源

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 的文档，但非常模糊。非常感谢任何帮助。谢谢

Answer 1

格式只是一个平面数组。 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。

Answer 2

如果我没理解错的话..你想显示你所有的子任务吧？在 event 地方，把你的 subtask data

        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'
            }
        ]

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

How to display multiple event in fullcalendar using Reactjs

reactjs

fullcalendar

fullcalendar-5