Função

O componente permite agendar eventos, inclusive com regras de recorrências, e exibi-los em diferentes formatos. O agendador pode ser configurado e adaptado para contemplar as mais diversas necessidades do seu sistema.

Uso

O agendador possui algumas características que são próprias a depender do modo como é visualizado, outras são comuns a todos. Abaixo vemos, em destaque algumas áreas que são comuns a dois ou mais tipos de agenda.

Figura 1.1 - Componente Agenda com alguns registros em visualização Dia

1. Hoje: exibe o calendário do mês atual;
2. ‹ ›: avança ou retorna os meses;
3. Calendário: ao clicar, um calendário é exibido para selecionar o mês e ano;
4. Visualização: abre uma caixa de seleção para o usuário possa escolher o modo de exibição;
5. Evento selecionado: passe o curso sobre o evento para exibir alguns detalhes e realizar alterações via Drag and Drop;
6. Eventos: evento não selecionado;
7. Dia inteiro / Horário comercial: exibe os eventos cadastrados durante as 24 horas do dia ou exibe somente os eventos em horário comercial, das 08h00 às 17h00.

Eventos

Um duplo clique em uma área sem eventos abrirá um modal para criar um evento, se o duplo clique ocorrer em um evento já criado, o mesmo modal será aberto para a edição.

Figura x.x - 

• Título: nome do evento;
• Início: data e hora do começo do agendamento;
• Fim: data e hora do término do agendamento;
• Evento de dia inteiro: caso seja ativado, o evento será contemplado das 00h00 do dia inicial até as 23h59 do dia final;
• Repetir: permite criar uma série do mesmo evento;
• Descrição: comentário sobre o evento. 

Repetição

Um único evento pode ser replicado e gerar uma série de eventos com diversas regras. O agendador permite ainda que, por exemplo, um evento com 5 repetições sejam criados e após isso, somente o terceiro evento da série seja deletado, não impactando nos demais eventos. Ao acessar o terceiro item da série, uma caixa é exibida perguntando se deseja alterar só item selecionado ou a série inteira.

A criação de séries é feita a partir do campo Repetir que possui 5 opções: Nunca, Diariamente, Semanalmente, Mensalmente e Anualmente. Ao selecionar algum dos intervalos, novos campos são exibidos. Os campos Repetir todo e Fim são idêntico para todas as repetições, já o campo Repetir em não é exibido para a opção diariamente e é diferente para todas as outras opções. 

Campos comuns:

1. Repetir todo: define a quantidade de ciclos que o evento será repetido, se opção Diariamente estiver selecionada no campo Repetir, o ciclo será diário, se a opção semanal estiver selecionada, o ciclo será semanal e assim sucessivamente;
2. Fim: define quando o ciclo será encerrado e possui 3 opções:
   • Nunca: o ciclo será repetido infinitas vezes;
   • Após __ ocorrências: define a quantidade máxima de repetições;
   • Em: informa a data da última ocorrência.

Campo Repetir em:

• semanalmente: Exibe 7 checkboxs, cada um representando um dia da semana em que o evento será repetido. 

• mensalmente: possui 2 opções:
  1. Dia: seleciona um dia do mês para ocorrer o evento;
  2. Semana: possui duas caixas de seleções, onde na primeira é possível selecionar uma das 5 semanas possíveis em um mês e na segunda, são exibidas dias da semana e outras opções:
     • Caixa 1: primeira, segunda, terceira, quarta e última;
     • Caixa 2: dia, dia da semana, final de semana, domingo, segunda-feira, terça-feira, quarta-feira, quinta-feira, sexta-feira e sábado,

• anualmente: possui 2 opções:
  1. Dia: seleciona uma data do ano para ocorrer o evento;
  2. Semana: possui três caixas de seleções, onde na primeira é possível selecionar uma das 5 semanas possíveis em um mês, a segunda exibe os dias da semana e na última, os meses;
     • Caixa 1: primeira, segunda, terceira, quarta e última;
     • Caixa 2: dia, dia da semana, final de semana, domingo, segunda-feira, terça-feira, quarta-feira, quinta-feira, sexta-feira e sábado,
     • Caixa 2: meses do ano.

