> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/experience-components/ax-calendar.md).

# AX - Calendario

## Panoramica

**AX - Calendario** è un componente di Experience Cloud che visualizza i record di Salesforce come eventi in una vista calendario interattiva nelle pagine dei siti di Experience Sites.

Usalo per mostrare agli utenti del portale i loro appuntamenti, le attività programmate, le registrazioni agli eventi, le scadenze dei progetti o qualsiasi record basato su una data. Gli utenti possono visualizzare gli eventi per mese, settimana, giorno o formato agenda e fare clic sugli eventi per vedere i dettagli o accedere ai record.

Perfetto per la pianificazione degli appuntamenti con i clienti, i calendari degli eventi, le viste di prenotazione dei servizi, le tempistiche dei progetti o ovunque gli utenti del portale debbano vedere le loro attività legate alle date in un formato calendario visivo.

## **Connetti ai dati di Salesforce**

Questo passaggio essenziale nella configurazione del componente Avonni Calendar stabilisce la connessione tra gli elementi del calendario e i dati pertinenti nel tuo ambiente Salesforce.

L'origine dati determina quali informazioni visualizzerà il calendario.

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

Hai due opzioni per utilizzare l'origine dati

<table><thead><tr><th width="126">Opzione</th><th>Descrizione</th><th>Caso d'uso migliore</th></tr></thead><tbody><tr><td><strong>Manuale</strong></td><td>Inserisci manualmente eventi e risorse direttamente nell'interfaccia del calendario.</td><td>Eventi una tantum, o situazioni in cui non è necessario che il calendario sia collegato ai dati di Salesforce.</td></tr><tr><td><strong>Query</strong></td><td>Recupera automaticamente le informazioni sugli eventi e sulle risorse dai dati di Salesforce. Puoi creare una query personalizzata per visualizzare i dati da qualsiasi oggetto Salesforce.</td><td>Quando vuoi che il calendario mostri sempre le informazioni più aggiornate dai tuoi record Salesforce.</td></tr></tbody></table>

* **Manuale:**
  * Aggiungi eventi e risorse direttamente all'interno dell'interfaccia del calendario.
  * Utile per eventi una tantum o quando non è necessario collegare i dati a Salesforce.
* **Query:**
  * Recupera informazioni direttamente dai tuoi dati Salesforce.
  * Crea una query personalizzata per visualizzare i dati di qualsiasi oggetto Salesforce nel calendario.
  * È ideale quando il calendario deve riflettere informazioni aggiornate da Salesforce.

### Configurazione dell'origine dati Query

Per garantire che Avonni Calendar visualizzi le informazioni più pertinenti, dovrai configurare da dove provengono i dati. Questo processo comporta la selezione dell'oggetto Salesforce giusto e, facoltativamente, l'applicazione di filtri, raggruppamenti e ordinamenti per affinare i risultati.

Analizziamo i passaggi:

* **Selezione dell'oggetto:** Inizia scegliendo l'oggetto Salesforce specifico (ad es. Account, Opportunità, oggetti personalizzati, ecc.) che contiene i dati che desideri visualizzare nella tua bacheca Kanban.
* **Filtraggio opzionale:** Se desideri visualizzare solo un sottoinsieme dei dati dell'oggetto selezionato, usa la funzione di filtro per impostare condizioni specifiche. Ad esempio, potresti filtrare per mostrare solo "Aperte" le opportunità o gli account in una certa regione.
* **Raggruppamento (opzionale):** Raggruppa i tuoi dati per organizzare efficacemente la tua bacheca Kanban. Ad esempio, raggruppare le opportunità per "Fase" può creare colonne per "Prospezione", "Negoziazione", ecc.
* **Ordinamento:** Seleziona un campo e una direzione "Ordina per" (crescente o decrescente) per determinare l'ordine in cui devono apparire le schede Kanban.
* **Campi aggiuntivi:** Se hai bisogno di includere campi nel tuo Kanban che non vengono usati direttamente per la visualizzazione o le interazioni, aggiungili nella sezione "Campi aggiuntivi". Questo è particolarmente utile per i campi che vuoi rendere ricercabili nella barra di ricerca del Kanban.

### Mappature dei dati

Le mappature dei dati sono la chiave per garantire che gli eventi dei tuoi record Salesforce vengano visualizzati correttamente nel tuo Avonni Calendar. Pensalo come tradurre le informazioni da Salesforce in un linguaggio che il calendario comprende.

**Mappature essenziali**

Ecco una panoramica delle mappature più comuni che dovrai configurare:

