Mød Vuelendar: en datepicker-kalender skrevet i VueJS

Da tilpasningen blev mere udfordrende og tidskrævende, besluttede vi at se os om efter en anden løsning. Desuden gav API'erne os ikke mulighed for at implementere mange krav, der var helt afgørende for kvaliteten af slutproduktet. produkt. Dette er grunden til, at 1TP53Kalender blev lavet.

Du kan finde kilden Kode af 1TP53Kalender i vores GitHub-arkiv.

Hvad er det helt præcist?

Som du måske allerede har gættet i begyndelsen af denne artikel, er en 1TP53Kalender er en kalenderkomponent skrevet i VueJs. Den giver dig mulighed for at vælge en række datoer eller en enkelt. Desuden kan du også nemt erstatte inaktive dage! Den giver dig også mulighed for at tilføje tilpassede CSS-bits, som i sidste ende kan ændre "look and feel"-oplevelsen.

Skabelsesprocessen

Tidligere brugte vi jQquery til at implementere kalenderfunktionen i et af vores projekter, og vi stødte på et problem - det var svært at tilpasse. Derfor besluttede vi os for at lave vores egen komponent. I den første fase brugte vi den primært i vores egne projekter, men som tiden gik, kom vi til den konklusion, at det kunne være en praktisk løsning for andre programmører - det var her, vi delte den på The Codest's GitHub-konto i form af et kodebibliotek.

Installation

npm installer [email protected]

Anvendelse

Importer stilarter i din .vue-fil:

.

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 {
      interval: {},
      dato: null
    }
  }
  // ...
}

Brug i skabelon:

Deaktivering af datoer

Vuelendar giver mulighed for at deaktivere datoer på to måder.

Brug af en matrix:

Vil deaktivere 21. april 2019 og 25. april 2019

Brug et objekt til at beskrive en række datoer:

Vil deaktivere alle datoer fra 21. april 2019 og 25. april 2019

Hvis du kun angiver 'fra'-attributten, deaktiveres alle datoer efter denne dato.

Vil deaktivere alle datoer fra 21. april 2019

Hvis man kun angiver 'til'-attributten, deaktiveres alle datoer før denne dato.

Vil deaktivere alle datoer før 21. april 2019

Anvendelse

Vores 1TP53Kalender kan bruges i alle projekter, der er baseret på VueJS. Det er en enkel, men effektiv komponent, som ikke kun vil spare dig tid som programmør, men også berige din projekt med en velfungerende kalender. I dag er der mange projekter, der kan have brug for denne løsning, så her er vi!

Opdateringen

Da den nye opdatering af VueJS blev lanceret, dukkede der nye krav op. Derfor har vi besluttet at tilpasse vores kalenderkomponent til den nyeste version af VueJS. Bibliotekerne skulle forbedres, så vores lille, men praktiske perle kunne køre problemfrit og effektivt.

Afrunding

Hvis du er i gang med et projekt baseret på VueJS og leder efter en cool kalenderfunktion, så er den her helt sikkert noget for dig! Vi ved alle, hvor meget tid det kan tage at skabe disse komponenter. Vores Vuelandar vil hjælpe dig med at pifte din ansøgning op og spare tid og nerver!

Læs mere om det:

Hvorfor du (sandsynligvis) bør bruge Typescript

Hvordan dræber man ikke et projekt med dårlig kodningspraksis?

Strategier for at hente data i NextJS