1

Estoy implementando un calendario en react native con expo,el problema se basa en que quiero traer una fecha de la BD en firebase recorrerla y así marcar un evento en el calendario para esto uso:

    constructor(props) {
    super(props);

    this.state = {
      selected: "",
      usuarios: [],
     };
    }


    componentDidMount() {
        firebase
          .database()
          .ref("DatosCli/")
          .on("child_added", (data) => {
            var datos = data.val();
            var usuariosTemp = this.state.usuarios;
            datos.key = data.key;
            usuariosTemp.push(datos);
            this.setState({ usuarios: usuariosTemp });
          });
      }


      cargarDatos = async () => {
    var userTemp = new Array();
    var data = await firebase.database().ref("/DatosCli").once("value");

    data.forEach((child) => {
      var user = child.val();
      user.key = child.key;
      userTemp.push(user);
    });
     this.setState({ usuarios: userTemp });
    };

y en el return - aquí es donde esta generando el error. Justo en la linea donde está el state.map

  render() {
    return (
      <View style={styles.container}>
          {this.state.usuarios.map((usuarioTemp) => (
          <CalendarList
            markedDates={{
              [usuarioTemp.date]: {
                selected: true,
                disableTouchEvent: true,
                selectedColor: "orange",
                selectedTextColor: "red",
              },
            }}
          />
        ))}
      </View>
    );
  }

En ocasiones anteriores había recorrido la bd pero nunca de esta forma, no sé si está bien o hay otra forma mejor. La librería de calendario es: https://github.com/wix/react-native-calendars

8
  • Creo que el problema esta dentro del CalendarList. Le estas pasando una función (map) al componente que devuelve distintos markedDates={{}}. Podes probar haciendo markedDates={ // y aca adentro la fucion que devuelva los objetos de la forma [usuarioTemp.date]: { selected: true, disableTouchEvent: true, selectedColor: "orange", selectedTextColor: "red", }} Commented el 8 jul. 2020 a las 16:39
  • De paso te recomiendo otra librería por si queres probar: docs.expo.io/versions/latest/sdk/date-time-picker Commented el 8 jul. 2020 a las 16:41
  • parece que por ahí van los tiros, intente lo que dice pero no sirve aun..voy a seguir intentado a ver que pasa..
    – fabrixo96
    Commented el 8 jul. 2020 a las 16:58
  • 1
    Avance!,logre que se marcara la fecha que llega de la bd en el calendario colocando la funcion map fuera del CalendarList y el markedDates como me digiste, PERO la poner la funcion map fuera provoca que el calendario se repita muchas veces,es decir si hay 2 fechas 1 va a estar en 1 calendario y la otra fecha en otro calendario,@NachoZullo
    – fabrixo96
    Commented el 8 jul. 2020 a las 17:13
  • habra que ver de que forma se puede acomodar para que solo genere un calendarioy que tenga multiples fechas en el
    – fabrixo96
    Commented el 8 jul. 2020 a las 17:15

1 respuesta 1

0

Queria tener una lista de fechas marcadas y no una lista de componentes calendario,al momento de hacer la pregunta habia un blucle de componentes calendario por cada fecha que habia.

Para solucionarlo se creo un objeto de markedDates usando la funcion forEach que recorre la base de datos y despues se pasa como apoyo al CalendarList

render() {
    const markedDates = {};
this.state.usuarios.forEach((usuarioTemp) => {
    markedDates[usuarioTemp.date] = {
        selected: true,
        disableTouchEvent: true,
        selectedColor: "orange",
        selectedTextColor: "red",
     };
});
    return (
      <View style={styles.container}>

      
    <CalendarList markedDates={markedDates} />
        
       
      </View>
    );
  }
1
  • Que se realizo, podrìas agregar una explicaciòn, revisa Cómo responder, saludos.
    – Jorgesys
    Commented el 9 jul. 2020 a las 0:54

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.