11个顶级 JavaScript 日历插件

做者：Eugene Stepnov

翻译：疯狂的技术宅

原文：flatlogic.com/blog/top-ja…

未经容许严禁转载

日历是咱们生活中重要的一部分。在当今世界，人们大多使用网络或移动日历。它们随处可见，包括在各类软件中：预订应用、旅行软件、项目管理、管理面板等。

出于多种缘由，用户可能须要在网站上使用日历。用户须要容果从日历中选择日期来填写表格，或者在填写某些信息时提供日期。

毫无疑问，它可称被为业务应用的关键组件。想象一下，通过严格调整和开发的日历插件会使你的业务会受到多大的影响。因此这个组成部分应该在开发中给予足够的关注。

在本文中，咱们将审视 Web 应用中良好日历的标准。此外还将向你展现不一样框架中的最好的库，你能够基于它们构建本身的解决方案。

适用于 Web 应用的优质日历

咱们将评估标准分为4个维度。

• 文档。为了学习如何构建或重建它，必须有详细的文档记录。没有或缺乏文档的产品无权存在。

• 自定义。为了添加或删除某些功能，一个优秀的库应该带有能够修改的选项。这尤为适用于开源软件。

• 兼容性。有谁会想访问一个只能在最新版 Chrome 和 Webkit 浏览器中正常使用的网站？如今许多商业应用仍可在旧版浏览器中使用。

• 用户体验。问问本身该插件是否可以方便的实现用户的需求？它符合你的产品风格吗？与库实际处理你任务的方式相比，文档的外观和并不特别重要。

顶级日历库

咱们已经包含了基于 React、Angular、Vue、Bootstrap 或 jQuery 的各类日历库。其中一些更强大，一些更容易定制。但愿本列表可以帮助你完成工做。

Fullcalendar.io

GitHub stars: 9400

Price and License: MIT

Website/Demo: fullcalendar.io/

Github: github.com/fullcalenda…

安装: NPM, Yarn

框架: React, Vue, Angular

Fullcalendar.io

对于那些知道本身想要什么的人来讲，这是一个很不错的选择。没有详细的使用步骤，只有简短的入门指南和文档页面。很是轻巧。

该库易于定制，并带有许多不一样的组件。网站、demo 和文档给出了一个成熟产品的印象，你不会惧怕使用它。有了它，你能够计划资源并标记事件。它还包含时间线视图和各类主题。这个库的一个很大的优点是提供了在 React、Vue 和 Angular 中开发的文档。

Tui calendar

GitHub stars: 7328

Price and License: MIT

Website/Demo: ui.toast.com/tui-calenda…

Github: github.com/nhn/tui.cal…

**安装：**经过包管理器或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: kylestetz.github.io/CLNDR/

Github: github.com/kylestetz/C…

**安装：**经过包管理器或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: demos.telerik.com/kendo-ui/sc…

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: intljusticemission.github.io/react-big-c…

Github: github.com/intljustice…

**安装：**包管理器

框架： 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: mobiscroll.com/responsive-…

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: www.syncfusion.com/react-ui-co…

Github: –

**安装类型：**复制粘贴脚本

框架： Angular，Blazor，普通JS，Vue，React

Syncfusion react calendar

Syncfusion 日历提供月、年和十年的视图选项，能够快速导航到所需的日期。它支持最短日期、最长日期、禁用日期以限制日期选择。该产品很轻巧，易于配置。

你能够选择四种不一样的主题。除了标准的内置主题外，Calendar 组件还能够彻底控制其外观，容许你自定义样式去适合本身的应用。

Angular calendar

GitHub stars: 1662

Price and License: MIT

Website/Demo: mattlewis92.github.io/angular-cal…

Github: github.com/mattlewis92…

**安装：**包管理器

**框架：**Angular

Angular Calendar

该产品是 Angular 6.0+ 的日历组件，能够在月、周或日视图中显示事件。该模板具备高度可定制性。你能够构建本身的组件，而不是那些不符合项目规范的组件。

注意：此库并未针对移动设备进行优化，你须要本身去作到这些。

Bootstrap calendar

GitHub stars: 2867

Price and License: MIT

Website/Demo: bootstrap-calendar.eivissapp.com/

Github: github.com/Serhioroman…

**安装：**包管理器

框架： Bootstrap

Bootstrap calendar

基于最流行的 HTML 框架 Twitter Bootstrap 的完整功能日历。该产品是高度可复用的。这意味着此日历中没有 UI。切换视图或加载事件的全部按钮都是单独完成的。你将最终拥有本身独特的日历设计。它也是基于模板的：包括年、月、周或日在内的全部视图都基于模板。你能够轻松更改外观或样式，甚至能够添加新的自定义视图。若是你使用此产品，则可使用 LESS 变量文件轻松调整日历并设置其样式。

它用 ajax 提供日历的事件。你须要提供 URL 并返回此 json 格式的事件列表。语言文件与 i18n 是分开链接的。你能够轻松地将日历翻译成你的语言。节假日也会根据你的语言显示在日历上。

Vcalendar

GitHub stars: 1316

Price and License: MIT

Website/Demo: vcalendar.io/

Github: github.com/nathanreyes…

**安装：**包管理器

框架： Vue

Vcalendar

V-Calendar 是一个干净、轻量的插件，用于在 Vue.js 中显示简单的归属日历。它使用属性来装饰日历，其中包含各类可视指示器，包括突出显示的日期区域、点、条形、内容样式和弹出窗口，可用于简单的工具提示甚至自定义插槽内容。

任何一个属性均可以包含每种类型的一个对象，而且能够显示单个日期、日期范围甚至更复杂的日期模式，例如每一个星期五，每个月的15日或每隔一个月的最后一个星期五等。

Dhtmlx calendar

GitHub stars: –

Price and License: $599 起

Website/Demo: dhtmlx.com/docs/produc…

Github: –

**安装：**包管理器

框架： Vue，Angular，React

Dhtmlx calendar

这是一个很是好的选择。它有一个与Google地图集成的示例，你能够根据须要扩展基本功能。文档页面包含一组可能对初学者有用的指南。它须要一堆 <div> 容器使调度程序工做，者可能会使你在开始的时候感到困惑，但整个编码过程很是清晰。

该产品具备如下功能：

• 跨浏览器兼容性
• 支持 IE11+
• 用 JavaScript API 彻底控制
• 可以设置非活动日期
• 可配置周的第一天
• 内置多语言支持
• 12小时和24小时时间格式
• 3 个视图：日历、月份、年份

若是你想构建企业级的产品，这是一个很是好的选择。该公司在价格方面拥有良好的灵活性。

回顾和结论

我列举了一些基本的和更高级的日历插件。若是你想要一个简单的而且可以进行轻松定制的解决方案，那么请选择其中的免费选项。若是是更复杂的产品，能够考虑具备良好支持的付费解决方案

欢迎关注前端公众号：前端先锋，领取前端工程化实用工具包。