Feedback
  1. aplicacoes
  2. aplicacao calendario
  3. Configuração do Calendário

Configuração do Calendário

A tela de Configuração do Calendário permite personalizar diversos aspectos da aplicação, garantindo uma melhor adaptação às necessidades do projeto.

Através dessas configurações, o desenvolvedor pode ajustar o comportamento do calendário, escolher os campos que serão exibidos, definir regras para criação e edição de eventos, além de configurar cores e estilos para melhor visualização.

Configuração

Configuração do Calendário Tela de Configuração do Calendário

Margens

Permite ao desenvolvedor definir o valor das margens da aplicação em pixels. Caso nenhum valor seja especificado, a aplicação utilizará os valores padrão do tema configurado.

Atenção:
Ao configurar o atributo Alinhamento Vertical, os valores definidos para as margens serão desconsiderados.

Exemplo de como utilizar o atributo

informando valores para a margem

Largura do Iframe do Formulário

Define a largura, em pixels, do formulário utilizado para inserir eventos no Calendário.

Altura do iframe do formulário

Define a altura, em pixels, do formulário utilizado para inserir eventos no Calendário.

Formato de hora

Define se a exibição dos horários será no formato 12 horas (AM/PM) ou 24 horas, afetando a visualização e inserção dos eventos.

  • 13:00 - Define a utilização da hora no formando 24 horas.
  • 1:00pm - Define a utilização da hora no formando 12 horas (AM/PM)

Modo de início

Definir o modo de exibição inicial do calendário, podendo ser definido como: Agenda, Dia, Semana, Mês, Multi Mês e Ano.

Exemplo de visualização Multi Mês

Exemplo da inicialização por multi mes

Exemplo de visualização por Agenda

Exemplo da inicialização por agenda

Modos Disponíveis

O desenvolvedor deve definir quais modos de visualização estarão disponíveis para o usuário final, desmarcando aqueles que não deseja disponibilizar.

Desabilitar Drag & Drop

Este atributo desabilita o Drag & Drop (arrastar e soltar) para os eventos do calendário. O Drag & Drop permite atualizar datas e horários dos eventos sem acessar o formulário de edição.

Exemplo de uso do Drag & Drop

Exemplo de uso do Drag & Drop nos eventos do calendário

Desativar opção ‘Dia inteiro’

Desativa a opção de definir um evento como Dia todo, removendo o campo do formulário de inclusão do evento.

Limite horário mínima

Configuração da hora inicial do calendário

Define o horário minimo do calendário nas exibições por Semana e Dia.

Inportante O horário informando deve ser no formato hh:mm, como destacado na imagem, caso contrário não será considerado.

Exemplo utilizando Limite de horas iniciais

Exemplo do calendário iniciando as 8 horas

Limite horário máxima

Define a hora maxima que será exiba no calendário nas visualizações de Semana e Dia, limiteando assim o horário para criação dos eventos.

Inportante O horário informando deve ser no formato hh:mm, como destacado na imagem, caso contrário não será considerado.

Posição do mini calendário e categoria

Este atributo define o posicionamento da coluna de exibição do Mini calendário e das Categorias. Esta coluna pode ser posicionada à esquerda ou direita do calendário principal.

A coluna é exiba quando se faz uso do mini calendário ou das categorias dos eventos.

Exibir mini calendári

Define a exibição do Mini calendário. Este recurso permite a navegação independente do calendário principal.

Dia inteiro - ocultar campos de hora

Define se os campos de hora (Hora de inicio e Hora de termino) serão ocultados ao marcar o evento como dia inteiro, no formulário de cadastro dos eventos.

Caso este atributo esteja desmarcado, os valores definidos nos campos serão desconsiderados ao marcar o evento como o dia todo.

Recorrência - Ocultar Campos

Permite ocultar os campos relacionados ao período e às informações de recorrência no formulário de cadastro dos eventos do Calendário.

Recorrência - Adicionar Marca d’Água no Formato de Data

Define um texto indicativo (marca d’água) no campo de data da recorrência, ajudando o usuário a identificar o formato esperado para a inserção da data.

