Agendakomponente im Microsoft Graph-Toolkit

Artikel
11/07/2024

Die mgt-agenda Webkomponente stellt Ereignisse in einem Benutzer- oder Gruppenkalender dar. Standardmäßig zeigt der Kalender die aktuellen angemeldeten Benutzerereignisse für den aktuellen Tag an. Die Komponente kann auch jeden Beliebigen Endpunkt verwenden, der Ereignisse von Microsoft Graph zurückgibt.

Beispiel

Das folgende Beispiel zeigt die Kalenderereignisse des angemeldeten Benutzers, die mithilfe der mgt-agenda -Komponente angezeigt werden. Sie können den Code-Editor verwenden, um zu sehen, wie Eigenschaften das Verhalten der Komponente ändern.

HTML
React

Öffnen Sie dieses Beispiel in mgt.dev.

Eigenschaften

Standardmäßig ruft die mgt-agenda Komponente Ereignisse vom Endpunkt ab /me/calendarview und zeigt Ereignisse für den aktuellen Tag an. Es gibt mehrere Eigenschaften, mit denen Sie dieses Verhalten ändern können.

Attribut	Eigenschaft	Beschreibung
date	date	Eine Zeichenfolge, die das Startdatum der Ereignisse darstellt, die aus Microsoft Graph abgerufen werden sollen. Der Wert sollte in einem Format vorliegen, das für den Date-Konstruktor geeignet ist. Dieser Wert hat keine Auswirkung, wenn das `event-query` Attribut festgelegt ist.
Tage	Tage	Die Anzahl der Tage, die von Microsoft Graph abgerufen werden sollen. Der Standardwert ist 3. Dieser Wert hat keine Auswirkung, wenn `event-query` das Attribut festgelegt ist.
show-max	showMax	Eine Zahl, die die maximale Anzahl anzuzeigenden Ereignisse angibt. Der Standardwert ist nicht festgelegt (kein Maximum).
group-id	groupId	Eine Zeichenfolgen-ID für einen Gruppenkalender, der anstelle des Kalenders des aktuell angemeldeten Benutzers verwendet werden soll.
event-query	Eventquery	Eine Zeichenfolge, die eine alternative Abfrage darstellt, die beim Abrufen von Ereignissen aus Microsoft Graph verwendet werden soll. Fügen Sie optional den delegierten Bereich am Ende der Zeichenfolge hinzu, indem Sie ihn durch `\|` (`/groups/GROUP-ID-GUID/calendar/calendarView \| group.read.all`) trennen.
events	events	Ein Array von Ereignissen zum Abrufen oder Festlegen der Liste von Ereignissen, die von der Komponente gerendert werden. Verwenden Sie diese Eigenschaft, um auf die von der Komponente geladenen Ereignisse zuzugreifen. Legen Sie diesen Wert fest, um Ihre eigenen Ereignisse zu laden. Die `date`Attribute , `days`oder `event-query` haben keine Auswirkung, wenn sie vom Entwickler festgelegt werden.
Gruppe nach Tag	groupByDay	Ein boolescher Wert zum Gruppieren von Ereignissen nach Tag. Standardmäßig werden Ereignisse nicht gruppiert.
preferred-timezone	preferredTimezone	Name der IANA-Zeitzone, die beim Anzeigen von Ereignissen verwendet werden soll, die von Microsoft Graph abgerufen wurden; Beispiel: `America/Los_Angeles`. Eine Liste der IANA-Zeitzonen finden Sie unter Liste der Zeitzonen der tz-Datenbank. Standardmäßig werden Ereignisse mithilfe der aktuellen Zeitzoneneinstellungen des Geräts gerendert.

Im folgenden Beispiel wird das Verhalten der Komponente geändert, um Daten für ein bestimmtes Datum und bis zu drei Tage abzurufen.

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

Im folgenden Beispiel wird das Verhalten der Komponente geändert, um Daten aus einer bestimmten Abfrage abzurufen.

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

Benutzerdefinierte CSS-Eigenschaften

Die mgt-agenda Komponente definiert diese benutzerdefinierten CSS-Eigenschaften.

<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;
}

Weitere Informationen finden Sie unter Formatieren von Komponenten.

Methoden

Methode	Beschreibung
reload()	Rufen Sie die -Methode auf, um die Komponente basierend auf ihren Eigenschaften mit potenziellen neuen Daten neu zu laden.

Vorlagen

