O calendário desenha compromissos, tarefas e suas outras linhas à sua maneira: o ícone de hora, assunto, local e repetição no calendário, uma dica de ferramenta de quando e onde, e um diálogo com os detalhes de um compromisso. Cada uma pode ser desenhada do seu jeito, uma tabela por vez, e as linhas de uma tabela podem ser escritas e alteradas em formas próprias. Tudo isso se aplica a todos os layouts.
Um MultiTableTemplate (Reagir: uma entrada de templates) desenha as linhas de uma tabela no calendário no lugar de todas as linhas do calendário — seu ícone de tempo, assunto, local e repetição — assim como faz em uma linha do tempo. Ela recebe a linha, com cada coluna lida em sua Record; mantenha-a em uma linha, já que as células de um mês são curtas. Como uma dica de ferramenta, ela mostra o que o usuário deve ler, não controles para usar: o calendário ainda abre a linha quando ela é clicada.
<Calendar
regarding={account}
templates={{
task: (item) => (
<>
<TaskListLtr16Regular /> {item.title}
</>
),
}}
/><Calendar Regarding="@account">
<MultiTableTemplate Table="task" Context="item">
<FluentIcon Value="@(new Icons.Regular.Size16.TaskListLtr())" /> @item.Title
</MultiTableTemplate>
</Calendar>O calendário lê as colunas que ele mostra. Para que um modelo ou dica de ferramenta mostre outro, nomeie no FetchXML de uma visualização, como a demonstração abaixo faz para a direção e o número de uma ligação: o calendário lê as colunas de uma visualização ao lado da sua.
Apoiar o ponteiro em um compromisso mostra seu assunto, quando e onde ele está. Passe TooltipTemplate (Reagir: appointmentTooltip) para mostrar uma dica de ferramenta sua. Ela recebe a indicação, que Record contém todas as colunas lidas de sua linha, com seu valor formatado, para que possa mostrar colunas suas que o calendário não desenha. Uma dica de ferramenta não é interativa: mostre o que o usuário deve ler, não controles a usar.
<Calendar
viewIds={[accountAppointmentsViewId]}
appointmentTooltip={(appointment) => (
<>
<strong>{appointment.subject}</strong>
<div>{appointment.record?.formattedValues?.['ppp_customercode']}</div>
</>
)}
/><Calendar ViewIds="@([accountAppointmentsViewId])">
<TooltipTemplate>
<strong>@context.Subject</strong>
<div>@context.Record?.FormattedValues.GetValueOrDefault("ppp_customercode")</div>
</TooltipTemplate>
</Calendar>Consultas e ligações da Schmeler and Sons, um mês de cada vez. Uma ligação é feita com um ícone indicando para onde foi, e sua dica de ferramenta mostra o número de onde foi ou de onde foi; a dica de uma consulta indica onde ela está.
Clicar em uma consulta abre um diálogo com seus detalhes, lido do Dataverse como uma página de registro lê um registro — através da mesma tabela de acesso e segurança de colunas — e mostrado em leitura somente indireta: quando está, onde, sobre o que está, seu status e sua descrição. Passe AppointmentDetails (Reagir: appointmentDetails) para mostrar campos seus próprios nele, vinculado ao registro da nomeação como em uma página de registro, ou gerencie OnAppointmentClick (Reagir: onAppointmentClick) para fazer outra coisa em um clique, como abrir uma página sua.
<Calendar
appointmentDetails={
<>
<ColumnEdit columnName="scheduledstart" readOnly />
<ColumnEdit columnName="location" readOnly />
</>
}
/><Calendar>
<AppointmentDetails>
<ColumnEdit ColumnName="scheduledstart" ReadOnly="true" />
<ColumnEdit ColumnName="location" ReadOnly="true" />
</AppointmentDetails>
</Calendar>As reuniões da Schmeler and Sons, cada uma começando no início, no fim, onde está e com os participantes obrigados.
Em um Editable calendário, uma linha de uma tabela que não seja de compromissos se abre na forma das colunas que seu registro mostra. A MultiTableForm dentro do calendário (React: uma entrada de forms) apresenta uma tabela com suas próprias formas, uma para criar suas linhas e outra para alterá-las: componentes dos editores, mostrados dentro de uma forma do registro. FormLocation (React: formLocation) diz onde eles abrem: um diálogo no centro, como por padrão, ou um painel lateral à esquerda ou à direita.
<Calendar
regarding={account}
editable
formLocation="right"
forms={{ task: { create: TaskForm, edit: TaskForm } }}
/><Calendar Regarding="@account" Editable="true" FormLocation="DialogLocation.Right">
<MultiTableForm Table="task" CreateForm="typeof(TaskForm)" EditForm="typeof(TaskForm)" />
</Calendar>Para um exemplo mais completo — tarefas desenhadas com se foram concluídas e quão urgentes são, e uma dica de ferramenta para cada tabela — veja a demonstração Calendar Custom Rendering.