


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!

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Häufig gestellte Fragen und Lösungen für das Ticket-Ticket-Ticket-Ticket in Front-End im Front-End-Entwicklungsdruck ist der Ticketdruck eine häufige Voraussetzung. Viele Entwickler implementieren jedoch ...

JavaScript ist der Eckpfeiler der modernen Webentwicklung. Zu den Hauptfunktionen gehören eine ereignisorientierte Programmierung, die Erzeugung der dynamischen Inhalte und die asynchrone Programmierung. 1) Ereignisgesteuerte Programmierung ermöglicht es Webseiten, sich dynamisch entsprechend den Benutzeroperationen zu ändern. 2) Die dynamische Inhaltsgenerierung ermöglicht die Anpassung der Seiteninhalte gemäß den Bedingungen. 3) Asynchrone Programmierung stellt sicher, dass die Benutzeroberfläche nicht blockiert ist. JavaScript wird häufig in der Webinteraktion, der einseitigen Anwendung und der serverseitigen Entwicklung verwendet, wodurch die Flexibilität der Benutzererfahrung und die plattformübergreifende Entwicklung erheblich verbessert wird.

Es gibt kein absolutes Gehalt für Python- und JavaScript -Entwickler, je nach Fähigkeiten und Branchenbedürfnissen. 1. Python kann mehr in Datenwissenschaft und maschinellem Lernen bezahlt werden. 2. JavaScript hat eine große Nachfrage in der Entwicklung von Front-End- und Full-Stack-Entwicklung, und sein Gehalt ist auch beträchtlich. 3. Einflussfaktoren umfassen Erfahrung, geografische Standort, Unternehmensgröße und spezifische Fähigkeiten.

Diskussion über die Realisierung von Parallaxe -Scrolling- und Elementanimationseffekten in diesem Artikel wird untersuchen, wie die offizielle Website der Shiseeido -Website (https://www.shiseeido.co.jp/sb/wonderland/) ähnlich ist ...

JavaScript zu lernen ist nicht schwierig, aber es ist schwierig. 1) Verstehen Sie grundlegende Konzepte wie Variablen, Datentypen, Funktionen usw. 2) Beherrschen Sie die asynchrone Programmierung und implementieren Sie sie durch Ereignisschleifen. 3) Verwenden Sie DOM -Operationen und versprechen Sie, asynchrone Anfragen zu bearbeiten. 4) Vermeiden Sie häufige Fehler und verwenden Sie Debugging -Techniken. 5) Die Leistung optimieren und Best Practices befolgen.

Zu den neuesten Trends im JavaScript gehören der Aufstieg von Typenkripten, die Popularität moderner Frameworks und Bibliotheken und die Anwendung der WebAssembly. Zukunftsaussichten umfassen leistungsfähigere Typsysteme, die Entwicklung des serverseitigen JavaScript, die Erweiterung der künstlichen Intelligenz und des maschinellen Lernens sowie das Potenzial von IoT und Edge Computing.

Wie fusioniere ich Array -Elemente mit derselben ID in ein Objekt in JavaScript? Bei der Verarbeitung von Daten begegnen wir häufig die Notwendigkeit, dieselbe ID zu haben ...

Datenaktualisierungsprobleme in Zustand Asynchronen Operationen. Bei Verwendung der Zustand State Management Library stoßen Sie häufig auf das Problem der Datenaktualisierungen, die dazu führen, dass asynchrone Operationen unzeitgemäß sind. � ...
