Componente Agenda no Microsoft Graph Toolkit

O mgt-agenda componente Web representa eventos em um calendário de usuário ou grupo. Por padrão, o calendário exibe os eventos atuais do usuário conectado para o dia atual. O componente também pode usar qualquer ponto de extremidade que retorne eventos do Microsoft Graph.

Exemplo

O exemplo a seguir mostra os eventos de calendário do usuário conectado exibidos usando o mgt-agenda componente. Você pode usar o editor de código para ver como as propriedades alteram o comportamento do componente.

Propriedades

Por padrão, o mgt-agenda componente busca eventos do /me/calendarview ponto de extremidade e exibe eventos do dia atual. Existem várias propriedades que você pode usar para alterar esse comportamento.

O exemplo a seguir altera o comportamento do componente para buscar 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 a seguir altera o comportamento do componente para buscar dados de uma consulta específica.

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

Propriedades personalizadas CSS

O mgt-agenda componente define essas propriedades personalizadas 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, consulte Componentes de estilo.

Métodos

Modelos

O mgt-agenda componente suporta vários modelos que permitem substituir certas 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 a seguir ilustram como usar 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, consulte modelos.

Eventos

Os eventos a seguir são disparados do controle.

Para obter mais informações sobre como lidar com eventos, consulte eventos.

Permissões do Microsoft Graph

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

O componente permite que você especifique uma consulta diferente do Microsoft Graph para chamar (como /groups/{id}/calendar/calendarView). Nesse caso, acrescente a permissão ao final da cadeia de caracteres, delimitada por |.

Subcomponentes

O mgt-agenda componente consiste em um ou mais subcomponentes que podem exigir permissões diferentes das listadas anteriormente. Para obter mais informações, consulte a documentação de cada subcomponente: mgt-people.

Autenticação

O controle usa o provedor de autenticação global descrito na documentação de autenticação.

Cache

O mgt-agenda componente não armazena nenhum dado em cache.

Estenda para mais controle

Para cenários mais complexos ou uma experiência de usuário verdadeiramente personalizada, esse componente expõe vários protected métodos render* para substituição em extensões de componente.

Localização

O controle não expõe nenhuma variável de localização.