---
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 getRedirectUrl={(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                                                                                                       |
| :------------- | :------- | :---------------------------------------------------------------------------------------------------------------- |
| 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:

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

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