Edição visual

O agendador permite editar horários e dias dos eventos utilizando a própria caixa do evento.

Ao posicionar o curso sobre a caixa, tarjas brancas serão exibidas nas laterais (item 1 da figura xx ), clique e arraste para definir o novo horário. O item 2 da figura abaixo exibe o horário inicial e o item 3 o novo horário.

Figura xx

Caso queira mudar o horário do evento e manter o mesmo intervalo de tempo, clique sobre o evento e arraste-o até o novo horário. O item 1 destacado na figura abaixo exibe o novo horário.

Figura xx

Dependendo da configuração do evento, alguns símbolos podem ser exidos junto à área do evento. A seta sinalizada no item 1 da figura abaixo indica que esse evento foi iniciado antes do dia 11 de maio, já a seta circular no item 2 da mesma figura indica que este evento pertence a uma série de eventos com repetições.

Figura xx

Tipos de agenda

Existem 4 modos de visualizar o agendador, sendo que alguns desses modos possuem variação de tempo.

Com exceção do modo agenda, onde não é possível editar eventos, todos os outros modos permitem edições visuais, como arrastar o evento de um dia para o outro ou arrastar sua lateral para ampliar a hora final ou inicial.

Visualização por mês

Nesse modo, os eventos são apresentados em forma de calendário mensal. Em cada dia é exibido apenas um evento e nos dias em que possuem dois ou mais eventos, um botão o botão ... (item 1 da figura) é exibido para direcionar o usuário para a visualização dos eventos daquele por dia.

Image Modified

Figura 1.1 - Visualização por mês

Visualização por dia

A visualização por dia exibe os eventos em uma tabela, onde a coluna representa a data e suas linhas as horas. A linha dia inteiro exibem os eventos que não tiveram suas as horas definidas, ou seja, o evento está marcado como o dia todo.

Os modos de visualização semana e semana de trabalho seguem o mesmo padrão, porém, no primeiro caso são exibidos os 7 dias da semana, ficando o domingo na primeira coluna e sábado na última. Já no segundo modo, semana de trabalho, não é exibido o final de semana, sábado e domingo.

Image Modified

Figura 1.2 - Visualização por dia

1. Calendário: ao clicar, um calendário é exibido para selecionar uma data e exibir o dia, quando a visualização é por dia ou a semana referente aquela data, quando o modo de visualização é semana ou semana de trabalho;
2. Data: o modo de visualização por dia exibe apenas a data selecionada e uma coluna, porém os modos semana de trabalho e semana vão exibir 5 ou 7 colunas, respectivamente; 
3. Dia inteiro: agendamentos cadastrados como "Evento de dia inteiro" são exibidos na primeira linha da tabela;
4. Choque de horário: o agendador permite agendamento de eventos com o mesmo horário, nesses casos, os eventos são exibidos um ao lado do outro;

Visualização por Linha do tempo

Nesse modo, os eventos são exibidos em uma tabela com 3 linhas: na primeira é exibido a data, a segunda possui os horários referentes a data e na última, os eventos referentes aos horários. A quantidade de colunas variam com o espaço de tempo selecionado no modo de visualização e no botão Dia inteiro / Horário comercial.   

Existem 4 opções desse modo de visualização:

1. Linha do tempo: exibe todos os eventos das 24 horas do dia selecionado;
2. Linha do tempo (semanal): exibe todos os eventos dentro da semana selecionada; 
3. Linha do tempo (Semana de trabalho): exibe todos os eventos dentro da semana selecionada, com exceção dos dias sábado e domingo;
4. Linha do tempo (mensal): exibe todos os eventos dentro do mês selecionado;.

Image Modified

Figura 1.3 - Visualização por linha do tempo (semanal)

1. Calendário: ao clicar, um calendário é exibido para selecionar uma data dentro da linha do tempo;

Principais propriedades

Na tabela abaixo estão descritas as principais propriedades para o funcionamento básico do componente.

Propriedade a ser documentada

Figura 2 - Adicionando um componente botão dentro do Item