鑰匙要點(diǎn)

Kendo UI框架的一部分> 第三方j(luò)Query插件fullcalendar是一種輕巧的工具，可以完全控制您的應(yīng)用程序。它提供了一個簡約的基本日歷，可以根據(jù)需求增強(qiáng)其他功能。它是根據(jù)MIT許可發(fā)布的，該許可證幾乎沒有限制。
• > dhtmlxscheduler是一個獨(dú)立的JavaScript事件日歷，以免費(fèi)標(biāo)準(zhǔn)版，移動版本，Windows 8版本和功能豐富的Pro Edition提供。如果您只需要調(diào)度程序，這是一個不錯的選擇，其中包含與Google Maps集成的示例，并為初學(xué)者提供了一組指南。
>
• 創(chuàng)建自己的調(diào)度程序時，請考慮用例，例如構(gòu)建不應(yīng)訪問外部網(wǎng)絡(luò)的Intranet應(yīng)用程序，可視化和管理系統(tǒng)中已經(jīng)存在的數(shù)據(jù)，或者當(dāng)您需要Google不支持的高級功能時日歷。
日子正在快速發(fā)展，現(xiàn)代人將選擇一個在線計(jì)劃應(yīng)用程序，而不是一堆粘性筆記來組織他們的生活。在線應(yīng)用可以在智能手機(jī)或筆記本電腦上使用。而且無需在設(shè)備之間同步數(shù)據(jù)。如果您想創(chuàng)建自己的日歷或調(diào)度程序，但不知道從哪里開始，請不要擔(dān)心。本文的目的是幫助您做出決定。

>。在這種情況下，您可能需要一個獨(dú)立的組件，該組件不需要外部服務(wù)，并且可以將數(shù)據(jù)存儲在您想要的位置?；蛘?，如果您想完全控制您的應(yīng)用程序，并且不想依靠外部服務(wù)

不一定由由日期/標(biāo)題/描述定義的“約會”組成。例如，這些數(shù)據(jù)可以包含各種具有許多業(yè)務(wù)規(guī)則的實(shí)體，
• 當(dāng)您需要一些高級功能時，Google日歷不支持。或當(dāng)您需要自定義組件的外觀或邏輯時，例如多個資源視圖，顯示工作/非工作時間等。
>
我們將查看三種不同類型的JavaScript日歷：>
• Kendo UI調(diào)度程序，它是Kendo UI框架的一部分
• fullcalendar，第三方j(luò)Query插件
• > DHTMLXSCHEDULER - ASTAND-OLONE JAVASCRIPT事件日歷

創(chuàng)建調(diào)度程序



開始之前，讓我們定義哪些特征對我們很有價值：>

>使用條款
外觀
>可用性
編碼復(fù)雜性
好吧，讓我們現(xiàn)在開始。

>

kendo UI調(diào)度程序
>您應(yīng)該獲取完整的庫包來使用此調(diào)度程序。另外，自定義下載使您可以選擇所需的模塊，但是需要擁有商業(yè)許可才能使用它。要獲得30天的試用，您需要通過填寫Web表單或通過您的社交網(wǎng)絡(luò)帳戶進(jìn)行注冊。順便說一下，還有一個免費(fèi)的Kendo UI開源版。它稱為Kendo UI Core，您可以在此GitHub頁面上查看詳細(xì)信息。但是，不幸的是，調(diào)度程序不是其部分之一。

>

提取庫后，您可以創(chuàng)建一個基本的調(diào)度程序。首先，包括所需的文件：

<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>

請注意，您應(yīng)該在Kendo UI JavaScript文件之前包括jQuery。

下一步是定義樣式。除了樣式的和

標(biāo)簽外，還應(yīng)為調(diào)度程序的容器定義適當(dāng)?shù)臉邮剑允蛊湓谌聊Ｊ较驴雌饋聿诲e。>
現(xiàn)在，您可以使用構(gòu)造函數(shù)來初始化調(diào)度程序：>

<span>html<span>, body</span>{
</span>  <span>margin:0;
</span>  <span>padding:0;
</span>  <span>height: 100%;
</span><span>}
</span><span><span>#scheduler</span> {
</span>  <span>border-width: 0;
</span>  <span>height: 100%;
</span><span>}
</span>

