我該如何建立 Vanilla Calendar Pro — 使用 TypeScript 的輕量級且靈活的 JavaScript 日曆
- Patricia Arquette原創
- 2024-11-30 11:41:14907瀏覽
開發社區您好！
說實話，在寫這篇文章之前我猶豫了很久。我知道可能會有評論說，「又一個不必要的日期選擇器。」但今天，Vanilla Calendar Pro 在GitHub 上獲得了超過480 顆星，每月下載量17,000 次，我決定分享我的故事。
讓我先澄清一下：我並不是聲稱自己是最好的日曆或日期選擇器開發人員。本文講述了我第一次使用開源的經驗、我如何從頭開始創建一個項目，以及它如何對其他開發人員變得有用。
一切是如何開始的
2022 年夏天，我需要為一個專案實現一個活動日曆。要求很簡單：
- 它必須在模態視窗中無縫工作。
- 它需要支援自訂樣式以匹配設計。
- 點擊日期會將使用者重新導向到活動頁面。
乍一看，這似乎是一項簡單的任務。但我找不到合適的解決方案。大多數現有的日曆要么缺乏必要的功能，要么過於笨重，樣式難以適應項目的設計。
當然，我可以要求設計師簡化佈局，或者只是接受一個小的格式問題。但老實說，我很好奇：如果我建立自己的日曆會怎麼樣？
這就是 Vanilla Calendar Pro 第一版的誕生。術語“Vanilla”指的是原生JavaScript，沒有外部依賴。為了更容易整合到其他專案中，我編寫了包含 API 文件和範例的 README 並將其發佈在 NPM 上。
第一個用戶——也是第一個明星
不久之後，我收到了有關儲存庫中第一個問題的通知。它來自挪威的一位開發者，他問了一個意想不到的問題：
「您有計劃在日曆中添加週數嗎？在挪威，使用周數非常常見，這將是一個有用的功能。」
這一刻讓我意識到日曆不僅對我有用，對其他人也有用。但後來我問自己：我從所有這些努力中得到了什麼？我為什麼要花我的空閒時間讓挪威的某個人可以使用我的行事曆？ 答案是：沒有任何有形的！
然而，我創造了一些真正有用的東西——人們可以下載我的日曆，節省開發時間，並專注於更重要的任務——這一想法非常鼓舞人心。即使它沒有為我帶來任何物質獎勵，但當我知道我的專案正在幫助別人時，我感到一種深深的滿足感。
因此，我開始積極改進日曆，將其轉變為更通用、更靈活的解決方案。我還自己設計了介面，旨在使其不僅功能齊全，而且用戶友好。
Vanilla Calendar Pro 有何獨特之處？
- 靈活的佈局：完全自訂行事曆的 HTML 結構，根據需要新增自訂按鈕或元素。
- 完整樣式控制：輕鬆覆蓋任何 CSS 類，實現與 Tailwind CSS 等框架的無縫整合。
- 輔助功能（a11y）：所有元素都配備了 aria 標籤並支援鍵盤導航。
- 互動式彈出視窗：突出顯示特定日期並直接在日曆中顯示其他資訊。
- 週數： 支援基於週的日期格式，在許多國家/地區都很流行。
- 時間選擇：提供 12 小時和 24 小時兩種格式，帶有滑桿或手動輸入。
- 主題：自動切換明暗主題，並支援自訂主題。
- 在地化與國際化：輕鬆調整任何區域的一週第一天、週末和假日。
- 框架相容性：得益於其原生 JavaScript 基礎，可與 React、Vue、Angular 和任何其他框架配合使用。
這還不是全部！我什至沒有提到實用程式、方法、操作和廣泛的配置選項，這些選項允許您自訂日曆以滿足幾乎任何要求。
數位和文件
Vanilla Calendar Pro 完全用 TypeScript 編寫，沒有外部依賴項。縮小後的文件只有 ~49.33 KB（或 13.52 KB gzip）。
我還準備了詳細的文檔，其中包括：
- API 參考。
- 有互動式沙箱的學習頁面。
？專案網站
？ GitHub 儲存庫
結論
不，這不是一個革命性的產品。這只是另一個日曆/日期選擇器。但對我來說，它成為我開源之旅中的一個重要里程碑。我很高興我創建了一些可以幫助其他開發人員的有用的東西。
我希望 Vanilla Calendar Pro 也能對您有所幫助。感謝您的閱讀！
以上是我該如何建立 Vanilla Calendar Pro — 使用 TypeScript 的輕量級且靈活的 JavaScript 日曆的詳細內容。更多資訊請關注PHP中文網其他相關文章！