讓我先澄清一下：我並不是聲稱(chēng)自己是最好的日曆或日期選擇器開(kāi)發(fā)人員。本文講述了我第一次使用開(kāi)源的經(jīng)驗(yàn)、我如何從頭開(kāi)始創(chuàng)建一個(gè)項(xiàng)目，以及它如何對(duì)其他開(kāi)發(fā)人員變得有用。

一切是如何開(kāi)始的

2022 年夏天，我需要為一個(gè)專(zhuān)案實(shí)現(xiàn)一個(gè)活動(dòng)日曆。要求很簡(jiǎn)單：

• 它必須在模態(tài)視窗中無(wú)縫工作。
• 它需要支援自訂樣式以匹配設(shè)計(jì)。
• 點(diǎn)擊日期會(huì)將使用者重新導(dǎo)向到活動(dòng)頁(yè)面。

乍一看，這似乎是一項(xiàng)簡(jiǎn)單的任務(wù)。但我找不到合適的解決方案。大多數(shù)現(xiàn)有的日曆要么缺乏必要的功能，要么過(guò)於笨重，樣式難以適應(yīng)項(xiàng)目的設(shè)計(jì)。

當(dāng)然，我可以要求設(shè)計(jì)師簡(jiǎn)化佈局，或者只是接受一個(gè)小的格式問(wèn)題。但老實(shí)說(shuō)，我很好奇：如果我建立自己的日曆會(huì)怎麼樣？

這就是 Vanilla Calendar Pro 第一版的誕生。術(shù)語(yǔ)“Vanilla”指的是原生JavaScript，沒(méi)有外部依賴(lài)。為了更容易整合到其他專(zhuān)案中，我編寫(xiě)了包含 API 文件和範(fàn)例的 README 並將其發(fā)佈在 NPM 上。

第一個(gè)用戶(hù)——也是第一個(gè)明星

不久之後，我收到了有關(guān)儲(chǔ)存庫(kù)中第一個(gè)問(wèn)題的通知。它來(lái)自挪威的一位開(kāi)發(fā)者，他問(wèn)了一個(gè)意想不到的問(wèn)題：

「您有計(jì)劃在日曆中添加週數(shù)嗎？在挪威，使用周數(shù)非常常見(jiàn)，這將是一個(gè)有用的功能。」

這一刻讓我意識(shí)到日曆不僅對(duì)我有用，對(duì)其他人也有用。但後來(lái)我問(wèn)自己：我從所有這些努力中得到了什麼？我為什麼要花我的空閒時(shí)間讓挪威的某個(gè)人可以使用我的行事曆？ 答案是：沒(méi)有任何有形的！

然而，我創(chuàng)造了一些真正有用的東西——人們可以下載我的日曆，節(jié)省開(kāi)發(fā)時(shí)間，並專(zhuān)注於更重要的任務(wù)——這一想法非常鼓舞人心。即使它沒(méi)有為我?guī)?lái)任何物質(zhì)獎(jiǎng)勵(lì)，但當(dāng)我知道我的專(zhuān)案正在幫助別人時(shí)，我感到一種深深的滿(mǎn)足感。

因此，我開(kāi)始積極改進(jìn)日曆，將其轉(zhuǎn)變?yōu)楦ㄓ?、更靈活的解決方案。我還自己設(shè)計(jì)了介面，旨在使其不僅功能齊全，而且用戶(hù)友好。

Vanilla Calendar Pro 有何獨(dú)特之處？

• 靈活的佈局：完全自訂行事曆的 HTML 結(jié)構(gòu)，根據(jù)需要新增自訂按鈕或元素。
• 完整樣式控制：輕鬆覆蓋任何 CSS 類(lèi)，實(shí)現(xiàn)與 Tailwind CSS 等框架的無(wú)縫整合。
• 輔助功能（a11y）：所有元素都配備了 aria 標(biāo)籤並支援鍵盤(pán)導(dǎo)航。
• 互動(dòng)式彈出視窗：突出顯示特定日期並直接在日曆中顯示其他資訊。
• 週數(shù)： 支援基於週的日期格式，在許多國(guó)家/地區(qū)都很流行。
• 時(shí)間選擇：提供 12 小時(shí)和 24 小時(shí)兩種格式，帶有滑桿或手動(dòng)輸入。
• 主題：自動(dòng)切換明暗主題，並支援自訂主題。
• 在地化與國(guó)際化：輕鬆調(diào)整任何區(qū)域的一週第一天、週末和假日。
• 框架相容性：得益於其原生 JavaScript 基礎(chǔ)，可與 React、Vue、Angular 和任何其他框架配合使用。

這還不是全部！我什至沒(méi)有提到實(shí)用程式、方法、操作和廣泛的配置選項(xiàng)，這些選項(xiàng)允許您自訂日曆以滿(mǎn)足幾乎任何要求。

數(shù)位和文件

Vanilla Calendar Pro 完全用 TypeScript 編寫(xiě)，沒(méi)有外部依賴(lài)項(xiàng)?？s小後的文件只有 ~49.33 KB（或 13.52 KB gzip）。

我還準(zhǔn)備了詳細(xì)的文檔，其中包括：

• API 參考。
• 有互動(dòng)式沙箱的學(xué)習(xí)頁(yè)面。

？專(zhuān)案網(wǎng)站

？ GitHub 儲(chǔ)存庫(kù)

結(jié)論

不，這不是一個(gè)革命性的產(chǎn)品。這只是另一個(gè)日曆/日期選擇器。但對(duì)我來(lái)說(shuō)，它成為我開(kāi)源之旅中的一個(gè)重要里程碑。我很高興我創(chuàng)??建了一些可以幫助其他開(kāi)發(fā)人員的有用的東西。

我希望 Vanilla Calendar Pro 也能對(duì)您有所幫助。感謝您的閱讀！

以上是我該如何建立 Vanilla Calendar Pro — 使用 TypeScript 的輕量級(jí)且靈活的 JavaScript 日曆的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！