Calendário
O Componente Calendário tem como funcionalidade mostrar um calendário no formulário.
Calendário:
Imagem 1 - Interface Componente Calendário
Propriedades em comum:
| Propriedade | Descrição | Tipo | Exemplo |
|---|---|---|---|
| Altura | Define a altura do componente | Inteiro | 250 |
| Código | Informa o código gerado pelo Maker ao qual o componente/formulário foi associado. De forma geral, não interfere nas características do componente. | Inteiro | 5 |
| Container | Informa em qual container o componente irá ser inserido. | Indefinido | |
| Dica | Armazena uma dica para o componente, o qual se torna acessível no modo de inserção ou alteração. | Letras | "Digite o CPF do cliente" |
| Habilitado | Torna o componente possível ser editado ou manipulado. | Lógico | Sim |
| PosiçãoX e PosiçãoY | O "X" determina a posição do componente em relação à esquerda do formulário, e o "Y" em relação ao topo. | Inteiro | 100 |
| Tabulação | Indica a ordem de tabulação do componente em relação aos outros que compõem a aba do formulário na qual está posto. Essa ordem pode ser observada quando o usuário altera o estado do formulário/grade para o modo de inclusão ou edição e navega entre os componentes/campos usando a tecla Tab. | Inteiro | 2 |
| Tabular | Selecionando a opção Sim, quando o usuário estiver navegando entre os componentes, como foi descrito no item anterior, o componente receberá foco (observada a ordem de tabulação). | Lógico | Sim |
| Tamanho | Aplicado a todos - determina a largura do componente ou formulário. | Inteiro | 100 |
| Visível | Aplicada a todos os componentes, com exceção da Moldura e do objeto formulário - Selecionando a opção Sim, o componente aparece no formulário. | Lógico | Sim |
| Nome | Aplicada a todos os componentes e para o objeto formulário - apresenta o nome do componente. O Maker sugere um nome diferente dos nomes dos componentes existentes no formulário para evitar que mais de um componente possua o mesmo nome. | Letras | "Tabela de Consumidores" |
| Descrição | Aplicada a todos os componentes exceto para os componentes Árvore, Grade, Moldura, Imagem e para o objeto formulário - É a legenda que aparece sobre o componente para identificar (resumidamente) qual a sua função. Observação: Ao selecionar um determinado campo o Maker irá sugerir uma descrição obtida no dicionários de dados, caso o usuário deseje deixar o campo da descrição em branco basta apagá-lo e clicar fora do componente. | Letras | "Insira aqui a idade do consumidor" |
Propriedades específicas do componente Calendário:
| Propriedade | Descrição | Tipo | Exemplo |
|---|---|---|---|
| SQL Feriado | Permite fazer uma consulta SQL para mostrar os feriados. | SQL | SELECT * FROM tabela_feriados |
| Campo Data | Seleciona o campo que vai receber a data do SQL Feriado. | Letras | data_inicio |
| Campo Descrição | Seleciona o campo que vai conter a descrição do SQL Feriado. | Letras | data_feriado |
Maker Integrar Google Calendar | Permite a integração com a API do Google Calendar. | Lógico | Sim |
| Id do Cliente | Código de identificação exclusivo do OAuth Client do projeto Google. | Letras | d5mg1gb10qfh9fba vqid5offk3fon26f.apps. googleusercontent.com |
| Chave de API | Código de identificação exclusivo da API Google. | Letras | BIzaSyCDdWsKA cVmyqvJ8G17T7UpU IRuV3dVqO7 |
| SQL Atividade | Permite fazer uma consulta SQL para mostrar as atividades agendadas. | SQL | SELECT * FROM tabela_atividades |
| Campo Data Início | Seleciona o campo que vai receber a data inicial do SQL Atividade. | Letras | data_inicio |
| Campo Data Fim | Seleciona o campo que vai receber a data final do SQL Atividade. | Letras | data_fim |
| Campo Descrição | Seleciona o campo que vai receber a descrição do SQL Atividade. | Letras | ati_descricao |
| Exibir Números dos Dias | Exibe os números do dias em certas partes do calendário. | Lógico | Sim |
| Botão Avançar Para Dia Atual | Avança para o dia atual no Calendário. | Lógico | Sim |
| Exibir Mês e Ano Atual | Exibe título do calendário, determinando mês e ano atual. | Lógico | Sim |
| Destacar Horário Comercial | Destaca no calendário o horário comercial. (Segunda à Sexta, das 9am - 5pm). | Lógico | Sim |
| Modo de Visualização | Define o modo de visualização do calendário. - Mês: Visualização padrão de um calendário, exibindo todos itens do mês. - Semana: Visualização dos dias da semana. - Dia: Visualização das horas do dia. OBS: O usuário poderá alterar a visualização pela barra de navegação do calendário, essa propriedade define qual vai ser o modo de visualização inicial. | Lista | Mês |
| Permitir Alterar Modo de Visualização | Permite alterar o modo de visualização do calendário. | Lógico | Sim |
| Menu de Contexto | Define se poderá ser aberto o Menu de Contexto no calendário ao pressionar o botão direito. | Lógico | Sim |
Eventos:
| Evento | Descrição | Parâmetro Automático |
|---|---|---|
| Ao Atualizar | Executado ao atualizar o componente calendário. | - |
| Ao Modificar Mês | Executado ao modificar o mês do calendário. | Número equivalente ao Mês |
| Ao Modificar Ano | Executado ao modificar o ano do calendário. | Número equivalente ao Ano |
| Ao Clicar no Dia | Executado ao clicar no dia do calendário. | Passa a Data do Dia clicado. |
| Ao Clicar no Evento | Executado ao clicar no evento definido no calendário. | Passa o Objeto Evento |
| Ao Mover Evento | Executado ao mover o evento no componente calendário. | Passa o Objeto Evento |
| Ao Redimensionar Evento | Executado ao redimensionar o evento no componente calendário. | Passa o Objeto Evento |
| Ao Abrir Menu de Contexto | Executado ao abrir o menu de contexto. | ID do evento, Posição X e Posição Y. |
| Ao Fechar Menu de Contexto | Executado ao fechar o menu de contexto. | - |
MAKER 5 __Integração Google Calendar API:__
- Para realizar a integração com o Google Calendário é necessário acessar o Google Cloud e logar em uma conta Google.
Imagem 2 - Tela Inicial Google Cloud
- Crie um projeto para a utilização das funcionalidades Google API. Obs.: Caso a conta cadastrada na Google Cloud seja empresarial é necessário entrar em contato com administrador para efetuar a integração, pois não é possível selecionar e nem criar uma organização com uma conta empresarial na tela de criação de projeto. Ex: [email protected]
Imagem 3 - Tela de Projetos
- Após a criação do projeto, localize no menu lateral APIs e serviços e selecione no submenu a opção Biblioteca.
Imagem 4 - Aba de APIs e Serviços
- Na tela de Biblioteca realize uma busca por Google Calendar API e clique em ativar.
Imagem 5 - Biblioteca de APIs
- Na tela de Credenciais deve ser configurada a permissão do OAuth 2 e liberado o acesso externo.
Imagem 6 - Configurar Consentimento
-
Cadastre as informações do seu sistema. Não se faz necessário preencher o seguimento de Escopos.
-
Realizado a configuração da permissão do OAuth 2, iremos adicionar os usuários de testes da API, esses usuários terão a permissão única das contas do Google e poderão testar a integração na fase de testes.
Imagem 7 - Tela de Permissões OAuth
- Finalizada a configuração da tela de permissões volte para a tela de credenciais e clique em Criar Credenciais, primeiro crie uma Chave de API.
Imagem 8 - Tela de Credenciais
- Logo em seguida devemos criar um ID de Cliente OAuth, é fundamental que o tipo da aplicação seja Web. Após a criação do ID de Cliente OAuth devemos adicionar a URL do contexto da aplicação nas propriedades Origem JavaScript Autorizados e URIs de redirecionamento autorizados, exemplo: http://localhost:2020 ou https://softwell.com.br.
Imagem 9 - Tela de Criação de Id do Cliente
- Após a criação das credenciais devemos incluí-las nas propriedades Chave de API e ID do Cliente do componente Calendário dentro do Maker Studio.
Na conclusão das configurações, as funcionalidades do Google Calendar API estarão disponíveis para utilização em seu projeto.
Observações:
- As configurações é realizada para a utilização do Google Calendar API no ambiente de desenvolvimento/testes, caso queira implementar no ambiente de produção é necessário acessar o console do Google Cloud e localizar no menu Tela de Permissão OAuth e clicar em publicar aplicativo seguindo o passo a passo de configurações. Após um período de avaliação o recurso estará disponível.
Imagem 10 - Publicar Projeto