Seznamte se s Vuelendar: Kalendář s výběrem data napsaný v VueJS

Protože přizpůsobení bylo stále náročnější a časově náročnější, rozhodli jsme se hledat jiné řešení. Navíc rozhraní API neumožňovalo nás implementovat spoustu požadavků, které byly zcela zásadní pro kvalitu výsledného produktu. produkt. To je důvod, proč Vuelendar byla provedena.

Zdroj najdete kód o Vuelendar v našem Úložiště GitHub.

Co přesně to je?

Jak jste již možná uhodli na začátku tohoto článku, a Vuelendar je komponenta kalendáře napsaná v jazyce VueJs. Umožňuje vybrat rozsah dat nebo jedno datum. Navíc můžete snadno nahradit i neaktivní dny! Také , umožňuje přidat vlastní kousky CSS, které mohou v konečném důsledku změnit dojem "vzhledu".

Proces vytváření

Dříve jsme používali jQquery k implementaci funkce kalendáře v jednom z našich projektů a narazili jsme na problém - bylo těžké jej přizpůsobit. Tehdy jsme se rozhodli vytvořit vlastní komponentu. V první fázi jsme ji používali hlavně ve vlastních projektech, ale postupem času jsme došli k závěru, že by mohla být užitečným řešením i pro ostatní programátory - tehdy jsme ji sdíleli na účtu The Codest na GitHubu ve formě knihovny kódu.

Instalace

npm install [email protected]

Použití

Import stylů do souboru .vue:

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

Součásti registru:

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

exportovat výchozí {
  components: {
    VRangeSelector,
    VDaySelector
  },
  data () {
    return {
      range: {},
      date: null
    }
  }
  // ...
}

Použití v šabloně:

Zakázání dat

Vuelendar umožňuje dva způsoby zakázání dat.

Použití pole:

Zakáže 21. dubna 2019 a 25. dubna 2019.

Použití objektu k popisu rozsahu dat:

Zakáže všechna data od 21. dubna 2019 a 25. dubna 2019.

Zadáním pouze atributu 'od' se zakážou všechna data po tomto datu.

Zakáže všechna data od 21. dubna 2019

Zadáním pouze atributu 'do' se zakážou všechna data před tímto datem.

Zakáže všechna data před 21. dubnem 2019

Aplikace

Naše Vuelendar lze použít ve všech projektech založených na VueJS. Jedná se o jednoduchou, ale účinnou komponentu, která nejenže ušetří váš čas jako programátora, ale také obohatí vaše programování. projekt s hladce fungujícím kalendářem. V dnešní době existuje mnoho projektů, které by toto řešení mohly potřebovat, takže jsme tady!

Aktualizace

Se spuštěním nové aktualizace VueJS se objevily nové požadavky. Proto jsme se rozhodli přizpůsobit naši komponentu kalendáře nejnovější verzi VueJS. Bylo třeba vylepšit knihovny, aby náš malý, ale šikovný klenot fungoval hladce a efektivně.

Závěrečné shrnutí

Pokud právě pracujete na projektu založeném na VueJS a hledáte nějakou zajímavou funkci kalendáře, je tento projekt určitě pro vás! Všichni víme, kolik času může tvorba těchto komponent zabrat. Naše stránky Vuelandar vám pomůže vylepšit vaši žádost a ušetřit čas a nervy!

Přečtěte si více:

Proč byste (pravděpodobně) měli používat Typescript

Jak nezničit projekt špatnými kódovacími postupy?

Strategie načítání dat v NextJS