視圖屬性允許您啟用日，每周和月的視圖，并選擇最初選擇的一個。

<div ></div>

此代碼將創(chuàng)建一個基本的調(diào)度程序，如下所示：

<span>$("#scheduler").kendoScheduler({
</span>  <span>// The current date of the scheduler
</span>  <span>date: new Date(),
</span>  <span>views: [
</span>    <span>"day",
</span>    <span>{ type: "week", selected: true },
</span>    <span>"month"
</span>  <span>]
</span><span>});
</span>

雙擊將打開新的事件創(chuàng)建窗口。>

創(chuàng)建的事件是可拖動的，因此您可以根據(jù)需要重新排列。另一個方便的功能是一個迷你日歷，有助于通過時間表進(jìn)行導(dǎo)航。



顯示工作時間

/顯示全天

切換按鈕將有助于從常規(guī)的活動中過濾您的工作時間事件。您可以在調(diào)度程序的底部找到它：



調(diào)度程序是直觀的，并且具有您可能需要的所有基本功能。您可以創(chuàng)建一個事件并將其通過日歷網(wǎng)格移動。其他功能，例如迷你日歷和顯示營業(yè)時間按鈕非常方便。> >這就是我們默認(rèn)可以得到的，所以讓我們繼續(xù)前進(jìn)。>

> fullcalendar

該日歷是根據(jù)MIT許可證發(fā)布的，因此幾乎沒有關(guān)于如何使用它的限制。您可以通過不同的方式安裝此日歷：您可以使用Bower，通過CDNJS將所需的文件添加到頁面上，或使用JavaScript和CSS文件下載軟件包。檢查下載頁面以獲取更多詳細(xì)信息。

>前進(jìn)之前。由于FullCalendar是一個jQuery插件，因此請不要忘記將其添加到您的頁面中。另一個依賴性是moment.js，一個用于使用日期的JavaScript庫。如果您使用cdn：

<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>

在那之后，您可以定義一個將保存日歷的DIV容器，如果需要，定義CSS規(guī)則，最后，初始化日歷。例如，我們有一個容器：

<span>html<span>, body</span>{
</span>  <span>margin:0;
</span>  <span>padding:0;
</span>  <span>height: 100%;
</span><span>}
</span><span><span>#scheduler</span> {
</span>  <span>border-width: 0;
</span>  <span>height: 100%;
</span><span>}
</span>

以下是初始化過程的樣子：
如您所見，您沒有太多代碼可以使此日歷起作用。而且，默認(rèn)情況下，您可以使用太多功能。

<div ></div>

>

>在這里您可以看到默認(rèn)調(diào)度程序的外觀：

>
這是當(dāng)前日期突出顯示的月份視圖，更改顯示月份的可能性以及今天的>按鈕。就這樣。您會看到，F(xiàn)ullCalendar是某種DIY工具。您可以使用很多方便的功能，但是默認(rèn)日歷是

basic。如果您想創(chuàng)建僅具有所需功能的最低功能的簡約應(yīng)用程序，這是一個不錯的選擇。> >讓我們編寫一些代碼以使我們的應(yīng)用看起來和工作更好：>

>由于我們要使用自定義主題，因此我們應(yīng)該添加所需的CSS文件：>
幾乎完成了！最后一步是定義一些事件以渲染。您可以通過不同的方式定義事件：作為數(shù)組，作為JSON feed，甚至作為功能。

<span>$("#scheduler").kendoScheduler({
</span>  <span>// The current date of the scheduler
</span>  <span>date: new Date(),
</span>  <span>views: [
</span>    <span>"day",
</span>    <span>{ type: "week", selected: true },
</span>    <span>"month"
</span>  <span>]
</span><span>});
</span>

這是一個示例：

<link rel='stylesheet'  />

<script src='https://code.jquery.com/jquery-1.11.3.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.0/fullcalendar.min.js'></script>

現(xiàn)在，讓我們檢查結(jié)果：
這次好多了！現(xiàn)在，您可以更改視圖，拖放現(xiàn)有事件，強(qiáng)調(diào)工作時間，并從其他活動中進(jìn)行全天篩選：

：

<div id='calendar'></div>

