Møt Vuelendar: en datovælgerkalender skrevet i VueJS

Etter hvert som tilpasningen ble mer utfordrende og tidkrevende, bestemte vi oss for å se oss om etter en annen løsning. API-ene tillot oss dessuten ikke å implementere mange krav som var helt avgjørende for kvaliteten på sluttproduktet. produkt. Dette er grunnen til at Vuelkalender ble laget.

Du kan finne kilden kode av Vuelkalender i vår GitHub-depot.

Hva er det egentlig?

Som du kanskje allerede har gjettet i begynnelsen av denne artikkelen, er en Vuelkalender er en kalenderkomponent skrevet i VueJs. Den lar deg velge en rekke datoer eller en enkelt. Dessuten kan du også enkelt erstatte inaktive dager! Det lar deg også legge til tilpassede CSS-biter som til slutt kan endre "look and feel" -opplevelsen.

Opprettelsesprosessen

Tidligere brukte vi jQquery til å implementere kalenderfunksjonen i et av prosjektene våre, men vi snublet over et problem - det var vanskelig å tilpasse. Det var da vi bestemte oss for å lage vår egen komponent. I den første fasen brukte vi den hovedsakelig i våre egne prosjekter, men etter hvert som tiden gikk, kom vi til den konklusjonen at det kunne være en praktisk løsning for andre programmerere - det var da vi delte den på The Codests GitHub-konto i form av et kodebibliotek.

Installasjon

npm installer [email protected]

Bruk

Importer stiler i .vue-filen din:

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

Registrer komponenter:

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

export default {
  komponenter: {
    VRangeSelector,
    VDaySelector
  },
  data () {
    return {
      område: {},
      dato: null
    }
  }
  // ...
}

Bruk i mal:

Deaktivering av datoer

Vuelendar tillater to måter å deaktivere datoer på.

Ved hjelp av en matrise:

Deaktiverer 21. april 2019 og 25. april 2019

Bruke et objekt til å beskrive et datointervall:

Deaktiverer alle datoer fra 21. april 2019 og 25. april 2019

Hvis du bare angir "fra"-attributtet, deaktiveres alle datoer etter denne datoen.

Deaktiverer alle datoer fra 21. april 2019

Hvis du bare angir "til"-attributtet, deaktiveres alle datoer før denne datoen.

Deaktiverer alle datoer før 21. april 2019

Søknad

Vår Vuelkalender kan brukes i alle prosjekter basert på VueJS. Det er en enkel, men effektiv komponent som ikke bare sparer tid for deg som programmerer, men som også vil berike prosjekt med en velfungerende kalender. I dag er det mange prosjekter som kan ha behov for en slik løsning, så her er vi!

Oppdateringen

Da den nye oppdateringen av VueJS ble lansert, dukket de nye kravene opp. Derfor bestemte vi oss for å tilpasse kalenderkomponenten vår til den nyeste versjonen av VueJS. Bibliotekene måtte forbedres slik at vår lille, men praktiske perle kunne kjøre problemfritt og effektivt.

Avslutning

Hvis du er midt i et prosjekt basert på VueJS og leter etter en kul funksjon i en kalender, er denne definitivt noe for deg! Vi vet alle hvor mye tid det kan ta å lage disse komponentene. Vår Vuelandar vil hjelpe deg med å krydre søknaden din og spare litt tid og nerver!

Les mer om dette:

Derfor bør du (sannsynligvis) bruke Typescript

Hvordan unngår man å drepe et prosjekt med dårlig kodingspraksis?

Strategier for datahenting i NextJS