Agendakomponente im Microsoft Graph-Toolkit

  • Artikel

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.

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 dateAttribute , daysoder 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.