Estoy tratando de usar este componente en mi aplicación. Sentí que era sencillo, pero me encuentro con un TypeError dentro del paquete.
Estoy construyendo el siguiente componente de reacción:
import React, {useEffect} from 'react'; import { atcb_init } from 'add-to-calendar-button'; import './addToCalendar.css'; export const AddToCalendar = (props: any) => { useEffect(() => atcb_init()); return ( <div className='atcb'> <script type="application/ld+json"> {JSON.stringify(props)} </script> </div> ); } y estoy usando el componente en mi App.tsx como este <AddToCalendar event={BookingEvent}/> . La estructura del evento Booking es la siguiente:
const BookingEvent = { name: "Add the title of your event", startDate: "2022-04-21", endDate: "2022-04-22", options:[ "Google" ] }esto es lanzar un
Uncaught TypeError: Cannot convert undefined or null to object at Function.keys (<anonymous>) at atcb_clean_schema_json (index.js:69:1Intenté revisar el paquete y no puedo entender por qué esto no funciona, pensé que estaba siguiendo las instrucciones en la documentación correctamente.
El problema no es la fecha: debería funcionar sin tiempo y luego, de forma predeterminada, un evento de día completo.
El problema es la estructura JSON. Dado que aquí se usa el modo schema.org, se espera que la estructura tenga los datos principales del evento envueltos en un bloque de eventos. Lo siguiente debería funcionar:
const BookingEvent = { event: { "@context": "https://schema.org", "@type": "Event", name: "Add the title of your event", startDate: "2022-04-21", endDate: "2022-04-22" }, options:[ "Google" ] }También puede (alternativamente), ajustar el html de envoltura para que no sea un esquema.
return ( <div className='atcb' style={{display: 'none'}}> {JSON.stringify(props)} </div> );Por cierto: ¡¡no recomiendo establecer una zona horaria!!
Agregaré más manejo de errores al código y optimizaré la documentación (veo el malentendido aquí).
E incluso habrá una v1.7 con mejor soporte para React. Puede probar la rama de desarrollo que aún no está lista, si lo desea: https://github.com/jekuer/add-to-calendar-button/tree/v1.7.0_dev
tienes que pasar una fecha y hora válida como startDate: "2022-02-21T10:13"