Maak kennis met Vuelendar: een Datepicker Kalender geschreven in VueJS

Omdat het aanpassen steeds uitdagender en tijdrovender werd, besloten we op zoek te gaan naar een andere oplossing. Bovendien stelden de API's ons niet in staat om veel vereisten te implementeren die cruciaal waren voor de kwaliteit van het eindproduct. product. Dit is de reden waarom de 1TP57Kalender werd gemaakt.

U kunt de bron vinden code van de 1TP57Kalender in onze GitHub opslagplaats.

Wat is het precies?

Zoals je aan het begin van dit artikel misschien al hebt geraden, is een 1TP57Kalender is een kalendercomponent geschreven in VueJs. Je kunt er een reeks datums of een enkele datum mee kiezen. Bovendien kun je ook eenvoudig inactieve dagen vervangen! Ook kun je er aangepaste CSS-bits aan toevoegen die uiteindelijk de 'look and feel'-ervaring kunnen veranderen.

Het creatieproces

Voorheen gebruikten we jQquery om de kalenderfunctie in een van onze projecten te implementeren en we stuitten op een probleem - het was moeilijk aan te passen. Toen hebben we besloten om ons eigen component te maken. In de eerste fase gebruikten we het vooral in onze eigen projecten, maar na verloop van tijd kwamen we tot de conclusie dat het een handige oplossing zou kunnen zijn voor andere programmeurs - dit is wanneer we het deelden op The Codest's GitHub account in de vorm van een code bibliotheek.

Installatie

npm installeren [email protected]

Gebruik

Importeer stijlen in je .vue-bestand:

Componenten registreren:

importeer VRangeSelector uit 'vuelendar/components/vl-range-selector';
importeer VDaySelector uit 'vuelendar/components/vl-day-selector';

export standaard {
  componenten: {
    VRangeSelector,
    VDaySelector
  },
  data () {
    return {
      bereik: {},
      datum: null
    }
  }
  // ...
}

Gebruik in sjabloon:

Data uitschakelen

Vuelendar biedt twee manieren om datums uit te schakelen.

Een matrix gebruiken:

Schakelt 21 april 2019 en 25 april 2019 uit

Een object gebruiken om een reeks datums te beschrijven:

Hiermee worden alle datums van 21 april 2019 en 25 april 2019 uitgeschakeld

Als alleen het kenmerk 'vanaf' wordt opgegeven, worden alle datums voorbij die datum uitgeschakeld.

Schakelt alle datums uit vanaf 21 april 2019

Door alleen het kenmerk 'tot' op te geven, worden alle datums vóór die datum uitgeschakeld.

Schakelt alle data voor 21 april 2019 uit

Toepassing

Onze 1TP57Kalender kan gebruikt worden in alle projecten die gebaseerd zijn op VueJS. Het is een eenvoudig maar efficiënt component dat niet alleen je tijd als programmeur zal besparen, maar ook een verrijking zal zijn voor je project met een soepel werkende kalender. Tegenwoordig zijn er veel projecten die deze oplossing nodig hebben, dus hier zijn we!

De update

Toen de nieuwe update van VueJS werd gelanceerd, verschenen de nieuwe eisen. Daarom hebben we besloten om onze kalender component aan te passen aan de nieuwste versie van VueJS. De bibliotheken moesten worden verbeterd, zodat ons kleine, maar handige juweeltje soepel en effectief zou werken.

Inpakken

Als je midden in een project zit dat gebaseerd is op VueJS en op zoek bent naar een coole functie van een kalender, dan is deze zeker iets voor jou! We weten allemaal hoeveel tijd het maken van deze componenten kan kosten. Onze Vuelandar zullen je helpen je sollicitatie op te fleuren en tijd en zenuwen te besparen!

Lees meer:

Waarom je (waarschijnlijk) Typescript zou moeten gebruiken

Hoe help je een project niet om zeep met slechte codeerpraktijken?

Strategieën voor het ophalen van gegevens in NextJS