彩票走势图

【MindFusion教程】JavaScript中的交互式事件时间表(上)

翻译|使用教程|编辑:王香|2019-01-16 10:56:33.000|阅读 308 次

概述:本文描述了如何创建日程表的主要步骤,该表显示了大学房间分配到不同课程。用户可以通过讲师过滤课程。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

下载Mindfusion最新版本

本文描述了如何创建日程表的主要步骤,该表显示了大学房间分配到不同课程。用户可以通过讲师过滤课程。

Mindfusion

I.初始设置

我们首先复制我们将在项目目录中使用的JavaScript调度程序文件。这些是:

  • MindFusion.Scheduling.js - 表示Js Scheduler库
  • MindFusion.Scheduling-vsdoc.js - 提供Intellisense支持
    standard.css - 在子目录“themes”中,这是资源表的CSS主题样式
  • planner_lic.txt - 将您的许可证密钥粘贴到此处以禁用试用版本标签。

我们专门为我们的应用创建了2个文件:

  • ResourceView.html - 应用程序的网页
  • ResourceView.js - 实现应用程序动态功能的JavaScript代码。

II.HTML页面

在我们网页的head部分,我们首先创建一个对主题文件的引用:

在网页的最后,只需关闭结束标记,我们添加对Scheduling.js文件的引用,该文件包含我们将为应用程序编写的调度功能和ResourceView.js文件:

<script src = “MindFusion.Scheduling.js” type = “text / javascript” > </ script> <script src = “ResourceView.js” type = “text / javascript” > </ script>  
  

日历库需要HTML

元素,用于呈现它。我们添加一个:

 

<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正版授权,请点击“”哟!


标签:JavaScript 图表ActiveX图表控件

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP