【MindFusion教程】带有JavaScript事件的交互式日历

翻译|使用教程|编辑:王香|2018-12-06 10:01:54.000|阅读 26 次

概述:在本文中,我们将创建一个类似Google的互动月度日历。

相关链接:

下载MindFusion.WinForms Pack最新版本

在本文中,我们将创建一个类似Google的互动月度日历,用户可以在该日历中实时创建,编辑和删除约会。我们 将使用JavaScript Scheduler。以下是完成的应用程序的屏幕截图:

MindFusion

一 项目设置

我们需要引用以下文件来开始开发:

  • 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();

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



标签:JavaScript 图表ActiveX图表控件流程图

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:

登录慧都网发表评论登录


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
Parasoft C/C++test

Parasoft C/C++test – 针对 C/C++ 开发的综合性代码质量保障工具,有效提高开发团队工作效率和软件质量。

在线客服 在线QQ 电话咨询
400-700-1020
在线客服系统
live chat