這是FullCalendar的總體印象。它被設(shè)計(jì)為一種輕巧的工具，可讓您完全控制應(yīng)用程序。您可以創(chuàng)建一個低功能的基本應(yīng)用程序，然后添加想要的功能。其中有很多：著色，事件，現(xiàn)有視圖自定義等。查看此文檔頁面以獲取完整列表。

dhtmlxscheduler

>如果您檢查下載頁，您會注意到有免費(fèi)的標(biāo)準(zhǔn)版。此外，有兩個特殊版本可用：移動版本和Windows 8版本。如果您想獲得擴(kuò)展功能，則可以購買Pro Edition。

>

要創(chuàng)建一個基本圖表，您應(yīng)該在html文件中包括

codebase 文件夾中的某些文件：

<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>

現(xiàn)在我們可以定義必要的
節(jié)：>
>最后，我們可以初始化調(diào)度程序：

<span>html<span>, body</span>{
</span>  <span>margin:0;
</span>  <span>padding:0;
</span>  <span>height: 100%;
</span><span>}
</span><span><span>#scheduler</span> {
</span>  <span>border-width: 0;
</span>  <span>height: 100%;
</span><span>}
</span>

>

<div ></div>

init（）方法初始化了dhtmlxscheduler對象。在這種情況下，計(jì)劃程序?qū)⒃谙惹岸x的Scheduler_here容器中初始化。 new Date（）將將當(dāng)前日期設(shè)置為調(diào)度程序初始日期值。 “周”參數(shù)設(shè)置了初始視圖。它可能的值是“天”，“周”和“月”。

<span>$("#scheduler").kendoScheduler({
</span>  <span>// The current date of the scheduler
</span>  <span>date: new Date(),
</span>  <span>views: [
</span>    <span>"day",
</span>    <span>{ type: "week", selected: true },
</span>    <span>"month"
</span>  <span>]
</span><span>});
</span>

>

一切都準(zhǔn)備就緒，我們可以看到默認(rèn)調(diào)度程序的外觀：>

默認(rèn)情況下，可以在一天，每周和月份的視圖之間切換。今天的日期是突出顯示的，但是如果您在時間表范圍內(nèi)失去自己，請使用

> 按鈕。

> >您可以通過在適當(dāng)?shù)娜諝v區(qū)域進(jìn)行雙擊來創(chuàng)建一個新事件。調(diào)整活動的大小將改變其持續(xù)時間。還可以進(jìn)行拖放事件重新排序。>

為了創(chuàng)建一個長期事件，您應(yīng)該在事件的左側(cè)使用

詳細(xì)信息

要在您的時間表中更改其位置，您應(yīng)該選擇“月視圖”。

>總體結(jié)果

kendo UI調(diào)度程序

kendo UI是大而高級的JavaScript框架。它包含大量的小部件和工具。如果您對其他組件不感興趣，也許使用其調(diào)度程序小部件不是一個好主意。 Kendo UI文檔寫得很好，您可以檢查一堆補(bǔ)充代碼示例的調(diào)度程序演示。關(guān)于編碼，構(gòu)建基本調(diào)度程序并為其添加一些功能將不需要太多時間。默認(rèn)視圖有點(diǎn)平淡，但是很容易更改。

>

> fullcalendar

對于那些知道自己想要什么的人來說，這是一個不錯的選擇。沒有詳細(xì)的分步指南來描述如何實(shí)現(xiàn)目標(biāo)。只有一個簡短的入門指南和文檔頁面。輕量級。

dhtmlxscheduler

>如果您想要的所有計(jì)劃程序，這是一個很好的選擇。有一個與Google Maps集成的示例，因此您可以根據(jù)需要擴(kuò)展基本功能。文檔頁面包含一組可能對初學(xué)者有用的指南。使此調(diào)度程序工作所需的一堆
容器可能會使您開始，但是總體編碼過程很明確。

>

>關(guān)于JavaScript日歷和調(diào)度程序的常見問題（常見問題解答）

