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. 

Development 

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: 

Related Articles

• Low-Code vs. No-Code: Understanding the Differences
• Mendix vs. Power Apps: Which Low-Code Platform Should You Choose?
• Mendix vs. OutSystems: A Comprehensive Comparison for 2025
• The Complete Guide to Mendix: Everything You Need to Know About the Low-Code Platform
• Low-Code: The Definitive Guide to Digital Transformation

Discover the power of Mendix

Eduardo Salerno

Eduardo Salerno is a specialist in IT portfolio and project management, with extensive experience in Planview implementations and digital transformation. At TWRT, he leads initiatives that bridge the gap between business strategy and technological execution.

See Full Bio