Componente de agenda no kit de ferramentas do Microsoft GraphAgenda component in the Microsoft Graph Toolkit
O mgt-agenda
componente da Web representa eventos em um calendário de usuário ou grupo.The mgt-agenda
web component represents events in a user or group calendar. Por padrão, o calendário exibe o atual eventos de usuário conectado para o dia atual.By default, the calendar displays the current signed in user events for the current day. O componente também pode usar qualquer ponto de extremidade que retorne eventos do Microsoft Graph.The component can also use any endpoint that returns events from Microsoft Graph.
ExemploExample
O exemplo a seguir mostra os eventos de calendário do usuário conectado exibidos usando o mgt-agenda
componente.The following example shows the signed-in user's calendar events displayed using the mgt-agenda
component. Você pode usar o editor de código para ver como as propriedades alteram o comportamento do componente.You can use the code editor to see how properties change the behavior of the component.
Abra este exemplo em gerenciamento de. devOpen this example in mgt.dev
PropriedadesProperties
Por padrão, o mgt-agenda
componente busca eventos do ponto de /me/calendarview
extremidade e exibe eventos para o dia atual.By default, the mgt-agenda
component fetches events from the /me/calendarview
endpoint and displays events for the current day. Há várias propriedades que você pode usar para alterar esse comportamento.There are several properties you can use to change this behavior.
AtributoAttribute | PropriedadeProperty | DescriçãoDescription |
---|---|---|
datadate | datadate | Uma cadeia de caracteres que representa a data de início dos eventos a serem buscados do Microsoft Graph.A string that represents the start date of the events to fetch from Microsoft Graph. O valor deve estar em um formato que pode ser analisado pelo Construtor de data -o valor não tem efeito se o event-query atributo for definido.Value should be in a format that can be parsed by the Date constructor - value has no effect if event-query attribute is set. |
durantedays | durantedays | Um número de dias para buscar do Microsoft Graph-padrão é de 3 valores não tem efeito se o event-query atributo for definido.A number of days to fetch from Microsoft Graph - default is 3 - value has no effect if event-query attribute is set. |
show-Maxshow-max | showMaxshowMax | Um número para indicar o número máximo de eventos a serem exibidos.A number to indicate the maximum number of events to show. O valor padrão não é definido (sem máximo).The default value is not set (no maximum). |
ID de grupogroup-id | groupIdgroupId | Uma ID de cadeia de caracteres para um calendário de grupo a ser usado em vez do calendário do usuário conectado no momento.A string ID for a group calendar to use instead of the current signed in user's calendar. |
evento-consultaevent-query | eventQueryeventQuery | Uma cadeia de caracteres que representa uma consulta alternativa a ser usada ao buscar eventos do Microsoft Graph.A string that represents an alternative query to be used when fetching events from Microsoft Graph. Opcionalmente, adicione o escopo delegado no final da cadeia de caracteres, delimitadondo-o com | ( /groups/GROUP-ID-GUID/calendar/calendarView | group.read.all ).Optionally, add the delegated scope at the end of the string by delimiting it with | (/groups/GROUP-ID-GUID/calendar/calendarView | group.read.all ). |
eventsevents | eventsevents | 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.An array of events to get or set the list of events rendered by the component - use this property to access the events loaded by the component. Defina esse valor para carregar seus próprios eventos, se o valor for definido por desenvolvedor, date os days atributos, ou event-query não terão efeito.Set this value to load your own events - if value is set by developer, the date , days , or event-query attributes have no effect. |
grupo por diagroup-by-day | groupByDaygroupByDay | Um valor Boolean para agrupar eventos por dia-por eventos padrão não são agrupados.A Boolean value to group events by day - by default events are not grouped. |
fuso horário preferidopreferred-timezone | preferredTimezonepreferredTimezone | Nome do fuso horário preferencial a ser usado ao recuperar eventos do Microsoft Graph; por exemplo, Pacific Standard Time .Name of the preferred time zone to use when retrieving events from Microsoft Graph; for example, Pacific Standard Time . Por padrão, esse atributo usa o fuso horário UTC.By default, this attribute uses the UTC time zone. O fuso horário preferencial para o usuário atual pode ser recuperado chamando-se o me/mailboxSettings ponto de extremidade e lendo o valor da propriedade timeZone .The preferred time zone for the current user can be retrieved by calling the me/mailboxSettings endpoint and reading the value of the timeZone property. |
O exemplo a seguir altera o comportamento do componente para buscar dados de uma data específica e até três dias.The following example changes the behavior of the component to fetch data for a specific date and up to three days.
<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.The following example changes the behavior of the component to fetch data from a specific query.
<mgt-agenda
event-query="/me/events?orderby=start/dateTime"
></mgt-agenda>
MétodosMethods
MétodoMethod | DescriçãoDescription |
---|---|
reload ()reload() | Chame o método para recarregar o componente com possíveis novos dados com base em suas propriedades.Call the method to reload the component with potential new data based on its properties. |
Propriedades personalizadas de CSSCSS custom properties
O mgt-agenda
componente define essas propriedades personalizadas de CSSThe mgt-agenda
component defines these CSS custom properties
mgt-agenda {
--event-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.092);
--event-margin: 0px 10px 14px 10px;
--event-padding: 8px 0px;
--event-background-color: #ffffff;
--event-border: solid 2px rgba(0, 0, 0, 0);
--agenda-header-margin: 40px 10px 14px 10px;
--agenda-header-font-size: 24px;
--agenda-header-color: #333333;
--event-time-font-size: 12px;
--event-time-color: #000000;
--event-subject-font-size: 19px;
--event-subject-color: #333333;
--event-location-font-size: 12px;
--event-location-color: #000000;
}
Para saber mais, confira estilos de componentes.To learn more, see styling components.
ModelosTemplates
O mgt-agenda
componente oferece suporte a vários modelos que permitem substituir determinadas partes do componente.The mgt-agenda
component supports several templates that allow you to replace certain parts of the component. Para especificar um modelo, inclua um <template>
elemento dentro de um componente e defina o data-type
valor como um dos seguintes:To specify a template, include a <template>
element inside of a component and set the data-type
value to one of the following:
Tipo de dadosData type | Contexto de dadosData context | DescriçãoDescription |
---|---|---|
default |
events : lista de objetos Eventevents : list of event objects |
O modelo padrão substitui todo o componente pelo seu.The default template replaces the entire component with your own. |
event |
event : objeto Eventevent : event object |
O modelo usado para renderizar cada evento.The template used to render each event. |
event-other |
event : objeto Eventevent : event object |
O modelo usado para renderizar o conteúdo adicional de cada evento.The template used to render additional content for each event. |
header |
header : Stringheader : string |
O modelo usado para renderizar o cabeçalho de cada dia.The template used to render the header for each day. |
loading |
Nenhum contexto de dados é passadoNo data context is passed | O modelo usado quando os dados estão sendo carregados.The template used when data is loading. |
no-data |
Nenhum contexto de dados é passadoNo data context is passed | O modelo usado quando não há eventos disponíveis.The template used when no events are available. |
Os exemplos a seguir ilustram como usar o event
modelo:The following examples illustrates how to use the event
template:
<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.To learn more, see templates.
EventosEvents
Os eventos a seguir são acionados do controle.The following events are fired from the control.
EventoEvent | DescriçãoDescription |
---|---|
eventClickeventClick | O usuário clica ou toca em um evento.The user clicks or taps an event. |
PermissõesPermissions
Este componente usa as seguintes APIs e permissões do Microsoft Graph:This component uses the following Microsoft Graph APIs and permissions:
RecursoResource | PermissãoPermission |
---|---|
/me/calendarview/me/calendarview | Calendars.ReadCalendars.Read |
O componente permite que você especifique uma consulta diferente do Microsoft Graph para chamar (como /groups/{id}/calendar/calendarView
).The component allows you to specify a different Microsoft Graph query to call (such as /groups/{id}/calendar/calendarView
). Nesse caso, acrescente a permissão ao final da cadeia de caracteres, delimitado por |
.In this case, append the permission to the end of the string, delimited by |
.
Ao usar o modelo padrão e o renderAttendees
modelo padrão, são necessárias APIs e permissões adicionais.When using the default template and default renderAttendees
template, additional APIs and permissions are required. O modelo padrão para esse componente usa um componente de Gerenciamento de pessoas para eventos que têm participantes, o que requer o seguinte.The default template for this component uses a mgt-people component for events that have attendees, which requires the following.
RecursoResource | PermissãoPermission |
---|---|
/Users/users | Users. ReadBasic. AllUsers.ReadBasic.All |
/me/calendarview/me/calendarview | People.ReadPeople.Read |
/me/calendarview/me/calendarview | Contacts.ReadContacts.Read |
AutenticaçãoAuthentication
O controle de logon usa o provedor de autenticação global descrito na documentação de autenticação.The login control uses the global authentication provider described in the authentication documentation.
Estender para mais controleExtend for more control
Para cenários mais complexos ou uma UX verdadeiramente personalizada, esse componente expõe vários protected
métodos render * para substituição em extensões de componente.For more complex scenarios or a truly custom UX, this component exposes several protected
render* methods for override in component extensions.
MétodoMethod | DescriçãoDescription |
---|---|
renderLoadingrenderLoading | Renderiza um estado de carregamento enquanto o componente é carregado.Renders a loading state while the component loads. |
renderNoDatarenderNoData | Renderiza um estado de dados vazio.Renders an empty data state. |
renderGroupsrenderGroups | Classifica dados de eventos em grupos e os renderiza com cabeçalhos de grupo.Sorts event data into groups and renders them with group headers. |
renderHeaderrenderHeader | Renderiza um cabeçalho de grupo.Renders a group header. |
renderEventsrenderEvents | Renderiza uma lista de objetos Event.Renders a list of event objects. |
renderEventrenderEvent | Renderiza um evento singular e todas as suas partes.Renders a singular event and all of its parts. |
renderTitlerenderTitle | Renderiza a parte do título do evento.Renders the event title part. |
renderLocationrenderLocation | Renderiza a parte do local do evento.Renders the event location part. |
renderAttendeesrenderAttendees | Renderiza a parte dos participantes do evento.Renders the event attendees part. |
renderOtherrenderOther | Renderiza o conteúdo do evento adicional.Renders additional event content. |