<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";

我们再做一次调整 - 联系人的姓名将取自该人的姓氏。可能的值是“F”，“M”和“L” - 用于名字，中间名和姓氏。

calendar.contactNameFormat = "L";

购买MindFusion正版授权，请点击“咨询在线客服”哟！