* **Titolo:** Il campo Salesforce che contiene il nome o il titolo dell'evento (ad es. "Subject" nell'oggetto standard Event).
* **Nome risorsa:** Il campo che indica a quale risorsa è assegnato l'evento (ad es. un campo "Room" per le prenotazioni delle sale o un campo "Owner" per gli appuntamenti di vendita). Se viene lasciato vuoto, tutti gli eventi appariranno insieme.
* **Da:** Il campo Salesforce che contiene la data e l'ora di inizio dell'evento (ad es. "StartDateTime").
* **A:** Il campo Salesforce che contiene la data e l'ora di fine dell'evento (ad es. "EndDateTime").

**Esempio:**

Se stai creando un calendario per la prenotazione di sale riunioni, potresti mappare i seguenti campi:

* **Titolo:** Oggetto della riunione
* **Nome risorsa:** Nome sala
* **Da:** Inizio programmato
* **A:** Fine programmata

## Impostazioni

### **Visualizzazione selezionata**

Avonni Calendar offre tre distinti formati di visualizzazione per soddisfare diverse preferenze di pianificazione e organizzazione. Ogni formato offre un modo unico di visualizzare e interagire con gli eventi e le risorse.

<table><thead><tr><th width="178.33333333333331">Visualizzazione selezionata</th><th width="267">Descrizione</th><th>Immagine</th></tr></thead><tbody><tr><td><strong>Calendario</strong></td><td>Questa è la vista tradizionale a griglia che la maggior parte delle persone associa ai calendari.</td><td><img src="/files/be0b6fd70215182872a0b819c8516a3105c0dbd9" alt=""></td></tr><tr><td><strong>Agenda</strong></td><td>Ogni voce nell'elenco include i dettagli sull'evento ed è disposta in ordine cronologico.</td><td><img src="/files/19591151999b5313facf6cbb03fddc39804ef9c5" alt=""></td></tr><tr><td><strong>Cronologia</strong></td><td>Fornisce agli utenti una rappresentazione visiva lineare della loro pianificazione su un periodo selezionabile.</td><td><img src="/files/4c2d9d1e442ec118f398560f44e3d198f0885f91" alt=""></td></tr></tbody></table>

### Variante timeline

Avonni Calendar offre due modi per visualizzare la vista timeline:

* **Timeline orizzontale:**
  * Gli eventi sono disposti orizzontalmente sullo schermo, con la timeline che scorre da sinistra a destra.
  * Ideale per visualizzare programmi su un periodo più lungo (ad es. settimane o mesi).
* **Timeline verticale:**
  * Gli eventi sono impilati verticalmente, con la timeline che scorre dall'alto verso il basso.
  * Questa vista funziona bene per vedere programmi dettagliati nell'arco di un giorno o di pochi giorni.

***

### Visualizzazioni nascoste

L'opzione "Visualizzazioni nascoste" impedisce agli utenti di selezionare determinate viste quando interagiscono con Avonni Calendar.

***

### Adatta alla vista

L'impostazione "Adatta alla vista" regola automaticamente la visualizzazione del calendario per garantire che tutti gli eventi programmati entrino nello schermo senza scorrere. Ecco come funziona e quando è più utile:

**Come funziona**

* Il calendario ridurrà o espanderà la propria scala temporale per adattare tutti gli eventi all'interno della vista selezionata (giorno, settimana, ecc.).

**Vantaggi**

* **Panoramica rapida:** Visualizza tutti gli eventi programmati a colpo d'occhio.
* **Nessuno scorrimento:** Evita di scorrere verso l'alto e verso il basso per trovare gli eventi.

**Cose da tenere a mente**

* Con molti eventi o su schermi molto piccoli, la vista compressa potrebbe rendere più difficile leggere i dettagli dei singoli eventi.

***

### Opzioni della barra degli strumenti

* **Titolo della barra degli strumenti:** Imposta un titolo personalizzato per l'intestazione del calendario. Questo aiuta gli utenti a comprendere lo scopo del calendario (ad es. "Programma del team di vendita", "Prossimi eventi", ecc.).
* **Nascondi barra degli strumenti:** Puoi nascondere l'intera barra degli strumenti per ottenere un aspetto più pulito o massimizzare lo spazio di visualizzazione del calendario.

***

### **Funzionalità delle azioni**

Il componente Avonni Calendar va oltre la semplice visualizzazione degli eventi; offre una serie di modi per consentire agli utenti di interagire direttamente e avviare ulteriori azioni.

