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:

https://docs.mendix.com/appstore/widgets/calendar

https://community.mendix.com/link/space/widgets/questions/108089