3222be9171
* docs: booking window rolling description * docs: v2 auth and navigating endpoints * Update apps/api/v2/swagger/documentation.json * Update docs/api-reference/v2/introduction.mdx * Update docs/api-reference/v2/introduction.mdx * Update docs/api-reference/v2/introduction.mdx * docs: refresh and force-refresh endpoints * docs: booking fields and toasts guides * fix docs * fix: bookings docs * docs: booking-redirects usebooking * Update booking-fields.mdx * Update booking-fields.mdx * Update booking-fields.mdx * Update booking-window.input.ts * Update replacing-toasts.mdx --------- Co-authored-by: Keith Williams <keithwillcode@gmail.com> Co-authored-by: Morgan <33722304+ThyMinimalDev@users.noreply.github.com>
34 lines
1004 B
Plaintext
34 lines
1004 B
Plaintext
---
|
|
title: Custom toasts
|
|
description: Replace default cal.com toasts with your own
|
|
---
|
|
|
|
It is possible to disable default toasts for the `AvailabilitySettings` and `EventTypeSettings` atoms to then use hooks => callbacks
|
|
and listen for updates to then render your own toasts.
|
|
|
|
If we use the `AvailabilitySettings` atom, make changes and press "Save" a confirmation appears:
|
|
|
|
<img src="/images/platform/guides/replacing-toasts/availability-settings.png" />
|
|
|
|
We can disable them using `disableToasts` prop:
|
|
|
|
```js
|
|
<AvailabilitySettings
|
|
disableToasts={true}
|
|
/>
|
|
```
|
|
|
|
Now when changes happen and Save is clicked the toast will not appear.
|
|
|
|
You can then create functions and pass them to hooks:
|
|
```js
|
|
<AvailabilitySettings
|
|
disableToasts={true}
|
|
onUpdateSuccess={updateSuccessHandler}
|
|
onUpdateError={updateErrorHandler}
|
|
onDeleteSuccess={deleteSucessHandler}
|
|
onDeleteError={deleteErrorHandler}
|
|
/>
|
|
```
|
|
in case of success response is passed to your functions and in case of error and error.
|