作者：Eugene Stepnov
翻译：疯狂的技术宅
原文：https://flatlogic.com/blog/to…
未经允许严禁转载
日历是我们生活中重要的一部分。在当今世界，人们大多使用网络或移动日历。它们随处可见，包括在各种软件中：预订应用、旅行软件、项目管理、管理面板等。
出于多种原因，用户可能需要在网站上使用日历。用户需要容果从日历中选择日期来填写表格，或者在填写某些信息时提供日期。
毫无疑问，它可称被为业务应用的关键组件。想象一下，经过严格调整和开发的日历插件会使你的业务会受到多大的影响。所以这个组成部分应该在开发中给予足够的关注。
在本文中，我们将审视 Web 应用中良好日历的标准。此外还将向你展示不同框架中的最好的库，你可以基于它们构建自己的解决方案。
适用于 Web 应用的优质日历
我们将评估标准分为 4 个维度。
- 文档 。为了学习如何构建或重建它，必须有详细的文档记录。没有或缺少文档的产品无权存在。
- 自定义 。为了添加或删除某些功能，一个优秀的库应该带有可以修改的选项。这尤其适用于开源软件。
- 兼容性 。有谁会想访问一个只能在最新版 Chrome 和 Webkit 浏览器中正常使用的网站？现在许多商业应用仍可在旧版浏览器中使用。
- 用户体验 。问问自己该插件是否能够方便的实现用户的需求？它符合你的产品风格吗？与库实际处理你任务的方式相比，文档的外观和并不特别重要。
顶级日历库
我们已经包含了基于 React、Angular、Vue、Bootstrap 或 jQuery 的各种日历库。其中一些更强大，一些更容易定制。希望本列表能够帮助你完成工作。
Fullcalendar.io
GitHub stars: 9400
Price and License: MIT
Website/Demo: https://fullcalendar.io/
Github: https://github.com/fullcalend…
安装: NPM, Yarn
框架: React, Vue, Angular
Fullcalendar.io
对于那些知道自己想要什么的人来说，这是一个很不错的选择。没有详细的使用步骤，只有简短的入门指南和文档页面。非常轻巧。
该库易于定制，并带有许多不同的组件。网站、demo 和文档给出了一个成熟产品的印象，你不会害怕使用它。有了它，你可以计划资源并标记事件。它还包含时间线视图和各种主题。这个库的一个很大的优势是提供了在 React、Vue 和 Angular 中开发的文档。
Tui calendar
GitHub stars: 7328
Price and License: MIT
Website/Demo: http://ui.toast.com/tui-calendar
Github: https://github.com/nhn/tui.ca…
安装： 通过包管理器或 CDN
框架： React，Vue，Angular 包装
Tui calendar
Tui 是 TUI 库的一部分。它构建在 top 或 jquery 上，可以选择使用 React、Angular 和 Vue 包装器。该日历插件支持各种视图类型：每日、每周、每月（6 周、2 周、3 周）以及里程碑和任务计划的有效管理。你可以修改周第一天的定义、自定义日期和日程安排信息 UI（包括网格单元格的页眉和页脚）。
该产品具有完整的文档，可以通过 Content Delivery Network 的包管理器进行安装。
Sing App React 管理模板中的日历示例
CLNDR
GitHub stars: 2760
Price and License: MIT
Website/Demo: http://kylestetz.github.io/CLNDR/
Github: https://github.com/kylestetz/…
安装： 通过包管理器或 CDN
框架： React，Vue，Angular 包装
CLNDR.js
CLNDR.js 是一个 jQuery 日历插件，与大多数日历插件不同，它不会生成标记。相反，你需要提供一个 Underscore.js HTML 模板，作为回报，CLNDR 为你提供了大量可用在其中的数据。HTML 模板非常适合此它，因为它们允许我们灵活地指定数据在标记中的位置。
CLNDR 获取你的模板并将一些数据注入其中。数据包含创建日历所需的一切。
Kendo UI Scheduler
GitHub stars: 2160
Price and License: Apache License, $899 – $2199
Website/Demo: https://demos.telerik.com/ken…
Github: –
安装 ：包管理器
框架： React，Angular，Vue，jQuery
Kendo UI
Kendo UI 是一个庞大而高级的 JavaScript 框架。它包含大量的小部件和工具。如果你对其他组件不感兴趣，也许使用它的 Scheduler Widget 并不是一个好主意。Kendo UI 的文档编写得很好，你可以查看一堆补充了代码示例的 Scheduler 演示。关于编码，构建基本调度程序并为其添加一些功能不会花费太多时间。默认视图有点简单，但很容易修改。
React big calendar
GitHub stars: 3254
Price and License: MIT
Website/Demo: http://intljusticemission.github.io/react-big-calendar/examples/index.html
Github: https://github.com/intljustic…
安装： 包管理器
框架： React
React Big Calendar
React big calendar 是为 React 构建的事件日历组件。它适用于现代浏览器（IE10 +），并使用 flexbox 而不是经典的 table-ception 方法。
React big calendar 中包括两个用于处理日期格式和本地化的选项，具体取决于你对 DateTime 库的偏好。可以用 Moment.js 或 Globalize.js 本地化你的程序。
开箱即用，你可以包含已编译的 CSS 文件并运行。但有时你可能会希望设置 Big Calendar 的样式来匹配你自己的应用样式。所以需要在 Big Calendar 中包含 SASS 文件，SASS 实现提供了一个包含颜色和大小调整变量的文件，你可以更新它们来适合你的应用。
Mobiscroll responsive calendar
GitHub stars: –
Price and License: free, $95, $595
Website/Demo: https://mobiscroll.com/respon…
Github: –
安装： 复制粘贴脚本
框架： Angular，Ionic，React，jQuery，普通 JS
Mobiscroll responsive calendar
Mobiscroll 日历是一个多帧工作响应日历，可以在移动、Web 和平板中使用。
有单选和多选类型，用户不仅可以逐个选择，也可以选择整周。它还使用户无需连续滑动即可轻松更改年份和月份。
Mobiscroll 通过显示多个月帮助用户连续可视化选择两到三个月。它可以在日间单元格中以文本的形式提供有用的信息。
使用 Mobiscroll，你可以突出显示对用户具有特定含义的日期。此外你还可以使用图标和文本来赋予其含义。
该产品支持本地化和多语言应用。
Syncfusion react calendar
GitHub stars: –
Price and License: $2495 起 – $4995 所有组件
Website/Demo: https://www.syncfusion.com/re…
Github: –
安装类型： 复制粘贴脚本
框架： Angular，Blazor，普通 JS，Vue，React
Syncfusion react calendar
Syncfusion 日历提供月、年和十年的视图选项，可以快速导航到所需的日期。它支持最短日期、最长日期、禁用日期以限制日期选择。该产品很轻巧，易于配置。
你可以选择四种不同的主题。除了标准的内置主题外，Calendar 组件还可以完全控制其外观，允许你自定义样式去适合自己的应用。
Angular calendar
GitHub stars: 1662
Price and License: MIT
Website/Demo: https://mattlewis92.github.io…
Github: https://github.com/mattlewis9…
安装： 包管理器
框架：Angular
Angular Calendar
该产品是 Angular 6.0+ 的日历组件，可以在月、周或日视图中显示事件。该模板具有高度可定制性。你可以构建自己的组件，而不是那些不符合项目规范的组件。
注意：此库并未针对移动设备进行优化，你需要自己去做到这些。
Bootstrap calendar
GitHub stars: 2867
Price and License: MIT
Website/Demo: http://bootstrap-calendar.eivissapp.com/
Github: https://github.com/Serhioroma…
安装： 包管理器
框架： Bootstrap
Bootstrap calendar
基于最流行的 HTML 框架 Twitter Bootstrap 的完整功能日历。该产品是高度可复用的。这意味着此日历中没有 UI。切换视图或加载事件的所有按钮都是单独完成的。你将最终拥有自己独特的日历设计。它也是基于模板的：包括年、月、周或日在内的所有视图都基于模板。你可以轻松更改外观或样式，甚至可以添加新的自定义视图。如果你使用此产品，则可以使用 LESS 变量文件轻松调整日历并设置其样式。
它用 ajax 提供日历的事件。你需要提供 URL 并返回此 json 格式的事件列表。语言文件与 i18n 是分开连接的。你可以轻松地将日历翻译成你的语言。节假日也会根据你的语言显示在日历上。
Vcalendar
GitHub stars: 1316
Price and License: MIT
Website/Demo: https://vcalendar.io/
Github: https://github.com/nathanreye…
安装： 包管理器
框架： Vue
Vcalendar
V-Calendar 是一个干净、轻量的插件，用于在 Vue.js 中显示简单的归属日历。它使用属性来装饰日历，其中包含各种可视指示器，包括突出显示的日期区域、点、条形、内容样式和弹出窗口，可用于简单的工具提示甚至自定义插槽内容。
任何一个属性都可以包含每种类型的一个对象，并且可以显示单个日期、日期范围甚至更复杂的日期模式，例如每个星期五，每月的 15 日或每隔一个月的最后一个星期五等。
Dhtmlx calendar
GitHub stars: –
Price and License: $599 起
Website/Demo: https://dhtmlx.com/docs/produ…
Github: –
安装： 包管理器
框架： Vue，Angular，React
Dhtmlx calendar
这是一个非常好的选择。它有一个与 Google 地图集成的示例，你可以根据需要扩展基本功能。文档页面包含一组可能对初学者有用的指南。它需要一堆 <div> 容器使调度程序工作，者可能会使你在开始的时候感到困惑，但整个编码过程非常清晰。
该产品具有以下功能：
- 跨浏览器兼容性
- 支持 IE11+
- 用 JavaScript API 完全控制
- 能够设置非活动日期
- 可配置周的第一天
- 内置多语言支持
- 12 小时和 24 小时时间格式
- 3 个视图：日历、月份、年份
如果你想构建企业级的产品，这是一个非常好的选择。该公司在价格方面拥有良好的灵活性。
回顾和结论
我列举了一些基本的和更高级的日历插件。如果你想要一个简单的并且能够进行轻松定制的解决方案，那么请选择其中的免费选项。如果是更复杂的产品，可以考虑具有良好支持的付费解决方案
本文首发微信公众号：前端先锋
欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章
欢迎继续阅读本专栏其它高赞文章：
- 深入理解 Shadow DOM v1
- 一步步教你用 WebVR 实现虚拟现实游戏
- 13 个帮你提高开发效率的现代 CSS 框架
- 快速上手 BootstrapVue
- JavaScript 引擎是如何工作的？从调用栈到 Promise 你需要知道的一切
- WebSocket 实战：在 Node 和 React 之间进行实时通信
- 关于 Git 的 20 个面试题
- 深入解析 Node.js 的 console.log
- Node.js 究竟是什么？
- 30 分钟用 Node.js 构建一个 API 服务器
- Javascript 的对象拷贝
- 程序员 30 岁前月薪达不到 30K，该何去何从
- 14 个最好的 JavaScript 数据可视化库
- 8 个给前端的顶级 VS Code 扩展插件
- Node.js 多线程完全指南
- 把 HTML 转成 PDF 的 4 个方案及实现
- 更多文章 …