Lernen Sie Vuelendar kennen: ein in VueJS geschriebener Datepicker-Kalender

Da die Anpassung immer schwieriger und zeitaufwändiger wurde, haben wir beschlossen, nach einer anderen Lösung zu suchen. Außerdem konnten wir mit den APIs viele Anforderungen nicht umsetzen, die für die Qualität des Endprodukts sehr wichtig waren. Produkt. Aus diesem Grund ist die 1TP53Kalender gemacht wurde.

Sie können die Quelle finden Code der 1TP53Kalender in unserem GitHub-Repository.

Was ist das genau?

Wie Sie vielleicht schon zu Beginn dieses Artikels vermutet haben, ist ein 1TP53Kalender ist eine in VueJs geschriebene Kalenderkomponente. Es erlaubt Ihnen, eine Reihe von Daten oder ein einzelnes Datum zu wählen. Was mehr ist, können Sie auch leicht ersetzen inaktive Tage! Außerdem ermöglicht es Ihnen, benutzerdefinierte CSS-Bits hinzuzufügen, die letztlich das "Look and Feel" Erfahrung ändern können.

Der Erstellungsprozess

Früher haben wir jQquery verwendet, um die Kalenderfunktion in einem unserer Projekte zu implementieren, und wir sind über ein Problem gestolpert - es war schwer anzupassen. Daraufhin haben wir beschlossen, unsere eigene Komponente zu entwickeln. In der ersten Phase haben wir sie hauptsächlich in unseren eigenen Projekten verwendet, aber mit der Zeit sind wir zu dem Schluss gekommen, dass sie eine praktische Lösung für andere Programmierer sein könnte - daher haben wir sie auf dem GitHub-Konto von The Codest in Form einer Code-Bibliothek veröffentlicht.

Einrichtung

npm installieren [email protected]

Verwendung

Importieren Sie Stile in Ihre .vue-Datei:

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

Komponenten registrieren:

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

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

Verwendung in der Vorlage:

Deaktivieren von Daten

Vuelendar bietet zwei Möglichkeiten zur Deaktivierung von Daten.

Verwendung eines Arrays:

Deaktiviert den 21. April 2019 und den 25. April 2019

Verwendung eines Objekts zur Beschreibung einer Reihe von Daten:

Deaktiviert alle Termine zwischen dem 21. April 2019 und dem 25. April 2019

Wenn Sie nur das Attribut "von" angeben, werden alle Daten nach diesem Datum deaktiviert.

Deaktiviert alle Termine ab dem 21. April 2019

Wenn Sie nur das Attribut "bis" angeben, werden alle Daten vor diesem Datum deaktiviert.

Deaktiviert alle Termine vor dem 21. April 2019

Anmeldung

Unser 1TP53Kalender kann in allen Projekten verwendet werden, die auf VueJS basieren. Es ist eine einfache, aber effiziente Komponente, die nicht nur Ihre Zeit als Programmierer sparen wird, sondern auch Ihre Projekt mit einem reibungslos funktionierenden Kalender. Heutzutage gibt es viele Projekte, die eine solche Lösung benötigen, und hier sind wir!

Die Aktualisierung

Mit dem Erscheinen des neuen Updates von VueJS sind auch neue Anforderungen entstanden. Deshalb haben wir beschlossen, unsere Kalenderkomponente an die neueste Version von VueJS anzupassen. Die Bibliotheken mussten verbessert werden, damit unser kleiner, aber handlicher Edelstein reibungslos und effektiv läuft.

Einpacken

Wenn Sie mitten in einem Projekt auf der Basis von VueJS sind und nach einer coolen Funktion eines Kalenders suchen, ist dies definitiv etwas für Sie! Wir alle wissen, wie viel Zeit die Erstellung dieser Komponenten in Anspruch nehmen kann. Unser Vuelandar wird Ihnen helfen, Ihre Bewerbung aufzupeppen und Zeit und Nerven zu sparen!

Lesen Sie mehr:

Warum Sie (wahrscheinlich) Typescript verwenden sollten

Wie kann man ein Projekt nicht durch schlechte Programmierpraktiken zerstören?

Strategien zum Abrufen von Daten in NextJS