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

翻译|使用教程|编辑:王香|2019-01-22 09:48:55.000|阅读 44 次

概述:当日历最初加载时,有几个联系人和位置可用。表示它们的对象是Contact和Location类的实例。创建它们之后,我们将它们添加到日历计划的联系人和位置集合中。

相关链接:

下载Mindfusion最新版本

IV.资源

当日历最初加载时,有几个联系人和位置可用。表示它们的对象是Contact和Location类的实例。创建它们之后,我们将它们添加到日历计划的联系人和位置集合中。

var resource;

// Add professor names to the schedule.contacts collection.
resource = new p.Contact();
resource.firstName = "Prof. William";
resource.lastName = "Dyer";
calendar.schedule.contacts.add(resource);

resource = new p.Location();
resource.name = "Room D";
calendar.schedule.locations.add(resource);

现在,当用户创建新课程时,他们将在“Create Item/创建项目”表单的“Options/选项”窗格中看到“Contact and Location/联系人和位置 ”:

Mindfusion

V. 项目

这些项是Item类的实例。他们代表不同讲师的班级。我们使用Item的startTime和endTime属性来指定类何时发生。该主题属性赋予类的名称:

//always start with the current date
var date = p.DateTime.today();

item = new p.Item();
item.startTime = p.DateTime.addHours(date.addDays(1), 14);
item.endTime = p.DateTime.addHours(item.startTime, 1);
item.subject = "Classical Mechanics";.subject = "Classical Mechanics";

我们使用位置和联系人属性来设置讲座的位置以及讲授者。请注意,contacts属性属于集合类型,我们可以将多个讲师分配给一个类:

item.location = calendar.schedule.locations.items()[0];.location = calendar.schedule.locations.items()[0];
item.contacts.add(calendar.schedule.contacts.items()[0]);.contacts.add(calendar.schedule.contacts.items()[0]);

我们从日程表的列表中获取位置和联系人的位置和联系人我们还必须设置项目的详细信息 - 如果您记得的话,它们将呈现为工具提示。我们希望工具提示显示讲师的两个名字和位置。以下是我们必须如何定义它:

item.details = item.contacts.items()[0].firstName + " " +.details = item.contacts.items()[0].firstName + " " +
item.contacts.items()[0].lastName + " - " + item.location.name;.contacts.items()[0].lastName + " - " + item.location.name;

我们必须将添加项目到项目的集合计划,我们呈现的日历使日历

calendar.render();
.render();

VI.事件

当用户创建新项目时,我们必须设置其详细信息以告知新类的名称和位置。我们处理itemCreating事件来执行此操作:

// attach handler - creating an item
calendar.itemCreating.addEventListener(handleItemCreating); .itemCreating.addEventListener(handleItemCreating); 

function handleItemCreating(sender, args) {function handleItemCreating(sender, args) {
    handleItemModified(sender, args);(sender, args);
    if (args.item.contacts.count() > 0) {if (args.item.contacts.count() > 0) {
        //the details field is used by the tooltip//the details field is used by the tooltip
        args.item.details = args.item.contacts.items()[0].firstName + " " +.item.details = args.item.contacts.items()[0].firstName + " " +
                args.item.contacts.items()[0].lastName;.item.contacts.items()[0].lastName;

        if (args.item.location != null)if (args.item.location != null)
            args.item.details += " - " + args.item.location.name;.item.details += " - " + args.item.location.name;
    }}

}}

所述itemCreating事件提供的实例ItemModifyingEventArgs类作为第二个参数处理程序方法。我们使用item属性告诉我们正在修改哪个项目。然后,我们从项目的联系人和位置属性中获取所需的联系人和位置信息。

当新课程项目被拖动到另一个位置时,我们必须相应地更改其颜色。我们通过处理itemModified事件来完成此操作。

// attach handler - modifying an item
calendar.itemModified.addEventListener(handleItemModified);.itemModified.addEventListener(handleItemModified);

项目的不同背景颜色是通过自定义CSS类实现的。我们使用Item类的cssClass属性。CSS样式在网页的< HEAD >部分中定义:

.mfp-planner.standard .itemClass1 .mfp-item {.mfp-planner.standard .itemClass1 .mfp-item {
            background-color: 	#0c71af;-color: 	#0c71af;
        }}

.mfp-planner.standard .itemClass2 .mfp-item {.mfp-planner.standard .itemClass2 .mfp-item {
            background-color: #f81e1e;-color: #f81e1e;
        }}
......................

处理程序方法检查新位置并分配适当的CSS样式:

