Componente agenda no Microsoft Graph Toolkit

Artigo
02/14/2024

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.

HTML
React

Abra este exemplo no mgt.dev.

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 `date`atributos , `days`ou 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.

Partilhar via