I am trying to use this component in my app.
I felt like it was straight forward, but I am encountering a TypeError from within the package.
I am building the following react component:
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>
);
}
and I am using the component on my App.tsx like this <AddToCalendar event={BookingEvent}/>. The structure of Booking event is as follows:
const BookingEvent = {
name: "Add the title of your event",
startDate: "2022-04-21",
endDate: "2022-04-22",
options:[
"Google"
]
}
this is throwing an
Uncaught TypeError: Cannot convert undefined or null to object
at Function.keys (<anonymous>)
at atcb_clean_schema_json (index.js:69:1
I've tried stepping through the package and I can't figure out why this is not working, I thought I was following the instructions in the documentation correctly.
The problem is not the date - should work without time and then default to a full-day event.
The problem is the JSON structure. Since the schema.org mode is used here, the structure is expected to have the event core data wrapped in an event block. The following should work:
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"
]
}
You could also (alternatively), adjust the wrapping html to go for the non-schema way.
return (
<div className='atcb' style={{display: 'none'}}>
{JSON.stringify(props)}
</div>
);
BTW: I hardly recommend to set a timezone!!
I will add some more error handling to the code and optimize documentation (I see the missunderstanding here).
And there will even be a v1.7 with better React support. You can try the still not ready dev branch, if you want to: https://github.com/jekuer/add-to-calendar-button/tree/v1.7.0_dev
you have to pass a valid date time like startDate: "2022-02-21T10:13"