Calendário Anual
O calendário de vista anual, permite de uma forma simples visualizar um conjunto de eventos nos respetivos dias, assim como adicionar ou remover dias a um determinado evento.
Este documento descreve de forma sumária as principais linhas do desenho do calendário na plataforma Elevation e como se pode interagir com o mesmo através de um conjunto de inputs/outputs.
Visão do Calendário
Visão geral
Visão de um mês expandido
Diretiva
Diretiva angular “pri-year-calendar”.
Inputs
calendarConfig: YearCalendarConfigModel
O calendarConfig? é responsável pela configuração geral do calendário e tem as seguintes propriedades:
| Propriedade | Tipo | Valor por defeito | Descrição |
|---|---|---|---|
| initialYear? | number | ano atual | O ano inicial do calendário. |
| workingHours? | number | 8 | Horas de trabalho por dia. |
| firstDayOfWeek? | number | 0 (domingo) | Dia em que a semana inicia. |
| monthLabelWidth? | TranslationWidth | TranslationWidth.Wide | Tamanho da label do mês. |
| showExpandEventsOption? | boolean | true | Flag que indica se o mês pode ser expandido. |
| showEditableEventsOption? | boolean | true | Flag que indica se a opção para editar o evento está disponível. |
| showDeleteEventsOption? | boolean | true | Flag que indica se a opção para remover o evento está disponível. |
| showTimeInformationOnEvent? | boolean | true | Flag que indica se a informação do tempo de cada dia é mostrada. |
| deleteEventsMessage? | string | undefined | Mensagem personalizada para a remoção de um evento. |
| eventsWorkingDayMode? | EventWorkingDayMode | Default | O modo que dias não trabalháveis aparecem no expander. * |
O enumerador eventsWorkingDayMode tem as seguintes opções:
| Propriedade | Descrição |
|---|---|
| None | Não mostra dias não trabalháveis em vista expandida. |
| Default | Mostra os mesmo dias não trabalháveis do calendário. |
| Custom | Mostra os dias não travalháveis do respetivo evento, ou seja, uma união dos 'weekWorkingDays' com os 'notWorkingDays'. |
notWorkingDays: ICalendarNotWorkingDay[]
O notWorkingDays? é o array dos dias não trabalháveis como, por exemplo, os feriados e tem as seguintes propriedades:
| Propriedade | Tipo | Valor por defeito | Descrição |
|---|---|---|---|
| date | Date | undefined | O dia não trabalhável. |
| description? | string | undefined | A descrição do dia. |
weekWorkingDays?: number[]
O weekWorkingDays? indica os dias da trabalháveis, por defeito, o valor é [1, 2, 3, 4, 5] (segunda-feira, terça-feira, quarta-feira, quinta-feira, sexta-feira).
events: ICalendarEvent[]
O events? é o array de eventos a serem mostrados/manipulados no calendário e tem as seguintes propriedades:
| Propriedade | Tipo | Valor por defeito | Descrição |
|---|---|---|---|
| id | string | undefined | O identificador do evento. |
| title | string | undefined | O título do evento. |
| description? | string | undefined | A descrição do evento. |
| type | string | undefined | O identificador do tipo de evento. |
| color | string | undefined | O valor hexadecimal da cor do evento. |
| dates | ICalendarEventDay[] | undefined | Um array com os dias selecionados. * |
| isEditable? | boolean | undefined | Flag que indica se a opção para editar o evento está disponível. |
| weekWorkingDays? | number[] | undefined | Dias da semana trabalháveis do evento. |
| notWorkingDays? | ICalendarNotWorkingDay[] | undefined | Dias não trabalháveis do evento. * |
| isRemovable? | boolean | undefined | Flag que indica se a opção para remover o evento está disponível. |
| imageUrl? | string | undefined | Imagem identificativa do evento. |
*A propriedade dates tem as seguintes propriedades
| Propriedade | Tipo | Valor por defeito | Descrição |
|---|---|---|---|
| date | Date | undefined | O dia do evento. |
| hours | number | undefined | O número de horas do evento. |
| locked? | boolean | undefined | Flag que indica se esse dia pode ser alterado. |
yearsInterval: { min: number, max: number }
O yearsInterval? indica qual o ano mínimo e máximo que pode ser selecionado, por defeito, o calendário permite selecionar até menos 2 anos e mais 2 anos que o ano definido na configuração.
maxSelectableDays?: number
O maxSelectableDays? indica o número máximo de dias que podem ser selecionados, caso não seja definido não existe limite.
eventHours?: number
O eventHours? indica o numero de horas que serão selecionadas em mode edição, caso não seja definido este valor é o mesmo do 'workingHours' definido na configuração.
allowOnNotWorkingDays?: boolean
O allowOnNotWorkingDays? indica se é possível selecionar dias não trabalháveis, por defeito, o valor é 'false'.
editingEventId?: string
O editingEventId? é o identificador do evento que está a ser editado, caso este valor seja definido o calendário entra automaticamente em mode de edição, o evento que está a ser editado tem de estar sempre presente no array de eventos.
disabled?: boolean
O disabled? indica se o calendário está em modo 'disabled', por defeito, o valor é 'false'.
Outputs
selectedYearChange: number
O selectedYearChange é emitido quando o ano é alterado, devolve o ano selecionado.
eventsChange: void
O selectedYearChange é emitido quando em modo de edição o evento é alterado.
editEvent: string
O editEvent é emitido quando se entra em mode edição pelo botão 'edit' de um evento no próprio calendário, devolve o 'id' do evento.
removeEvent: string
O removeEvent é emitido quando se elimina um evento pelo botão 'remove' de um evento no próprio calendário, devolve o 'id' do evento.
Exemplo
```