In order to create a team event type, you need to have an Essentials plan or above. Additionally, you also need to be a team admin or owner.

​
1. useEventTypes

The useEventTypes returns all event types associated with a user. Simply provide a username to fetch all their available event types. This hook is useful when you need to display or manage a user’s entire collection of event configurations.

Below code snippet shows how to use the useEventTypes hook to fetch the event types of a specific user.

import { useEventTypes } from "@calcom/atoms";

export default function EventTypes({ username }: { username: string }) {
  const { isLoading: isLoadingEvents, data: eventTypes, refetch } = useEventTypes(username);

  return (
    <>
      {isLoadingEvents && <p>Loading...</p>}
      {!isLoadingEvents && !eventTypes && <p>No event types found</p>}
      {!isLoadingEvents &&
        eventTypes &&
        (Boolean(eventTypes?.length)) &&
        eventTypes?.map((event) => {
            return (
                <div key={event.id}><h1>Event: {event.slug}</h1></div>
            );
       })}
    </>
  );
}

​
2. useTeamEventTypes

The useTeamEventTypes returns all event types associated with a team. Simply provide the team id to fetch all their available event types. This hook is useful when you need to display or manage a team’s entire collection of event configurations.

Below code snippet shows how to use the useTeamEventTypes hook to fetch the event types of a team.

import { useTeamEventTypes } from "@calcom/atoms";

export default function TeamEventTypes({ id }: { id: number }) {
  const { isLoading: isLoadingTeamEvents, data: teamEventTypes, refetch: refetchTeamEvents } = useTeamEventTypes(id);

  return (
    <>
      {isLoadingTeamEvents && <p>Loading...</p>}
      {!isLoadingTeamEvents && !teamEventTypes && <p>No team events found</p>}
      {!isLoadingTeamEvents &&
        teamEventTypes &&
        (Boolean(teamEventTypes?.length)) &&
        teamEventTypes?.map((event) => {
            return (
                <div key={event.id}><h1>Team event: {event.slug}</h1></div>
            );
       })}
    </>
  );
}

​
3. useEventTypeById

The useEventTypeById returns data for a specific event type, provided you pass in the correct event type id. This hook is useful when you need to display or manage a specific event type.

Below code snippet shows how to use the useEventTypeById hook to fetch a specific event type.

import { useEventTypeById } from "@calcom/atoms";

export default function EventType({ id }: { id: number }) {
  const { isLoading: isLoadingEventType, data: eventType } = useEventTypeById(id);

  return (
    <>
      {isLoadingEventType && <p>Loading...</p>}
      {!isLoadingEventType && !eventType && <p>No event type found</p>}
      {!isLoadingEventType &&
        !!eventType &&
        return (
          <div>Title: {eventType.slug}</div>
        )
        }
    </>
  );
}

​
4. useCreateEventType

The useCreateEventType hook allows you to create a new event type. This hook returns a mutation function that handles the event type creation process. The mutation function accepts an object with the following properties: lengthInMinutes which is the length of the event in minutes, title which is the title of the event, slug which is the slug of the event, and description which is the description of the event.

Below code snippet shows how to use the useCreateEventType hook to setup an event type.

import { useCreateEventType } from "@calcom/atoms";

export default function CreateEventType() {
  const { mutate: createEventType, isPending } = useCreateEventType({
    onSuccess: () => {
      console.log("Event type created successfully!");
    },
    onError: () => {
      console.log("Error creating event type");
    },
  });

  return (
    <>
      <button 
        disabled={isPending}
        onClick={() => {
          createEventType({
            lengthInMinutes: 15,
            title: "Coffee chat",
            slug: "coffee-chat",
            description: "Quick chat about coffee and life in general!",
          })
        }}>
        Create event type
      </button>
    </>
  );
}

​
5. useCreateTeamEventType

The useCreateTeamEventType hook allows you to create a new team event type. This hook returns a mutation function that handles the event type creation process. The mutation function accepts an object with the following properties: lengthInMinutes which is the length of the event in minutes, title which is the title of the event, slug which is the slug of the event, description which is the description of the event, schedulingType which can be either COLLECTIVE, ROUND_ROBIN or MANAGED, hosts which is an array of hosts for the event and the teamId which is the id of the team.

Below code snippet shows how to use the useCreateTeamEventType hook to setup a team event type.

import { useCreateTeamEventType } from "@calcom/atoms";

export default function CreateTeamEventType() {
  const { mutate: createTeamEventType, isPending } = useCreateTeamEventType({
    onSuccess: () => {
      console.log("Event type created successfully!");
    },
    onError: () => {
      console.log("Error creating event type");
    },
  });

  return (
    <>
      <button 
        disabled={isPending}
        onClick={() => {
          createTeamEventType({
            lengthInMinutes: 30,
            title: "Daily standup",
            slug: "daily-standup",
            description: "Daily standup for the team",
            schedulingType: "COLLECTIVE",
            hosts: [{"userId": 1456}, {"userId": 2357}],
            teamId: 1234,
          })
        }}>
        Create team event type
      </button>
    </>
  );
}

Was this page helpful?

Suggest editsRaise issue
Bookings hooksCalendars hooks