---
title: "Calendar settings"
---

The calendar settings atom can be used to configure how your event types interact with your calendars. This atom gives you the ability to select where to add events when you're booked. Additionally, you can also select which calendars you want to check for conflicts to prevent double bookings.

Below code snippet can be used to render the calendar settings button

```js
import { CalendarSettings } from "@calcom/atoms";

export default function CalendarSettingsComponent() {
  return (
    <>
      <CalendarSettings />
    </>
  )
}
```
For a demonstration of the calendar settings atom, please refer to the video below.

<p></p>

    <iframe
      height="315"
      style={{ width: "100%", maxWidth: "560px" }}
      src="https://www.loom.com/embed/7f6969363b8743abafcec3974f281987?sid=493e7b5d-b3ae-4821-94a3-972260630e6c"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen="true"
    ></iframe>

<p></p>

Customizations can be done to the calendar settings atom via props and classnames. Below is a list of props that can be passed to the calendar settings atom
<p></p>

| Name       | Required | Description                                                                                               |
|:------------|:----------|:-----------------------------------------------------------------------------------------------------------|
| classNames | No       | To pass in custom classnames from outside for styling the atom    

Along with the props, calendar settings atom accepts custom styles via the **classNames** prop. Below is a list of props that fall under this **classNames** prop.
<p></p>

| Name                                    | Description                                                  |
|:-----------------------------------------|:--------------------------------------------------------------|
| calendarSettingsCustomClassnames        | Adds styling to the entire calendar settings atom            |
| destinationCalendarSettingsCustomClassnames | Adds styling only to the destination calendar container   |
| selectedCalendarSettingsCustomClassnames | Adds styling only to the selected calendar container       |

<p></p>
Additionally, if you wish to select either the Destination Calendar or the Selected Calendar, we also provide atoms specifically designed for this purpose.

**1. Destination calendar settings atom**

The destination calendar settings atom lets you can select which calendar you want to add events to when you're booked. Below code snippet can be used to render the destination calendar settings atom.

```js
import { DestinationCalendarSettings } from "@calcom/atoms";

export default function DestinationCalendars() {
  const loadingStatus = <>Loading...</>

  return (
    <>
      <DestinationCalendarSettings classNames="mx-5" statusLoader={loadingStatus} />
    </>
  )
}
```
This is how the destination calendar settings atom looks:

<img src="/images/DestinationCalendar.png" />

Customizations can be done to the destination calendar settings atom via props. Below is a list of props that can be passed to the calendar settings atom
<p></p>

| Name         | Required | Description                                                                                               |
|:--------------|:----------|:-----------------------------------------------------------------------------------------------------------|
| statusLoader | No       | To pass in a custom component for the loading state                                                       |
| classNames   | No       | To pass in custom classnames from outside for styling the atom                                            |

**2. Selected calendar settings atom**

The selected calendar settings atom lets you select which calendars you want to check for conflicts to prevent double bookings. Below code snippet can be used to render the selected calendar settings atom.

```js
import { SelectedCalendarsSettings } from "@calcom/atoms";

export default function SelectedCalendars( props : SelectedCalendarsProps ) {
  return (
    <>
      <SelectedCalendarsSettings classNames="mx-5 mb-6" />
    </>
  )
}
```
This is how the selected calendar settings atom looks:

<img src="/images/SelectedCalendar.png" />

Customizations can be done to the destination calendar settings atom via props. Below is a list of props that can be passed to the calendar settings atom
<p></p>

| Name       | Required | Description                                                                                               |
|:------------|:----------|:-----------------------------------------------------------------------------------------------------------|
| classNames | No       | To pass in custom classnames from outside for styling the atom                                            |