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 個視圖：日曆、月份、年份

若是你想構建企業級的產品，這是一個很是好的選擇。該公司在價格方面擁有良好的靈活性。

回顧和結論

我列舉了一些基本的和更高級的日曆插件。若是你想要一個簡單的而且可以進行輕鬆定製的解決方案，那麼請選擇其中的免費選項。若是是更復雜的產品，能夠考慮具備良好支持的付費解決方案

歡迎關注前端公衆號：前端先鋒，領取前端工程化實用工具包。