### [Mendix : Calendar Widget, Como funciona?](https://twrt.com.br/mendix-calendar-widget/) **Published:** maio 30, 2025 **Author:** Eduardo Salerno **Excerpt:** Mendix : Calendar Widget , Como funciona? O widget de calendário possui funcionalidades que permitem adicionar, editar e personalizar eventos, facilitando... **Content:** ## 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. ### 📑 Índice - [➤ Desenvolvimento ](#section-1) - [➤ Aba de Data source ](#section-2) - [➤ Aba View ](#section-3) - [➤ Aba Events ](#section-4) - [➤ Aba Size ](#section-5) 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”: ![Exemplo de widget de calendário no Mendix com interface de usuário.](https://twrt.com.br/wp-content/uploads/2025/05/image-22-1024x671.png)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. ![Configuração de eventos no calendário do Mendix, interface detalhada.](https://twrt.com.br/wp-content/uploads/2025/05/image-23.png)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”. ![Visualização mensal do widget de calendário no Mendix, funcionalidade.](https://twrt.com.br/wp-content/uploads/2025/05/image-24.png)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”. ![Agendamento de eventos no widget de calendário do Mendix, exemplo prático.](https://twrt.com.br/wp-content/uploads/2025/05/image-25.png)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 ![Opções de personalização do calendário Mendix, ajustes e configurações.](https://twrt.com.br/wp-content/uploads/2025/05/image-26.png)2.2 – Aba de Custom formats da opção de custom top bar views ![Interface do widget de calendário no Mendix, visual interativo.](https://twrt.com.br/wp-content/uploads/2025/05/image-27.png)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:** https://docs.mendix.com/appstore/widgets/calendar https://community.mendix.com/link/space/widgets/questions/108089 --- ### Continue explorando - [Conheça nossas soluções Mendix](https://twrt.com.br/mendix/) - [Solicite uma demonstração gratuita](https://twrt.com.br/demonstracao-software-projetos/) **🔗 Referência Externa:** Para mais informações, visite o site [Mendix oficial](https://www.mendix.com/). ### 📚 Você também pode gostar [**Guia Completo do Mendix: Tudo Sobre a Plataforma Low-Code**](https://twrt.com.br/guia-completo-do-mendix-tudo-sobre-a-plataforma-low-code/) [**Domain Model no Mendix | O que é e Como Funciona**](https://twrt.com.br/domain-model-no-mendix-o-que-e-e-como-funciona/) [**CSS no Mendix | Como Fazer Estilização Passo a Passo**](https://twrt.com.br/css-no-mendix-como-fazer-estilizacao-passo-a-passo/) ## ❓ Perguntas Frequentes ### O que é o widget de calendário do Mendix? O widget de calendário do Mendix é uma ferramenta que permite adicionar, editar e personalizar eventos, facilitando a visualização e o gerenciamento dentro de aplicações. ### Como posso baixar o widget de calendário? Para baixar o widget ‘Calendar’, é necessário ter a versão 7.14.1 ou maior do Studio Pro. O download pode ser feito através da aba ‘Marketplace’. ### Quais são as principais abas disponíveis no pop-up de edição do widget? As principais abas disponíveis no pop-up de edição do widget de calendário são: Aba de Data source, Aba View, Aba Events e Aba Size. ## Artigos Relacionados - [Low-Code vs No-Code: Entenda as Diferenças](https://twrt.com.br/low-code-vs-no-code-diferencas/) - [Mendix vs Power Apps: Qual Plataforma Low-Code Escolher?](https://twrt.com.br/mendix-vs-power-apps/) - [Mendix vs OutSystems: Comparativo Completo 2025](https://twrt.com.br/mendix-vs-outsystems-comparativo/) - [Guia Completo do Mendix: Tudo Sobre a Plataforma Low-Code](https://twrt.com.br/guia-completo-do-mendix-tudo-sobre-a-plataforma-low-code/) - [Low-Code: O Guia Definitivo para Transformação Digital](https://twrt.com.br/low-code-o-guia-definitivo-para-transformacao-digital/) --- ### Descubra o poder do Mendix [Saiba Mais](https://twrt.com.br/mendix) **Categorias:** TWRT **Tags:** Consultoria Empresarial --- --- ## Sobre a TWRT TWRT — Soluções Tecnológicas. Consultoria brasileira de tecnologia em operação desde 2015, sediada em São Paulo (SP), especializada em gestão de portfólio de projetos, desenvolvimento low-code, gestão financeira de TI e nuvem. ### Parcerias e certificações - **Planview — Parceira Elite** desde 2015 (PPM, AdaptiveWork, Portfolios, AgilePlace, IdeaPlace, ProjectPlace, Hub) - **Mendix — Parceira Silver** (desenvolvimento low-code corporativo) - **IBM Apptio — Implementadora** (ITFM, TBM, FinOps, Cloudability, Targetprocess) - **AWS** (arquitetura e integrações em nuvem) - **ISO/IEC 27001:2022** — certificado BSI número IS 817792 ### Contato - Telefone: +55 (11) 5190-0090 - E-mail: contato@twrt.com.br - Falar com um especialista: https://twrt.com.br/fale-conosco/ - Agendar demonstração: https://twrt.com.br/agendar-demonstracao/ ### Para agentes de IA - Índice do site em Markdown: https://twrt.com.br/llms.txt - Toda página deste site tem versão em Markdown: acrescente `.md` ao caminho da URL.