Skip to content

Commit 90a83a6

Browse files
authored
docs: add ListEventTypes atom documentation (calcom#25775)
- Add list-event-types.mdx with Quick start, Props, Demo video, and Combining with EventTypeSettings sections - Add list_event_types_light.png screenshot - Update mint.json navigation to include new page
1 parent b33d8c6 commit 90a83a6

3 files changed

Lines changed: 91 additions & 0 deletions

File tree

77.8 KB
Loading

docs/mint.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -225,6 +225,7 @@
225225
"platform/atoms/create-schedule",
226226
"platform/atoms/event-type",
227227
"platform/atoms/google-calendar-connect",
228+
"platform/atoms/list-event-types",
228229
"platform/atoms/list-schedules",
229230
"platform/atoms/outlook-calendar-connect",
230231
"platform/atoms/payment-form",
Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
---
2+
title: "List Event Types"
3+
---
4+
5+
The List Event Types atom displays all of a user's event types with their title, description, and duration. Each item includes a dropdown menu with edit and delete actions.
6+
7+
<div style={{ display: "flex", justifyContent: "center" }}>
8+
<img src="/images/list_event_types_light.png" alt="List event types" width="620" />
9+
</div>
10+
11+
## Quick start
12+
13+
Below is a code snippet to render the ListEventTypes atom. The `getEventTypeUrl` prop receives the event type ID and should return the URL where users will be redirected when clicking on an event type.
14+
15+
```tsx
16+
import { CalProvider, ListEventTypes } from "@calcom/atoms";
17+
18+
export default function EventTypesPage() {
19+
return (
20+
<CalProvider clientId="your-client-id" accessToken="user-access-token">
21+
<ListEventTypes getEventTypeUrl={(eventTypeId) => `/event-types/${eventTypeId}`} />
22+
</CalProvider>
23+
);
24+
}
25+
```
26+
27+
<Info>
28+
The `ListEventTypes` atom requires authentication. Make sure it's wrapped in a `CalProvider` with a valid
29+
`accessToken`.
30+
</Info>
31+
32+
## Props
33+
34+
| Name | Required | Description |
35+
| :-------------- | :------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
36+
| getEventTypeUrl | No | Callback function that receives the event type ID and returns the URL to redirect when clicking on an event type. If not provided, the event type items will not be clickable. |
37+
38+
## Demo
39+
40+
<iframe
41+
height="315"
42+
style={{ width: "100%", maxWidth: "560px" }}
43+
src="https://www.loom.com/embed/05b2e707e9d544cd8da443a0707bc08d"
44+
frameborder="0"
45+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
46+
allowfullscreen="true"
47+
></iframe>
48+
49+
## Combining with EventTypeSettings
50+
51+
The ListEventTypes atom can be combined with the [EventTypeSettings](/platform/atoms/event-type#event-type-settings) atom to provide a complete event type management experience. When a user clicks on an event type from the list, they are redirected to a settings page where they can edit the event type details.
52+
53+
<Steps>
54+
<Step title="Create the list page">
55+
Use the quick start example above to set up a page that displays all event types. The `getEventTypeUrl` prop should return the route where you'll render the EventTypeSettings atom (e.g., `/event-types/${eventTypeId}`).
56+
</Step>
57+
<Step title="Create the settings page">
58+
Set up a dynamic route page (e.g., `/event-types/[eventTypeId]`) that extracts the event type ID from the URL and passes it to the EventTypeSettings atom:
59+
60+
```tsx
61+
import { useRouter } from "next/router";
62+
63+
import { CalProvider, EventTypeSettings } from "@calcom/atoms";
64+
65+
export default function EventTypeSettingsPage() {
66+
const router = useRouter();
67+
const eventTypeId = Number(router.query.eventTypeId);
68+
69+
if (!eventTypeId) return null;
70+
71+
return (
72+
<CalProvider clientId="your-client-id" accessToken="user-access-token">
73+
<EventTypeSettings
74+
id={eventTypeId}
75+
onSuccess={() => {
76+
console.log("Event type updated successfully");
77+
}}
78+
/>
79+
</CalProvider>
80+
);
81+
}
82+
```
83+
84+
</Step>
85+
</Steps>
86+
87+
<Info>
88+
For a complete implementation example, check out the [example
89+
app](https://github.com/calcom/cal.com/tree/main/packages/platform/examples/base).
90+
</Info>

0 commit comments

Comments
 (0)