List schedules - Cal

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

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.

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

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

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

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

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.

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

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