#### **Tipi di azioni**

* **Azioni Nuovo evento:** Personalizza cosa succede quando gli utenti trascinano il cursore sul calendario per programmare un nuovo evento. Ad esempio, potresti aprire automaticamente un modulo di creazione evento.
* **Azioni intestazione:** Aggiungi pulsanti personalizzati alla barra degli strumenti del calendario. Questi pulsanti possono essere programmati per attivare una qualsiasi delle interazioni disponibili elencate di seguito.
* **Azioni del menu contestuale:** Questi pulsanti appaiono quando un utente fa clic con il pulsante destro su un evento o apre i dettagli dell'evento. Configura questi pulsanti per consentire azioni come modificare, eliminare o attivare processi aggiuntivi relativi all'evento.

#### **Interazioni disponibili**

Il componente Avonni Calendar offre diverse interazioni che possono essere attivate dalle azioni descritte sopra:

* [**Mostra notifica toast**](/experience-cloud/experience-cloud-it/pannello-proprieta/interactions/show-toast.md)**:** Visualizza un breve messaggio di notifica all'utente, confermando un'azione o fornendo un riscontro.
* [**Naviga**](/experience-cloud/experience-cloud-it/pannello-proprieta/interactions/navigate.md)**:** Reindirizza l'utente a una pagina diversa all'interno del tuo Experience Cloud o a un sito web esterno.
* [**Apri finestra modale di avviso**](/experience-cloud/experience-cloud-it/pannello-proprieta/interactions/open-alert-modal.md)**:** Mostra una finestra pop-up con informazioni importanti o una richiesta di conferma.
* [**Apri conferma**](/experience-cloud/experience-cloud-it/pannello-proprieta/interactions/open-confirm.md)**:** Visualizza una finestra di dialogo di conferma che chiede all'utente di verificare un'azione (ad es. eliminare un evento).
* [**Apri dialogo Flow**](/experience-cloud/experience-cloud-it/pannello-proprieta/interactions/open-flow-dialog.md)**:** Avvia un Flow di Salesforce, consentendoti di automatizzare processi complessi o guidare gli utenti attraverso più passaggi.
* **Aggiorna query:** Aggiorna la visualizzazione del calendario con i dati più recenti di Salesforce.

#### **Come implementare**

Per configurare queste azioni e interazioni, lavorerai nelle impostazioni del componente Avonni Calendar in Experience Cloud Builder. Ogni tipo di azione (Nuovo evento, Intestazione, Menu contestuale) avrà una sezione in cui potrai definire l'interazione da attivare.

***

### Avatar

La sezione Avatar consente di aggiungere una foto o un'immagine all'intestazione del tuo Avonni Calendar. Questo può aiutare a personalizzare il calendario e fornire un identificatore visivo.

***

### **Controllo dell'intervallo di tempo**

Le impostazioni dell'intervallo di tempo di Avonni Calendar offrono flessibilità nella visualizzazione degli eventi e nella gestione del tuo programma. Scegli tra queste opzioni:

* **Vista giorno:** Puoi concentrarti su un singolo giorno o personalizzarlo per vedere più giorni consecutivi (ad es. visualizzare una settimana lavorativa di 4 giorni).
* **Vista settimana:** Vedi a colpo d'occhio il programma di un'intera settimana.
* **Vista mese:** Ottieni una panoramica più ampia del mese, con la possibilità di visualizzare da 2 a 4 settimane alla volta o un numero personalizzato di settimane.

#### **Come configurare gli intervalli di tempo**

Ogni intervallo di tempo (Giorno, Settimana, Mese) ha le proprie impostazioni:

* **Etichetta:** Assegna al tuo intervallo di tempo un nome descrittivo (ad es. "Settimana lavorativa").
* **Nome icona:** Seleziona un'icona visiva per aiutare a identificare rapidamente l'intervallo di tempo.
* **Unità:** Scegli se questo intervallo di tempo rappresenta giorni, settimane o mesi.
* **Intervallo:** Imposta il numero di unità da visualizzare (ad es. 5 giorni, 2 settimane).

#### **Intestazioni della timeline (solo vista timeline)**

Perfeziona le intestazioni della vista timeline per mostrare le informazioni per te più importanti, come numeri di settimana, date o mesi'.

***

### **Tempo disponibile**

La sezione Orari disponibili offre più opzioni per personalizzare gli intervalli di tempo che compaiono nel calendario. Questa funzione è utile per concentrarsi su periodi specifici di interesse. Ecco le opzioni disponibili:

