鑰匙要點(diǎn)

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

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

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

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



開始之前，讓我們定義哪些特徵對(duì)我們很有價(jià)值：>

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

>

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

>

提取庫(kù)後，您可以創(chuàng)建一個(gè)基本的調(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>

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

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

標(biāo)籤外，還應(yīng)為調(diào)度程序的容器定義適當(dāng)?shù)臉邮?，以使其在全屏模式下看起來不錯(cuò)。 >
現(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>

視圖屬性允許您啟用日，每周和月的視圖，並選擇最初選擇的一個(gè)。

<div ></div>

此代碼將創(chuàng)建一個(gè)基本的調(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)建的事件是可拖動(dòng)的，因此您可以根據(jù)需要重新排列。另一個(gè)方便的功能是一個(gè)迷你日曆，有助於通過時(shí)間表進(jìn)行導(dǎo)航。



顯示工作時(shí)間

/顯示全天

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



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

> fullcalendar

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

>前進(jìn)之前。由於FullCalendar是一個(gè)jQuery插件，因此請(qǐng)不要忘記將其添加到您的頁(yè)面中。另一個(gè)依賴性是moment.js，一個(gè)用於使用日期的JavaScript庫(kù)。如果您使用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>

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

<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)前日期突出顯示的月份視圖，更改顯示月份的可能性以及今天的>按鈕。就這樣。您會(huì)看到，F(xiàn)ullCalendar是某種DIY工具。您可以使用很多方便的功能，但是默認(rèn)日曆是

basic。如果您想創(chuàng)建僅具有所需功能的最低功能的簡(jiǎn)約應(yīng)用程序，這是一個(gè)不錯(cuò)的選擇。 > >讓我們編寫一些代碼以使我們的應(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>

這是一個(gè)示例：

<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)工作時(shí)間，並從其他活動(dòng)中進(jìn)行全天篩選：

：

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

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

dhtmlxscheduler

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

>

要?jiǎng)?chuàng)建一個(gè)基本圖表，您應(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對(duì)象。在這種情況下，計(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)情況下，可以在一天，每周和月份的視圖之間切換。今天的日期是突出顯示的，但是如果您在時(shí)間表範(fàn)圍內(nèi)失去自己，請(qǐng)使用

> 按鈕。

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

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

詳細(xì)信息

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

>總體結(jié)果

kendo UI調(diào)度程序

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

>

> fullcalendar

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

dhtmlxscheduler

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

>

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

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

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

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

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

>

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

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

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

>

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

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

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

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