function handleItemModified(sender, args) handleItemModified(sender, args)
{{
    // you don't have to check any other conditions like dragging to another room, // you don't have to check any other conditions like dragging to another room, 
    // as it will stay the same color if you make other changes (other than dragging to a different room)// as it will stay the same color if you make other changes (other than dragging to a different room)
    if (args.item != null){if (args.item != null){
        switch (args.item.location.name) {switch (args.item.location.name) {
            case "Room A":  //we can also implement it with forcase "Room A":  //we can also implement it with for
                args.item.cssClass = 'itemClass1';.item.cssClass = 'itemClass1';
                console.log("a");.log("a");
                break;break;
            case "Room B":case "Room B":
                args.item.cssClass = 'itemClass2';.item.cssClass = 'itemClass2';
                break;break;
            case "Room C":case "Room C":
                args.item.cssClass = 'itemClass3';.item.cssClass = 'itemClass3';
                break;break;
            case "Room D":case "Room D":
                args.item.cssClass = 'itemClass1';.item.cssClass = 'itemClass1';
                break;break;
            case "Room E":case "Room E":
                args.item.cssClass = 'itemClass2';.item.cssClass = 'itemClass2';
                break;break;
            case "Room F":case "Room F":
                args.item.cssClass = 'itemClass3';.item.cssClass = 'itemClass3';
                break;break;
            default:default:
                args.item.cssClass = 'itemClass1';.item.cssClass = 'itemClass1';
        }}
    }}
}}

handler方法的args参数的item属性提供对已修改项的访问。

VII.过滤Professors

我们想在我们的应用程序中添加最后一个功能。我们希望用户只能由给定的教授渲染课程。

我们首先添加带有讲师姓名的复选框。每个复选框都具有与click事件相同的处理程序方法:

<input id="dyer" checked="checked" name="subscribe" type="checkbox" value="Dyer> id="dyer" checked="checked" name="subscribe" type="checkbox" value="Dyer>
<label for=">Prof. William Dyer<label for=">Prof. William Dyer

<input id="fletcher" checked="checked" name="subscribe" type="checkbox" value="Fletcher"><input id="fletcher" checked="checked" name="subscribe" type="checkbox" value="Fletcher">
<label for="fletcher">Prof. Ann Fletcher</label><label for="fletcher">Prof. Ann Fletcher</label>
...........................

处理程序方法需要查看两种情况。第一种情况是由一位教授讲授课程。在这种情况下,我们循环浏览所有项目并使项目可见或不显示,具体取决于是否选中了具有教授姓名的复选框:

// if there is at least one present professor from the lecture professors, the lecture will not disappear
function handleClick(cb) {function handleClick(cb) {
for (var i = 0; i &lt; calendar.schedule.items.count(); i++) {for (var i = 0; i &lt; calendar.schedule.items.count(); i++) {
        var item = calendar.schedule.items.items()[i]; //we iterate through every elementvar item = calendar.schedule.items.items()[i]; //we iterate through every element
        if (item.contacts.count() == 1) {if (item.contacts.count() == 1) {
            if (item.contacts.items()[0].lastName == cb.value)if (item.contacts.items()[0].lastName == cb.value)
                item.visible = cb.checked;.visible = cb.checked;
        }}
      }}
..............................................
}}

在第二种情况下,我们会查看由多位讲师讲授的课程。在这种情况下,如果选中了至少有一位讲师姓名的复选框,我们会显示该项目:

else if (item.contacts.count() &gt; 1) { if (item.contacts.count() &gt; 1) {
for (var j = 0; j &lt; item.contacts.count() ; j++) {for (var j = 0; j &lt; item.contacts.count() ; j++) {
                if (item.contacts.items()[j].lastName == cb.value) { // the checked/unchecked professor is in the contacts of this itemif (item.contacts.items()[j].lastName == cb.value) { // the checked/unchecked professor is in the contacts of this item
                    if (cb.checked == true) item.visible = true; // if there is a check, the item must be visibleif (cb.checked == true) item.visible = true; // if there is a check, the item must be visible
                    else { // if there is no check, we see if there is at least one professor in the list of contacts of the itemelse { // if there is no check, we see if there is at least one professor in the list of contacts of the item
                        item.visible = professorPresent(item);.visible = professorPresent(item);
                    }}

                }}
            }}
        }}

最后我们重新绘制日历:

// repaint the calendar
this.calendar.repaint(true);this.calendar.repaint(true);

在这里,professorPresent方法检查是否至少选中了一个带有教授的复选框,这些复选框在我们作为参数提供的项目中作为讲师出现:

// return true if even 1 professor from the item's contacts is present, false otherwise
function professorPresent(item) {function professorPresent(item) {
    console.log(item.contacts.count());.log(item.contacts.count());
    for (var j = 0; j &lt; item.contacts.count() ; j++) {for (var j = 0; j &lt; item.contacts.count() ; j++) {
        var checkBoxId = item.contacts.items()[j].lastName.toLowerCase();var checkBoxId = item.contacts.items()[j].lastName.toLowerCase();
        var checkBox = document.getElementById(checkBoxId);var checkBox = document.getElementById(checkBoxId);
        if (checkBox!= null &amp;&amp; checkBox.checked == true) {if (checkBox!= null &amp;&amp; checkBox.checked == true) {
            return true;return true;
        }}
    }}
    return false;return false;
}}

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

Stimulsoft新年促销


标签:JavaScript 图表ActiveX图表控件

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

登录慧都网发表评论登录


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
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的电子表格。能快速创建任何类型的电子表格。添加各种图表、数据功能并根据需要设置样式,结果可以导出为不同的格式。

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