# 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](https://docs.opencityitalia.it/guida-alla-creazione-dei-servizi-digitali/il-catalogo-dei-servizi-digitali/catalogo-comuni)
{% endhint %}

## Inserisci e configura un componente Select

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

<figure><img src="https://4252442743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrdV0mwA7iy2c3I7wu5BX%2Fuploads%2FmSRm3Svx4YaAHSDBL2CI%2FScreen%20recording%202025-09-15%2016.05.42.gif?alt=media&#x26;token=e46b86e0-00f4-4686-85d5-47b016648428" 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="https://4252442743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrdV0mwA7iy2c3I7wu5BX%2Fuploads%2FszH2bbFfa0NKSrAZixiA%2Fimage.png?alt=media&#x26;token=4f4b0ad9-f2d2-4d38-a6dd-0bb754e65de4" 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="https://4252442743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrdV0mwA7iy2c3I7wu5BX%2Fuploads%2FRwvNzoqIsJKTDhTcfLPE%2Fimage.png?alt=media&#x26;token=7c1501c2-9216-4a7f-b746-3b0e5bc4bfb9" alt=""><figcaption></figcaption></figure> <figure><img src="https://4252442743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrdV0mwA7iy2c3I7wu5BX%2Fuploads%2FZM29w871MRxXjaTjnT66%2FScreenshot-2025-09-15-16-09-59-09-15-2025_04_11_PM.png?alt=media&#x26;token=7488968f-56b3-4a75-9ad2-f4d030620eda" 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.&#x20;

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

<figure><img src="https://4252442743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrdV0mwA7iy2c3I7wu5BX%2Fuploads%2FjTFbv1Ay8MoGk6L1TorM%2Fimage.png?alt=media&#x26;token=3207f597-b6ff-4158-8f57-b197e5831885" 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](https://docs.opencityitalia.it/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)".

<figure><img src="https://4252442743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrdV0mwA7iy2c3I7wu5BX%2Fuploads%2FiRAjRen7XH4VsEKbT0T2%2FScreen%20recording%202025-09-15%2016.21.20.gif?alt=media&#x26;token=bf1fd09e-fbc9-4374-bda0-d8472bdf698e" 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="https://4252442743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrdV0mwA7iy2c3I7wu5BX%2Fuploads%2FPuxzaKCGjugvASLYGDUw%2Fimage.png?alt=media&#x26;token=5a164c53-29ed-494d-8fed-754bd4e27873" 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="https://4252442743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrdV0mwA7iy2c3I7wu5BX%2Fuploads%2Fny23CWB7GsYUrYXaWY3z%2Fimage.png?alt=media&#x26;token=481b47f8-beeb-46aa-b49f-9f9e91e53129" 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="https://4252442743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrdV0mwA7iy2c3I7wu5BX%2Fuploads%2FpCE13TYV9mYfWqU6hcmo%2FScreen%20recording%202025-09-15%2016.48.55.gif?alt=media&#x26;token=a2ae1c00-12f3-49c6-8a58-4ea1c17d5685" 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="https://4252442743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrdV0mwA7iy2c3I7wu5BX%2Fuploads%2FhS5RGfu5niOvORtDcyOE%2Fimage.png?alt=media&#x26;token=a4099dbc-842e-4b82-8293-3aa81a70fa33" alt=""><figcaption></figcaption></figure> <figure><img src="https://4252442743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrdV0mwA7iy2c3I7wu5BX%2Fuploads%2FphR9Yk7AOerNZO6x1bfr%2FStanza-del-cittadino-09-15-2025_04_53_PM.png?alt=media&#x26;token=8e6faa16-34ee-41c3-a052-6450422fb578" alt=""><figcaption></figcaption></figure></div>