>在選擇JavaScript日歷或調(diào)度程序時，在JavaScript日歷或調(diào)度程序中要查找的關(guān)鍵功能是什么？首先，尋找一種可以提供各種視圖的工具，例如白天，周，月和議程意見。這將使您以最合適的格式顯示活動。其次，考慮該工具是否支持拖放功能，這可以使用戶更容易管理其事件。第三，檢查該工具是否提供可自定義的模板，因此您可以定制日歷或調(diào)度程序的外觀和感覺以匹配您的網(wǎng)站或應(yīng)用程序。最后，考慮該工具是否支持與其他系統(tǒng)集成，例如Google日歷或Outlook?？勺远x的模板，使您可以更改工具的外觀和感覺。這可能涉及更改日歷或調(diào)度程序的配色方案，字體或布局。一些工具還允許您在活動中添加自定義字段，因此您可以向用戶顯示其他信息。要自定義工具，通常需要修改CSS或HTML代碼。請務(wù)必檢查工具提供的文檔以進(jìn)行特定說明。

>我可以將我的JavaScript日歷或調(diào)度程序與其他系統(tǒng)集成在一起？ 。如果您想將工具與外部日歷（例如Google日歷或Outlook）同步，這可能特別有用。一些工具還支持與數(shù)據(jù)庫集成，從而使您可以從中心位置存儲和檢索事件。要將工具與另一個系統(tǒng)集成在一起，您通常需要使用工具提供的API或插件。

> JavaScript日歷和調(diào)度程序是否支持移動設(shè)備？

>大多數(shù)現(xiàn)代的JavaScript日歷和調(diào)度程序都設(shè)計(jì)為響應(yīng)能力，這意味著它們可以適應(yīng)不同的屏幕尺寸，并且在臺式機(jī)和移動設(shè)備上都可以很好地工作。一些工具還提供觸摸支持，使用戶更容易與觸摸屏設(shè)備上的日歷或調(diào)度程序進(jìn)行交互。但是，移動支持的級別在工具之間可能有所不同，因此在做出決定之前，值得檢查文檔或在移動設(shè)備上測試工具。

>

>如何將事件添加到我的JavaScript日歷或調(diào)度程序中？

我可以免費(fèi)免費(fèi)使用JavaScript日歷或調(diào)度程序嗎？ 。免費(fèi)工具對于小型項(xiàng)目或開始使用JavaScript日歷和調(diào)度程序可能是一個不錯的選擇。但是，與付費(fèi)工具相比，它們可能具有局限性或缺乏某些功能。在使用該工具之前，請務(wù)必檢查工具的條款和條件。

> javaScript日歷和調(diào)度程序支持多種語言嗎？

>

>許多JavaScript日歷和調(diào)度程序支持多種語言，從而使您可以顯示您的用戶語言中的工具。如果您的網(wǎng)站或應(yīng)用程序由來自不同國家或地區(qū)的人們使用您的網(wǎng)站或應(yīng)用程序，這可能特別有用。要以不同的語言顯示工具，通常需要在工具的配置中包括語言文件或設(shè)置語言選項(xiàng)。請務(wù)必檢查文檔以獲取特定說明。

>我可以使用帶有內(nèi)容管理系統(tǒng)（CMS）的JavaScript日歷或調(diào)度程序嗎？內(nèi)容管理系統(tǒng)（CMS），例如WordPress或Joomla。如果您想在基于CMS的網(wǎng)站上顯示日歷或調(diào)度程序，這可能特別有用。要使用帶有CMS的工具，通常需要安裝工具提供的插件或模塊。請務(wù)必檢查文檔以獲取特定說明。

>在使用JavaScript日歷和調(diào)度程序時，如何處理JavaScript日歷或調(diào)度程序中的時區(qū)？但是，許多工具都提供了幫助這一點(diǎn)的功能，例如支持UTC時間或根據(jù)用戶時區(qū)自動調(diào)整事件時間。要處理工具中的時區(qū)，通常需要在工具配置中設(shè)置時區(qū)選項(xiàng)，或使用工具提供的方法。請務(wù)必檢查文檔以獲取特定說明。

>

我可以使用JavaScript日歷或調(diào)度程序進(jìn)行項(xiàng)目管理嗎？他們可以幫助您安排任務(wù)，跟蹤進(jìn)度并管理資源。一些工具提供專門為項(xiàng)目管理設(shè)計(jì)的功能，例如甘特圖表或資源視圖。要使用工具進(jìn)行項(xiàng)目管理，通常需要將其配置為將任務(wù)顯示為事件并使用適當(dāng)?shù)囊晥D。請務(wù)必檢查文檔以獲取特定說明。

以上是JavaScript日歷和調(diào)度程序的比較的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！