estoy haciendo un que tiene un calendario y quiero llenar el calendario con datos de la base de datos. los datos de la base de datos se ven así:
"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 } ]lo que estoy tratando de hacer es agregar las fechas marcadas de la base de datos al calendario. esto es lo que he hecho hasta ahora pero no me aparecen las fechas marcadas.
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} /> ) }Es porque sus fechas no tienen el formato correcto y falta la propiedad de tipo de marcado.
Sus elementos de fecha se ven así:
{ "2021-06-20 08:03:00": { selected: true, marked: true, selectedColor: 'purple', }, //... }En su lugar, deben formatearse de esta manera:
{ "2022-06-20": : { selected: true, marked: true, selectedColor: 'purple', }, //... }Debe agregar la propiedad markerType para que los marcadores aparezcan también, puede probar estos:
markingType={"dot"} // For a signle dot per date markingType={"multi-dot"} // For multiple dots per dateTambién podría cambiar la estructura de la reunión json, por lo que separa date_time en 2 propiedades, fecha y hora :
"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 } ]Luego tendrá que reemplazar cada propiedad date_time por la fecha y aparecerán los marcadores.
Y no se preocupe si necesita la fecha completa, siempre puede concatenar la fecha y la hora .
¡Espero que esto sea útil!