<table><thead><tr><th width="172">Attributo</th><th>Descrizione</th></tr></thead><tbody><tr><td><strong>Giorni</strong></td><td>Questa opzione ti consente di specificare quali giorni della settimana devono essere visibili nel calendario. Se selezionata, il calendario mostrerà solo i giorni scelti, nascondendo di fatto il resto.</td></tr><tr><td><strong>Mese</strong></td><td>Come per l'opzione Giorni, puoi scegliere quali mesi devono essere visibili nel tuo calendario.</td></tr><tr><td><strong>Intervallo temporale</strong></td><td>Utilizzando l'intervallo temporale, puoi controllare con precisione le ore visibili nel calendario, concentrandoti di fatto sulle fasce orarie più.</td></tr></tbody></table>

***

### **Visualizzazione degli eventi**

La sezione Visualizzazione eventi offre una serie di opzioni per personalizzare l'estetica visiva degli eventi del calendario.

Ecco le opzioni disponibili:

* **Tema**: Questa opzione ti consente di scegliere un tema visivo per gli eventi. Puoi selezionare tra diversi temi predefiniti, come predefinito, trasparente, linea, vuoto o arrotondato, ognuno con uno stile visivo unico per adattarsi alle tue preferenze personali o all'identità del brand.
* **Palette**: Questa funzione ti consente di assegnare colori diversi da una palette scelta a ciascuna risorsa. Una palette di colori è una raccolta di colori che garantisce un uso coerente dei colori tra le diverse risorse. Questo aiuta a differenziare visivamente e a identificare rapidamente diversi tipi di risorse nel calendario.
* **Campi popover**: Quando un utente passa il mouse sopra un evento, questi campi verranno visualizzati in un piccolo riquadro pop-up (o "popover"). Ciò consente agli utenti di visualizzare i dettagli essenziali dell'evento senza dover fare clic su di essi.

### **Filtro**

Personalizza il modo in cui gli utenti affinano gli eventi visualizzati nel tuo Avonni Calendar.

* **Nascondi filtro risorse:** Scegli questa opzione per rimuovere il filtro che consente agli utenti di visualizzare gli eventi in base a risorse specifiche (ad es. persone, sale, attrezzature).
* **Nascondi selettore data:** Seleziona questa opzione per rimuovere l'icona del calendario nell'intestazione che consente agli utenti di navigare a una data specifica.
* **Tipo (orizzontale, popover, pannello sinistro, pannello destro, verticale):** Determina lo stile visivo e la posizione della sezione filtro:
  * **Orizzontale:** Una barra nella parte superiore del calendario.
  * **Popover:** Un filtro compatto che si apre al clic.
  * **Pannello sinistro/destro:** Un pannello laterale per le opzioni di filtro.
  * **Verticale:** Un elenco verticale di opzioni di filtro

### **Ricerca**

* **Mostra ricerca:** Abilita questa opzione per aggiungere una casella di ricerca nella parte superiore del tuo Avonni Calendar, consentendo agli utenti di trovare rapidamente eventi specifici.
* **Segnaposto:** Aggiungi una breve frase (ad es. "Cerca eventi...") per guidare gli utenti su cosa possono cercare all'interno del calendario.
* **Posizione (sinistra, destra, centro, riempi):** Scegli dove posizionare la casella di ricerca nell'intestazione del calendario per ottenere il miglior layout visivo.

## Aspetto stilistico

### **Dimensione**

* **Larghezza:** Imposta la larghezza orizzontale del calendario. Puoi utilizzare valori fissi (pixel, percentuali) o lasciare che il calendario si adatti in base al contenitore.
* **Altezza:** Questa impostazione definisce l'altezza verticale del calendario. Come per la larghezza, puoi utilizzare impostazioni di altezza fissa o flessibile.
* **Overflow:** Determina come il calendario gestisce il contenuto che supera le sue dimensioni. Le opzioni potrebbero includere:
  * **Visibile:** Il contenuto fluisce al di fuori del calendario.
  * **Nascosto:** Il contenuto viene ritagliato ai bordi del calendario.
  * **Scorrimento:** Il calendario mostra barre di scorrimento se il contenuto eccede.

### **Barra degli strumenti**

* **Colore di sfondo:** Questa impostazione definisce il colore di sfondo della barra degli strumenti del calendario (l'area che in genere contiene i pulsanti di navigazione, la selezione della vista, ecc.).


---

# 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.avonnicomponents.com/experience-cloud/experience-cloud-it/experience-components/ax-calendar.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.
