下载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();