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.