diff --git a/docs/platform/atoms/booker.mdx b/docs/platform/atoms/booker.mdx
index 3daf66ab67..8ed941bb31 100644
--- a/docs/platform/atoms/booker.mdx
+++ b/docs/platform/atoms/booker.mdx
@@ -77,65 +77,67 @@ For a demonstration of the booker atom along with calendar overlay, please refer
-We offer all kinds of customizations to the booker atom via props and customClassNames.
+We offer all kinds of customizations to the booker atom via props and customClassNames.
Below is a list of props that can be passed to the booker atom.
+
-| Name | Required | Description |
-|:----------------------------|:----------|:-------------------------------------------------------------------------------------------------------|
-| username | Yes | Username of the person whose schedule is to be displayed |
-| eventSlug | Yes | Unique slug created for a particular event |
-| orgBannerUrl | No | URL of the user's current organization |
-| customClassNames | No | To pass in custom classnames from outside for styling the atom |
-| month | No | The exact month for displaying a user's availability; defaults to the current month |
-| selectedDate | No | Default selected date for which the slot picker opens |
-| startTime | No | Custom start time for the Booker that allows users to decide the first available date. Accepts JavaScript Date object or date string in format `YYYY-MM-DD` (e.g., `"2025-08-20"` or `new Date("2025-08-20")`) |
-| hideBranding | No | For hiding any branding on the booker |
-| isAway | No | Sets the booker component to the away state |
-| allowsDynamicBooking | No | Boolean indicating if the booking is a dynamic booking |
-| bookingData | No | Data for rescheduling a booking passed in via this prop |
-| defaultFormValues | No | Prefilled values for booking form fields like name, email, guests, notes, reschedule reason, etc. |
-| isTeamEvent | No | Boolean indicating if it is a team event |
-| duration | No | Refers to a multiple-duration event type; selects default if not passed |
-| durationConfig | No | Configures selectable options for a multi-duration event type |
-| hashedLink | No | Refers to the private link from event types page |
-| isInstantMeeting | No | Boolean indicating if the booking is an instant meeting |
-| rescheduleUid | No | Unique ID generated during rescheduling |
-| bookingUid | No | Unique ID generated during booking |
-| locationUrl | No | Custom meeting link URL instead of a Cal.com link |
-| firstName | No | First name of the attendee |
-| lastName | No | Last name of the attendee |
-| guests | No | Invite a guest to join a meeting |
-| name | No | Host name |
-| onCreateBookingSuccess | No | Callback function for successful booking creation |
-| onCreateBookingError | No | Callback function triggered on booking creation failure |
-| onCreateRecurringBookingSuccess | No | Callback function for successful recurring booking creation |
-| onCreateRecurringBookingError | No | Callback function triggered on recurring booking creation failure |
-| onCreateInstantBookingSuccess | No | Callback function for successful instant booking creation |
-| onCreateInstantBookingError | No | Callback function triggered on instant booking creation failure |
-| onReserveSlotSuccess | No | Callback function for successful slot reservation |
-| onReserveSlotError | No | Callback function triggered on slot reservation failure |
-| onDeleteSlotSuccess | No | Callback function for successful slot deletion |
-| onDeleteSlotError | No | Callback function triggered on slot deletion failure
-| view | No | Specifies the layout of the booker atom into column, week, or month view |
-| metadata | No | Used to pass custom metadata values into the booker. Metadata should be an object eg: `{ bookingSource: "website", userRole: "admin" }` |
-| bannerUrl | No | Adds custom banner to the booker atom |
-| onBookerStateChange | No | Callback function that is triggered when the state of the booker atom changes. |
-| allowUpdatingUrlParams | No | Boolean indicating if the URL parameters should be updated, defaults to false. |
-| confirmButtonDisabled | No | Boolean indicating if the submit button should be disabled, defaults to false. |
-| timeZones | No | Array of valid IANA timezones to be used in the booker. Eg. ["Asia/Kolkata", "Europe/London"] |
-| onTimeslotsLoaded | No | Callback function triggered once the available timeslots have been fetched. |
-| roundRobinHideOrgAndTeam | No | Boolean indicating if the organization and team should be hidden in the booker atom sidebar for round robin scheduling type, defaults to false. |
-| showNoAvailabilityDialog | No | Boolean indicating if the no availability dialog should be shown, defaults to true. |
-| silentlyHandleCalendarFailures | No | Boolean when true the booker still displays slots when the third party calendars credentials are invalid or expired, Booker may show stale availability when enabled |
-| hideEventMetadata | No | Boolean that controls the visibility of the event metadata sidebar. When `true`, hides the left sidebar containing event details like title, description, duration, and host information. Defaults to `false`. |
+| Name | Required | Description |
+| :------------------------------ | :------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| username | Yes | Username of the person whose schedule is to be displayed |
+| eventSlug | Yes | Unique slug created for a particular event |
+| orgBannerUrl | No | URL of the user's current organization |
+| customClassNames | No | To pass in custom classnames from outside for styling the atom |
+| month | No | The exact month for displaying a user's availability; defaults to the current month |
+| selectedDate | No | Default selected date for which the slot picker opens |
+| startTime | No | Custom start time for the Booker that allows users to decide the first available date. Accepts JavaScript Date object or date string in format `YYYY-MM-DD` (e.g., `"2025-08-20"` or `new Date("2025-08-20")`) |
+| hideBranding | No | For hiding any branding on the booker |
+| isAway | No | Sets the booker component to the away state |
+| allowsDynamicBooking | No | Boolean indicating if the booking is a dynamic booking |
+| bookingData | No | Data for rescheduling a booking passed in via this prop |
+| defaultFormValues | No | Prefilled values for booking form fields like name, email, guests, notes, reschedule reason, etc. |
+| isTeamEvent | No | Boolean indicating if it is a team event |
+| duration | No | Refers to a multiple-duration event type; selects default if not passed |
+| durationConfig | No | Configures selectable options for a multi-duration event type |
+| hashedLink | No | Refers to the private link from event types page |
+| isInstantMeeting | No | Boolean indicating if the booking is an instant meeting |
+| bookingUid | No | Unique ID generated during booking creation |
+| rescheduleUid | No | Unique ID generated during booking creation, same as bookingUid |
+| locationUrl | No | Custom meeting link URL instead of a Cal.com link |
+| firstName | No | First name of the attendee |
+| lastName | No | Last name of the attendee |
+| guests | No | Invite a guest to join a meeting |
+| name | No | Host name |
+| onCreateBookingSuccess | No | Callback function for successful booking creation |
+| onCreateBookingError | No | Callback function triggered on booking creation failure |
+| onCreateRecurringBookingSuccess | No | Callback function for successful recurring booking creation |
+| onCreateRecurringBookingError | No | Callback function triggered on recurring booking creation failure |
+| onCreateInstantBookingSuccess | No | Callback function for successful instant booking creation |
+| onCreateInstantBookingError | No | Callback function triggered on instant booking creation failure |
+| onReserveSlotSuccess | No | Callback function for successful slot reservation |
+| onReserveSlotError | No | Callback function triggered on slot reservation failure |
+| onDeleteSlotSuccess | No | Callback function for successful slot deletion |
+| onDeleteSlotError | No | Callback function triggered on slot deletion failure |
+| view | No | Specifies the layout of the booker atom into column, week, or month view |
+| metadata | No | Used to pass custom metadata values into the booker. Metadata should be an object eg: `{ bookingSource: "website", userRole: "admin" }` |
+| bannerUrl | No | Adds custom banner to the booker atom |
+| onBookerStateChange | No | Callback function that is triggered when the state of the booker atom changes. |
+| allowUpdatingUrlParams | No | Boolean indicating if the URL parameters should be updated, defaults to false. |
+| confirmButtonDisabled | No | Boolean indicating if the submit button should be disabled, defaults to false. |
+| timeZones | No | Array of valid IANA timezones to be used in the booker. Eg. ["Asia/Kolkata", "Europe/London"] |
+| onTimeslotsLoaded | No | Callback function triggered once the available timeslots have been fetched. |
+| roundRobinHideOrgAndTeam | No | Boolean indicating if the organization and team should be hidden in the booker atom sidebar for round robin scheduling type, defaults to false. |
+| showNoAvailabilityDialog | No | Boolean indicating if the no availability dialog should be shown, defaults to true. |
+| silentlyHandleCalendarFailures | No | Boolean when true the booker still displays slots when the third party calendars credentials are invalid or expired, Booker may show stale availability when enabled |
+| hideEventMetadata | No | Boolean that controls the visibility of the event metadata sidebar. When `true`, hides the left sidebar containing event details like title, description, duration, and host information. Defaults to `false`. |
## Styling
Booker atom accepts custom styles via the `customClassNames` prop. This prop is an object that contains root level styles and nested objects for styling different parts of the booker component. Each nested object groups related styles for a specific section of the booker (e.g., eventMeta, datePicker, availableTimeSlots, etc).
Here is an example booker with root level style `bookerContainer` and nested object `datePickerCustomClassNames` with `datePickerDatesActive` style:
+
```js
import { Booker } from "@calcom/atoms";
@@ -159,43 +161,49 @@ export default function Booker( props : BookerProps ) {
Below is a list of **customClassNames** properties grouped by their parent objects:
### Root Level Styles
-| Property | Description |
-|:---------|:-------------|
+
+| Property | Description |
+| :-------------- | :------------------------------------------- |
| bookerContainer | Adds styling to the whole of the booker atom |
### Event Meta Styles (`eventMetaCustomClassNames`)
-| Property | Description |
-|:---------|:-------------|
-| eventMetaContainer | Styles the event meta component containing details about an event |
-| eventMetaTitle | Adds styles to the event meta title |
-| eventMetaTimezoneSelect | Adds styles to the event meta timezone selector |
+
+| Property | Description |
+| :---------------------- | :---------------------------------------------------------------- |
+| eventMetaContainer | Styles the event meta component containing details about an event |
+| eventMetaTitle | Adds styles to the event meta title |
+| eventMetaTimezoneSelect | Adds styles to the event meta timezone selector |
### Date Picker Styles (`datePickerCustomClassNames`)
-| Property | Description |
-|:---------|:-------------|
-| datePickerContainer | Adds styling to the date picker |
-| datePickerTitle | Styles the date picker title |
-| datePickerDays | Adds styling to all days in the date picker |
-| datePickerDate | Adds styling to all dates in the date picker |
-| datePickerDatesActive | Styles only the dates with available slots |
-| datePickerToggle | Styles the left and right toggle buttons |
+
+| Property | Description |
+| :-------------------- | :------------------------------------------- |
+| datePickerContainer | Adds styling to the date picker |
+| datePickerTitle | Styles the date picker title |
+| datePickerDays | Adds styling to all days in the date picker |
+| datePickerDate | Adds styling to all dates in the date picker |
+| datePickerDatesActive | Styles only the dates with available slots |
+| datePickerToggle | Styles the left and right toggle buttons |
### Available Time Slots Styles (`availableTimeSlotsCustomClassNames`)
-| Property | Description |
-|:---------|:-------------|
-| availableTimeSlotsContainer | Adds styling to the available time slots component |
-| availableTimeSlotsHeaderContainer | Styles only the header container |
-| availableTimeSlotsTitle | Adds styles to the title |
-| availableTimeSlotsTimeFormatToggle | Adds styles to the format toggle buttons |
-| availableTimes | Styles all the available times container |
+
+| Property | Description |
+| :--------------------------------- | :------------------------------------------------- |
+| availableTimeSlotsContainer | Adds styling to the available time slots component |
+| availableTimeSlotsHeaderContainer | Styles only the header container |
+| availableTimeSlotsTitle | Adds styles to the title |
+| availableTimeSlotsTimeFormatToggle | Adds styles to the format toggle buttons |
+| availableTimes | Styles all the available times container |
### Confirmation Step Styles (`confirmStep`)
-| Property | Description |
-|:---------|:-------------|
+
+| Property | Description |
+| :------------ | :-------------------------------------------- |
| confirmButton | Styles the confirm button in the booking form |
-| backButton | Styles the back button in the booking form |
+| backButton | Styles the back button in the booking form |
Here is an example with more custom styles:
+
```js
import { Booker } from "@calcom/atoms";
@@ -225,4 +233,57 @@ export default function Booker( props : BookerProps ) {
)
}
-```
\ No newline at end of file
+```
+
+## Rescheduling a booking
+
+The booker atom also supports rescheduling a booking. To reschedule a booking, you need to pass in the `rescheduleUid` prop to the booker atom along with the other necessary props. This will allow the booker to display the reschedule form and handle the rescheduling process. The `rescheduleUid` is the booking uid you get when you create a booking.
+
+Here is an example of how to use the booker atom for rescheduling an individual event:
+
+```js
+import { Booker } from "@calcom/atoms";
+
+export default function Booker( props : BookerProps ) {
+ return (
+ <>
+ {
+ console.log("Booking rescheduled successfully!");
+ }}
+ />
+
+ )
+}
+```
+
+For team events, you need to pass isTeamEvent and teamId prop to the booker along with the other necessary props. This will allow the booker to display the reschedule form and handle the rescheduling process. The `teamId` is the team id you get when you create a team event.
+
+Here is an example of how to use the booker atom for rescheduling a team event:
+
+```js
+import { Booker } from "@calcom/atoms";
+
+export default function Booker( props : BookerProps ) {
+ return (
+ <>
+ {
+ console.log("Booking rescheduled successfully!");
+ }}
+ />
+
+ )
+}
+```