I need to get booking data from a client in Calendly. Here is the API documentation But I got a 401 Errors on my code. I can't understand what exactly I make wrong.
My code is look like:
window.addEventListener("message", function (event) {
if (event.origin.includes("calendly.com")) {
const data = event.data;
if (data.event && data.event === "calendly.event_scheduled") {
console.log("Event scheduled:", data.payload);
const eventUri = data.payload.event.uri;
const inviteeUri = data.payload.invitee.uri;
// Getting event details via API
fetchCalendlyEventDetails(eventUri, inviteeUri);
}
}
});
async function fetchCalendlyEventDetails(eventUri, inviteeUri) {
try {
const eventId = eventUri.split("/").pop();
const inviteeId = inviteeUri.split("/").pop();
// USER KEY
const token = 'IzLmPwQHQDKPyoBrnT3Fxy6DFbv3wWwLcqskWrgLcsc';
// const options = {
// method: 'GET',
// headers: {'Content-Type': 'application/json', Authorization: token}
// };
//
// fetch('https://api.calendly.com/scheduled_events/event_uuid/invitees/invitee_uuid', options)
// .then(response => response.json())
// .then(response => console.log(response))
// .catch(err => console.error(err));
//
const headers = {
'Content-Type': 'application/json',
'Authorization': token,
};
const eventResponse = await fetch(`https://api.calendly.com/scheduled_events/${eventId}`, headers );
const inviteeResponse = await fetch(`https://api.calendly.com/scheduled_events/${eventId}/invitees/${inviteeId}`, headers );
const eventData = await eventResponse.json();
const inviteeData = await inviteeResponse.json();
// Checking data
if (!inviteeData || !inviteeData.resource || !inviteeData.resource.scheduled_at) {
console.error("Incorrect meeting details:", inviteeData);
return;
}
const scheduledAt = inviteeData.resource.scheduled_at;
const startTime = new Date(scheduledAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
const startDate = new Date(scheduledAt).toLocaleDateString([], { day: '2-digit', month: 'short', year: 'numeric' });
console.log(`Date event: ${startDate}`);
console.log(`Time event: ${startTime}`);
document.querySelector('.date-box_item').textContent = `${startDate}`;
document.querySelector('.date-box_item + .date-box_item').textContent = `${startTime}`;
} catch (error) {
console.error("Error when retrieving appointment data:", error);
}
}
I don't understand what the problem. I used local tested site....
I also tried create some token here but it don't help me too. In any case I got a 401 error. I tried also with prefix
const token = 'Bearer eyJraWQiOiIxY2UxZTEzNjE3ZGNmNzY2YjNjZWJjY2Y4ZGM1YmFmYThhNjVlNjg0MDIzZjdjMzJiZTgzNDliMjM4MDEzNWI0IiwidHlwIjoiUEFUIiwiYWxnIjoiRVMyNTYifQ.eyJpc3MiOiJodHRwczovL2F1dGguY2FsZW5kbHkuY29tIiwiaWF0IjoxNzMxNzkxNTkwLCJqdGkiOiJkZWYyMDUxYi1jNzk0LTRjOWQtYWY0OC1kNjI2OGFmYWMzMGQiLCJ1c2VyX3V1aWQiOiIxMTg0MGNlZC0xZTEyLTQ1Mjct';
The second fetch()
parameter is an options object, one of the parameters of that object is headers
.
Which means you need to have your headers
inside {}
const eventResponse = await fetch(`https://api.calendly.com/scheduled_events/${eventId}`, {headers });
const inviteeResponse = await fetch(`https://api.calendly.com/scheduled_events/${eventId}/invitees/${inviteeId}`, {headers} );