> 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 projets 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 échéanciers de projets ou tout autre cas où les utilisateurs du portail doivent voir leurs activités liées aux dates dans un format de calendrier visuel. ## **Se connecter aux données Salesforce** 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 quelles informations votre calendrier affichera.
Vous avez deux options pour utiliser la source de données
OptionDescriptionMeilleur cas d'utilisation
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 d'événements et de 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 récentes de vos enregistrements Salesforce.
* **Manuel :** * Ajoutez des événements et des ressources directement dans l'interface du calendrier. * Utile pour des é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 sur le calendrier des données provenant de n'importe quel objet Salesforce. * C'est idéal lorsque votre calendrier doit refléter les informations à jour de Salesforce. ### Configuration de la source de données de requête Pour garantir que votre Avonni Calendar 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. Comptes, Opportunités, objets personnalisés, etc.) qui contient les données que vous souhaitez afficher sur votre tableau Kanban. * **Filtrage facultatif :** Si vous souhaitez afficher uniquement un sous-ensemble des données de l’objet sélectionné, utilisez la fonction de filtrage pour définir des conditions spécifiques. Par exemple, vous pouvez filtrer pour afficher uniquement les opportunités « Ouvertes » ou les comptes d’une certaine région. * **Regroupement (facultatif) :** Regroupez vos données pour organiser efficacement votre tableau Kanban. Par exemple, regrouper les opportunités par « Étape » peut créer des colonnes pour « Prospection », « Négociation », etc. * **Tri :** Sélectionnez un champ et une direction « Trier par » (croissant ou décroissant) pour déterminer l’ordre d’affichage des cartes Kanban. * **Champs supplémentaires :** Si vous devez inclure dans votre Kanban des champs qui ne sont pas directement utilisés pour l’affichage ou les interactions, ajoutez-les dans la section « Champs supplémentaires ». Cela est particulièrement utile pour les champs que vous souhaitez rendre recherchables dans la barre de recherche du Kanban. ### Mappages de données Les mappages de données sont la clé pour garantir que les événements issus de vos enregistrements Salesforce s'affichent correctement dans votre Avonni Calendar. 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 exemple, « Subject » sur l'objet standard Event). * **Nom de la ressource :** Le champ indiquant à quelle ressource l'événement est attribué (par exemple, un champ « Room » pour les réservations de salle ou un champ « Owner » 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 exemple, « StartDateTime »). * **À :** Le champ Salesforce qui contient la date et l'heure de fin de l'événement (par exemple, « EndDateTime »). **Exemple :** Si vous créez un calendrier de réservation de salle de réunion, vous pourriez mapper les champs suivants : * **Titre :** Objet de la réunion * **Nom de la ressource :** Nom de la salle * **De :** Début prévu * **À :** Fin prévue ## Paramètres ### **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 consulter et d'interagir avec vos événements et 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 inclut des détails sur l'événement et est organisé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 exemple, des semaines ou des mois). * **Chronologie verticale :** * Les événements sont empilés verticalement, la chronologie allant de haut en bas. * Cette vue convient bien pour voir 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 afin 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 temporelle pour accueillir tous les événements dans la vue sélectionnée (jour, semaine, etc.). **Avantages** * **Vue d'ensemble rapide :** Voyez tous vos événements planifiés d'un seul coup d'œil. * **Pas de défilement :** Évitez de faire défiler vers le haut et le bas pour trouver des événements. **Points à garder à l'esprit** * Avec beaucoup d'é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 exemple, « 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. *** ### **Fonctionnalités d'actions** Le composant Avonni Calendar va au-delà de l'affichage des événements ; il offre à vos utilisateurs plusieurs façons 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 pourriez ouvrir automatiquement un formulaire de création d'événement. * **Actions d'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 listées 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 comme la modification, la suppression ou le déclenchement de प्रक्रesses 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 un toast**](/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/show-toast.md)**:** Affiche un bref message de notification à l'utilisateur, pour confirmer une action ou fournir un retour. * [**Naviguer**](/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/navigate.md)**:** Redirige l'utilisateur vers une autre page de votre Experience Cloud ou vers un site web externe. * [**Ouvrir une fenêtre modale d’alerte**](/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/open-alert-modal.md)**:** Présente une fenêtre pop-up avec des informations importantes ou une demande de confirmation. * [**Ouvrir une confirmation**](/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/open-confirm.md)**:** Affiche une boîte de dialogue de confirmation demandant à l'utilisateur de vérifier une action (par exemple, la suppression d'un événement). * [**Ouvrir la boîte de dialogue Flow**](/experience-cloud/experience-cloud-fr/panneau-des-proprietes/interactions/open-flow-dialog.md)**:** Lance un Flow Salesforce, vous permettant d'automatiser des processus complexes ou de guider les utilisateurs à travers plusieurs étapes. * **Actualiser la requête :** Met à jour l'affichage du calendrier avec les dernières données de Salesforce. #### **Comment 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) disposera d'une section où vous pourrez définir l'interaction à déclencher. *** ### Avatar La section Avatar vous permet d'ajouter une photo ou une image à l'en-tête de votre Avonni Calendar. Cela peut aider à personnaliser le calendrier et à fournir un identifiant visuel. *** ### **Contrôle de la plage temporelle** Les paramètres de plage temporelle du calendrier Avonni offrent de la flexibilité pour consulter les événements et gérer votre planning. Choisissez parmi ces options : * **Vue journalière :** Vous pouvez vous concentrer sur une seule journée ou la personnaliser pour afficher plusieurs jours consécutifs (par exemple, voir une semaine de travail de 4 jours). * **Vue hebdomadaire :** Voyez le planning d'une semaine entière d'un seul coup d'œil. * **Vue mensuelle :** 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 temporelles** Chaque plage temporelle (Jour, Semaine, Mois) possède ses paramètres : * **Libellé :** Donnez à votre plage temporelle un nom descriptif (par exemple, « Semaine de travail »). * **Nom de l’icône :** Sélectionnez une icône visuelle pour aider à identifier rapidement la plage temporelle. * **Unité :** Choisissez si cette plage temporelle représente des jours, des semaines ou des mois. * **Étendue :** Définissez le nombre d'unités à afficher (par exemple, 5 jours, 2 semaines). #### **En-têtes de chronologie (vue chronologique uniquement)** Affinez les en-têtes de votre vue chronologique pour afficher les informations les plus importantes pour vous, comme les numéros de semaine, les dates ou les mois. *** ### **Temps disponible** La section Temps disponibles offre plusieurs options pour personnaliser les plages horaires qui apparaissent sur votre calendrier. Cette fonctionnalité est utile pour se concentrer sur des périodes spécifiques d'intérêt. Voici les options disponibles :
AttributDescription
JoursCette option vous permet de préciser quels jours de la semaine doivent être visibles sur le calendrier. Si elle est sélectionnée, le calendrier affichera uniquement les jours choisis, masquant efficacement les autres.
MoisComme pour l'option Jours, vous pouvez choisir quels mois doivent être visibles sur votre calendrier.
Plage horaireÀ l'aide de 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 plusieurs options pour personnaliser l'esthétique visuelle des événements de votre 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 assure 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 de popover**: Lorsqu'un utilisateur survole un événement, ces champs s'afficheront dans une petite fenêtre contextuelle (ou « popover »). Cela permet aux utilisateurs de voir les détails essentiels de l'événement sans cliquer dessus. ### **Filtre** Personnalisez la façon dont les utilisateurs affinent les événements affichés sur votre Avonni Calendar. * **Masquer le filtre des ressources :** Choisissez cette option pour supprimer le filtre qui permet aux utilisateurs de consulter les événements en fonction de ressources spécifiques (par exemple, des personnes, des salles, du matériel). * **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 de naviguer vers 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 Avonni Calendar, permettant aux utilisateurs de trouver rapidement des événements spécifiques. * **Texte indicatif :** Ajoutez une courte phrase (par exemple, « Rechercher des événements... ») pour guider les utilisateurs sur ce qu'ils peuvent rechercher dans le calendrier. * **Position (gauche, droite, centre, remplissage) :** Choisissez où placer la zone de recherche dans l'en-tête du calendrier pour obtenir la meilleure disposition visuelle. ## Apparence du style ### **Taille** * **Largeur :** Définit la largeur horizontale du calendrier. Vous pouvez utiliser des valeurs fixes (pixels, pourcentages) ou laisser le calendrier s'adapter en fonction de son conteneur. * **Hauteur :** Ce paramètre définit la hauteur verticale du calendrier. Comme pour la largeur, vous pouvez utiliser des paramètres de hauteur fixes ou flexibles. * **Débordement :** Détermine comment le calendrier gère le contenu qui dépasse ses dimensions. Les options peuvent inclure : * **Visible :** Le contenu déborde 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épasse. ### **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.). --- # 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: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-calendar.md?ask= ``` The question should be specific, self-contained, and written in natural language. 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.