Ocultar Filtro do Campo Categoria

Oculta o filtro do campo Categoria, impedindo que o usuário selecione categorias específicas para exibição no Calendário.

Quebra de Linha no Título

Habilita a quebra de linha automática no título dos eventos quando o tamanho do texto exceder o limite do espaço disponível.

Intervalo de Tempo

Define o intervalo de tempo, em minutos, utilizado para organizar os eventos nas visualizações Semana e Dia.

Intervalo de Tempo para Arrastar

Determina o intervalo de tempo aplicado ao criar ou mover eventos nas visualizações Dia e Semana. Caso esse valor seja maior que o definido no atributo Tempo de Intervalo, será ajustado automaticamente para o menor valor configurado.

Campos do Calendário

Esta interface exibe o relacionamento dos campos que serão utilizados na aplicação.

Você precisa relacionar os campos da sua tabela com os campos da aplicação formulário.

Configuração dos Campos do Calendário Tela de Configuração dos Campos do Calendário

API do Google

A API do Google Calendar servirá para você sincronizar sua agenda do google com a aplicação desenvolvida no Scriptcase.

Primeiramente você deve ativar a API Google Calendar clicando em https://console.developers.google.com/apis/api/calendar-json.googleapis.com/overview.

Após a ativação você precisa configurar a “Tela de consentimento OAuth” clicando em https://console.developers.google.com/apis/credentials/consent.

Configuração da Tela de consentimento OAuth Tela de consentimento OAuth

  • Endereço de e-mail : Selecione o email que será utilizado como fonte para a agenda do google. A aplicação utilizará esses dados para sincronização.
  • Nome do produto mostrado aos usuários : Permite inserir o nome de consentimento que será exibido para os clientes. Certifique-se de que o nome descreva o seu produto com precisão e tome cuidado para não usar nomes que sugiram que o produto seja do Google ou de outra empresa.
  • URL da página inicial : Permite informar uma URL para página inicial. (opcional)
  • URL do logotipo do produto : Permite informar uma URL que contém uma imagem que servirá como logotipo do produto. (opcional)
  • URL da política de privacidade : Permite informar a URL da política de privacidade do produto. (opcional)
  • URL dos termos de serviço : Permite informar a URL dos termos de serviço do produto. (opcional)

Obs: Você só precisa informar o endereço de e-mail e o nome do produto. Todos os outos itens são opcionais.

Agora é preciso criar uma Credencial > ID do cliente OAuth. Selecione a opção “Aplicativo da Web” e siga com a configuração abaixo.

Configuração do ID do cliente OAuth Tela de Configuração do ID do cliente OAuth

  • Nome : Insira um nome para o ID do cliente OAuth.
  • Origens JavaScript autorizadas : Insira a URL raiz do seu sistema. Por exemplo: http://seudominio.com ou http://localhost
  • URIs de redirecionamento autorizados : Insira a URL completa até sua aplicação calendário.

Após inserir os dados acima, clique em “Salvar.”



Agora vamos configurar a aplicação do Scriptcase.

Configuração da API Google Calendar Tela de Configuração da API Google Calendar

  • Integrar com o Google Calendar : Realiza a sincronização com os eventos do calendário do Google, permitindo que você importe ou exporte os eventos.
  • Cliente OAuth Json : Json do Google OAuth com a credencial para acessar o projeto. Para pegar esse conteúdo abra o ID do cliente OAuth configurado anteriormente e faça o download do JSON.
  • Login no Google Oauth : Escolha se deseja armazenar o login realizado na aplicação para não pedir novamente ou se irá solicitar a autenticação por sessão.
  • Integrar formulário : Permite ativar o formulário para inserir, excluir ou atualizar eventos no calendário do Google.
  • Inserir : Ao inserir um evento no formulário, também insere no calendário do google.
  • Atualizar : Ao atualizar um evento no formulário, também atualiza no calendário do google.
  • Excluir : Ao excluir um evento no formulário, também exclui no calendário do google.