Die mgt-agenda Komponente unterstützt mehrere Vorlagen , mit denen Sie bestimmte Teile der Komponente ersetzen können. Um eine Vorlage anzugeben, schließen Sie ein <template> Element innerhalb einer Komponente ein, und legen Sie auf data-type einen der folgenden Werte fest:

Datentyp	Datenkontext	Beschreibung
`default`	`events`: Liste der Ereignisobjekte	Die Standardvorlage ersetzt die gesamte Komponente durch Ihre eigene.
`event`	`event`: Ereignisobjekt	Die Vorlage, die zum Rendern der einzelnen Ereignisse verwendet wird.
`event-other`	`event`: Ereignisobjekt	Die Vorlage, die zum Rendern anderer Inhalte für jedes Ereignis verwendet wird.
`header`	`header`:Schnur	Die Vorlage, die zum Rendern des Headers für jeden Tag verwendet wird.
`loading`	Es wird kein Datenkontext übergeben.	Die Vorlage, die beim Laden von Daten verwendet wird.
`no-data`	Es wird kein Datenkontext übergeben.	Die Vorlage, die verwendet wird, wenn keine Ereignisse verfügbar sind.

Die folgenden Beispiele veranschaulichen die Verwendung der event Vorlage:

<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>

Weitere Informationen finden Sie unter Vorlagen.

Ereignisse

Die folgenden Ereignisse werden vom -Steuerelement ausgelöst.

Ereignis	Wann wird es ausgegeben?	Benutzerdefinierte Daten	Abbrechbare	Blasen	Funktioniert mit benutzerdefinierter Vorlage
`eventClick`	Der Benutzer wählt ein Ereignis aus oder tippt darauf.	Das ausgewählte Ereignis	Nein	Nein	Ja, mit benutzerdefinierter Ereignisvorlage

Weitere Informationen zum Behandeln von Ereignissen finden Sie unter Ereignisse.

Microsoft Graph-Berechtigungen

Diese Komponente verwendet die folgenden Microsoft Graph-APIs. Für jeden API-Aufruf ist eine der aufgeführten Berechtigungen erforderlich.

Konfiguration	Berechtigung	API
Standard	Calendars.ReadBasic, Calendars.Read, Calendars.ReadWrite	/me/calendarview
`group-id` Angegebenen	Group.Read.All, Group.ReadWrite.All	/groups/{groupId}/calendar/calendarview
`event-query` Angegebenen	Wie optional im `event-query`	Die API, die im `event-query`

Mit der -Komponente können Sie eine andere Microsoft Graph-Abfrage angeben, die aufgerufen werden soll (z /groups/{id}/calendar/calendarView. B. ). Fügen Sie in diesem Fall die Berechtigung an das Ende der Zeichenfolge an, getrennt durch |.

Unterkomponenten

Die mgt-agenda Komponente besteht aus einem oder mehreren Unterkomponenten, die möglicherweise andere Als die zuvor aufgeführten Berechtigungen benötigen. Weitere Informationen finden Sie in der Dokumentation zu den einzelnen Unterkomponenten: mgt-people.

Authentifizierung

Das Steuerelement verwendet den in der Authentifizierungsdokumentation beschriebenen globalen Authentifizierungsanbieter.

Cache

Die mgt-agenda Komponente speichert keine Daten zwischen.

Erweitern für mehr Kontrolle

Für komplexere Szenarien oder eine wirklich benutzerdefinierte Benutzeroberfläche macht diese Komponente mehrere protected render*-Methoden für die Außerkraftsetzung in Komponentenerweiterungen verfügbar.

Methode	Beschreibung
renderLoading	Rendert einen Ladezustand, während die Komponente geladen wird.
renderNoData	Rendert einen leeren Datenzustand.
renderGroups	Sortiert Ereignisdaten in Gruppen und rendert sie mit Gruppenheadern.
renderHeader	Rendert einen Gruppenheader.
renderEvents	Rendert eine Liste von Ereignisobjekten.
renderEvent	Rendert ein einzelnes Ereignis und alle seine Teile.
renderTitle	Rendert den Ereignistitelteil.
renderLocation	Rendert den Teil des Ereignisspeicherorts.
renderAttendees	Rendert den Teil der Ereignisteilnehmer.
renderOther	Rendert andere Ereignisinhalte.

Lokalisierung

Das Steuerelement macht keine Lokalisierungsvariablen verfügbar.

Freigeben über