前端ui组件（1）：⽇程排班—11个优秀JavaScript⽇历插件
⽇历是我们⽣活中重要的⼀部分。在当今世界，⼈们⼤多使⽤⽹络或移动⽇历。它们随处可见，包括在各种软件中：预订应⽤、旅⾏软件、项⽬管理、管理⾯板等。
出于多种原因，⽤户可能需要在⽹站上使⽤⽇历。⽤户需要容果从⽇历中选择⽇期来填写表格，或者在填写某些信息时提供⽇期。
毫⽆疑问，它可称被为业务应⽤的关键组件。想象⼀下，经过严格调整和开发的⽇历插件会使你的业务会受到多⼤的影响。所以这个组成部分应该在开发中给予⾜够的关注。
在本⽂中，我们将审视 Web 应⽤中良好⽇历的标准。此外还将向你展⽰不同框架中的最好的库，你可以基于它们构建⾃⼰的解决⽅案。适⽤于 Web 应⽤的优质⽇历
我们将评估标准分为4个维度。
⽂档。为了学习如何构建或重建它，必须有详细的⽂档记录。没有或缺少⽂档的产品⽆权存在。
⾃定义。为了添加或删除某些功能，⼀个优秀的库应该带有可以修改的选项。这尤其适⽤于开源软件。
兼容性。有谁会想访问⼀个只能在最新版 Chrome 和 Webkit 浏览器中正常使⽤的⽹站？现在许多商业应⽤仍可在旧版浏览器中使⽤。
⽤户体验。问问⾃⼰该插件是否能够⽅便的实现⽤户的需求？它符合你的产品风格吗？与库实际处理你任务的⽅式相⽐，⽂档的外观和并不特别重要。
顶级⽇历库
我们已经包含了基于 React、Angular、Vue、Bootstrap 或 jQuery 的各种⽇历库。其中⼀些更强⼤，⼀些更容易定制。希望本列表能够帮助你完成⼯作。
Fullcalendar.io
GitHub stars: 9400
Price and License: MIT
安装: NPM, Yarn
框架: React, Vue, Angular
Fullcalendar.io
对于那些知道⾃⼰想要什么的⼈来说，这是⼀个很不错的选择。没有详细的使⽤步骤，只有简短的⼊
门指南和⽂档页⾯。⾮常轻巧。
该库易于定制，并带有许多不同的组件。⽹站、demo 和⽂档给出了⼀个成熟产品的印象，你不会害怕使⽤它。有了它，你可以计划资源并标记事件。它还包含时间线视图和各种主题。这个库的⼀个很⼤的优势是提供了在 React、Vue 和 Angular 中开发的⽂档。
Tui calendar
GitHub stars: 7328
Price and License: MIT
**安装：**通过包管理器或CDN
框架： React，Vue，Angular 包装
Tui calendar
Tui 是 TUI 库的⼀部分。它构建在 top 或 jquery 上，可以选择使⽤ React、Angular 和 Vue 包装器。该⽇历插件⽀持各种视图类型：每⽇、每周、每⽉（6周、2周、3周）以及⾥程碑和任务计划的有效管理。你可以修改周第⼀天的定义、⾃定义⽇期和⽇程安排信息UI（包括⽹格单元格的页眉和页脚）。
该产品具有完整的⽂档，可以通过 Content Delivery Network 的包管理器进⾏安装。
CLNDR
GitHub stars: 2760
Price and License: MIT
**安装：**通过包管理器或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
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
**安装：**包管理器
框架： React
React Big Calendar
React big calendar 是为 React 构建的事件⽇历组件。它适⽤于现代浏览器（IE10 +），并使⽤ flexbox ⽽不是经典的 table-ception ⽅法。
React big calendar 中包括两个⽤于处理⽇期格式和本地化的选项，具体取决于你对 DateTime 库的偏好。可以⽤ Moment.js 或Globalize.js 本地化你的程序。
jquery是什么功能组件开箱即⽤，你可以包含已编译的 CSS ⽂件并运⾏。但有时你可能会希望设置 Big Calendar 的样式来匹配你⾃⼰的应⽤样式。所以需要在Big Calendar 中包含 SASS ⽂件，SASS 实现提供了⼀个包含颜⾊和⼤⼩调整变量的⽂件，你可以更新它们来适合你的应⽤。
Mobiscroll responsive calendar
GitHub stars: –
Price and License: free, $95, $595
Github: –
**安装：**复制粘贴脚本
框架： Angular，Ionic，React，jQuery，普通JS
Mobiscroll responsive calendar
Mobiscroll ⽇历是⼀个多帧⼯作响应⽇历，可以在移动、Web和平板中使⽤。
有单选和多选类型，⽤户不仅可以逐个选择，也可以选择整周。它还使⽤户⽆需连续滑动即可轻松更改年份和⽉份。
Mobiscroll 通过显⽰多个⽉帮助⽤户连续可视化选择两到三个⽉。它可以在⽇间单元格中以⽂本的形式提供有⽤的信息。
使⽤ Mobiscroll，你可以突出显⽰对⽤户具有特定含义的⽇期。此外你还可以使⽤图标和⽂本来赋予其含义。
该产品⽀持本地化和多语⾔应⽤。
Syncfusion react calendar
GitHub stars: –
Price and License: $2495起 – $4995所有组件
Github: –
**安装类型：**复制粘贴脚本
框架： Angular，Blazor，普通JS，Vue，React
Syncfusion react calendar
Syncfusion ⽇历提供⽉、年和⼗年的视图选项，可以快速导航到所需的⽇期。它⽀持最短⽇期、最长⽇期、禁⽤⽇期以限制⽇期选择。该产品很轻巧，易于配置。
你可以选择四种不同的主题。除了标准的内置主题外，Calendar 组件还可以完全控制其外观，允许你⾃定义样式去适合⾃⼰的应⽤。Angular calendar
GitHub stars: 1662
Price and License: MIT
**安装：**包管理器
**框架：**Angular
Angular Calendar
该产品是 Angular 6.0+ 的⽇历组件，可以在⽉、周或⽇视图中显⽰事件。该模板具有⾼度可定制性。你可以构建⾃⼰的组件，⽽不是那些不符合项⽬规范的组件。
注意：此库并未针对移动设备进⾏优化，你需要⾃⼰去做到这些。
Bootstrap calendar
GitHub stars: 2867
Price and License: MIT
**安装：**包管理器
框架： Bootstrap
Bootstrap calendar
基于最流⾏的 HTML 框架 Twitter Bootstrap 的完整功能⽇历。该产品是⾼度可复⽤的。这意味着此⽇历中没有 UI。切换视图或加载事件的所有按钮都是单独完成的。你将最终拥有⾃⼰独特的⽇历设计。它也是基于模板的：包括年、⽉、周或⽇在内的所有视图都基于模板。你可以轻松更改外观或样式，甚⾄可以添加新的⾃定义视图。如果你使⽤此产品，则可以使⽤ LESS 变量⽂件轻松调整⽇历并设置其样式。
它⽤ ajax 提供⽇历的事件。你需要提供 URL 并返回此 json 格式的事件列表。语⾔⽂件与 i18n 是分开连接的。你可以轻松地将⽇历翻译成你的语⾔。节假⽇也会根据你的语⾔显⽰在⽇历上。
Vcalendar
GitHub stars: 1316
Price and License: MIT
**安装：**包管理器
框架： Vue
Vcalendar
V-Calendar 是⼀个⼲净、轻量的插件，⽤于在 Vue.js 中显⽰简单的归属⽇历。它使⽤属性来装饰⽇历，其中包含各种可视指⽰器，包括突出显⽰的⽇期区域、点、条形、内容样式和弹出窗⼝，可⽤于简单的⼯具提⽰甚⾄⾃定义插槽内容。
任何⼀个属性都可以包含每种类型的⼀个对象，并且可以显⽰单个⽇期、⽇期范围甚⾄更复杂的⽇期模式，例如每个星期五，每⽉的15⽇或每隔⼀个⽉的最后⼀个星期五等。
Dhtmlx calendar
GitHub stars: –
Price and License: $599 起
Github: –
**安装：**包管理器
框架： Vue，Angular，React
Dhtmlx calendar
这是⼀个⾮常好的选择。它有⼀个与Google地图集成的⽰例，你可以根据需要扩展基本功能。⽂档页⾯包含⼀组可能对初学者有⽤的指南。它需要⼀堆 <div> 容器使调度程序⼯作，者可能会使你在开始的时候感到困惑，但整个编码过程⾮常清晰。
该产品具有以下功能：
跨浏览器兼容性
⽀持 IE11+
⽤ JavaScript API 完全控制
能够设置⾮活动⽇期
可配置周的第⼀天
内置多语⾔⽀持
12⼩时和24⼩时时间格式
3 个视图：⽇历、⽉份、年份
如果你想构建企业级的产品，这是⼀个⾮常好的选择。该公司在价格⽅⾯拥有良好的灵活性。
回顾和结论
我列举了⼀些基本的和更⾼级的⽇历插件。如果你想要⼀个简单的并且能够进⾏轻松定制的解决⽅案，那么请选择其中的免费选项。如果是更复杂的产品，可以考虑具有良好⽀持的付费解决⽅案

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。