> Calendly developer docs. For page Markdown, append .md to any URL.
> Index: https://developer.calendly.com/llms.txt
> API catalog: https://developer.calendly.com/.well-known/api-catalog
> OpenAPI: https://developer.calendly.com/openapi/calendly-api.yaml
> OAuth authorization server: https://calendly.com/.well-known/oauth-authorization-server
> MCP protected resource: https://mcp.calendly.com/.well-known/oauth-protected-resource
> Scheduling MCP endpoint: https://mcp.calendly.com
> Docs search MCP: https://developer.calendly.com/_mcp/server

# Displaying the Availability of Your Users

In this guide, we'll explore two effective methods of displaying your user's availability: using a table or utilizing a calendar view. With this ability you are able to see how many available time slots are open and track number of bookings against overall availability. You can then take appropriate actions if time slots are limited. Each approach offers its own benefits.

---

Please note that some prior JavaScript and/or React knowledge will be needed to implement these.

---

## **Using a table to display the availability and busy times of your users**

There are many possible implementations of the above table.

This example uses the GET `/user_availability_schedules` and `/user_busy_times` endpoints to retrieve data and display it in a useful format.

* The "**Day of Week**" column pulls from the `rules` array returned in the `/user_availability_schedules` collection
* The "**Availability Range(s)**" column is also populated from the `rules` array returned in the `/user_availability_schedules`
* The "**Unavailable Times**" column pulls from the `/user_busy_times` endpoint
* The "**Total Scheduled Hours**" column calculates the total booked time slots in a human-readable format, using [Moment.js](https://www.npmjs.com/package/moment?activeTab=readme)
* The "**Total Available Hours To Book**" column simply calculates the difference between column 2's and column 4's totals, while also making use of [Moment.js](https://www.npmjs.com/package/moment?activeTab=readme)

## **Using a calendar to display the availability and busy times of your users**

Source: [https://www.npmjs.com/package/react-big-calendar](https://www.npmjs.com/package/react-big-calendar)
Note: This gif does not show a direct example of integrating Calendly, rather what the generic react-big-calendar looks like

INCLUDE BUZZWORD INFO

As [Buzzword](https://github.com/calendly/buzzwordcrm) is built using React, we recommend [react-big-calendar](https://www.npmjs.com/package/react-big-calendar) (*npm - not managed by Calendly*) as an excellent choice for showcasing the rendering of [user busy times](/api-docs/calendly-api/availability/list-user-busy-times) and [availability](/api-docs/calendly-api/availability/list-user-availability-schedules) in a calendar format.

You'll want to manipulate the `events` array with your "available" and "busy" objects

* For "available" times, you can create an object like:

`  {`

`       start: moment({ hours: 22 }).toDate(),`

`       end: moment({ hours: 23 }).toDate(),`

`       title: "Available"`

`   }`

* `For "busy" times, you can create an object like:`

`   {`

`       start: moment({ hours: 13 }).toDate(),`

`       end: moment({ hours: 14 }).toDate(),`

`       title: "Unavailable"`

`   }`

**Things to note:**

* When handling a user's availability rule, it can be either for a specific date or a particular day of the week.
  * To handle this, we suggest creating a separate object with weekday keys (e.g., Monday-Sunday) and corresponding start time and end time values.
  * You can use this separate object to extract the necessary information and create your "available" object in the events array.
  * The implementation approach for this is flexible and can be customized according to your requirements.
* The user's collection of busy times consists of busy ranges represented by start and end times in UTC ISO-8601 format, organized by date.
  * Once again, we suggest creating an additional object with weekday keys and corresponding start and end time values.
  * This object can then be used to extract the necessary information and create the separate "busy" object in the events array.
  * Again, the specific implementation details can be tailored to your preferences and requirements.
* For an examples of the objects directly above, see `components/userBusyTimes.jsx` in the [Buzzword repo](https://github.com/calendly/buzzwordcrm)