<div id = “calendar” style = “ height ：100 ％; width ：100 ％; ” > </ div>  

為此< div >添加一個id非常重要，因為我們需要在JS代碼后面的文件中引用它。

III.基本的JavaScript設置

在JavaScript代碼隱藏文件的頂部，我們添加了對Intellisense文件的引用。我們還創建了一個MindFusion.Scheduling命名空間的映射：

/// <reference path="MindFusion.Scheduling-vsdoc.js"></reference>
var p = MindFusion.Scheduling

然后我們創建日歷對象。我們需要對將呈現它的< div>元素的引用：

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

對于此示例中，我們將使用的ResourceView的currentView屬性指定。此外，我們將日歷中的可見單元格數設置為7.這是通過日歷的resourceViewSettings屬性來完成的。

// set the view to ResourceView, which displays the distribution of resources over a period of time:
<pre>calendar.currentView = p.CalendarView.ResourceView;
// set the number of visible cells to 7
calendar.resourceViewSettings.visibleCells = 7; 

該itemSettings廣告載體讓我們定制的項目進度我們使用titleFormat和tooltipFormat指定了每個項目的標題和工具提示將呈現。兩個屬性都使用特殊格式字符串

• ％s - 將呈現開始日期
• ％e - 將呈現項目的結束日期
• ％d - 將呈現項目的詳細信息。

您可以通過在括號中添加所需格式來指定日期和時間的格式：

// show hours on items
calendar.itemSettings.titleFormat = "%s[HH:mm] - %e[HH:mm] %h";
calendar.itemSettings.tooltipFormat = "%d";

然后我們將日歷的主題設置為標準，我們在網頁中引用了它的css文件：

calendar.theme = "standard";

我們再做一次調整 - 聯系人的姓名將取自該人的姓氏。可能的值是&ldquo;F”，“M”和“L” - 用于名字，中間名和姓氏。

calendar.contactNameFormat = "L";

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