Conheça o Vuelendar: um calendário Datepicker escrito em VueJS

Como a personalização estava a tornar-se mais difícil e morosa, decidimos procurar outra solução. Para além disso, as APIs não permitiam nós para implementar muitos requisitos que eram bastante cruciais para a qualidade do produto final produto. É por isso que o Vuelendário foi feita.

Pode encontrar a fonte código do Vuelendário no nosso Repositório GitHub.

O que é exatamente?

Como já deve ter adivinhado no início deste artigo, um Vuelendário é um componente de calendário escrito em VueJs. Permite-lhe escolher um intervalo de datas ou uma única. Além disso, também é possível substituir facilmente dias inactivos! Além disso, permite-lhe adicionar bits CSS personalizados que podem alterar a experiência de 'look and feel'.

O processo de criação

Anteriormente, estávamos a utilizar jQquery para implementar a funcionalidade de calendário num dos nossos projectos e deparámo-nos com um problema - era difícil de personalizar. Foi então que tomámos a decisão de criar o nosso próprio componente. Na primeira fase, usámo-lo principalmente nos nossos próprios projectos mas, com o passar do tempo, chegámos à conclusão de que poderia ser uma solução útil para outros programadores - foi então que o partilhámos na conta GitHub do The Codest sob a forma de uma biblioteca de código.

Instalação

npm install [email protected]

Utilização

Importar estilos no seu ficheiro .vue:

<style src="vuelendar/scss/vuelendar.scss" lang="scss">

Registar componentes:

import VRangeSelector from 'vuelendar/components/vl-range-seletor';;
import VDaySelector from 'vuelendar/components/vl-day-seletor';

export default {
  components: {
    VRangeSelector,
    VDaySelector
  },
  data () {
    return {
      range: {},
      data: null
    }
  }
  // ...
}

Utilizar no modelo:

Desativação de datas

O Vuelendar permite duas formas de desativar datas.

Utilizar uma matriz:

Desactivará 21 de abril de 2019 e 25 de abril de 2019

Utilizar um objeto para descrever um intervalo de datas:

Desactivará todas as datas de 21 de abril de 2019 e 25 de abril de 2019

Especificar apenas o atributo "from" desactivará todas as datas posteriores a essa data.

Desactivará todas as datas a partir de 21 de abril de 2019

Se especificar apenas o atributo "até", desactivará todas as datas anteriores a essa data.

Desactivará todas as datas anteriores a 21 de abril de 2019

Aplicação

O nosso Vuelendário pode ser utilizado em todos os projectos baseados no VueJS. É um componente simples mas eficiente que não só poupará o seu tempo como programador mas também enriquecerá o seu projeto com um calendário que funcione corretamente. Hoje em dia, há muitos projectos que podem precisar desta solução, por isso aqui estamos nós!

A atualização

Quando a nova atualização do VueJS foi lançada, surgiram novos requisitos. Foi por isso que decidimos ajustar o nosso componente de calendário à versão mais recente do VueJS. As bibliotecas precisavam de ser melhoradas para que a nossa pequena mas útil gema funcionasse sem problemas e de forma eficaz.

Conclusão

Se está a meio de um projeto baseado no VueJS e procura uma funcionalidade interessante para um calendário, este é definitivamente para si! Todos nós sabemos quanto tempo pode levar para criar esses componentes. Nosso Vuelandar ajudá-lo-á a apimentar a sua candidatura e a poupar tempo e nervos!

Ler mais:

Porque é que deve (provavelmente) utilizar Typescript

Como não matar um projeto com más práticas de codificação?

Estratégias de obtenção de dados no NextJS