Mendix : Calendar Widget, Como funciona?

Mendix : Calendar Widget , Como funciona?

O widget de calendário possui funcionalidades que permitem adicionar, editar e personalizar eventos, facilitando a visualização e o gerenciamento dentro de aplicações. Com opções para configurar a fonte de dados, alterar cores e definir comportamentos de clique, o calendário se torna um componente flexível para diferentes necessidades. Neste artigo será explicado como baixar o widget, inserir na página e configurar as principais abas disponíveis no pop-up de edição.Â

O widget de calendário tem as suas características como adicionar e editar os eventos, mudar as cores dos eventos para ter a facilidade de observar os eventos e baixá-los baseado nas datas que foram escolhidas. 

Desenvolvimento 

Para baixar o widget “Calendar” é necessário ter a versão 7.14.1 ou maior do Studio Pro. Faça o download através da aba “Marketplace”:  

Antes de começar a configurar o calendário é importante criar uma entidade exclusiva para o calendário com associação (1 * N) com uma entidade exclusiva para os eventos. Para adicionar o calendário dentro da página, adicione um data view ou list view contendo o objeto calendário que será utilizado para armazenar as informações do calendário e os eventos relacionados. Ao clicar duas vezes no calendário, aparecerá um pop-up como abas,, seguir há uma explicação das 4 abas: 

Aba de Data source 

• Data source: Determina o como os dados do calendário serão baixados., As opções são: contexto, base de dados, microflow ou nanoflow. No Mendix, o padrão é por contexto.Â

• Event Entity:Â A entidade que representa o evento que vai aparecer no calendário.Â

• XPath: Filtro do evento da entidade, como por exemplo o calendário baixar apenas quando algum evento está confirmado para acontecer, e com isto baixará e aparecer no calendário apenas objetos com esta confirmação.Â

• Microflow:Â à‰ executado para recuperar os eventos do calendário. Só pode ser configurado quando o data source estiver como “microflow”.Â

• Nanoflow: Assim como a microflow, ele recupera os eventos do calendário. à‰ configurável quando o data source estiver como “nanoflow”.Â

• Title Attribute: o atributo “String” contém o título da entidade do evento. à‰ configurável quando o “Event Entity” é definido.Â

• All day attribute: O atributo do tipo Boolean indica se o evento no calendário leva o dia inteiro para acontecer. à‰ configurável quando o “Event Entity” é definido.Â

• Start attribute: Quando o atributo do tipo “DateTime” (data e horário traduzido para o português) indica quando o evento começa. à‰ configurável quando o “Event Entity” é definido.Â

• End attribute: Quando o atributo do tipo “DateTime” indica quando o evento se encerra. à‰ configurável quando o “Event Entity” é definido.Â

