> ## Documentation Index
> Fetch the complete documentation index at: https://cal.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# 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 theme={null}
import { ListSchedules } from "@calcom/atoms";

export default function ListSchedules() {
  return (
    <>
      <ListSchedules getRedirectUrl={(scheduleId) => `/availability/${scheduleId}`} />
    </>
  );
}
```

For a demonstration of the List schedules atom, please refer to the video below.

[https://www.loom.com/embed/8e020a4848d543548c519d3a7cd532c6?sid=e6ccad23-8372-402a-8fd3-c0180bc9113c](https://www.loom.com/embed/8e020a4848d543548c519d3a7cd532c6?sid=e6ccad23-8372-402a-8fd3-c0180bc9113c)

Below is a list of props that can be passed to the List schedules atom.

| Name | Required | Description |
| :- | :- | :- |
| getRedirectUrl | 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:

**1. 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 theme={null}
import { ListSchedules } from "@calcom/atoms";

export default function ListSchedules() {
  return (
    <>
      <ListSchedules getRedirectUrl={(scheduleId) => `/availability/${scheduleId}`} />
    </>
  );
}
```

`getRedirectUrl` 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 `getRedirectUrl` function.

**2. 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 theme={null}
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");
          }}
       />
    </>
  )
}
```

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

[https://www.loom.com/embed/76b65330e61e47eb95b7072ed3a42ec8?sid=9373ec6f-ba55-431e-98de-5dd3fb252a8a](https://www.loom.com/embed/76b65330e61e47eb95b7072ed3a42ec8?sid=9373ec6f-ba55-431e-98de-5dd3fb252a8a)

> [!NOTE]
>
> Link to the example app can be found
> [here](https://github.com/calcom/cal.com/tree/main/packages/platform/examples/base)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.