Wie ich Vanilla Calendar Pro erstellt habe – einen leichten und flexiblen JavaScript-Kalender mit TypeScript

Hallo Entwickler-Community!

Ehrlich gesagt habe ich lange gezögert, bevor ich diesen Artikel geschrieben habe. Ich verstehe, dass es Kommentare geben könnte, die sagen: „Nur ein weiterer unnötiger Datepicker.“ Aber heute, da Vanilla Calendar Pro über 480 Sterne auf GitHub verdient und 17.000 Downloads pro Monat erhält , ich habe beschlossen, meine Geschichte zu teilen.

Lassen Sie mich vorab klarstellen: Ich behaupte nicht, der beste Kalender- oder Datumsauswahlentwickler zu sein. In diesem Artikel geht es um meine ersten Erfahrungen mit Open Source, wie ich ein Projekt von Grund auf erstellt habe und wie es für andere Entwickler nützlich wurde.

---

Wie alles begann

Im Sommer 2022 musste ich einen Veranstaltungskalender für ein Projekt umsetzen. Die Anforderungen waren einfach:

• Es musste nahtlos in einem modalen Fenster funktionieren.
• Es musste ein individuelles Styling unterstützt werden, das zum Design passt.
• Durch Klicken auf ein Datum wird der Benutzer zu einer Veranstaltungsseite weitergeleitet.

Auf den ersten Blick schien es eine unkomplizierte Aufgabe zu sein. Aber ich konnte keine passende Lösung finden. Den meisten existierenden Kalendern fehlten entweder die notwendigen Funktionen oder sie waren zu sperrig, und die Stile ließen sich nur schwer an das Design des Projekts anpassen.

Natürlich hätte ich den Designer bitten können, das Layout zu vereinfachen, oder einfach ein kleines Formatierungsproblem akzeptieren können. Aber ehrlich gesagt war ich neugierig: Was wäre, wenn ich meinen eigenen Kalender erstellen würde?

So entstand die erste Version von Vanilla Calendar Pro. Der Begriff „Vanilla“ bezieht sich auf natives JavaScript, frei von externen Abhängigkeiten. Um die Integration in andere Projekte zu erleichtern, habe ich eine README-Datei mit API-Dokumentation und Beispielen geschrieben und auf NPM veröffentlicht.

---

Der erste Benutzer – und der erste Stern

Kurz darauf erhielt ich eine Benachrichtigung über das erste Problem im Repository. Es kam von einem Entwickler in Norwegen, der eine unerwartete Frage stellte:

„Haben Sie vor, Wochennummern zum Kalender hinzuzufügen? Hier in Norwegen ist die Verwendung von Wochennummern weit verbreitet und wäre eine hilfreiche Funktion.“

In diesem Moment wurde mir klar, dass der Kalender nicht nur für mich, sondern auch für andere nützlich sein könnte. Aber dann habe ich mich gefragt: Was habe ich von all dieser Mühe? Warum sollte ich meine Freizeit damit verbringen, dass jemand in Norwegen meinen Kalender nutzen kann? Die Antwort war: Nichts Greifbares!

Aber der Gedanke, dass ich etwas wirklich Hilfreiches geschaffen hatte – dass jemand meinen Kalender herunterladen, Zeit bei der Entwicklung sparen und sich auf wichtigere Aufgaben konzentrieren konnte – war unglaublich inspirierend. Auch wenn es mir keine materiellen Vorteile brachte, verspürte ich ein tiefes Gefühl der Zufriedenheit, weil ich wusste, dass mein Projekt anderen hilft.

Also begann ich, den Kalender aktiv zu verbessern und ihn in eine universellere und flexiblere Lösung umzuwandeln. Ich habe die Benutzeroberfläche auch selbst entworfen, mit dem Ziel, sie nicht nur funktional, sondern auch benutzerfreundlich zu gestalten.

---

Was zeichnet Vanilla Calendar Pro aus?

• Flexible Layouts: Passen Sie die HTML-Struktur des Kalenders vollständig an und fügen Sie nach Bedarf benutzerdefinierte Schaltflächen oder Elemente hinzu.
• Vollständige Stilkontrolle: Überschreiben Sie ganz einfach alle CSS-Klassen und ermöglichen Sie so eine nahtlose Integration mit Frameworks wie Tailwind CSS.
• Barrierefreiheit (a11y):Alle Elemente sind mit Arien-Beschriftungen ausgestattet und unterstützen die Tastaturnavigation.
• Interaktive Popups: Markieren Sie bestimmte Tage und zeigen Sie zusätzliche Informationen direkt im Kalender an.
• Wochenzahlen: Unterstützt wochenbasierte Datumsformate, die in vielen Ländern beliebt sind.
• Zeitauswahl: Bietet sowohl 12-Stunden- als auch 24-Stunden-Formate mit Schiebereglern oder manueller Eingabe.
• Themen: Wechselt automatisch zwischen hellen und dunklen Themen und unterstützt benutzerdefinierte Themen.
• Lokalisierung und Internationalisierung: Passen Sie den ersten Tag der Woche, Wochenenden und Feiertage ganz einfach an jedes Gebietsschema an.
• Framework-Kompatibilität: Funktioniert dank seiner nativen JavaScript-Basis mit React, Vue, Angular und allen anderen Frameworks.

Und das ist noch nicht alles! Ich habe noch nicht einmal die Dienstprogramme, Methoden, Aktionen und umfangreichen Konfigurationsoptionen erwähnt, mit denen Sie den Kalender an praktisch alle Anforderungen anpassen können.

---

Zahlen und Dokumentation

Vanilla Calendar Pro ist vollständig in TypeScript geschrieben, ohne externe Abhängigkeiten. Die minimierte Datei ist nur ~49,33 KB (oder 13,52 KB gzip).

Ich habe auch eine detaillierte Dokumentation vorbereitet, die Folgendes umfasst:

• Eine API-Referenz.
• Eine Lernseite mit interaktiven Sandboxen.

? Projekt-Website

? GitHub-Repository

---

Abschluss

Nein, das ist kein revolutionäres Produkt. Es ist nur ein weiterer Kalender/Datumsauswahl. Aber für mich wurde es zu einem bedeutenden Meilenstein auf meiner Reise mit Open Source. Ich bin froh, dass ich etwas Nützliches geschaffen habe, das anderen Entwicklern helfen könnte.

Ich hoffe, dass Vanilla Calendar Pro auch für Sie hilfreich ist. Vielen Dank fürs Lesen!

Das obige ist der detaillierte Inhalt vonWie ich Vanilla Calendar Pro erstellt habe – einen leichten und flexiblen JavaScript-Kalender mit TypeScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!