下載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="//MindFusion.Scheduling.js">//MindFusion.Scheduling.js</a>

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

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

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

二 創建和自定義計劃程序

現在我們已經準備好對日歷庫進行真正的JavaScript編程了。我們創建一個名為“GoogleSchedule.js”的空JS文件，并在網頁的底部添加對它的引用：

<a href="//GoogleSchedule.js">//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();

購買MindFusion正版授權，請點擊“”喲！