Ecco Vuelendar: un calendario con datepicker scritto in VueJS

Poiché la personalizzazione stava diventando sempre più impegnativa e richiedeva molto tempo, abbiamo deciso di cercare un'altra soluzione. Inoltre, le API non ci permettevano di implementare molti requisiti che erano fondamentali per la qualità del prodotto finale. prodotto. Questo è il motivo per cui il Vuelendario è stato fatto.

È possibile trovare la fonte codice del Vuelendario nel nostro Repository GitHub.

Che cos'è esattamente?

Come si potrebbe già intuire all'inizio di questo articolo, una Vuelendario è un componente calendario scritto in VueJs. Consente di scegliere un intervallo di date o una singola data. Inoltre, è possibile sostituire facilmente i giorni inattivi! Inoltre, consente di aggiungere elementi CSS personalizzati che possono cambiare l'aspetto e l'esperienza.

Il processo di creazione

In precedenza, utilizzavamo jQquery per implementare la funzione calendario in uno dei nostri progetti e ci siamo imbattuti in un problema: era difficile da personalizzare. Abbiamo quindi deciso di creare un nostro componente. Nella prima fase, l'abbiamo utilizzato principalmente nei nostri progetti, ma con il passare del tempo siamo giunti alla conclusione che poteva essere una soluzione utile anche per altri programmatori.

Installazione

npm installare [email protected]

Utilizzo

Importare gli stili nel file .vue:

Componenti del registro:

importare VRangeSelector da 'vuelendar/components/vl-range-selector';
import VDaySelector da 'vuelendar/components/vl-day-selector';

Esportazione predefinita {
  componenti: {
    VRangeSelector,
    VDaySelector
  },
  data () {
    restituire {
      range: {},
      data: null
    }
  }
  // ...
}

Utilizzare nel modello:

Disabilitazione delle date

Vuelendar consente due modi per disabilitare le date.

Utilizzo di una matrice:

Disabiliterà il 21 aprile 2019 e il 25 aprile 2019

Utilizzare un oggetto per descrivere un intervallo di date:

Disattiva tutte le date dal 21 aprile 2019 al 25 aprile 2019.

Specificando solo l'attributo "da" si disabiliteranno tutte le date successive a quella data.

Disabilita tutte le date a partire dal 21 aprile 2019

Specificando solo l'attributo "a" si disabiliteranno tutte le date precedenti a quella data.

Disabilita tutte le date prima del 21 aprile 2019

Applicazione

Il nostro Vuelendario può essere utilizzato in tutti i progetti basati su VueJS. Si tratta di un componente semplice ma efficiente che non solo vi farà risparmiare tempo come programmatore, ma arricchirà anche la vostra progetto con un calendario che funziona senza problemi. Al giorno d'oggi ci sono molti progetti che potrebbero aver bisogno di questa soluzione, quindi eccoci qui!

L'aggiornamento

Con il lancio del nuovo aggiornamento di VueJS, sono comparsi nuovi requisiti. Per questo motivo abbiamo deciso di adeguare il nostro componente calendario alla nuova versione di VueJS. Le librerie dovevano essere migliorate in modo che il nostro piccolo ma pratico gioiello funzionasse in modo fluido ed efficace.

Conclusione

Se siete nel bel mezzo di un progetto basato su VueJS e state cercando una caratteristica interessante di un calendario, questa è sicuramente per voi! Sappiamo tutti quanto tempo può richiedere la creazione di questi componenti. Il nostro Vuelandar vi aiuterà a rendere più vivace la vostra candidatura e a risparmiare tempo e nervosismo!

Per saperne di più:

Perché si dovrebbe (probabilmente) usare Typescript

Come non uccidere un progetto con cattive pratiche di codifica?

Strategie di recupero dei dati in NextJS