javascriptfetch-apicalendly

Calendly Api integration to get events data


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....

Api for creating some credentials for Calendly

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';

Solution

  • 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} );