11个顶级 JavaScript 日历插件

更新日期: 2019-07-19阅读: 4.3k标签: 时间

日历是我们生活中重要的一部分。在当今世界,人们大多使用网络或移动日历。它们随处可见,包括在各种软件中:预订应用、旅行软件、项目管理、管理面板等。出于多种原因,用户可能需要在网站上使用日历。用户需要容果从日历中选择日期来填写表格,或者在填写某些信息时提供日期。

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

在本文中,我们将审视 Web 应用中良好日历的标准。此外还将向你展示不同框架中的最好的库,你可以基于它们构建自己的解决方案。


适用于 Web 应用的优质日历

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

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

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

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

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


顶级日历库

我们已经包含了基于 reactangularvue、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

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

该库易于定制,并带有许多不同的组件。网站、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 是 TUI 库的一部分。它构建在 top 或 jquery 上,可以选择使用 React、Angular 和 Vue 包装器。该日历插件支持各种视图类型:每日、每周、每月(6周、2周、3周)以及里程碑和任务计划的有效管理。你可以修改周第一天的定义、自定义日期和日程安排信息UI(包括网格单元格的页眉和页脚)。

该产品具有完整的文档,可以通过 Content Delivery Network 的包管理器进行安装。


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 是一个 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 是一个庞大而高级的 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 构建的事件日历组件。它适用于现代浏览器(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 日历是一个多帧工作响应日历,可以在移动、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 日历提供月、年和十年的视图选项,可以快速导航到所需的日期。它支持最短日期、最长日期、禁用日期以限制日期选择。该产品很轻巧,易于配置。

你可以选择四种不同的主题。除了标准的内置主题外,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 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

基于最流行的 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

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

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

该产品具有以下功能:

  • 跨浏览器兼容性

  • 支持 IE11+

  • 用 JavaScript api 完全控制

  • 能够设置非活动日期

  • 可配置周的第一天

  • 内置多语言支持

  • 12小时和24小时时间格式

  • 3 个视图:日历、月份、年份

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


回顾和结论

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

原文: https://flatlogic.com/blog/top-javascript-calendar-plugins/


链接: https://www.fly63.com/article/detial/4260

js对时间的操作

获取当前时间 以2019-06-23 20:30:00 的形式显示(time即为当前时间) ;将数据库中的datetime格式转化为2019-06-23 20:30:00 形式

原生JS实现日历

这周写自己的项目发现又用到日历了,加之自己毕业之后的第一个工作中遇到的任务也是需要写个日历(组员写了,我就不用写了),今天就来好好折腾一下日历是怎么写的

js 不同时间格式介绍以及相互间的转换

首先必须要提到的是 Date 对象,它用来处理时间和日期。使用 new Date() 语句可创建 Date 对象,创建出来的时间格式如下(后面提到的标准时间都是指该格式):

js获取任意一天的0点和23:59:59时间

最近写代码时,需要获取任意一天的起始和结束时间,0点和23:59:59这两个时间的时间戳;使用了setHours() 方法;setHours() 方法用于设置指定的时间的小时字段

Js实时显示系统时间

在页面找一个合适的位置添加div标签,用于显示时间;自定义JavaScript函数 showTime();在页面载入事件中每隔一秒调用一次showTime()函数,实时显示系统时间

Js时间对象Date

写在前面:时间是物理学七大常量之一。生活中记录时间有两种方式(或者说有两种计时系统):GMT(格林尼治时间)和UTC(协调世界时间)。JS中的Date对象只能通过new关键字创建。 

Js实现倒计时

利用JS中的Date对象即可实现,创建目标时间和当前时间,利用getTime函数将两个时间转换成距离1970-01-01的秒数,相减后转化为年月日即可

一行js代码实现时间戳转时间格式

javascript时间戳转换,支持自定义格式,可以显示年,月,周,日,时,分,秒多种形式的日期和时间。推荐一个JavaScript常用函数库;在日常工作生活中,会经常用到一些日期格式化,url相关操作,浏览器类型判断,常用验证格式等等函数

JS计算时间差

getTime()方法,通常我们计算时间差都是通过获取两个时间数据,然后分别使用getTime()方法返回与固定的1970 年 1 月 1 日的时间差,通过对返回毫秒数的差,换算成时间单位,得出两个时间的时间差。

js 判断当前时间是否在某一时间段

我们可以使用 jutils - JavaScript常用函数库的 isDuringDate 函数来实现,传入 beginDateStr (开始时间), endDateStr(结束时间), 当前时间是否在2018/09/17 - 2030/09/17 之间,输出 true

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!