Poznaj Vuelendar: kalendarz z datepickerem napisany w VueJS

Ponieważ dostosowywanie stawało się coraz trudniejsze i czasochłonne, zdecydowaliśmy się poszukać innego rozwiązania. Co więcej, interfejsy API nie pozwalały nam zaimplementować wielu wymagań, które były dość kluczowe dla jakości końcowego produktu. produkt. Dlatego właśnie Vuelendar został wykonany.

Możesz znaleźć źródło kod z Vuelendar w naszym Repozytorium GitHub.

Co to dokładnie jest?

Jak można było się domyślić na początku tego artykułu, Vuelendar jest komponentem kalendarza napisanym w języku VueJs. Pozwala on wybrać zakres dat lub pojedynczą datę. Co więcej, można również łatwo zastąpić nieaktywne dni! Pozwala również na dodawanie niestandardowych fragmentów CSS, które mogą ostatecznie zmienić "wygląd i styl".

Proces tworzenia

Wcześniej używaliśmy jQquery do implementacji funkcji kalendarza w jednym z naszych projektów i natknęliśmy się na problem - trudno było go dostosować. Wtedy podjęliśmy decyzję o stworzeniu własnego komponentu. W pierwszej fazie używaliśmy go głównie we własnych projektach, ale z biegiem czasu doszliśmy do wniosku, że może to być przydatne rozwiązanie dla innych programistów - właśnie wtedy udostępniliśmy go na koncie GitHub The Codest w formie biblioteki kodu.

Instalacja

npm install [email protected]

Użycie

Zaimportuj style do pliku .vue:

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

Składniki rejestru:

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

export default {
  components: {
    VRangeSelector,
    VDaySelector
  },
  data () {
    return {
      range: {},
      date: null
    }
  }
  // ...
}

Użyj w szablonie:

Wyłączanie dat

Vuelendar umożliwia dwa sposoby wyłączania dat.

Korzystanie z tablicy:

Wyłączy 21 kwietnia 2019 r. i 25 kwietnia 2019 r.

Użycie obiektu do opisania zakresu dat:

Wyłączy wszystkie daty od 21 kwietnia 2019 r. i 25 kwietnia 2019 r.

Określenie tylko atrybutu "od" spowoduje wyłączenie wszystkich dat po tej dacie.

Wyłączy wszystkie daty od 21 kwietnia 2019 r.

Określenie tylko atrybutu "do" spowoduje wyłączenie wszystkich dat przed tą datą.

Spowoduje wyłączenie wszystkich dat przed 21 kwietnia 2019 r.

Zastosowanie

Nasz Vuelendar może być używany we wszystkich projektach opartych na VueJS. Jest to prosty, ale wydajny komponent, który nie tylko zaoszczędzi czas programisty, ale także wzbogaci jego pracę. projekt z płynnie działającym kalendarzem. Obecnie istnieje wiele projektów, które mogą potrzebować takiego rozwiązania, więc oto jesteśmy!

Aktualizacja

Wraz z nową aktualizacją VueJS pojawiły się nowe wymagania. Dlatego zdecydowaliśmy się dostosować nasz komponent kalendarza do najnowszej wersji VueJS. Biblioteki musiały zostać ulepszone, aby nasz mały, ale poręczny klejnot działał płynnie i skutecznie.

Podsumowanie

Jeśli jesteś w trakcie projektu opartego na VueJS i szukasz fajnej funkcji kalendarza, ten jest zdecydowanie dla Ciebie! Wszyscy wiemy, ile czasu może zająć tworzenie takich komponentów. Nasz Vuelandar pomoże Ci urozmaicić Twoją aplikację i zaoszczędzić trochę czasu i nerwów!

Czytaj więcej:

Dlaczego (prawdopodobnie) powinieneś używać Typescript

Jak nie zabić projektu złymi praktykami kodowania?

Strategie pobierania danych w NextJS