Composant Agenda dans le Kit de ressources Microsoft Graph

  • Article

Le mgt-agenda composant web représente des événements dans un calendrier d’utilisateur ou de groupe. Par défaut, le calendrier affiche les événements utilisateur connectés actuels pour le jour actuel. Le composant peut également utiliser n’importe quel point de terminaison qui retourne des événements à partir de Microsoft Graph.

Exemple

L’exemple suivant montre les événements de calendrier de l’utilisateur connecté affichés à l’aide du mgt-agenda composant . Vous pouvez utiliser l’éditeur de code pour voir comment les propriétés modifient le comportement du composant.

Propriétés

Par défaut, le mgt-agenda composant extrait les événements du /me/calendarview point de terminaison et affiche les événements du jour actuel. Vous pouvez utiliser plusieurs propriétés pour modifier ce comportement.

Attribut Propriété Description
date date Chaîne qui représente la date de début des événements à extraire à partir de Microsoft Graph. La valeur doit être dans un format approprié pour le constructeur Date. Cette valeur n’a aucun effet si l’attribut event-query est défini.
Jours Jours Nombre de jours d’extraction à partir de Microsoft Graph. La valeur par défaut est 3. Cette valeur n’a aucun effet si event-query l’attribut est défini.
show-max showMax Nombre pour indiquer le nombre maximal d’événements à afficher. La valeur par défaut n’est pas définie (aucun maximum).
group-id groupId ID de chaîne pour un calendrier de groupe à utiliser au lieu du calendrier actuel de l’utilisateur connecté.
event-query eventQuery Chaîne qui représente une autre requête à utiliser lors de l’extraction d’événements à partir de Microsoft Graph. Si vous le souhaitez, ajoutez l’étendue déléguée à la fin de la chaîne en la délimitant avec | (/groups/GROUP-ID-GUID/calendar/calendarView | group.read.all).
événements événements Tableau d’événements permettant d’obtenir ou de définir la liste des événements rendus par le composant. Utilisez cette propriété pour accéder aux événements chargés par le composant. Définissez cette valeur pour charger vos propres événements. Les dateattributs , daysou n’ont event-query aucun effet s’ils sont définis par le développeur.
groupe par jour groupByDay Valeur booléenne pour regrouper les événements par jour. Par défaut, les événements ne sont pas regroupés.
preferred-timezone preferredTimezone Nom du fuseau horaire IANA à utiliser lors de l’affichage des événements récupérés à partir de Microsoft Graph ; par exemple, America/Los_Angeles. Pour obtenir la liste des fuseaux horaires IANA, consultez Liste des fuseaux horaires tz database. Par défaut, les événements s’affichent à l’aide des paramètres de fuseau horaire actuels de l’appareil.

L’exemple suivant modifie le comportement du composant pour extraire des données pour une date spécifique et jusqu’à trois jours.

<mgt-agenda group-by-day date="May 7, 2019" days="3"></mgt-agenda>

L’exemple suivant modifie le comportement du composant pour extraire des données à partir d’une requête spécifique.

<mgt-agenda event-query="/me/events?orderby=start/dateTime"></mgt-agenda>

Propriétés personnalisées CSS

Le mgt-agenda composant définit ces propriétés personnalisées CSS

<mgt-agenda class="agenda" group-by-day></mgt-agenda>

.agenda {
  --agenda-event-box-shadow: 0px 2px 30px pink;
  --agenda-event-margin: 0px 10px 40px 10px;
  --agenda-event-padding: 8px 0px;
  --agenda-event-background-color: #8d696f;
  --agenda-event-border: dotted 2px white;

  --agenda-header-margin: 3px;
  --agenda-header-font-size: 20px;
  --agenda-header-color: #8d696f;

  --agenda-event-time-font-size: 20px;
  --agenda-event-time-color: white;

  --agenda-event-subject-font-size: 12px;
  --agenda-event-subject-color: white;

  --agenda-event-location-font-size: 20px;
  --agenda-event-location-color: white;

  --agenda-event-attendees-color: gold;
}