• Color attribute: O atributo do tipo “String” define a cor de fundo do evento do calendário. à‰ configurável quando o “Event Entity” é definido e as cores no Mendix são formatadas com tags HTML em hexadecimal ou rgb (como por exemplo “azul”, “#0D0D0D,” “rgb(0,0,0)” ou “rgba(10,10,10, 0.5)”)Â

• Refresh data source on view: Permite a recuperação de um subconjunto de um conjunto de dados maior, executando as seguintes ações:Â

• Atualização dos valores dos atributos “View start attribute” e “View end attribute” quando as datas do calendário visualizável forem alteradas.Â

• Repovoar o calendário com eventos executando uma microflow, que deve usar os valores dos atributos “View start attribute” e “View end attribute” como restrições de recuperação de dados (por exemplo, “End > $CalenderView/StartAttribute” e “Start < $CalenderView/EndAttribute”).Â

• Padrão: NãoÂ

• Configurável quando a fonte de dados estiver definida como Microflow.Â

• View start atribute: O atributo do tipo “DateTime” (data e hora) que indica o limite inferior de data e hora dos eventos exibidos no calendário.Â

• View end atribute: O atributo “DateTime” (data e hora) que indica o limite superior de data e hora dos eventos exibidos no calendário.Â

Imagem 1.0 – Pop-up de calendar com a aba de de “Data source”; 

Aba View 

• View: Determina as visualizações do calendário:Â

• Standard: Apenas visualização diária, semanal e mensal;Â

• Custom: Visualizações personalizadas configuradas em “Custom top bar views”Â

• O padrão é “Standard”.Â

• Initial selected view: Determina a visualização quando o calendário se torna visível pela primeira vezÂ

• O padrão é por mês;Â

• As opções são Dia, Semana, Mês, Semana útil (disponível como visualização personalizada), Agenda (disponível como visualização personalizada)Â

• Start date atribute: O atributo do tipo “Date/Time” indica a data de início da visualização atual do calendário. Dependendo da visualização, a data de início real da visualização pode ser diferente. Por exemplo, se uma quarta-feira for configurada como data de início em uma visualização semanal, a segunda-feira imediatamente anterior a essa data será a data de início real.Â

• Custom top bar views: As visualizações personalizadas do calendário, que são configuráveis ​​quando a Visualização está definida como personalizada, oferecem as seguintes opções:Â

• Aba de “Appearance”Â

• Item: O tipo de elemento e, portanto, as visualizações de calendário suportadas, a serem adicionadas à barra superior do calendário. O padrão é o botão Mês. Os seguintes tipos são suportados: Botão anterior; botão hoje; botão próximo; texto da data do título; botão mês; botão semana; botão da semana de trabalho; botão de dia e botão de agenda.Â

• Position: Determina o alinhamento dos botões e do texto na barra superior do calendário. O padrão é na esquerda e as opções são esquerda, centro, direita.Â

• Caption: O texto do botão ou título, dependendo do tipo de item selecionadoÂ

• Render Mode: Determina se o botão será renderizado como um botão real ou um link, o padrão é ser botão.Â

• Bututon tooltip: Texto opcional exibido em uma dica de ferramenta ao passar o mouse sobre o botão.Â

• Button style: Define o estilo da marca do botão. O padrão é “default”.Â

• Aba Custom formatsÂ

• Header day format: A formatação do dia nas colunas do cabeçalho da visualização. à‰ configurável quando o “Item” estiver definido como os botões de dia, semana, semana de trabalho, mês ou botão de agenda. Usa os formatos de data Mendix (por exemplo, “EEEE dd/MM”).Â

• Cell date format: A formatação de dia de uma determinada célula em uma visualização mensal. à‰ configurável quando o item estiver definido como botão do mês e o formato de data Mendix (por exemplo, “dd”).Â

• Time gutter format: O tempo de formatação de hora na primeira coluna da visualização. à‰ configurável quando o item estiver definido como dia, semana, semana de trabalho ou agenda. Usa os formatos de data Mendix (por exemplo, “HH:mm”)Â

• Date gutter format: A formatação de tempo na primeira coluna da visualização. Usa os formatos de data Mendix (por exemplo, “EEE MMM d”). à‰ configurável quando o item estiver definido com o botão do tipo agenda.Â

• Aba de Text.Â

• Default all day text: Indica que um evento ocupará um dia inteiro na visualização da agenda. à‰ configurável quando o item estiver definido com o botão do tipo agenda.Â

• Header date: O texto para o cabeçalho da coluna de data na visualização da agenda. à‰ configurável quando o item estiver definido com o botão do tipo agenda.Â

• Header time: O texto para o cabeçalho da coluna de hora na visualização da agenda. à‰ configurável quando o item estiver definido com o botão do tipo agenda.Â

• Header event: O texto para o cabeçalho da coluna de evento na visualização da agenda. à‰ configurável quando o item estiver definido com o botão do tipo agenda.Â

• Editable: Determina se o calendário é editável. No modo padrão, a editabilidade da visualização de dados ao redor é decisiva.Â

• Enable create: Determina se o calendário permite a criação de novos eventos clicando e arrastando sobre os intervalos de data e hora. O padrão é “Yes”.Â

Imagem 2.0 – Aba de View com as opções de: View, Initial selected view, start date attribute, custom top bar views, editable e enableÂ

Aba Events 

• On click: Determina o tipo de ação executada, acionada ao clicar em um evento do calendário ou período do dia, por padrão é “Do nothing”.Â

• On click microflow: O microflow é executado ao clicar em um evento do calendário ou período do dia. à‰ configurável quando a opção “On click” estiver definida como “Call a microflow”.Â

• On click nanoflow: O nanoflow é executado ao clicar em um evento do calendário ou período do dia. à‰ configurável quando a opção “On click” estiver definida como “Call a nanoflow”.Â

• On create: Determina o tipo de ação executada, acionada quando uma data ou período do dia for selecionado e a opção “Enable create” estiver definida como “Yes”, por padrão é “Do nothing”.Â

• Create association: Define uma associação entre o objeto do evento criado e o objeto do calendário, que recebe uma visualização de dados como contexto para o widget.Â

• On create microflow: O microflow é executado quando uma data ou período do dia for selecionado e a opção “Enable creat” estiver definida como “Yes”. à‰ configurável quando a opção “On create” estiver definida como “Call a microflow”.Â

• On create nanoflow: O nanoflow é executado quando uma data ou período do dia for selecionado e a opção “Enable create” estiver definida como “Yes”. à‰ configurável quando a opção “On create” estiver definida como “Call a nanoflow”.Â

• On change: Determina o tipo de ação executada acionada ao mover ou redimensionar um evento. O padrão é “Do nothing”.Â

• On change microflow: O microflow é executado ao mover ou redimensionar um evento. à‰ configurável quando a opção “On change” estiver definida como “Call a microflow”.Â

• On change nanoflow: O nanoflow é executado ao mover ou redimensionar um evento. à‰ configurável quando a opção “On change” estiver definida como “Call a nanoflow”.Â

Imagem 2.1 – Ao clicar em “New” ou “Edit” de custom top bar view abra este sub po-up com as abas de appearance, custom format e textÂ

2.2 – Aba de Custom formats da opção de custom top bar viewsÂ

Imagem 2.3 – Aba de “Text” do custom top bar viewÂ

Aba Size 

• Width unit (padrão: Percentage, porcentagem em inglês) – determina se a unidade do valor da largura é uma porcentagem ou uma quantidade de pixels.Â

• Width (padrão: 100) – o valor da largura do calendário.Â

• Height unit (padrão: Pixels) – determina se a unidade do valor da altura é uma quantidade de pixels, uma porcentagem da largura ou uma porcentagem da altura do pai.Â

• Height (padrão: 580) – o valor da altura do calendário.Â

Imagem 3 – Aba de size 

O widget de calendário disponibiliza diversas opções de configuração para personalizar a forma como os eventos são apresentados e manipulados. Através da definição da fonte de dados, visualizações, ações de eventos e dimensões, é possível criar uma experiência mais organizada e intuitiva para o usuário. Com as orientações apresentadas, é possível configurar o calendário de acordo com as necessidades do projeto de maneira prática e eficiente.Â

Referência: 

Artículos relacionados

• Low-Code vs No-Code: Entenda las diferencias
• Mendix vs Power Apps: ¿qué plataforma low-code elegir?
• Mendix vs OutSystems: Comparación completa 2025
• Guía completa de Mendix: todo sobre la plataforma low-code
• Low-Code: La guía definitiva para la transformación digital

Descubra el poder de Mendix

Eduardo Salerno

Eduardo Salerno es especialista en gestión de carteras y proyectos de TI, con amplia experiencia en implementaciones de Planview y transformación digital. En TWRT, lidera iniciativas que conectan la estrategia empresarial con la ejecución tecnológica.

Ver biografía completa