【MindFusion教程】JavaScript中的交互式事件时间表（上）-控件新闻-慧都网

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

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

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

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 图表控件

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

好文不易，鼓励一下吧！

上一篇：如何彻底解决SpreadJS导出PDF字体乱码问题下一篇：.NET Reactor使用教程（六）——保护程序

登录慧都网发表评论登录

暂无评论...

相关产品

MindFusion.Diagramming for ActiveX

它能帮助你创建工作流图，流程图和图表处理

MindFusion.Diagramming for WinForms

FlowChart.NET是一款能够帮助你轻松创建流程图和示意图的.NET控件，可以自定义设计样式和图表框颜色。

MindFusion.Diagramming for ASP.NET

ASP.NET下灵活的图表组件

MindFusion.Diagramming for Java

为您图表的自定义以及个性化提供了多种不同选项

MindFusion.Scheduling for WinForms

帮助你管理时间以及重新安排即将到来的预约与事件

MindFusion.Diagramming for WPF

创建任何类型示意图包括流程图、方案图、类层次图、树形图和算法等在内的理想的图形工具。

MindFusion.WinForms Pack

专业的多功能Winforms图表控件套包

MindFusion.WPF Pack

集合了图表控件、日程控件以及报表控件，用于创建所有类型的流程图、方案、图形、表格、图表、日程、调度、商业报表、计量表等

MindFusion ASP.NET Pack

为程序员构建图表、流程图、日程安排、图表等等提供一系列理想的工具集

MindFusion.Silverlight Pack

帮助你快速开发图表、日历、表格和报表

MindFusion.Scheduling Pack

提供一整套完备的功能用于创建日程表、时间、资源表和调度表

MindFusion.Reporting for WinForms

原生的Windows Forms编程组件，可为任何.NET应用程序提供专业的报表功能

MindFusion.Reporting for WPF

智能编程型报表组件，具有强大的可视化和编辑关系数据的功能

MindFusion.Reporting for Silverlight

为你快速创建及定制报表

MindFusion.Scheduling for ASP.NET

为WebForms应用程序提供一个完整的功能集，用于显示日程表、时间表、日程安排、资源视图等

MindFusion.Scheduling for WPF

快速为你的WPF应用程序添加一个完整的日程表和时间管理功能集

MindFusion.Scheduling for Silverlight

具有时尚外观且易于使用的时间管理组件

MindFusion.Charting for WPF

轻松为你的WPF应用程序添加漂亮的仪表板

MindFusion.Charting for WinForms

WinForms应用程序完美的图表解决方案

MindFusion Diagramming Pack

支持iOS、Android等10多个平台的强大图表库

MindFusion.Charting for Silverlight

为您的Silverlight应用程序创建漂亮的图表

MindFusion.Charting for WebForms

适用于任何ASP.NET应用程序的完美图表控件

MindFusion.Charting for Android

用简单易懂的图表呈现您的数据，可以在任何Android设备上运行，让您的应用脱颖而出！

MindFusion.Scheduling for Java

专为智能Java应用程序打造的智能日历

MindFusion.Scheduling for Xamarin

Android和iOS应用程序项目管理功能、风格和性能的完美组合

MindFusion.Scheduling for .NET CF

为使用Microsoft .NET Compact Framework的应用程序设计的计划和时间安排组件

MindFusion.Mapping for WinForms

拥有创建、定制和显示地图的全套功能

MindFusion.Mapping for WPF

快速且容易地为Wpf应用程序添加一个漂亮的地图

MindFusion Pack for Java Swing

MindFusion Pack for Java Swing是一款有效的JAVA工具。

MindFusion Xamarin Pack

MindFusion Xamarin Pack是适用于独立于平台的应用程序的一组独特控件。使用MindFusion专业控件加速您的Xamarin应用程序的开发，为您提供需要数月才能开发的即用型功能。

MindFusion Diagram for UWP

MindFusion Diagram for UWP是一款WINRT的图表库，使您的移动应用程序在Windows shop中脱颖而出，其中包含易于构建和自定义的图表

