下載MindFusion.WinForms Pack最新版本

在本文中，我們將創(chuàng)建一個類似Google的互動月度日歷，用戶可以在該日歷中實時創(chuàng)建，編輯和刪除約會。我們 將使用JavaScript Scheduler。以下是完成的應(yīng)用程序的屏幕截圖：

一 項目設(shè)置

我們需要引用以下文件來開始開發(fā)：

• MindFusion.Scheduling.js
• light.css

JavaScript文件提供調(diào)度功能。CSS文件負(fù)責(zé)我們?nèi)諝v的樣式。我們創(chuàng)建一個名為“themes”的子文件夾，然后將light.css文件放在那里。

我們創(chuàng)建了一個HTML文件，一個名為GoogleSchedule的空白網(wǎng)頁，在head部分我們引用了兩個CSS文件：

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

對JavaScript文件的引用位于頁面底部，就在關(guān)閉正文標(biāo)記之前。

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

我們需要一個代表日歷的元素，我們在HTML代碼中創(chuàng)建一個元素并為其分配一個id：

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

我們希望日歷占據(jù)整個頁面，這就是為什么寬度和高度都是100％。

二 創(chuàng)建和自定義計劃程序

現(xiàn)在我們已經(jīng)準(zhǔn)備好對日歷庫進(jìn)行真正的JavaScript編程了。我們創(chuàng)建一個名為“GoogleSchedule.js”的空J(rèn)S文件，并在網(wǎng)頁的底部添加對它的引用：

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

在這個JavaScript文件中，我們首先創(chuàng)建一個到MindFusion.Scheduling命名空間的映射：

var p = MindFusion.Scheduling;

然后我們使用網(wǎng)頁中的Calendar DOM元素創(chuàng)建一個Calendar實例：

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

我們將日歷視圖設(shè)置為CalendarView .SingleMonth，這意味著日歷一次顯示一個月。我們還設(shè)置了我們在CSS文件中引用的主題：

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

我們進(jìn)行的另一個自定義 - 我們使用itemSettings.titleFormat屬性在每個事件主題之前添加前綴。前綴是此事件的開始時間。這是你如何設(shè)置它：

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

最后，我們渲染日歷：

//visualize the calendar
calendar.render();

購買MindFusion正版授權(quán)，請點擊“”喲！