日历是我们生活中重要的一部分. 在当今世界, 人们大多使用网络或移动日历. 它们随处可见, 包括在各种软件中: 预订应用, 旅行软件, 项目管理, 管理面板等.
出于多种原因, 用户可能需要在网站上使用日历. 用户需要容果从日历中选择日期来填写表格, 或者在填写某些信息时提供日期.
毫无疑问, 它可称被为业务应用的关键组件. 想象一下, 经过严格调整和开发的日历插件会使你的业务会受到多大的影响. 所以这个组成部分应该在开发中给予足够的关注.
在本文中, 我们将审视 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/fullcalendar/fullcalendar
安装: 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.calendar
安装: 通过包管理器或 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/CLNDR
安装: 通过包管理器或 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/kendo-ui/scheduler/index
- 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/intljusticemission/react-big-calendar
安装: 包管理器
框架: 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/responsive-calendar
- 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/react-ui-components/react-calendar
- 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/angular-calendar/#/kitchen-sink
- GitHub:https://github.com/mattlewis92/angular-calendar
安装: 包管理器
框架: 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/Serhioromano/bootstrap-calendar
安装: 包管理器
框架: 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/nathanreyes/v-calendar
安装: 包管理器
框架: Vue
Vcalendar
V-Calendar 是一个干净, 轻量的插件, 用于在 vue.js 中显示简单的归属日历. 它使用属性来装饰日历, 其中包含各种可视指示器, 包括突出显示的日期区域, 点, 条形, 内容样式和弹出窗口, 可用于简单的工具提示甚至自定义插槽内容.
任何一个属性都可以包含每种类型的一个对象, 并且可以显示单个日期, 日期范围甚至更复杂的日期模式, 例如每个星期五, 每月的 15 日或每隔一个月的最后一个星期五等.
- Dhtmlx calendar
- GitHub stars:-
Price and License:$599 起
- Website/Demo:https://dhtmlx.com/docs/products/dhtmlxCalendar/
- GitHub:-
安装: 包管理器
框架: Vue,Angular,React
Dhtmlx calendar
这是一个非常好的选择. 它有一个与 Google 地图集成的示例, 你可以根据需要扩展基本功能. 文档页面包含一组可能对初学者有用的指南. 它需要一堆 <div> 容器使调度程序工作, 者可能会使你在开始的时候感到困惑, 但整个编码过程非常清晰.
该产品具有以下功能:
跨浏览器兼容性
支持 IE11+
用 JavaScript API 完全控制
能够设置非活动日期
可配置周的第一天
内置多语言支持
12 小时和 24 小时时间格式
3 个视图: 日历, 月份, 年份
如果你想构建企业级的产品, 这是一个非常好的选择. 该公司在价格方面拥有良好的灵活性.
回顾和结论
我列举了一些基本的和更高级的日历插件. 如果你想要一个简单的并且能够进行轻松定制的解决方案, 那么请选择其中的免费选项. 如果是更复杂的产品, 可以考虑具有良好支持的付费解决方案
来源: http://www.tuicool.com/articles/yayMvuE