下載MindFusion.WinForms Pack最新版本

在本文中，我們將建立一個類似Google的互動月度日曆，使用者可以在該日曆中實時建立，編輯和刪除約會。我們 將使用JavaScript Scheduler。以下是完成的應用程式的螢幕截圖：

一 專案設定

我們需要引用以下檔案來開始開發：

• MindFusion.Scheduling.js

• light.css

JavaScript檔案提供排程功能。CSS檔案負責我們日曆的樣式。我們建立一個名為“themes”的子資料夾，然後將light.css檔案放在那裡。

我們建立了一個HTML檔案，一個名為GoogleSchedule的空白網頁，在head部分我們引用了兩個CSS檔案：

<link href="themes/light.css" rel="stylesheet" /> href="themes/light.css" rel="stylesheet" />

對JavaScript檔案的引用位於頁面底部，就在關閉正文標記之前。

<a href="http://MindFusion.Scheduling.js">http://MindFusion.Scheduling.js</a>

我們需要一個代表日曆的元素，我們在HTML程式碼中建立一個元素併為其分配一個id：

<div id="calendar" style="height: 100%; width: 100%;"></div>

我們希望日曆佔據整個頁面，這就是為什麼寬度和高度都是100％。

二 建立和自定義計劃程式

現在我們已經準備好對日曆庫進行真正的JavaScript程式設計了。我們建立一個名為“GoogleSchedule.js”的空JS檔案，並在網頁的底部新增對它的引用：

<a href="http://GoogleSchedule.js">http://GoogleSchedule.js</a>

在這個JavaScript檔案中，我們首先建立一個到MindFusion.Scheduling名稱空間的對映：

var p = MindFusion.Scheduling;

然後我們使用網頁中的Calendar DOM元素建立一個Calendar例項：

// create a new instance of the calendar 
var calendar = new p.Calendar(document.getElementById("calendar"));

我們將日曆檢視設定為CalendarView .SingleMonth，這意味著日曆一次顯示一個月。我們還設定了我們在CSS檔案中引用的主題：

calendar.currentView = p.CalendarView.SingleMonth;
calendar.theme = "light";

我們進行的另一個自定義 - 我們使用itemSettings.titleFormat屬性在每個事件主題之前新增字首。字首是此事件的開始時間。這是你如何設定它：

calendar.itemSettings.titleFormat = "%s[hh:mm tt] %h";

最後，我們渲染日曆：

//visualize the calendar
calendar.render();