1

我正在制作一个包含日历的日历，我想用数据库中的数据填充日历。数据库中的数据如下所示：

"meeting": [
        {
            "id": "",
            "company_id": "",
            "meeting_type_id": "",
            "title": "zoom meeting",
            "place": "zoom",
            "description": "lorem ipsum",
            "link": "zoom.com",
            "date_time": "2021-06-20 08:03:00",
            "status": 1,
            "created_at": null,
            "updated_at": null
        }
    ]

我想要做的是将数据库中的标记日期添加到日历中。这是我到目前为止所做的，但没有出现标记的日期。

renderMeeting() {
    let panels = [];
    Object.keys(this.props.meeting).map((key, index) => {
      panels.push(
        <View key={index} style={styles.itemContainer}>
          <TouchableOpacity>
            <Text>{this.props.meeting.date_time}</Text>
            <Text>{this.props.meeting.title}</Text>
          </TouchableOpacity>
        </View>,
      );
    });
  }

  renderItems() {
    let items = [];
    this.props.meeting.map((key, index) => {
      items[this.props.meeting.date_time] = {
        name: this.props.meeting.title,
      };
    });
  }
  
  render(){
    let markedDay = {};
    this.props.meeting.map(item => {
      markedDay[item.date_time] = {
        selected: true,
        marked: true,
        selectedColor: 'purple',
      };
    });
    return(
      <Agenda
          items={this.renderItems()}
          renderItem={this.renderMeeting()}
          renderEmptyDate={() => <View />}
          markedDates={this.props.meeting.date_time}
       />
    )
  }

4

1 回答 1

0

这是因为您的日期格式不正确，并且缺少 markingType 属性。

您的日期项目如下所示：

{ 
  "2021-06-20 08:03:00": {
        selected: true,
        marked: true,
        selectedColor: 'purple',
      },
  //...
}

相反，它们应该以这种方式格式化：

{ 
  "2022-06-20": : {
        selected: true,
        marked: true,
        selectedColor: 'purple',
      },
  //...
}

您必须添加 markerType 属性才能显示标记，您可以尝试以下操作：

markingType={"dot"} // For a signle dot per date
markingType={"multi-dot"} // For multiple dots per date

您还可以更改 json 会议的结构，因此您将date_time分为 2 个属性，日期和时间：

"meeting": [
        {
            "id": "",
            "company_id": "",
            "meeting_type_id": "",
            "title": "zoom meeting",
            "place": "zoom",
            "description": "lorem ipsum",
            "link": "zoom.com",
            "date": "2021-06-20", // SEPARATED DATE
            "time": "08:03:00", // SEPARATED TIME
            "status": 1,
            "created_at": null,
            "updated_at": null
        }
    ]

然后，您必须替换日期的每个date_time属性，并且会出现标记。

如果您需要完整的日期，不用担心，您可以随时连接date和time。

我希望这是有帮助的！

于 2022-01-24T13:15:55.857 回答