Cas d’utilisation du composant de calendrier

  • Rversion finale: Washingtondc
  • Mis à jour 7 mars 2024
  • 5 minutes de lecture

    • Ajoutez et configurez le composant Calendrier sur une nouvelle Générateur d'IU page d’expérience.

    Avant de commencer

    Rôle requis : ui_builder_admin

    Procédure

    1. Accédez à la Tous > Cadre de travail Now Experience > Générateur d'IU.
    2. Ouvrez une expérience dans laquelle travailler ou créez une expérience en sélectionnant Créer une expérience >.
      Consultez Configurer la façon dont les utilisateurs interagissent avec vos applications dans Générateur d'IU pour en savoir plus sur la création d’expériences.
    3. Créez une variante de page.
      Pour plus d’informations sur la création d’une page dans , consultez Créer une page dansGénérateur d'IU UI Builder.
    4. Sélectionnez l’icône + sur l’étape pour ouvrir la boîte à outils.
    5. Dans les composants de recherche , tapez calendrier.
    6. Sélectionnez Calendrier.

      Le composant Calendrier, ainsi que les données de démonstration, sont ajoutés à la page. Les données de démonstration vous montrent ce qu’il est possible de faire avec le composant Calendrier et comment le composant est structuré.

    7. Sélectionnez Enregistrer.
    8. Pour voir à quoi ressemble le calendrier sur la page, sélectionnez Aperçu.
      En haut à gauche se trouve un bouton +Nouveau en option, et le sélecteur de date vous permettant de naviguer vers la période précédente ou suivante, ou une date spécifique. En haut à droite se trouvent un sélecteur de fuseau horaire, un sélecteur de vue (par exemple, Jour ou Semaine de travail) et une icône de menu Paramètres permettant d’accéder à des raccourcis clavier. La grille de calendrier principale au centre affiche l’heure le long de l’axe vertical à gauche et la vue spécifiée horizontalement en haut. Les événements de calendrier sont affichés dans des cellules de la grille indiquant l’heure de début et de fin de l’événement. Le panneau latéral contextuel s’affiche à droite de la grille du calendrier et, par défaut, affiche la vue Ordre du jour avec des cartes représentant les événements du calendrier.
    9. Sélectionnez le X en haut à droite pour fermer la fenêtre d’aperçu.
      Il existe de nombreuses façons de configurer le composant Calendrier complet pour répondre à vos besoins professionnels. Les étapes suivantes montrent quelques options.
    10. Modifiez l’affichage par défaut du jour à la semaine en sélectionnant l’onglet Configurer dans le panneau de configuration à droite et dans le champ Vue sélectionnée actuelle (vous devrez peut-être faire défiler vers le bas), sélectionnez Semaine calendaire.
      Le composant Calendrier se met immédiatement à jour sur l’étape pour afficher une semaine.
    11. Dans l’onglet Configurer , modifiez le fuseau horaire en faisant défiler jusqu’à la section Dates et paramètres régionaux et en effectuant une nouvelle sélection dans le champ Fuseau horaire .
      Le nouveau fuseau horaire s’affiche en haut à droite du calendrier sur la scène.
    12. Par défaut, le premier jour affiché sur le calendrier est le lundi, mais vous pouvez modifier ce nombre en spécifiant un nombre différent dans le champ Premier jour de la semaine sous l’onglet Configurer .
      Tapez 0 pour dimanche, 1 pour lundi, 2 pour mardi, et ainsi de suite.
    13. Ajoutez un en-tête au calendrier.
      1. Dans l’arborescence de contenu à gauche, accédez à Body > Calendar 1 > à l’emplacement de l’en-tête de gauche , puis sélectionnez + Ajouter un composant.
      2. Sélectionnez le composant Texte stylisé .
      3. Dans le panneau de configuration situé à droite, sélectionnez Aucun : configurer le composant manuellement.
      4. Dans le panneau de configuration, sélectionnez l’onglet Configurer .
      5. Dans Texte, saisissez un nouveau texte d’en-tête, par exemple, Mon calendrier.
      6. Sélectionnez Enregistrer.
    14. Configurez le panneau contextuel.
      1. Tout d’abord, voyez à quoi ressemble le panneau et comment il fonctionne en sélectionnant Aperçu.
        Le panneau apparaît à droite et, par défaut, il affiche la vue Ordre du jour. Dans la vue Agenda, des cartes contenant des détails sur chaque événement sont affichées pour tous les points à l’ordre du jour de la vue sélectionnée (par exemple, jour ou semaine). Sous l’icône de vue Agenda se trouvent d’autres icônes pour le filtre, le centre d’analyse et la flèche. Les étapes suivantes vous guideront tout au long du processus de suppression de ces trois icônes et de configuration d’un nouveau composant pour le panneau latéral contextuel.
      2. Sélectionnez le X en haut à droite pour fermer la superposition Aperçu .
      3. Dans l’arborescence de contenu à gauche, accédez à Corps et sélectionnez Calendrier 1.
      4. Dans le panneau de configuration, sélectionnez l’onglet Configurer .
      5. Faites défiler vers le bas jusqu’à la section Autres propriétés .
      6. Déplacez votre souris sur le champ Éléments du panneau contextuel et sélectionnez Modifier.
      7. Supprimez les icônes de filtre-contour, d’analyse-centre-contour et de flèche vers le bas à gauche en sélectionnant l’icône Supprimer l’élément (corbeille) pour chacune d’elles.
      8. Sélectionnez Appliquer.
        Le composant Calendrier se met immédiatement à jour sur l’étape et n’affiche plus les trois icônes dans le panneau contextuel.
      9. Sélectionnez Enregistrer.
      10. Maintenant, ajoutons un composant au panneau latéral contextuel en accédant à Body > Calendar 1 > contextual-panel-content dans l’arborescence de contenu et en sélectionnant + Ajouter un composant.
      11. Dans Composants de recherche , tapez flex et sélectionnez Flexbox.
      12. Dans le panneau de configuration, sélectionnez le nom du composant Conteneur 2.
      13. Dans Étiquette de composant, saisissez Conteneur de texte.
      14. Dans ID de composant, tapeztext_container.
      15. Sélectionnez Appliquer.
      16. Dans le panneau de configuration, sélectionnez Aucun : configurer le composant manuellement.
      17. Maintenant, ajoutons un composant au panneau latéral contextuel en accédant à Body > Calendar 1 > contextual-panel-content > Text Container dans l’arborescence de contenu et en sélectionnant + Ajouter un composant.
      18. Dans Composants de recherche , tapez sty et sélectionnez Texte stylisé.
      19. Dans le panneau de configuration, sous l’onglet Configurer , sélectionnez Aucun : configurer le composant manuellement.
      20. Dans le panneau de configuration, dans l’onglet Configurer , supprimez le contenu du champ Texte et tapez Hello World.
      21. Sélectionnez Enregistrer.
      22. Dans l’arborescence de contenu à gauche, accédez à Corps et sélectionnez Calendrier 1.
      23. Dans le panneau de configuration, sélectionnez l’onglet Configurer .
      24. Faites défiler vers le bas jusqu’à la section Autres propriétés .
      25. Déplacez votre souris sur le champ Éléments du panneau contextuel et sélectionnez Modifier.
      26. En regard d’Éléments de panneau contextuel (1), sélectionnez l’icône + .
      27. Dans Icône, tapez calendar-outline.
      28. Dans le type d’IDtext_container.
      29. Dans Étiquette , tapez Conteneur de texte.
      30. Dans Ouvrir, sélectionnez false.
      31. Sélectionnez Appliquer.
      32. Sélectionnez Enregistrer.
        Notez qu’une nouvelle icône apparaît désormais sur le panneau latéral contextuel.
      33. Sélectionnez Aperçu.
      34. Sélectionnez la nouvelle deuxième icône dans le panneau latéral contextuel.
        Le panneau affiche le conteneur de texte avec le composant de texte stylisé et les mots Hello World.
      35. Fermez la fenêtre d’aperçu en sélectionnant le X en haut à droite.
    15. Configurez le bouton Nouveau .

    16. Configurez un popover pour qu’il s’affiche lorsqu’un événement est sélectionné sur la grille de calendrier.
      1. Dans l’arborescence de contenu à gauche, accédez à Corps > Mise en page de colonne 1 > Colonne 1 > Calendrier 1 > popover d’événement et sélectionnez + Ajouter un composant.