获取数据以响应本机日历议程

Question

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

"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}
/>
)
}

Answer 1

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

您的约会项目如下所示：

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

相反，它们应该这样格式化：

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

您必须添加markrType属性才能使标记也出现，您可以尝试以下操作：

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

此外，您还可以更改json会议的结构，以便将date_time分隔为两个属性，date&时间：

"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，标记就会出现。

如果您需要完整的日期，您可以随时连接日期和时间。

我希望这是有帮助的！