window.pipedriveLeadboosterConfig = { base: 'leadbooster-chat.pipedrive.com', companyId: 11580370, playbookUuid: '22236db1-6d50-40c4-b48f-8b11262155be', versjon: 2, } ;(function () { var w = vindu if (w.LeadBooster) { console.warn('LeadBooster finnes allerede') } else { w.LeadBooster = { q: [], on: function (n, h) { this.q.push({ t: 'o', n: n, h: h }) }, trigger: function (n) { this.q.push({ t: 't', n: n }) }, } } })() Møt Vuelendar: en datovælgerkalender skrevet i VueJS - The Codest
The Codest
  • Om oss
  • Tjenester
    • Programvareutvikling
      • Frontend-utvikling
      • Backend-utvikling
    • Staff Augmentation
      • Frontend-utviklere
      • Backend-utviklere
      • Dataingeniører
      • Ingeniører i skyen
      • QA-ingeniører
      • Annet
    • Det rådgivende
      • Revisjon og rådgivning
  • Industrier
    • Fintech og bankvirksomhet
    • E-commerce
    • Adtech
    • Helseteknologi
    • Produksjon
    • Logistikk
    • Bilindustrien
    • IOT
  • Verdi for
    • ADMINISTRERENDE DIREKTØR
    • CTO
    • Leveransesjef
  • Vårt team
  • Casestudier
  • Vet hvordan
    • Blogg
    • Møter
    • Webinarer
    • Ressurser
Karriere Ta kontakt med oss
  • Om oss
  • Tjenester
    • Programvareutvikling
      • Frontend-utvikling
      • Backend-utvikling
    • Staff Augmentation
      • Frontend-utviklere
      • Backend-utviklere
      • Dataingeniører
      • Ingeniører i skyen
      • QA-ingeniører
      • Annet
    • Det rådgivende
      • Revisjon og rådgivning
  • Verdi for
    • ADMINISTRERENDE DIREKTØR
    • CTO
    • Leveransesjef
  • Vårt team
  • Casestudier
  • Vet hvordan
    • Blogg
    • Møter
    • Webinarer
    • Ressurser
Karriere Ta kontakt med oss
Pil tilbake GÅ TILBAKE
2021-08-05
Programvareutvikling

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

The Codest

Lukasz Usarz

Senior Software Engineer

Det meste av tiden har vi brukt Vue-omslaget for pikaday i prosjektene våre for å lage kalenderfunksjonen.

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:

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

Relaterte artikler

Programvareutvikling

Bygg fremtidssikre webapper: Innsikt fra The Codests ekspertteam

Oppdag hvordan The Codest utmerker seg når det gjelder å skape skalerbare, interaktive webapplikasjoner med banebrytende teknologi som gir sømløse brukeropplevelser på tvers av alle plattformer. Finn ut hvordan ekspertisen vår driver digital transformasjon og...

THECODEST
Programvareutvikling

Topp 10 Latvia-baserte programvareutviklingsselskaper

I vår nyeste artikkel kan du lese mer om Latvias beste programvareutviklingsselskaper og deres innovative løsninger. Oppdag hvordan disse teknologilederne kan bidra til å løfte virksomheten din.

thecodest
Løsninger for bedrifter og oppskalering

Grunnleggende om Java-programvareutvikling: En guide til vellykket outsourcing

Utforsk denne viktige veiledningen om vellykket outsourcing av Java-programvareutvikling for å øke effektiviteten, få tilgang til ekspertise og drive frem prosjektsuksess med The Codest.

thecodest
Programvareutvikling

Den ultimate guiden til outsourcing i Polen

Den kraftige økningen i outsourcing i Polen er drevet av økonomiske, utdanningsmessige og teknologiske fremskritt, noe som fremmer IT-vekst og et forretningsvennlig klima.

TheCodest
Løsninger for bedrifter og oppskalering

Den komplette guiden til verktøy og teknikker for IT-revisjon

IT-revisjoner sørger for sikre, effektive og kompatible systemer. Les hele artikkelen for å lære mer om viktigheten av dem.

The Codest
Jakub Jakubowicz CTO og medgrunnlegger

Abonner på vår kunnskapsbase og hold deg oppdatert på ekspertisen fra IT-sektoren.

    Om oss

    The Codest - Internasjonalt programvareutviklingsselskap med teknologisentre i Polen.

    Storbritannia - Hovedkvarter

    • Kontor 303B, 182-184 High Street North E6 2JA
      London, England

    Polen - Lokale teknologisentre

    • Fabryczna Office Park, Aleja
      Pokoju 18, 31-564 Kraków
    • Brain Embassy, Konstruktorska
      11, 02-673 Warszawa, Polen

      The Codest

    • Hjem
    • Om oss
    • Tjenester
    • Casestudier
    • Vet hvordan
    • Karriere
    • Ordbok

      Tjenester

    • Det rådgivende
    • Programvareutvikling
    • Backend-utvikling
    • Frontend-utvikling
    • Staff Augmentation
    • Backend-utviklere
    • Ingeniører i skyen
    • Dataingeniører
    • Annet
    • QA-ingeniører

      Ressurser

    • Fakta og myter om samarbeid med en ekstern programvareutviklingspartner
    • Fra USA til Europa: Hvorfor velger amerikanske oppstartsbedrifter å flytte til Europa?
    • Sammenligning av Tech Offshore Development Hubs: Tech Offshore Europa (Polen), ASEAN (Filippinene), Eurasia (Tyrkia)
    • Hva er de største utfordringene for CTO-er og CIO-er?
    • The Codest
    • The Codest
    • The Codest
    • Retningslinjer for personver
    • Vilkår for bruk av nettstedet

    Opphavsrett © 2025 av The Codest. Alle rettigheter forbeholdt.

    nb_NONorwegian
    en_USEnglish de_DEGerman sv_SESwedish da_DKDanish fiFinnish fr_FRFrench pl_PLPolish arArabic it_ITItalian jaJapanese ko_KRKorean es_ESSpanish nl_NLDutch etEstonian elGreek nb_NONorwegian