MindFusion Wpf Gantt Chart

Wpf Gantt Chart.MindFusion包含在MindFusion.Scheduling for WPF里，MindFusion.Scheduling for WPF是一款添加日程表、时间表和资源视图的适用于WPF的调度工具。

MindFusion iOS Diagram

MindFusion iOS Diagram是一个原生的Swift组件，它提供了一个强大的功能集，可以让您呈现任何类型的流程图，组织结构图，类图，层次结构，树和图。

MindFusion Android Diagram

MindFusion Android Diagram可以为任何类型的Android设备构建图表。

MindFusion Wpf Gantt Chart & Gauge

MindFusion Wpf Gantt Chart & Gauge是一款结合了2D和3D图表、仪表和高级实时图表控制的WPF组件。

MindFusion ASP.NET Scheduler

一个非常易于使用和自定义的ASP.NET调度组件。

MindFusion Java Swing Chart

MindFusion Java Swing Chart不仅是可用于渲染图表的普通编程工具，还是可组合排列图表、仪表和UI元素、创建高级数据可视化解决方案的智能组件。

MindFusion ASP.NET Chart

MindFusion ASP.NET Chart包含在MindFusion.Charting for WebForms里，MindFusion.Charting for WebForms是一款适用于任何ASP.NET应用程序的完美图表控件。

MindFusion JavaScript Chart

MindFusion JavaScript Chart结合了2D和3D图表、金融图表、仪表和仪表板，提供了优秀的API 、丰富的事件集、无限数量和类型的数据系列以及在JavaScript和HTML中创建完美数据可视化所需的一切。

MindFusion Xamarin Diagram

MindFusion Xamarin Diagram是一款Xamarin.Forms流程图控件。

MindFusion Wpf Virtual Keyboard

MindFusion Wpf Virtual Keyboard是一款外观和感觉像移动应用程序的WPF应用程序，可提供与触摸屏应用程序相同的可访问性。

MindFusion Xamarin Chart

MindFusion Xamarin Chart是用于仪表板、2D和3D图表的Xamarin Forms组件，有丰富的图表类型集、多个数据选项和样式设置。

MindFusion WinForms Virtual Keyboard

MindFusion WinForms Virtual Keyboard是适用于每个WinForms应用程序的全功能屏幕键盘，内置键盘布局、主题和广泛的API文档。

MindFusion Java Swing Virtual Keyboard

MindFusion Java Swing Virtual Keyboard是用于Java Swing软件的屏幕键盘。

MindFusion Wpf Spreadsheet

MindFusion Wpf Spreadsheet是WPF的电子表格，可在应用程序中实现熟悉的类似Excel的功能。

MindFusion WinForms Spreadsheet

MindFusion WinForms Spreadsheet是MindFusion WinForms电子表格控件，是一个功能强大的.net电子表格组件，具有编辑、样式化和格式化大量数据的强大功能。

MindFusion Java Swing Spreadsheet

MindFusion Java Swing Spreadsheet是适用于Java的电子表格。能快速创建任何类型的电子表格。添加各种图表、数据功能并根据需要设置样式，结果可以导出为不同的格式。

最新文章 MORE

ActiveX流程图控件FlowChartX v4.6发布新增Ruler控件

2013-04-15

FlowChartX ActiveX Control控件发布v4.7版本

2013-07-02

MindFusion.WinForms Pack 2014.R3支持输出Visio 2013文件

2014-07-29

【更新】.NET控件MindFusion.Diagramming for WinForms v6.4发布-轻松创建流程图和示意图

2016-04-15

【更新】WinForms应用程序的图表解决方案MindFusion.Charting for WinForms v4.0 beta发布[附下载]

2016-05-19

【更新】MindFusion.Diagramming for WinForms v6.4.1发布|附下载

2016-06-17

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

I.初始设置

II.HTML页面

III.基本的JavaScript设置

用科技创就卓越

Create excellence with technology

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

I.初始设置

II.HTML页面

III.基本的JavaScript设置

为你推荐

用户登录

用科技创就卓越

Create excellence with technology