> For the complete documentation index, see [llms.txt](https://docs.opencityitalia.it/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.opencityitalia.it/guida-alla-creazione-dei-servizi-digitali/creare-un-servizio/gli-appuntamenti-associati-a-un-servizio/un-esempio-pratico-integrare-piu-calendari-in-un-servizio-di-prenotazione-sale.md).

# Un esempio pratico: integrare più calendari in un servizio di prenotazione sale

{% hint style="info" %}
OpenCity Italia mette a disposizione un servizio di Prenotazione sale all'interno del [catalogo per i Comuni](/guida-alla-creazione-dei-servizi-digitali/il-catalogo-dei-servizi-digitali/catalogo-comuni.md)
{% endhint %}

## Inserisci e configura un componente Select

All'interno del modulo, inserisci un [componente Select](/guida-alla-creazione-dei-servizi-digitali/creare-un-servizio/i-componenti/la-select.md).

<figure><img src="/files/b6IVZyvaDp0AmDnI7EQR" alt=""><figcaption></figcaption></figure>

Una volta inserito, accedi alla sezione "Data" (1) del componente e seleziona la voce "Custom" come "Data source type" (2).

<figure><img src="/files/KOno36rwaisfmFBsBBK8" alt=""><figcaption></figcaption></figure>

Successivamente, seleziona la voce "Autotype" come "Storage type" (1) e indica l'id come "ID Path" (3)

<div data-full-width="true"><figure><img src="/files/40oosrtutsKuBxxYMpIT" alt=""><figcaption></figcaption></figure> <figure><img src="/files/VxwHqR4ps4nmmqzsvSo9" alt=""><figcaption></figcaption></figure></div>

## Configura i luoghi selezionabili

All'interno dei "Custom values" della sezione "Data", inserisci il codice JSON contenente l'identificativo dei calendari da associare al servizio ("id") e il nome delle sale selezionabili nella select ("title")

{% hint style="warning" %}
Devi **obbligatoriamente** inserire gli id di calendari già presenti in Stanza del Cittadino.

Se non li hai ancora, provvedi a crearli nella [sezione dedicata](/guida-alla-creazione-dei-servizi-digitali/creare-un-servizio/gli-appuntamenti-associati-a-un-servizio.md#configurare-un-calendario).
{% endhint %}

<figure><img src="/files/NddvIlz7pDGAQNHzqVhl" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Nell'esempio indicato nell'immagine, vengono configurati due lughi chiamati "Castello di Bugliano" e "Lago di Bugliano" per un servizio di prenotazione sale per matrimoni.

Oltre all'identificato del calendario e al titolo del luogo, in questo caso vengono indicati anche il link alla pagina del sito web ("place\_link") e l'importo da pagare per la prenotazione ("cost")
{% endhint %}

```json
  {
    "id": "b95b5409-2b3d-44d1-b534-12bb99206b1b",
    "title": "Castello di Bugliano",
    "place_link": "https://www.comune.bugliano.pi.it/Vivere-il-comune/Luoghi/Castello-di-Bugliano",
    "cost": 150.00,
  },
  {
    "id": "d35879fc-2047-47ed-8dd1-e317dc6c5cd0",
    "title": "Lago di Bugliano",
    "place_link": "https://www.comune.bugliano.pi.it/Vivere-il-comune/Luoghi/Lago-di-Bugliano",
    "cost": 55.00,
  },
  {
    "id": "f1146129-21b8-4b95-bd55-335f51fc98b8",
    "title": "Palazzo Colline della Corte",
    "place_link": "https://www.comune.bugliano.pi.it/Vivere-il-comune/Luoghi/Palazzo-Colline-della-Corte",
    "cost": 150.00,
  },
  {
    "id": "937634a3-b3cc-40d1-ad52-acf8eab7d5f5",
    "title": "Sala dei Quadri",
    "place_link": "https://www.comune.bugliano.pi.it/Vivere-il-comune/Luoghi/Sala-dei-Quadri",
    "cost": 110.00,
  },
  {
    "id": "44dd69ef-4716-408b-bb15-65283e52f669",
    "title": "Villa Girasoli",
    "place_link": "https://www.comune.bugliano.pi.it/Vivere-il-comune/Luoghi/Villa-Girasoli",
    "cost": 150.00,
  }
```

## Inserisci e configura il componente Calendar

Trascina nel modulo un componente di tipo "[Calendar](/guida-alla-creazione-dei-servizi-digitali/creare-un-servizio/gli-appuntamenti-associati-a-un-servizio/integrare-un-servizio-digitale-con-il-sistema-di-prenotazione-appuntamenti.md)".

<figure><img src="/files/Mu2RPKZJ4Ezdl6lUEihc" alt=""><figcaption></figcaption></figure>

Una volta inserito, accedi alla sezione "Data" del componente (1) e seleziona la label del [componente Select che hai inserito in precedenza](#inserisci-e-configura-un-componente-select) alla voce "Redraw On" (2).

<figure><img src="/files/iA8IjcXcFpfeGmpdCH6i" alt=""><figcaption></figcaption></figure>

## Configura la visualizzazione degli slot

Successivamente, alla voce "JavaScript" della sezione "Data" inserisci il codice di verifica dei calendari associati.

<figure><img src="/files/J0CuFffjH7TGQji0TgPd" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Il codice JavaScript controlla se:

* esiste un calendario selezionato (`select_calendar.id`),
* non è vuoto,
* il `calendarId` del componente non è ancora impostato o è diverso.

Nel caso in cui il calendarId fosse diverso, aggiorna `component.calendarId` con il nuovo id e ridisegna il componente (`instance.redraw()`).
{% endhint %}

```javascript
if ( 
  data.select_calendar?.id && data.select_calendar?.id !== "" && 
  (!component.calendarId || (component.calendarId && component.calendarId[0] !== data.select_calendar.id))
) {
  component.calendarId = [data.select_calendar.id]
  instance.redraw()
}
console.log(value)
```

## Bonus track: impostare un pagamento

Se il servizio prevede il pagamento di un importo in base alla sala o il luogo selezionato nella Select, inserisci un componente Hidden all'interno del modulo, intitolato "payment\_amount"

<figure><img src="/files/GmYB42r3By94GgozZh9F" alt=""><figcaption></figcaption></figure>

Una volta inserito, accedi alla sezione "Data" (1) del componente e inserisci nel "Calculated value" il codice JavaScript per recuperare gli importi [configurati nella Select](#configura-le-sale-selezionabili) (2).

```javascript
value = data.select_calendar.cost
```

<div data-full-width="true"><figure><img src="/files/iY6z6h1HS86xVQ17oWYP" alt=""><figcaption></figcaption></figure> <figure><img src="/files/w0cPr4cw3D493WAoCay4" alt=""><figcaption></figcaption></figure></div>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.opencityitalia.it/guida-alla-creazione-dei-servizi-digitali/creare-un-servizio/gli-appuntamenti-associati-a-un-servizio/un-esempio-pratico-integrare-piu-calendari-in-un-servizio-di-prenotazione-sale.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.