Vanilla Calendar Pro の作成方法 — TypeScript を使用した軽量で柔軟な JavaScript カレンダー-jsチュートリアル-php.cn

Vanilla Calendar Pro の作成方法 — TypeScript を使用した軽量で柔軟な JavaScript カレンダー

Patricia Arquette

リリース： 2024-11-30 11:41:14

オリジナル

919 人が閲覧しました

How I Created Vanilla Calendar Pro — A Lightweight and Flexible JavaScript Calendar with TypeScript

開発コミュニティの皆さん、こんにちは!

正直に言うと、この記事を書くまで長い間迷っていました。 「また不必要な日付ピッカーが増えただけだ。」というコメントがあるかもしれないことは理解していますが、現在、Vanilla Calendar Pro は GitHub で 480 個以上のスターを獲得しており、月に 17,000 回ダウンロードされています。 、私は自分のストーリーを共有することにしました。

前もってはっきりさせておきますが、私はカレンダーや日付ピッカーの開発者として最高であると主張しているわけではありません。この記事は、私のオープンソースの初めての経験、プロジェクトをゼロから作成した方法、そしてそれが他の開発者にどのように役立つようになったのかについて説明しています。

すべてはどのように始まったのか

2022 年の夏、プロジェクトのイベントカレンダーを実装する必要がありました。要件は単純でした:

モーダルウィンドウでシームレスに動作する必要がありました。
デザインに一致するカスタムスタイルをサポートする必要がありました。
日付をクリックすると、ユーザーはイベントページにリダイレクトされます。

一見すると、簡単な作業のように思えました。しかし、適切な解決策が見つかりませんでした。既存のカレンダーのほとんどは、必要な機能が欠けているか、プロジェクトのデザインに適応させるのが難しいスタイルでかさばりすぎていました。

確かに、デザイナーにレイアウトを簡素化するよう依頼したり、書式設定に関する小さな問題を受け入れたりすることもできました。しかし、正直に言うと、私は興味をそそられました。自分のカレンダーを作成したらどうなるでしょうか?

こうして Vanilla Calendar Pro の最初のバージョンが誕生しました。 「バニラ」 という用語は、外部依存関係のないネイティブ JavaScript を指します。他のプロジェクトに簡単に統合できるように、API ドキュメントと例を含む README を作成し、NPM で公開しました。

最初のユーザー、そして最初のスター

それから間もなく、リポジトリの最初の問題に関する通知を受け取りました。それはノルウェーの開発者からのもので、予想外の質問をしました:

「カレンダーに週番号を追加する予定はありますか? ここノルウェーでは、週番号を使用するのが非常に一般的で、便利な機能です。」

この瞬間、カレンダーは私だけでなく他の人にとっても役立つ可能性があることに気づきました。しかし、私は自分自身にこう問いました:このすべての努力から何が得られるでしょうか?ノルウェーの男性が私のカレンダーを使用できるように、なぜ私が自由時間を費やす必要があるのでしょうか? 答えは次のとおりです: 具体的なものは何もありません!

しかし、本当に役立つものを作成したという考え、つまり誰かが私のカレンダーをダウンロードして、開発時間を節約し、より重要なタスクに集中できるという考えは、信じられないほど励みになりました。たとえ物質的な報酬が得られなかったとしても、自分のプロジェクトが他の人の役に立っていると知ると、深い満足感を感じました。

そこで、私はカレンダーを積極的に改善し、より普遍的で柔軟なソリューションに変え始めました。インターフェイスも自分でデザインし、機能性だけでなく使いやすさも追求しました。

Vanilla Calendar Pro の特徴は何ですか?

柔軟なレイアウト: カレンダーの HTML 構造を完全にカスタマイズし、必要に応じてカスタムボタンや要素を追加します。
完全なスタイルコントロール: CSS クラスを簡単にオーバーライドし、Tailwind CSS などのフレームワークとのシームレスな統合を可能にします。
アクセシビリティ (a11y): すべての要素には aria ラベルが装備されており、キーボードナビゲーションをサポートします。
インタラクティブなポップアップ: 特定の日を強調表示し、追加情報をカレンダーに直接表示します。
週番号: 多くの国で一般的な週ベースの日付形式をサポートします。
時間選択: スライダーまたは手動入力を使用して、12 時間形式と 24 時間形式の両方を提供します。
テーマ: 明るいテーマと暗いテーマを自動的に切り替え、カスタムテーマをサポートします。
ローカリゼーションと国際化: あらゆるロケールに合わせて、週の最初の日、週末、祝日を簡単に調整できます。
フレームワークの互換性: ネイティブ JavaScript 基盤により、React、Vue、Angular、およびその他のフレームワークで動作します。