Compartilhar via


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 de usuário conectados atualmente para o dia atual. O componente também pode usar qualquer ponto de extremidade que retorna 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 para o dia atual. Há várias propriedades que você pode usar para alterar esse comportamento.

Atributo Propriedade Descrição
data data Uma cadeia de caracteres que representa a data de início dos eventos a serem buscados no Microsoft Graph. O valor deve estar em um formato adequado para o construtor Date. Esse valor não terá efeito se o event-query atributo for definido.
Dias Dias O número de dias a serem buscados no Microsoft Graph. O padrão é 3. Esse valor não terá efeito se event-query o atributo for definido.
show-max showMax Um número para indicar o número máximo de eventos a serem exibidos. O valor padrão não é definido (no máximo).
id de grupo groupId Uma ID de cadeia de caracteres para um calendário de grupo a ser usada em vez do atual conectado no calendário do usuário.
event-query Eventquery Uma cadeia de caracteres que representa uma consulta alternativa a ser usada ao buscar eventos do Microsoft Graph. Opcionalmente, adicione o escopo delegado no final da cadeia de caracteres delimitando-o com | (/groups/GROUP-ID-GUID/calendar/calendarView | group.read.all).
eventos eventos Uma matriz de eventos para obter ou definir a lista de eventos renderizados pelo componente. Use essa propriedade para acessar os eventos carregados pelo componente. Defina esse valor para carregar seus próprios eventos. Os dateatributos , daysou não event-query têm efeito se definidos pelo desenvolvedor.
grupo por dia groupByDay Um valor booliano para agrupar eventos por dia. Por padrão, os eventos não são agrupados.
preferred-timezone preferredTimezone Nome do fuso horário IANA a ser usado ao exibir eventos recuperados do Microsoft Graph; por exemplo, America/Los_Angeles. Para obter uma lista de fusos horários IANA, consulte Lista de fusos horários de banco de dados tz. Por padrão, os eventos renderizam usando as configurações de fuso horário atuais do dispositivo.

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

O mgt-agenda componente define essas 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, confira componentes de estilo.

Métodos

Método Descrição
recarregar() Chame o método para recarregar o componente com novos dados potenciais com base em suas propriedades.

Modelos

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

Tipo de dados Contexto de dados Descrição
default events: lista de objetos de evento O modelo padrão substitui todo o componente por seu próprio.
event event: objeto event O modelo usado para renderizar cada evento.
event-other event: objeto event O modelo usado para renderizar outros conteúdos para cada evento.
header header:String O modelo usado para renderizar o cabeçalho para cada dia.
loading Nenhum contexto de dados é passado O modelo usado quando os dados estão sendo carregados.
no-data Nenhum contexto de dados é passado O modelo usado quando nenhum evento está disponível.

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, confira modelos.

Eventos

Os eventos a seguir são disparados do controle.

Evento Quando ele é emitido Dados personalizados Cancelável Bolhas Funciona com modelo personalizado
eventClick O usuário seleciona ou toca em um evento. O evento selecionado Não Não Sim, com o modelo de evento personalizado

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

Permissões do Microsoft Graph

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

Configuração Permissão API
Padrão. Calendars.ReadBasic, Calendars.Read, Calendars.ReadWrite /me/calendarview
group-id Especificado Group.Read.All, Group.ReadWrite.All /groups/{groupId}/calendar/calendarview
event-query Especificado Como opcionalmente fornecido no event-query A API que foi fornecida no event-query

O componente permite que você especifique uma consulta do Microsoft Graph diferente para chamar (como /groups/{id}/calendar/calendarView). Nesse caso, anexe 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, confira 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 em cache nenhum dado.

Estender para obter mais controle

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

Método Descrição
renderLoading Renderiza um estado de carregamento enquanto o componente é carregado.
renderNoData Renderiza um estado de dados vazio.
renderGroups Classifica os dados de evento em grupos e os renderiza com cabeçalhos de grupo.
Renderheader Renderiza um cabeçalho de grupo.
renderEvents Renderiza uma lista de objetos de evento.
renderEvent Renderiza um evento singular e todas as suas partes.
renderTitle Renderiza a parte do título do evento.
renderLocation Renderiza a parte de local do evento.
renderAttendees Renderiza a parte dos participantes do evento.
renderOther Renderiza outro conteúdo de evento.

Localização

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