> 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-fr/experience-components/ax-calendar.md). # AX - Calendrier ## Aperçu **AX - Calendrier** est un composant Experience Cloud qui affiche les enregistrements Salesforce sous forme d'événements dans une vue calendrier interactive sur les pages des sites Experience. Utilisez-le pour afficher aux utilisateurs du portail leurs rendez-vous, tâches planifiées, inscriptions à des événements, échéances de projet ou tout autre enregistrement basé sur une date. Les utilisateurs peuvent afficher les événements par mois, semaine, jour ou sous forme d'agenda, et cliquer sur les événements pour voir les détails ou accéder aux enregistrements. Parfait pour la planification de rendez-vous clients, les calendriers d'événements, les vues de réservation de services, les plannings de projet ou tout autre cas où les utilisateurs du portail doivent voir leurs activités liées aux dates dans un format de calendrier visuel. ## Configuration ### Source de données Cette étape essentielle de la configuration de votre composant Avonni Calendar établit la connexion entre les éléments de votre calendrier et les données pertinentes de votre environnement Salesforce. La source de données détermine les informations que votre calendrier affichera.
Vous avez deux options pour utiliser la source de données
OptionDescriptionCas d'utilisation idéal
ManuelSaisissez manuellement les événements et les ressources directement dans l'interface du calendrier.Événements ponctuels ou situations où vous n'avez pas besoin que le calendrier soit lié à vos données Salesforce.
RequêteRécupérez automatiquement les informations des événements et des ressources à partir de vos données Salesforce. Vous pouvez créer une requête personnalisée pour afficher des données provenant de n'importe quel objet Salesforce.Lorsque vous souhaitez que votre calendrier affiche toujours les informations les plus à jour de vos enregistrements Salesforce.
* **Manuel :** * Ajoutez des événements et des ressources directement dans l'interface du calendrier. * Utile pour les événements ponctuels ou lorsque vous n'avez pas besoin de lier des données à Salesforce. * **Requête :** * Récupérez les informations directement à partir de vos données Salesforce. * Créez une requête personnalisée pour afficher les données de n'importe quel objet Salesforce sur le calendrier. * C'est idéal lorsque votre calendrier doit refléter des informations à jour provenant de Salesforce. #### Configuration de la source de données de requête Pour que votre calendrier Avonni affiche les informations les plus pertinentes, vous devrez configurer l'origine de ses données. Ce processus consiste à sélectionner le bon objet Salesforce et, éventuellement, à appliquer des filtres, un regroupement et un tri pour affiner les résultats. Décomposons les étapes : * **Sélection de l’objet :** Commencez par choisir l'objet Salesforce spécifique (par ex. Événements, Tâches, objets personnalisés, etc.) qui contient les enregistrements que vous souhaitez afficher dans votre calendrier. * **Filtrage optionnel :** Si vous souhaitez n'afficher qu'un sous-ensemble de données de l'objet sélectionné, utilisez la fonctionnalité de filtrage pour définir des conditions spécifiques. Par exemple, vous pouvez filtrer pour afficher uniquement les événements "Confirmés" ou les enregistrements dans une certaine plage de dates. * **Regroupement (facultatif) :** Regroupez vos données pour organiser efficacement votre calendrier. Par exemple, le regroupement par champ de ressource (comme une salle, un propriétaire ou une équipe) sépare les événements dans leurs propres lignes de ressources. * **Tri :** Sélectionnez un champ et une direction "Trier par" (croissant ou décroissant) pour déterminer l'ordre d'affichage des événements. * **Champs supplémentaires :** Si vous devez inclure dans votre calendrier des champs qui ne sont pas directement utilisés pour l'affichage ou les interactions, ajoutez-les dans la section "Champs supplémentaires". C'est particulièrement utile pour les champs que vous souhaitez rendre recherchables dans la barre de recherche du calendrier. ### Mappage des données Les mappages de données sont essentiels pour garantir que les événements issus de vos enregistrements Salesforce s'affichent correctement dans votre calendrier Avonni. Voyez cela comme une traduction des informations de Salesforce dans un langage que votre calendrier comprend. **Mappages essentiels** Voici un aperçu des mappages les plus courants que vous devrez configurer : * **Titre :** Le champ Salesforce contenant le nom ou le titre de l'événement (par ex. "Sujet" sur l'objet standard Événement). * **Nom de la ressource :** Le champ indiquant à quelle ressource l'événement est affecté (par ex. un champ "Salle" pour les réservations de salle ou un champ "Propriétaire" pour les rendez-vous commerciaux). Si ce champ est laissé vide, tous les événements apparaîtront ensemble. * **De :** Le champ Salesforce qui contient la date et l'heure de début de l'événement (par ex. "StartDateTime"). * **À :** Le champ Salesforce qui contient la date et l'heure de fin de l'événement (par ex. "EndDateTime"). **Exemple :** Si vous créez un calendrier de réservation de salles de réunion, vous pouvez mapper les champs suivants : * **Titre :** Objet de la réunion * **Nom de la ressource :** Nom de la salle * **De :** Début planifié * **À :** Fin planifiée ### Paramètres généraux **Nom de l'API** est un identifiant unique utilisé pour référencer le composant. **Jour de début de la semaine** définit le jour de début de chaque semaine, et **Afficher le fuseau horaire** affiche le fuseau horaire du calendrier. ### **Affichage sélectionné** Le calendrier Avonni propose trois formats d'affichage distincts pour répondre à différents besoins de planification et d'organisation. Chaque format offre une manière unique de visualiser et d'interagir avec vos événements et vos ressources.
Affichage sélectionnéDescriptionImage
CalendrierIl s'agit de la vue traditionnelle en grille que la plupart des gens associent aux calendriers.
AgendaChaque entrée de la liste comprend des détails sur l'événement et est classée par ordre chronologique.
ChronologieOffre aux utilisateurs une représentation visuelle linéaire de leur planning sur une période sélectionnable.
### Variante de chronologie Le calendrier Avonni propose deux façons d'afficher votre vue chronologique : * **Chronologie horizontale :** * Les événements sont disposés horizontalement à l'écran, la chronologie allant de gauche à droite. * Idéal pour visualiser des plannings sur une période plus longue (par ex. des semaines ou des mois). * **Chronologie verticale :** * Les événements sont empilés verticalement, la chronologie allant de haut en bas. * Cette vue fonctionne bien pour visualiser des plannings détaillés sur une journée ou quelques jours. ### Affichages masqués L'option "Affichages masqués" empêche les utilisateurs de sélectionner certaines vues lorsqu'ils interagissent avec le calendrier Avonni. ### Ajuster à l'écran Le paramètre "Ajuster à l'écran" ajuste automatiquement la vue du calendrier pour garantir que tous les événements planifiés tiennent à l'écran sans défilement. Voici son fonctionnement et les cas où il est le plus utile : **Fonctionnement** * Le calendrier réduira ou étendra son échelle de temps pour s'adapter à tous les événements dans la vue sélectionnée (jour, semaine, etc.). **Avantages** * **Aperçu rapide :** Voyez tous vos événements planifiés en un coup d'œil. * **Sans défilement :** Évitez de faire défiler vers le haut et vers le bas pour trouver des événements. **Points à garder à l'esprit** * Avec de nombreux événements ou sur de très petits écrans, la vue compressée peut rendre les détails individuels des événements plus difficiles à lire. ### Options de la barre d'outils * **Titre de la barre d'outils :** Définissez un titre personnalisé pour l'en-tête de votre calendrier. Cela aide les utilisateurs à comprendre l'objectif du calendrier (par ex. "Planning de l'équipe commerciale", "Événements à venir", etc.). * **Masquer la barre d'outils :** Vous pouvez masquer toute la barre d'outils pour obtenir un aspect plus épuré ou maximiser l'espace d'affichage du calendrier. ### Avatar La section Avatar vous permet d'ajouter une photo ou une image à l'en-tête de votre calendrier Avonni. Cela peut aider à personnaliser le calendrier et à fournir un repère visuel. ### **Contrôle de la plage de temps** Les paramètres de plage de temps du calendrier Avonni offrent de la flexibilité pour afficher les événements et gérer votre planning. Choisissez parmi ces options : * **Vue jour :** Vous pouvez vous concentrer sur une seule journée ou la personnaliser pour voir plusieurs jours consécutifs (par ex. afficher une semaine de travail de 4 jours). * **Vue semaine :** Voyez le planning d'une semaine entière en un coup d'œil. * **Vue mois :** Obtenez une vue d'ensemble plus large du mois, avec la possibilité d'afficher 2 à 4 semaines à la fois ou un nombre personnalisé de semaines. #### **Comment configurer les plages de temps** Chaque plage de temps (jour, semaine, mois) possède ses paramètres : * **Libellé :** Donnez à votre plage de temps un nom descriptif (par ex. "Semaine de travail"). * **Nom de l’icône :** Sélectionnez une icône visuelle pour identifier rapidement la plage de temps. * **Unité :** Choisissez si cette plage de temps représente des jours, des semaines ou des mois. * **Étendue :** Définissez le nombre d'unités à afficher (par ex. 5 jours, 2 semaines). #### **En-têtes de chronologie (vue chronologie uniquement)** Ajustez précisément les en-têtes de votre vue chronologique pour afficher les informations les plus importantes pour vous, telles que les numéros de semaine, les dates ou les mois. ### **Temps disponibles** La section des temps disponibles offre plusieurs options pour personnaliser les plages horaires qui apparaissent sur votre calendrier. Cette fonctionnalité est pratique pour se concentrer sur des périodes d'intérêt spécifiques. Voici les options disponibles :
AttributDescription
JoursCette option vous permet de spécifier quels jours de la semaine doivent être visibles sur le calendrier. Si elle est sélectionnée, le calendrier n'affichera que les jours choisis, en masquant efficacement les autres.
MoisComme pour l'option Jours, vous pouvez choisir quels mois doivent être visibles sur votre calendrier.
Plage horaireEn utilisant la plage horaire, vous pouvez contrôler précisément les heures visibles sur votre calendrier, en vous concentrant efficacement sur les créneaux horaires les plus
### **Affichage des événements** La section Affichage des événements propose une gamme d'options pour personnaliser l'esthétique visuelle de vos événements de calendrier. Voici les options disponibles : * **Thème**: Cette option vous permet de choisir un thème visuel pour vos événements. Vous pouvez sélectionner parmi plusieurs thèmes prédéfinis, tels que par défaut, transparent, ligne, creux ou arrondi, chacun offrant un style visuel unique pour s'adapter à vos préférences personnelles ou à l'identité de votre marque. * **Palette**: Cette fonctionnalité vous permet d'attribuer différentes couleurs d'une palette choisie à chaque ressource. Une palette de couleurs est un ensemble de couleurs qui garantissent une utilisation cohérente des couleurs entre différentes ressources. Cela aide à différencier visuellement et à identifier rapidement les différents types de ressources sur votre calendrier. * **Champs du popover**: Lorsqu'un utilisateur survole un événement, ces champs s'affichent dans une petite fenêtre contextuelle (ou "popover"). Cela permet aux utilisateurs de consulter les détails essentiels de l'événement sans avoir à cliquer dessus. ### **Filtre** Personnalisez la manière dont les utilisateurs affinent les événements affichés dans votre calendrier Avonni. * **Masquer le filtre des ressources :** Choisissez cette option pour supprimer le filtre qui permet aux utilisateurs d'afficher les événements en fonction de ressources spécifiques (par ex. personnes, salles, équipements). * **Masquer le sélecteur de date :** Sélectionnez cette option pour supprimer l'icône de calendrier dans l'en-tête qui permet aux utilisateurs d'accéder à une date spécifique. * **Type (horizontal, popover, panneau gauche, panneau droit, vertical) :** Déterminez le style visuel et l'emplacement de la section de filtre : * **Horizontal :** Une barre en haut du calendrier. * **Popover :** Un filtre compact qui s'ouvre lorsqu'on clique dessus. * **Panneau gauche/droit :** Un panneau latéral pour les options de filtre. * **Vertical :** Une liste verticale d'options de filtre ### **Recherche** * **Afficher la recherche :** Activez cette option pour ajouter une zone de recherche en haut de votre calendrier Avonni, permettant aux utilisateurs de trouver rapidement des événements spécifiques. * **Texte indicatif :** Ajoutez une courte phrase (par ex. « Rechercher des événements... ») pour guider les utilisateurs sur ce qu'ils peuvent rechercher dans le calendrier. * **Position (gauche, droite, centre, étirer) :** Choisissez où placer la zone de recherche dans l'en-tête du calendrier pour obtenir la meilleure disposition visuelle. ## Interactions Le composant Avonni Calendar va bien au-delà de la simple affichage d'événements ; il offre plusieurs façons pour vos utilisateurs d'interagir directement avec lui et de déclencher d'autres actions. ### **Types d'actions** * **Actions de nouvel événement :** Personnalisez ce qui se passe lorsque les utilisateurs font glisser leur curseur sur le calendrier pour planifier un nouvel événement. Par exemple, vous pouvez ouvrir automatiquement un formulaire de création d'événement. * **Actions de l'en-tête :** Ajoutez des boutons personnalisés à la barre d'outils du calendrier. Ces boutons peuvent être programmés pour déclencher l'une des interactions disponibles ci-dessous. * **Actions du menu contextuel :** Ces boutons apparaissent lorsqu'un utilisateur fait un clic droit sur un événement ou ouvre les détails de l'événement. Configurez ces boutons pour permettre des actions telles que la modification, la suppression ou le déclenchement de processus supplémentaires liés à l'événement. ### **Interactions disponibles** Le composant Avonni Calendar offre plusieurs interactions pouvant être déclenchées par les actions décrites ci-dessus : * [**Afficher une notification**](/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/show-toast.md)**:** Afficher un bref message de notification à l'utilisateur, confirmant une action ou fournissant un retour. * [**Naviguer**](/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/navigate.md)**:** Rediriger l'utilisateur vers une autre page de votre Experience Cloud ou vers un site web externe. * [**Ouvrir la modale d’alerte**](/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/open-alert-modal.md)**:** Afficher une fenêtre contextuelle avec des informations importantes ou une demande de confirmation. * [**Ouvrir la confirmation**](/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/open-confirm.md)**:** Afficher une boîte de dialogue de confirmation demandant à l'utilisateur de vérifier une action (par ex. supprimer un événement). * [**Ouvrir la boîte de dialogue du flux**](/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/open-flow-dialog.md)**:** Lancer un flow Salesforce, vous permettant d'automatiser des processus complexes ou de guider les utilisateurs à travers plusieurs étapes. * **Actualiser la requête :** Mettre à jour l'affichage du calendrier avec les dernières données de Salesforce. ### **Comment l'implémenter** Pour configurer ces actions et interactions, vous travaillerez dans les paramètres du composant Avonni Calendar dans Experience Cloud Builder. Chaque type d'action (Nouvel événement, En-tête, Menu contextuel) aura une section où vous pourrez définir l'interaction à déclencher. ## Style {% tabs %} {% tab title="Taille" %} * **Largeur :** Définit la largeur horizontale du calendrier. Vous pouvez utiliser des valeurs fixes (pixels, pourcentages) ou laisser le calendrier s'adapter à son conteneur. * **Hauteur :** Ce paramètre définit la hauteur verticale du calendrier. Comme pour la largeur, vous pouvez utiliser des réglages de hauteur fixes ou flexibles. * **Débordement :** Détermine la manière dont le calendrier gère le contenu qui dépasse ses dimensions. Les options peuvent inclure : * **Visible :** Le contenu déborde en dehors du calendrier. * **Masqué :** Le contenu est rogné aux bords du calendrier. * **Défilement :** Le calendrier affiche des barres de défilement si le contenu déborde. {% endtab %} {% tab title="Barre d'outils" %} * **Couleur de fond :** Ce paramètre définit la couleur d'arrière-plan de la barre d'outils du calendrier (la zone contenant généralement les boutons de navigation, la sélection de vue, etc.). {% endtab %} {% endtabs %} --- # 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-fr/experience-components/ax-calendar.md?ask=&goal= ``` `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.