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
,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.
- But
uton 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:
