> For the complete documentation index, see [llms.txt](https://docs.wfolio.pro/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wfolio.pro/site/en/blocks/integrations/calendar.md).

# How to add a calendar

You can integrate an external calendar into your website to display your schedule and available dates for photoshoots. To do this, insert the calendar's embed code into an HTML block. Follow these steps to add a calendar using Google Calendar.

* Go to [**Google Calendar**](https://calendar.google.com/). Follow [Google’s instructions](https://support.google.com/calendar/answer/41207?hl=en) to generate an embed code for your calendar. Copy the code.
* Open the Wfolio control panel and go to the **Pages** section. Open the [Custom page and blocks](/site/en/pages/custom-page.md) page where you want to add the calendar. Click the <mark style="background-color:blue;">**+**</mark> button to add a new block.
* Go to the **Widgets** tab and select an HTML block.

<figure><img src="/files/L9049uEJNbXOykM1EKE5" alt="" width="563"><figcaption></figcaption></figure>

* Paste the copied code. Save changes.

<figure><img src="/files/uYcipVyTRyfZj3F1n7Me" alt="" width="563"><figcaption></figcaption></figure>

{% hint style="info" %}
To display the calendar on the full width of the page, replace the `width="..."` value in the code with `width="100%"`. This ensures the calendar adjusts dynamically to fit your page layout.
{% endhint %}