我如何创建 Vanilla Calendar Pro — 使用 TypeScript 的轻量级且灵活的 JavaScript 日历

开发社区您好！

说实话，在写这篇文章之前我犹豫了很久。我知道可能会有评论说，“又一个不必要的日期选择器。”但今天，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中文网其他相关文章！