When creating an OAuth client you can specify:
- booking URL to manage where people land after booking after one of your users.
- reschedule URL to your page for rescheduling a booking.
- cancel URL to your page for cancelling a booking.
This guide will explain each of the URLs and how to create page for each of them using atoms and our hooks.
Booking URL
After a person books one of your users, that person should see the successful booking.
![](/docs/images/booking-page.png)
Page in the booking URL will take URL parameter provided by us and then hook to fetch the booking and then display it. Here is an example:
- Pass
my-app.com/bookings
as the redirectURI. - In your app, create
my-app.com/bookings/[bookingUid]
page where bookingUid will become path parameter. - When a booking occurs, booker will be re-directed to the redirectURI with booking UID as the bookingUid parameter aka my-app.com/bookings/[bookingUid].
- In the my-app.com/bookings/[bookingUid] route create a page that imports
useGetBooking
hook, then extract bookingUid from URL parameter, and uses the hook to display booking information:
import { useGetBooking } from "@calcom/atoms"; export default function Bookings(props: { calUsername: string; calEmail: string }) { const router = useRouter(); const { isLoading, data: booking, refetch } = useGetBooking((router.query.bookingUid as string) ?? ""); return ( <p>{booking.title}</p> )
An example implementation can be found here.
Reschedule URL
- Pass
my-app.com/bookings/reschedule
as the redirectURI. - When “Reschedule” is clicked, user will be re-directed to the redirectURI with rescheduled and eventTypeSlug query parameters
my-app.com/reschedule?rescheduleUid=buiaE8jHmNAxLrqitahCeL&eventTypeSlug=thirty-minutes
- In the my-app.com/reschedule route create a page that extracts
rescheduleUid
andeventTypeSlug
from the query parameters and passes the to theBooker
atom:
const rescheduleUid = (router.query.rescheduleUid as string) ?? ""; const eventTypeSlugQueryParam = (router.query.eventTypeSlug as string) ?? ""; <Booker rescheduleUid={queryParamRescheduleUid} eventSlug={queryParamEventTypeSlug} username={calUsername} />
You only need rescheduleUid, eventSlug and username.
An example implementation can be found here.
Cancel URL
- Pass
my-app.com/bookings/cancel
as the cancelURI. - In your app, create
my-app.com/bookings/cancel/[bookingUid]
page where bookingUid will become path parameter. - In the page of my-app.com/cancel/[bookingUid] import useCancelBooking from atoms and get access to the cancel mutation import { useCancelBooking } from "@calcom/atoms";
const { mutate: cancelBooking } = useCancelBooking({ onSuccess: () => { refetch(); }, });
- Create a cancel button that invokes mutation returned by the “useCancelBooking” using the booking uid from the URL parameter. Provide a suitable “cancellationReason”.
<button className="underline" onClick={() => { cancelBooking({ uid: booking.uid, cancellationReason: "User request", }); }}> Cancel </button>
An example implementation can be found here.