Componente agenda no Microsoft Graph Toolkit

O mgt-agenda componente Web representa eventos num calendário de utilizador ou grupo. Por predefinição, o calendário apresenta os eventos de utilizador com sessão iniciada atual para o dia atual. O componente também pode utilizar qualquer ponto final que devolva eventos do Microsoft Graph.

Exemplo

O exemplo seguinte mostra os eventos de calendário do utilizador com sessão iniciada apresentados com o mgt-agenda componente . Pode utilizar o editor de código para ver como as propriedades alteram o comportamento do componente.

Propriedades

Por predefinição, o mgt-agenda componente obtém eventos do /me/calendarview ponto final e apresenta eventos para o dia atual. Existem várias propriedades que pode utilizar para alterar este comportamento.

O exemplo seguinte altera o comportamento do componente para obter dados para uma data específica e até três dias.

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

O exemplo seguinte altera o comportamento do componente para obter dados de uma consulta específica.

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

Propriedades personalizadas do CSS

O mgt-agenda componente define estas propriedades personalizadas do 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;
}

Para saber mais, veja Componentes de estilo.

Métodos

Modelos

O mgt-agenda componente suporta vários modelos que lhe permitem substituir determinadas partes do componente. Para especificar um modelo, inclua um <template> elemento dentro de um componente e defina como data-type um dos seguintes valores:

Os exemplos seguintes ilustram como utilizar o event modelo:

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

Para saber mais, veja modelos.

Eventos

Os seguintes eventos são acionados a partir do controlo.

Para obter mais informações sobre o processamento de eventos, veja eventos.

Permissões do Microsoft Graph

Este componente utiliza as seguintes APIs do Microsoft Graph. Para cada chamada à API, é necessária uma das permissões listadas.

O componente permite-lhe especificar uma consulta diferente do Microsoft Graph para chamar (como /groups/{id}/calendar/calendarView). Neste caso, acrescente a permissão ao fim da cadeia, delimitada por |.

Subcomponentes

O mgt-agenda componente é composto por um ou mais subcomponentes que podem necessitar de permissões diferentes das listadas anteriormente. Para obter mais informações, veja a documentação para cada subcomponente: mgt-people.

Autenticação

O controlo utiliza o fornecedor de autenticação global descrito na documentação de autenticação.

Cache

O mgt-agenda componente não coloca dados em cache.

Expandir para obter mais controlo

Para cenários mais complexos ou um UX verdadeiramente personalizado, este componente expõe vários protected métodos de composição* para substituição em extensões de componentes.

Localização

O controlo não expõe variáveis de localização.