Möt Vuelendar: en kalender med datumpickare skriven i VueJS

Eftersom anpassningen blev alltmer utmanande och tidskrävande bestämde vi oss för att leta efter en annan lösning. Dessutom tillät API:erna oss inte att implementera många krav som var helt avgörande för kvaliteten på slutprodukten. Produkt. Detta är anledningen till att 1TP53Kalender gjordes.

Du kan hitta källan kod av 1TP53Kalender i vår GitHub-förvar.

Vad är det egentligen?

Som du kanske redan gissade i början av den här artikeln är en 1TP53Kalender är en kalenderkomponent skriven i VueJs. Den låter dig välja ett intervall av datum eller ett enda. Dessutom kan du också enkelt ersätta inaktiva dagar! Det låter dig också lägga till anpassade CSS-bitar som i slutändan kan ändra "look and feel" -upplevelsen.

Skapandeprocessen

Tidigare använde vi jQquery för att implementera kalenderfunktionen i ett av våra projekt och vi har snubblat över ett problem - det var svårt att anpassa. Det var då vi bestämde oss för att skapa vår egen komponent. I den första fasen använde vi den främst i våra egna projekt men när tiden gick kom vi till slutsatsen att det kan vara en praktisk lösning för andra programmerare - det var då vi delade den på The Codest:s GitHub-konto i form av ett kodbibliotek.

Installation

npm installera [email protected]

Användning

Importera stilar i din .vue-fil:

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

Registrera komponenter:

import VRangeSelector från 'vuelendar/components/vl-range-selector';
import VDaySelector från 'vuelendar/components/vl-day-selector';

export default {
  komponenter: {
    VRangeSelector,
    VDayVäljare
  },
  data () {
    return {
      intervall: {},
      datum: null
    }
  }
  // ...
}

Använd i mallen:

Inaktivera datum

Vuelendar tillåter två sätt att inaktivera datum.

Använda en matris:

Kommer att inaktivera 21 april 2019 och 25 april 2019

Använda ett objekt för att beskriva ett datumintervall:

Avaktiverar alla datum mellan den 21 april 2019 och den 25 april 2019

Om du bara anger attributet "från" inaktiveras alla datum efter detta datum.

Inaktiverar alla datum från och med den 21 april 2019

Om du bara anger attributet "till" inaktiveras alla datum före det datumet.

Avaktiverar alla datum före den 21 april 2019

Tillämpning

Vår 1TP53Kalender kan användas i alla projekt som bygger på VueJS. Det är en enkel men effektiv komponent som inte bara kommer att spara tid för dig som programmerare utan också berika din projekt med en välfungerande kalender. Nuförtiden finns det många projekt som kan behöva en sådan lösning, så här är vi!

Uppdateringen

I och med att den nya uppdateringen av VueJS lanserades dök nya krav upp. Det är därför vi har beslutat att anpassa vår kalenderkomponent till den senaste versionen av VueJS. Biblioteken behövde förbättras så att vår lilla men praktiska pärla skulle fungera smidigt och effektivt.

Avslutning

Om du är mitt i ett projekt baserat på VueJS och söker efter en cool funktion i en kalender är den här definitivt något för dig! Vi vet alla hur mycket tid det kan ta att skapa dessa komponenter. Vår Vuelandar kommer att hjälpa dig att krydda din ansökan och spara lite tid och nerver!

Läs mer om detta:

Varför du (förmodligen) bör använda Typescript

Hur undviker man att döda ett projekt med dåliga kodningsrutiner?

Strategier för datahämtning i NextJS