Pour en savoir plus, consultez composants de style.

Méthodes

Méthode Description
reload() Appelez la méthode pour recharger le composant avec de nouvelles données potentielles en fonction de ses propriétés.

Modèles

Le mgt-agenda composant prend en charge plusieurs modèles qui vous permettent de remplacer certaines parties du composant. Pour spécifier un modèle, incluez un <template> élément à l’intérieur d’un composant et définissez sur l’une data-type des valeurs suivantes :

Type de données Contexte de données Description
default events: liste des objets d’événement Le modèle par défaut remplace l’intégralité du composant par le vôtre.
event event: objet event Modèle utilisé pour afficher chaque événement.
event-other event: objet event Modèle utilisé pour afficher un autre contenu pour chaque événement.
header header:String Modèle utilisé pour afficher l’en-tête pour chaque jour.
loading Aucun contexte de données n’est passé Modèle utilisé lors du chargement des données.
no-data Aucun contexte de données n’est passé Modèle utilisé lorsqu’aucun événement n’est disponible.

Les exemples suivants illustrent l’utilisation du event modèle :

<mgt-agenda>
  <template data-type="event">
    <button class="eventButton">
      <div class="event-subject">{{ event.subject }}</div>
      <div data-for="attendee in event.attendees">
        <mgt-person
          person-query="{{ attendee.emailAddress.name }}"
          view="twolines"
        >
        </mgt-person>
      </div>
    </button>
  </template>
  <template data-type="no-data"> There are no events found! </template>
</mgt-agenda>

Pour en savoir plus, consultez modèles.

Événements

Les événements suivants sont déclenchés à partir du contrôle .

Événement Quand est-il émis Données personnalisées Annulable Bulles Fonctionne avec un modèle personnalisé
eventClick L’utilisateur sélectionne ou appuie sur un événement. Événement sélectionné Non Non Oui, avec un modèle d’événement personnalisé

Pour plus d’informations sur la gestion des événements, consultez événements.

Autorisations de Microsoft Graph

Ce composant utilise les API Microsoft Graph suivantes. Pour chaque appel d’API, l’une des autorisations répertoriées est requise.

Configuration Autorisation API
Valeur par défaut. Calendars.ReadBasic, Calendars.Read, Calendars.ReadWrite /me/calendarview
group-id Spécifié Group.Read.All, Group.ReadWrite.All /groups/{groupId}/calendar/calendarview
event-query Spécifié Comme indiqué éventuellement dans le event-query L’API qui a été fournie dans le event-query

Le composant vous permet de spécifier une autre requête Microsoft Graph à appeler (telle que /groups/{id}/calendar/calendarView). Dans ce cas, ajoutez l’autorisation à la fin de la chaîne, délimitée par |.

Sous-composants

Le mgt-agenda composant se compose d’un ou plusieurs sous-composants qui peuvent nécessiter des autorisations autres que celles répertoriées précédemment. Pour plus d’informations, consultez la documentation de chaque sous-composant : mgt-people.

Authentification

Le contrôle utilise le fournisseur d’authentification global décrit dans la documentation sur l’authentification.

Cache

Le mgt-agenda composant ne met pas en cache de données.

Étendre pour plus de contrôle

Pour les scénarios plus complexes ou une expérience utilisateur vraiment personnalisée, ce composant expose plusieurs protected méthodes render* pour la substitution dans les extensions de composant.

Méthode Description
renderLoading Restitue un état de chargement pendant le chargement du composant.
renderNoData Restitue un état de données vide.
renderGroups Trie les données d’événement en groupes et les affiche avec des en-têtes de groupe.
renderHeader Affiche un en-tête de groupe.
renderEvents Affiche une liste d’objets d’événement.
renderEvent Restitue un événement singulier et toutes ses parties.
renderTitle Affiche le titre de l’événement.
renderLocation Restitue le composant d’emplacement de l’événement.
renderAttendees Affiche le composant des participants à l’événement.
renderOther Restitue le contenu d’un autre événement.

Localisation

Le contrôle n’expose aucune variable de localisation.