Skip to main content

​
1. useConnectedCalendars

The useConnectedCalendars returns an object containing all connected calendars of a user, and the destination calendar. It is useful in managing multiple calendar integrations. Each connected calendar entry contains essential properties such as the credentialId, externalId and integration which should be an object, which can be used in the hooks to add and remove selected calendars. Below code snippet shows how to use the useConnectedCalendars hook to fetch calendars for a user. 
import { useConnectedCalendars } from "@calcom/atoms";

export default function ConnectedCalendars() {
  const { isLoading: isLoadingConnectedCalendars, data: userCalendars } = useConnectedCalendars({});

  return (
    <>
      {isLoadingConnectedCalendars && <p>Loading...</p>}
      {!isLoadingConnectedCalendars && !userCalendars && <p>No connected calendars</p>}
      {!isLoadingConnectedCalendars &&
        userCalendars &&
        (Boolean(userCalendars?connectedCalendars?.length)) &&
        userCalendars?connectedCalendars?.map((calendar) => {
            return (
                <div key={calendar.credentialId}><h1>Calendar type: {calendar.integration.name}</h1></div>
            );
       })}
    </>
  );
}

​
2. useAddSelectedCalendar

The useAddSelectedCalendar lets you add a calendar to check for conflicts to prevent double bookings. This hook returns a mutation function that handles the addition process. The mutation function accepts an object with the following properties: credentialId which is the credential id of the calendar to add, integration which is the name of the integration, and externalId which is the external id of the calendar. In order to obtain those credentials, you can use the useConnectedCalendars hook. Below code snippet shows how to use the useAddSelectedCalendar hook to add a specific calendar to check for conflicts. 
import { useAddSelectedCalendar } from "@calcom/atoms";

export default function AddSelectedCalendar() {
  const { mutate: addSelectedCalendar } = useAddSelectedCalendar({
    onSuccess: () => {
      console.log("Selected calendar added successfully!");
    },
    onError: () => {
      console.log("Error adding selected calendar");
    },
  });

  return (
    <>
      <button onClick={() => {
          addSelectedCalendar({
            credentialId: 123,
            integration: "google_calendar",
            externalId: "613f23c27149a2796f2c155bfe79203a135@group.calendar.google.com",
          })
        }}>
        Add selected calendar
      </button>
    </>
  );
}

​
3. useRemoveSelectedCalendar

The useRemoveSelectedCalendar lets you remove a calendar to check for conflicts to prevent double bookings. This hook returns a mutation function that handles the addition process. The mutation function accepts an object with the following properties: credentialId which is the credential id of the calendar to add, integration which is the name of the integration, and externalId which is the external id of the calendar. In order to obtain those credentials, you can use the useConnectedCalendars hook. Below code snippet shows how to use the useRemoveSelectedCalendar hook to remove a specific calendar to check for conflicts. 
import { useRemoveSelectedCalendar } from "@calcom/atoms";

export default function RemoveSelectedCalendar() {
  const { mutate: removeSelectedCalendar } = useRemoveSelectedCalendar({
    onSuccess: () => {
      console.log("Selected calendar removed successfully!");
    },
    onError: () => {
      console.log("Error removing selected calendar");
    },
  });

  return (
    <>
      <button onClick={() => {
          removeSelectedCalendar({
            credentialId: 987,
            integration: "office365_calendar",
            externalId: "AQMkADAwATM3AADfEpy7w2EpEOi_xwYa7A_cQcACgtJE7RnHEeyisVq2Eq2ENs2gAAAhFDAAAA",
          })
        }}>
        Remove selected calendar
      </button>
    </>
  );
}

​
4. useDeleteCalendarCredentials

The useDeleteCalendarCredentials hook allows you to delete a users calendar credentials. This hook returns a mutation function which handles the deletion process. The mutation function accepts an object with the following properties: id which is the credential id, and calendar is the name of the calendar which can be either google, office365 or apple. Below code snippet shows how to use the useDeleteCalendarCredentials hook to manage deletion of calendar credentials. 
import { useDeleteCalendarCredentials } from "@calcom/atoms";

export default function DeleteUserCalendar() {
  const { mutate: deleteCalendarCredentials } = useDeleteCalendarCredentials({
    onSuccess: () => {
      console.log("Calendar credentials deleted successfully!");
    },
    onError: () => {
      console.log("Error deleting calendar credentials");
    },
  });

  return (
    <>
      <button onClick={async () => {
          await deleteCalendarCredentials({
            calendar: "google",
            id: 123,
          })
        }}>
        Delete calendar
      </button>
    </>
  );
}
⌘I