swalihkolakkadanandGitHub
c8f9085988
The documentation referenced `getRedirectUrl` but the actual component prop is `getScheduleUrl`, causing the callback to silently not fire.
117 lines
3.9 KiB
Plaintext
117 lines
3.9 KiB
Plaintext
---
|
|
title: "List schedules"
|
|
---
|
|
|
|
The List schedules atom displays all of a user's availability schedules and provides management actions such as delete, duplicate, and edit capabilities for each schedule.
|
|
|
|
Below code snippet can be used to render the List schedules atom
|
|
|
|
```js
|
|
import { ListSchedules } from "@calcom/atoms";
|
|
|
|
export default function ListSchedules() {
|
|
return (
|
|
<>
|
|
<ListSchedules getScheduleUrl={(scheduleId) => `/availability/${scheduleId}`} />
|
|
</>
|
|
);
|
|
}
|
|
```
|
|
|
|
For a demonstration of the List schedules atom, please refer to the video below.
|
|
|
|
<p></p>
|
|
|
|
<iframe
|
|
height="315"
|
|
style={{ width: "100%", maxWidth: "560px" }}
|
|
src="https://www.loom.com/embed/8e020a4848d543548c519d3a7cd532c6?sid=e6ccad23-8372-402a-8fd3-c0180bc9113c"
|
|
frameborder="0"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
allowfullscreen="true"
|
|
></iframe>
|
|
|
|
<p></p>
|
|
|
|
Below is a list of props that can be passed to the List schedules atom.
|
|
|
|
<p></p>
|
|
|
|
| Name | Required | Description |
|
|
| :------------- | :------- | :---------------------------------------------------------------------------------------------------------------- |
|
|
| getScheduleUrl | No | Callback function that determines where the user should be redirected when they click on a schedule from the atom |
|
|
|
|
## Combining list schedules atom with availability settings atom
|
|
|
|
The List schedules atom works best when combined with the Availability settings atom to provide a seamless experience. In order to combine both of atom, here are the steps we recommend:
|
|
|
|
<Steps>
|
|
<Step title="Setup list schedules atom">
|
|
Create a page for demostrating the list schedules atom.
|
|
|
|
Below code snippet can be used to setup the list schedules atom on a new page
|
|
|
|
```js
|
|
import { ListSchedules } from "@calcom/atoms";
|
|
|
|
export default function ListSchedules() {
|
|
return (
|
|
<>
|
|
<ListSchedules getScheduleUrl={(scheduleId) => `/availability/${scheduleId}`} />
|
|
</>
|
|
);
|
|
}
|
|
```
|
|
|
|
`getScheduleUrl` prop is a callback function that determines where the user should be redirected when they click on a schedule from the atom. Say if you want to display your availability settings atom on the page `/availability/:scheduleId`, you need to make sure you return the exact same url when you call the `getScheduleUrl` function.
|
|
|
|
</Step>
|
|
<Step title="Setup availability settings atom">
|
|
Create a page for demonstrating the availability settings atom. This should be a dynamic route that accepts a schedule id as a query parameter, and then the schedule id gets passed to the availability settings atom.
|
|
|
|
Below code snippet can be used to obtain the `scheduleId` and display the availability settings atom
|
|
|
|
```js
|
|
import { AvailabilitySettings } from "@calcom/atoms";
|
|
import { useRouter } from "next/router";
|
|
|
|
export default function Availability() {
|
|
const router = useRouter();
|
|
|
|
return (
|
|
<>
|
|
<AvailabilitySettings
|
|
id={router.query.scheduleId as string}
|
|
onUpdateSuccess={() => {
|
|
console.log("Updated schedule successfully");
|
|
}}
|
|
/>
|
|
</>
|
|
)
|
|
}
|
|
```
|
|
|
|
</Step>
|
|
|
|
</Steps>
|
|
|
|
-Below video shows a demonstration of how we combined the list schedules atom and availability settings atom in one of our example app to create a seamless availability management experience.
|
|
|
|
<p></p>
|
|
|
|
<iframe
|
|
height="315"
|
|
style={{ width: "100%", maxWidth: "560px" }}
|
|
src="https://www.loom.com/embed/76b65330e61e47eb95b7072ed3a42ec8?sid=9373ec6f-ba55-431e-98de-5dd3fb252a8a"
|
|
frameborder="0"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
allowfullscreen="true"
|
|
></iframe>
|
|
|
|
<p></p>
|
|
|
|
<Info>
|
|
Link to the example app can be found
|
|
[here](https://github.com/calcom/cal.com/tree/main/packages/platform/examples/base)
|
|
</Info>
|